- lib/shares.ts: zod Share shape + hooks (useShares/useAddShare/
  useUpdateShareRole/useRemoveShare over /gardens/:id/shares).
- lib/gardens.ts: myRole on the garden schema + canEditRole/isOwnerRole helpers
  (role always comes from the server's my_role, never guessed).
- ShareGardenModal (owner only): invite an existing user by email as viewer/
  editor, change a share's role inline, remove; surfaces the backend's friendly
  "no account with that email". Reachable from the garden card and the editor.
- GardenCard: "shared · viewer/editor" badge on non-owned gardens; owner gets
  Share/Edit/Delete, a recipient gets Leave (LeaveGardenModal removes their own
  share).
- Read-only viewer mode in the editor, gated on a single canEdit flag:
  viewers get no palette, no select/move/resize/rotate handles, no plop overlay,
  no placement, and read-only inspectors (a disabled <fieldset> makes every field
  read-only in one shot; Change/Delete/Remove/Plant-here hidden), plus a "View
  only" indicator. Defense in depth: the canvas create/place handlers also check
  canEdit, so a missed gate can't fire a mutation that would 403.

tsc --noEmit clean; 24/24 vitest; production build green.

Co-Authored-By: Claude Opus 4.8 (1M context) <[email protected]>
Claude-Session: https://claude.ai/code/session_01JdQpdYYsTgtkJBxbcpAszi

@@ -3,2 +2,4 @@
+import { isOwnerRole, type Garden } from '@/lib/gardens'
 import { formatDimensions } from '@/lib/units'
 
+const actionClass =

@@ -16,2 +27,4 @@
   onDelete: () => void
+  onLeave: () => void
 }) {
+  const owner = isOwnerRole(garden.myRole)

@@ -26,0 +39,4 @@
+          <h3 className="truncate font-semibold text-fg">{garden.name}</h3>
+          {!owner && garden.myRole && (
+            <span className="shrink-0 rounded bg-border/60 px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted">
+              shared · {garden.myRole}

@@ -0,0 +37,4 @@
+          <Button type="button" variant="ghost" onClick={onClose} disabled={remove.isPending}>
+            Cancel
+          </Button>
+          <Button type="button" variant="danger" onClick={onConfirm} disabled={remove.isPending || !me.data}>

@@ -0,0 +47,4 @@
+  }
+
+  return (
+    <Modal title="Share garden" onClose={onClose} busy={add.isPending}>

@@ -0,0 +81,4 @@
+          {shares.isSuccess && shares.data.length === 0 && (
+            <p className="text-sm text-muted">Not shared with anyone yet.</p>
+          )}
+          <ul className="flex flex-col gap-2">

@@ -0,0 +88,4 @@
+                  <p className="truncate text-sm font-medium text-fg">{sh.displayName}</p>
+                  <p className="truncate text-xs text-muted">{sh.email}</p>
+                </div>
+                <select

@@ -0,0 +97,4 @@
+                  <option value="viewer">Viewer</option>
+                  <option value="editor">Editor</option>
+                </select>
+                <button

@@ -98,2 +100,3 @@
 
-      {object.plantable && onFocus && (
+      {readOnly && (
+        <p className="rounded-md bg-border/40 px-2 py-1 text-xs text-muted">View only — you can't edit this garden.</p>

@@ -111,1 +111,3 @@
-      />
+      {/* A disabled fieldset makes every control below read-only for viewers in
+          one shot (no per-input disabled). */}
+      <fieldset disabled={readOnly} className="flex min-w-0 flex-col gap-3 border-0 p-0">

@@ -112,0 +116,4 @@
+          name="name"
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+          onBlur={() => name !== object.name && patch({ name })}

@@ -117,2 +124,4 @@
+        )}
       </div>
 
+      <fieldset disabled={readOnly} className="flex min-w-0 flex-col gap-3 border-0 p-0">

@@ -0,0 +32,4 @@
+}
+
+/** The shares on a garden (owner-only endpoint; pass enabled=false to skip). */
+export function useShares(gardenId: number, enabled = true) {

@@ -0,0 +40,4 @@
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async (input: { email: string; role: ShareRole }): Promise<Share> =>
+      shareSchema.parse(await api.post(`/gardens/${gardenId}/shares`, input)),

@@ -0,0 +49,4 @@
+  const qc = useQueryClient()
+  return useMutation({
+    mutationFn: async ({ userId, role }: { userId: number; role: ShareRole }): Promise<Share> =>
+      shareSchema.parse(await api.patch(`/gardens/${gardenId}/shares/${userId}`, { role })),

@@ -0,0 +63,4 @@
+    mutationFn: (userId: number) => api.delete(`/gardens/${gardenId}/shares/${userId}`),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: sharesKey(gardenId) })
+      qc.invalidateQueries({ queryKey: ['gardens'] })

@@ -121,2 +124,4 @@
     unitPref: g.unitPref,
   }
+  // Role-driven gating from the server's my_role — never guessed client-side.
+  const canEdit = canEditRole(g.myRole)