@oh-just-another/react-ui 0.58.0 → 0.60.0

package/dist/zen-mode.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
+import { defaultActionRegistry } from "@oh-just-another/state";
+const ZenModeContext = createContext(null);
+/**
+ * Provides zen-mode state to descendants and wires its hotkeys. `⌥Z`
+ * toggles; `Esc` exits (only while zen is active, so it doesn't swallow
+ * Escape elsewhere). Registers the toggle on the shared action registry
+ * (like the command palette) so it routes through hotkey dispatch and
+ * shows in the help dialog; `viewMode` keeps it live in read-only.
+ *
+ * Wrap the editor chrome in this provider and read {@link useZenMode} in
+ * the shell to hide UI when `zen` is true.
+ */
+export const ZenModeProvider = ({ children }) => {
+    const [zen, setZen] = useState(false);
+    const toggle = useCallback(() => {
+        setZen((v) => !v);
+    }, []);
+    useEffect(() => {
+        defaultActionRegistry.replace({
+            id: "toggle-zen-mode",
+            label: "Zen mode",
+            category: "other",
+            viewMode: true,
+            hotkey: { key: "z", alt: true },
+            perform: () => {
+                setZen((v) => !v);
+            },
+        });
+        return () => {
+            defaultActionRegistry.unregister("toggle-zen-mode");
+        };
+    }, []);
+    // Escape leaves zen. Bound only while active so it never competes with
+    // other Escape handlers (cancel gesture, clear selection) otherwise.
+    useEffect(() => {
+        if (!zen)
+            return undefined;
+        const onKey = (event) => {
+            if (event.key === "Escape")
+                setZen(false);
+        };
+        window.addEventListener("keydown", onKey);
+        return () => {
+            window.removeEventListener("keydown", onKey);
+        };
+    }, [zen]);
+    const api = useMemo(() => ({ zen, setZen, toggle }), [zen, toggle]);
+    return _jsx(ZenModeContext.Provider, { value: api, children: children });
+};
+/** Read zen-mode state. Throws outside a {@link ZenModeProvider}. */
+export const useZenMode = () => {
+    const ctx = useContext(ZenModeContext);
+    if (!ctx) {
+        throw new Error("@oh-just-another/react-ui: useZenMode called outside <ZenModeProvider>.");
+    }
+    return ctx;
+};
+/** Forgiving variant — returns `null` when no {@link ZenModeProvider} is above. */
+export const useZenModeOptional = () => useContext(ZenModeContext);
+//# sourceMappingURL=zen-mode.js.map

package/dist/zen-mode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"zen-mode.js","sourceRoot":"","sources":["../src/zen-mode.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,aAAa,EACb,WAAW,EACX,UAAU,EACV,SAAS,EACT,OAAO,EACP,QAAQ,GAET,MAAM,OAAO,CAAC;AACf,OAAO,EAAE,qBAAqB,EAAE,MAAM,wBAAwB,CAAC;AAc/D,MAAM,cAAc,GAAG,aAAa,CAAoB,IAAI,CAAC,CAAC;AAE9D;;;;;;;;;GASG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAoC,EAAE,EAAE;IAChF,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,MAAM,GAAG,WAAW,CAAC,GAAG,EAAE;QAC9B,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IACpB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,qBAAqB,CAAC,OAAO,CAAC;YAC5B,EAAE,EAAE,iBAAiB;YACrB,KAAK,EAAE,UAAU;YACjB,QAAQ,EAAE,OAAO;YACjB,QAAQ,EAAE,IAAI;YACd,MAAM,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,IAAI,EAAE;YAC/B,OAAO,EAAE,GAAG,EAAE;gBACZ,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;YACpB,CAAC;SACF,CAAC,CAAC;QACH,OAAO,GAAG,EAAE;YACV,qBAAqB,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,uEAAuE;IACvE,qEAAqE;IACrE,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,GAAG;YAAE,OAAO,SAAS,CAAC;QAC3B,MAAM,KAAK,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC3C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ;gBAAE,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5C,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC1C,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC;IAEV,MAAM,GAAG,GAAG,OAAO,CAAa,GAAG,EAAE,CAAC,CAAC,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC;IAChF,OAAO,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,YAAG,QAAQ,GAA2B,CAAC;AACnF,CAAC,CAAC;AAEF,qEAAqE;AACrE,MAAM,CAAC,MAAM,UAAU,GAAG,GAAe,EAAE;IACzC,MAAM,GAAG,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IACvC,IAAI,CAAC,GAAG,EAAE,CAAC;QACT,MAAM,IAAI,KAAK,CAAC,yEAAyE,CAAC,CAAC;IAC7F,CAAC;IACD,OAAO,GAAG,CAAC;AACb,CAAC,CAAC;AAEF,mFAAmF;AACnF,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAsB,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@oh-just-another/react-ui",
-  "version": "0.58.0",
+  "version": "0.60.0",
   "description": "React components and hooks over the diagram editor — DiagramCanvas, Toolbar, Palette, PropertyPanel.",
   "license": "MIT",
   "author": "Rustam Garifulin <rustam@n69.in>",
@@ -47,15 +47,15 @@
     "lucide-react": "1.16.0",
     "@oh-just-another/events": "0.57.0",
     "@oh-just-another/math": "0.58.0",
-    "@oh-just-another/renderer-canvas": "0.59.0",
-    "@oh-just-another/renderer-core": "0.58.0",
-    "@oh-just-another/renderer-svg": "0.57.2",
-    "@oh-just-another/scene": "0.59.0",
-    "@oh-just-another/state": "0.59.0",
-    "@oh-just-another/templates": "0.57.2",
+    "@oh-just-another/renderer-canvas": "0.61.0",
+    "@oh-just-another/renderer-core": "0.60.0",
+    "@oh-just-another/renderer-svg": "0.57.4",
+    "@oh-just-another/scene": "0.61.0",
+    "@oh-just-another/state": "0.61.0",
+    "@oh-just-another/templates": "0.57.4",
     "@oh-just-another/tokens": "0.57.0",
     "@oh-just-another/types": "0.57.0",
-    "@oh-just-another/versioning": "0.57.2"
+    "@oh-just-another/versioning": "0.57.4"
   },
   "peerDependencies": {
     "react": ">=18",

package/src/styles.css

@@ -1498,7 +1498,7 @@
   color: var(--du-fg, #1c1c1e);
 }
 
-/* Inline link caption editor. */
+/* Inline link caption editor (multiline textarea). */
 .du-link-caption-input {
   min-width: 60px;
   max-width: 220px;
@@ -1506,6 +1506,7 @@
   font:
     12px system-ui,
     sans-serif;
+  line-height: 1.25;
   text-align: center;
   color: var(--du-fg, #222);
   background: var(--du-panel-bg, #fff);
@@ -1513,6 +1514,8 @@
   border-radius: 4px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
   outline: none;
+  resize: none;
+  overflow: hidden;
 }
 
 /* Mini shape-picker shown after a link is dropped on empty canvas. */