Devices
diff --git a/src/hooks/useCanEdit.ts b/src/hooks/useCanEdit.ts
new file mode 100644
index 0000000..c6c3d19
--- /dev/null
+++ b/src/hooks/useCanEdit.ts
@@ -0,0 +1,18 @@
+import { useDiagramStore } from '../state/diagramStore'
+import { useIsMobile } from './useIsMobile'
+
+/**
+ * Whether the current user can edit the open diagram right now. False for a
+ * view-only collaborator (organized-ideas.md §8's per-collaborator
+ * permissions) — and, independently, on a mobile-width viewport, where
+ * drag-and-drop from the palette and precise port-to-port wiring aren't a
+ * realistic touch interaction. See ViewOnlyBanner for the matching message.
+ * `access` is only null in the brief window before the first diagram
+ * finishes loading, at which point nothing is rendered yet anyway
+ * (AppShell's isLoaded gate).
+ */
+export function useCanEdit(): boolean {
+ const access = useDiagramStore((s) => s.access)
+ const isMobile = useIsMobile()
+ return access?.myPermission !== 'view' && !isMobile
+}
diff --git a/src/hooks/useIsMobile.ts b/src/hooks/useIsMobile.ts
new file mode 100644
index 0000000..c526e0e
--- /dev/null
+++ b/src/hooks/useIsMobile.ts
@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react'
+
+// Matches the `md` breakpoint everywhere else in the layout (AppShell,
+// DevicePalette, RightPanel) so "mobile" here means exactly "the width
+// those panels disappear at" — not an independently-tuned value.
+const QUERY = '(max-width: 767px)'
+
+function getIsMobile(): boolean {
+ return typeof window !== 'undefined' && window.matchMedia(QUERY).matches
+}
+
+/** Live viewport-width check (not a one-time device/UA sniff) — updates on
+ * rotation or a resized window, which matters for a resizable desktop
+ * browser window as much as an actual phone. */
+export function useIsMobile(): boolean {
+ const [isMobile, setIsMobile] = useState(getIsMobile)
+
+ useEffect(() => {
+ const mql = window.matchMedia(QUERY)
+ const onChange = () => setIsMobile(mql.matches)
+ mql.addEventListener('change', onChange)
+ return () => mql.removeEventListener('change', onChange)
+ }, [])
+
+ return isMobile
+}