@salilvnair/dui 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Salil V Nair
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,185 @@
+# @salilvnair/dui
+
+Daakia UI — a React component library shared across ck8t and daakia. Ships as
+a compiled ESM bundle with generated `.d.ts` types; peer dependencies are
+`react`, `react-dom`, and `zustand`.
+
+## Install
+
+```bash
+npm install @salilvnair/dui react react-dom zustand
+```
+
+Import the stylesheet once in your app's entry point:
+
+```ts
+import '@salilvnair/dui/style.css';
+```
+
+## Usage
+
+```tsx
+import { ButtonView, TabView, DuiProvider } from '@salilvnair/dui';
+
+function App() {
+  return (
+    <DuiProvider size="md">
+      <ButtonView>Click me</ButtonView>
+    </DuiProvider>
+  );
+}
+```
+
+## Monaco is optional
+
+`EditorView`, `DiffEditorView`, and `DebugEditorView` render a lightweight
+plain-text fallback by default — **`@monaco-editor/react` and `monaco-editor`
+are not required dependencies.** If you don't use these three components,
+you never need to install them.
+
+To get the real Monaco-backed editor:
+
+```bash
+npm install @monaco-editor/react monaco-editor
+```
+
+```ts
+// once, at app bootstrap
+import '@salilvnair/dui/monaco-setup';
+```
+
+This self-hosts Monaco (inline workers, no CDN — works under strict CSP,
+e.g. VS Code webviews) and registers the real editor implementation.
+Skipping this import is fine; `EditorView` keeps working as a plain textarea.
+
+### Why not just install Monaco automatically?
+
+`@monaco-editor/react` doesn't depend on `monaco-editor` itself — it lazy-loads
+Monaco from a public CDN by default. If your environment blocks that CDN (most
+VS Code extension webviews, offline apps, strict-CSP deployments do), the only
+correct answer is genuine self-hosting via `monaco-setup`, which is why that
+import is explicit rather than automatic.
+
+### Extending MarkdownView's language support
+
+`MarkdownView`'s syntax highlighting registers a curated set of languages
+(js/ts/json/xml/html/css/bash/yaml/python/sql/ruby/rust/csharp/kotlin/graphql/markdown)
+via `highlight.js/lib/core` rather than the full ~190-language `highlight.js`
+package, to keep the bundle small. Adding a language currently requires a
+change in this repo and a version bump — there's no way to register
+additional languages from a consuming app yet.
+
+## Theming
+
+```ts
+import { SCHEMA } from '@salilvnair/dui/theme/core';
+import { generateYaml } from '@salilvnair/dui/theme/utils';
+import { ThemeVarEditor } from '@salilvnair/dui/theme/editor';
+```
+
+All colors are CSS custom properties (`--color-*`) — override them on
+`:root` or scope them to a container to retheme without recompiling.
+
+---
+
+## Publishing to npm
+
+> This section is for library maintainers.
+
+### Prerequisites
+
+1. Node.js 18+ and npm 9+
+2. Publish access to the `@salilvnair` scope: `npm login`
+
+### Step 1 — Bump the version
+
+```bash
+npm version patch   # bug fix:      1.0.0 -> 1.0.1
+npm version minor    # new feature:  1.0.0 -> 1.1.0
+npm version major   # breaking:     1.0.0 -> 2.0.0
+```
+
+### Step 2 — Build
+
+`prepublishOnly` runs this automatically on `npm publish`, but build first to
+inspect the output:
+
+```bash
+npm run build:lib
+```
+
+Verify `dist/` contains (at minimum): `index.js`, `index.d.ts`,
+`monaco-setup.js`, `monaco-setup.d.ts`, `style.css`, `theme/*.js`.
+
+**Sanity-check the Monaco boundary** — this is the one thing worth manually
+re-verifying after any build config change: `dist/index.js` must contain no
+`@monaco-editor/react` or `monaco-editor` import. Only `dist/monaco-setup.js`
+(and its `dist/chunks/*` dependency) should reference them:
+
+```bash
+grep -l "monaco-editor" dist/*.js dist/chunks/*.js
+# should list only monaco-setup.js and its chunk — never index.js
+```
+
+### Step 3 — Verify what will be published
+
+```bash
+npm pack --dry-run
+```
+
+Only `dist/`, `README.md`, `LICENSE`, and `package.json` should appear — no
+`src/`.
+
+### Step 4 — Test the tarball locally
+
+```bash
+npm pack
+# creates salilvnair-dui-X.Y.Z.tgz
+
+# in a consumer app:
+npm install /path/to/salilvnair-dui-X.Y.Z.tgz
+```
+
+Confirm both paths work: a component that never imports Monaco (build should
+succeed with `@monaco-editor/react`/`monaco-editor` absent from
+node_modules), and — with those installed plus `@salilvnair/dui/monaco-setup`
+imported — a real Monaco-backed `EditorView`.
+
+### Step 5 — Publish
+
+Scoped packages default to private, so `--access public` is required:
+
+```bash
+npm publish --access public
+# rehearsal first:
+npm publish --dry-run --access public
+```
+
+### Step 6 — Push tags
+
+```bash
+git push && git push --tags
+```
+
+### Release checklist
+
+- [ ] `npm version` bumped
+- [ ] `npm run build:lib` succeeds
+- [ ] `npm pack --dry-run` shows only `dist/`, `README.md`, `LICENSE`
+- [ ] Monaco boundary check: `@monaco-editor/react`/`monaco-editor` only referenced from `monaco-setup.js` + its chunk, never `index.js`
+- [ ] Tarball tested in a consumer app, both without and with Monaco installed
+- [ ] `npm publish --access public` completed
+- [ ] `git push && git push --tags`
+
+### Troubleshooting
+
+**Consumer's build fails resolving `@monaco-editor/react`even though they never use `EditorView`**
+→ Something reintroduced a static import of it into `index.js`. Re-run the
+Monaco boundary grep in Step 2 — this is the one regression this package
+must never ship.
+
+**Consumer's Monaco editor works in dev but hits a blocked CDN in production**
+→ They installed the Monaco packages but never imported
+`@salilvnair/dui/monaco-setup`. `EditorView` never falls back to the CDN
+loader on its own — it only ever renders the plain-text fallback or the
+self-hosted Monaco registered by `monaco-setup`.

package/dist/chunks/EditorView.shell-BGH2VhWM.js

@@ -0,0 +1,460 @@
+import { jsx as d, Fragment as A, jsxs as I } from "react/jsx-runtime";
+import { useMemo as S, useContext as P, createContext as T, useRef as _, useEffect as v, useState as E, useSyncExternalStore as $ } from "react";
+import { createPortal as C } from "react-dom";
+import { g as F } from "./daakia-icons-DxWnX_IQ.js";
+const et = {
+  /** Standard form controls: text input, select, duration, search, highlighted input */
+  input: { xxs: 16, xs: 20, sm: 24, md: 28, lg: 36, xl: 40, xxl: 48, xxxl: 56 },
+  /** Push buttons (primary, secondary, ghost, danger) */
+  button: { xxs: 16, xs: 20, sm: 24, md: 28, lg: 36, xl: 40, xxl: 48, xxxl: 56 },
+  /** Pill tabs, segment controls */
+  tab: { xxs: 16, xs: 20, sm: 24, md: 28, lg: 36, xl: 40, xxl: 48, xxxl: 56 },
+  /** Sidebar nav items, settings nav links */
+  nav: { xxs: 20, xs: 24, sm: 28, md: 32, lg: 36, xl: 44, xxl: 52, xxxl: 60 },
+  /** Context-menu items, dropdown options, sub-menu rows */
+  menu: { xxs: 14, xs: 18, sm: 22, md: 26, lg: 30, xl: 36, xxl: 42, xxxl: 48 },
+  /** Table / KV-table rows */
+  table: { xxs: 18, xs: 22, sm: 26, md: 30, lg: 36, xl: 40, xxl: 46, xxxl: 54 },
+  /** Card container min-height (loosely applied) */
+  card: { xxs: 28, xs: 36, sm: 48, md: 64, lg: 80, xl: 96, xxl: 112, xxxl: 128 }
+}, nt = {
+  xxs: 10,
+  xs: 12,
+  sm: 16,
+  md: 20,
+  lg: 24,
+  xl: 28,
+  xxl: 32,
+  xxxl: 38
+}, rt = {
+  xxs: { trackW: 18, trackH: 10, thumb: 8 },
+  xs: { trackW: 24, trackH: 14, thumb: 10 },
+  sm: { trackW: 28, trackH: 16, thumb: 12 },
+  md: { trackW: 36, trackH: 20, thumb: 16 },
+  lg: { trackW: 44, trackH: 24, thumb: 20 },
+  xl: { trackW: 52, trackH: 28, thumb: 24 },
+  xxl: { trackW: 60, trackH: 32, thumb: 28 },
+  xxxl: { trackW: 68, trackH: 36, thumb: 32 }
+}, ot = {
+  xxs: { box: 10, icon: 6 },
+  xs: { box: 12, icon: 8 },
+  sm: { box: 14, icon: 9 },
+  md: { box: 16, icon: 11 },
+  lg: { box: 18, icon: 13 },
+  xl: { box: 20, icon: 15 },
+  xxl: { box: 22, icon: 17 },
+  xxxl: { box: 26, icon: 20 }
+}, xt = {
+  xxs: 8,
+  xs: 10,
+  sm: 11,
+  md: 12,
+  lg: 14,
+  xl: 16,
+  xxl: 18,
+  xxxl: 20
+}, st = {
+  xxs: "8px",
+  xs: "9px",
+  sm: "10px",
+  md: "11px",
+  lg: "12px",
+  xl: "13px",
+  xxl: "14px",
+  xxxl: "16px"
+}, it = {
+  xxs: "2px",
+  xs: "3px",
+  sm: "4px",
+  md: "5px",
+  lg: "7px",
+  xl: "9px",
+  xxl: "11px",
+  xxxl: "14px"
+}, O = {
+  xxs: 10,
+  xs: 11,
+  sm: 11,
+  md: 12,
+  lg: 13,
+  xl: 14,
+  xxl: 15,
+  xxxl: 16
+}, lt = {
+  xxs: "4px",
+  xs: "6px",
+  sm: "8px",
+  md: "10px",
+  lg: "12px",
+  xl: "16px",
+  xxl: "20px",
+  xxxl: "24px"
+}, ct = {
+  xxs: "2px",
+  xs: "3px",
+  sm: "4px",
+  md: "5px",
+  lg: "6px",
+  xl: "8px",
+  xxl: "10px",
+  xxxl: "12px"
+}, z = {
+  none: "0px",
+  sm: "3px",
+  md: "4px",
+  lg: "6px",
+  full: "999px"
+}, at = {
+  xxs: "2px",
+  xs: "3px",
+  // DUI_RADIUS_MAP.sm
+  sm: "4px",
+  // DUI_RADIUS_MAP.md
+  md: "4px",
+  // DUI_RADIUS_MAP.md
+  lg: "6px",
+  // DUI_RADIUS_MAP.lg
+  xl: "6px",
+  // DUI_RADIUS_MAP.lg
+  xxl: "8px",
+  xxxl: "10px"
+}, B = {
+  sm: "80px",
+  md: "120px",
+  default: "auto",
+  lg: "200px",
+  fullWidth: "100%",
+  maxContent: "max-content",
+  fw: "100%",
+  mx: "max-content"
+}, G = { size: "md" }, R = T(G);
+function ut({
+  size: t = "md",
+  width: e,
+  borderRadius: r,
+  color: o,
+  defaultColor: p,
+  activeColor: i,
+  fontStyle: a,
+  children: x
+}) {
+  const f = S(
+    () => ({ size: t, width: e, borderRadius: r, color: o, defaultColor: p, activeColor: i, fontStyle: a }),
+    [t, e, r, o, p, i, a]
+  );
+  return /* @__PURE__ */ d(R.Provider, { value: f, children: x });
+}
+function W() {
+  return P(R);
+}
+function N(t, e) {
+  return t === void 0 ? e : typeof t == "number" ? `${t}px` : z[t];
+}
+function j(t) {
+  return t ? B[t] : "auto";
+}
+function dt(t) {
+  const e = W();
+  return S(
+    () => ({
+      borderRadius: N(e.borderRadius, t),
+      width: j(e.width),
+      color: e.color,
+      defaultColor: e.defaultColor,
+      activeColor: e.activeColor,
+      fontStyle: e.fontStyle
+    }),
+    [e, t]
+  );
+}
+function pt(t, e = {}) {
+  const r = W(), o = t ?? r.size;
+  return {
+    fontSize: O[o]
+  };
+}
+const q = { auto: "max-content", sm: "140px", md: "180px", lg: "220px" };
+function X(t) {
+  return !t || t === "auto" ? "max-content" : typeof t == "number" ? `${t}px` : q[t] || "max-content";
+}
+function H({
+  items: t,
+  onClose: e,
+  rounded: r
+}) {
+  const [o, p] = E(null);
+  return /* @__PURE__ */ d(A, { children: t.map((i) => /* @__PURE__ */ d(
+    Z,
+    {
+      item: i,
+      onClose: e,
+      rounded: r,
+      activeSubId: o,
+      onSubOpen: p
+    },
+    i.id
+  )) });
+}
+function Z({
+  item: t,
+  onClose: e,
+  rounded: r,
+  activeSubId: o,
+  onSubOpen: p
+}) {
+  const i = _(null), a = _(null);
+  if (t.separator)
+    return /* @__PURE__ */ d("div", { style: { height: "1px", background: "var(--color-surface-border)", margin: "4px 0" } });
+  const x = !!(t.children && t.children.length > 0), f = t.danger, m = x && o === t.id, y = () => {
+    p(x ? t.id : null);
+  }, u = (n) => {
+    var c;
+    if (n.stopPropagation(), !t.disabled) {
+      if (x) {
+        p(t.id);
+        return;
+      }
+      (c = t.onClick) == null || c.call(t), e();
+    }
+  };
+  return v(() => {
+    if (!m || !i.current || !a.current) return;
+    const n = a.current;
+    n.style.visibility = "hidden";
+    const c = requestAnimationFrame(() => {
+      if (!i.current || !a.current) return;
+      const l = i.current.getBoundingClientRect();
+      n.style.top = `${l.top - 4}px`, n.style.left = `${l.right + 4}px`;
+      const s = n.getBoundingClientRect();
+      s.right > window.innerWidth - 8 && (n.style.left = `${l.left - s.width - 4}px`), s.bottom > window.innerHeight - 8 && (n.style.top = `${window.innerHeight - s.height - 8}px`), n.style.visibility = "visible";
+    });
+    return () => cancelAnimationFrame(c);
+  }, [m]), /* @__PURE__ */ I(
+    "div",
+    {
+      ref: i,
+      onMouseEnter: y,
+      style: { position: "relative" },
+      children: [
+        /* @__PURE__ */ I(
+          "div",
+          {
+            onClick: u,
+            className: `dui_ctx-menu__item${f ? " dui_ctx-menu__item--danger" : ""}${t.disabled ? " dui_ctx-menu__item--disabled" : ""}`,
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: "8px",
+              padding: "8px 10px",
+              borderRadius: r ? "5px" : "0px",
+              fontSize: "12px",
+              fontWeight: 500,
+              cursor: t.disabled ? "default" : "pointer",
+              opacity: t.disabled ? 0.45 : 1,
+              color: f ? "var(--color-error)" : "var(--color-text-secondary)",
+              userSelect: "none"
+            },
+            children: [
+              t.icon && /* @__PURE__ */ d("span", { style: { width: "14px", display: "flex", alignItems: "center", flexShrink: 0, color: t.iconColor ?? (f ? "var(--color-error)" : "var(--color-text-muted)") }, children: t.icon }),
+              /* @__PURE__ */ d("span", { style: { flex: 1, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }, children: t.label }),
+              t.shortcut && !x && /* @__PURE__ */ d("span", { style: { fontSize: "10px", color: "var(--color-text-muted)", marginLeft: "12px", flexShrink: 0 }, children: t.shortcut }),
+              x && /* @__PURE__ */ d(F, { size: 10, style: { color: "var(--color-text-muted)", flexShrink: 0, marginLeft: "8px" } })
+            ]
+          }
+        ),
+        x && m && C(
+          /* @__PURE__ */ d(
+            "div",
+            {
+              ref: a,
+              "data-dui-ctx-menu": "true",
+              style: {
+                position: "fixed",
+                visibility: "hidden",
+                zIndex: 99999,
+                background: "var(--color-elevated, var(--color-surface-bg))",
+                border: "1px solid var(--color-surface-border)",
+                borderRadius: r ? "7px" : "0px",
+                padding: "4px",
+                minWidth: "200px",
+                width: "max-content",
+                boxShadow: "0 12px 40px rgba(0,0,0,.35)"
+              },
+              children: /* @__PURE__ */ d(H, { items: t.children, onClose: e, rounded: r })
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+}
+function Y({
+  items: t,
+  anchorEl: e,
+  open: r,
+  onClose: o,
+  width: p = "auto",
+  rounded: i = !0,
+  matchAnchorWidth: a = !1,
+  position: x,
+  align: f = "auto"
+}) {
+  const m = _(null);
+  if (v(() => {
+    if (!r) return;
+    const u = (n) => {
+      var l, s;
+      const c = n.target;
+      (l = m.current) != null && l.contains(c) || e != null && e.contains(c) || (s = c.closest) != null && s.call(c, "[data-dui-ctx-menu]") || o();
+    };
+    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
+  }, [r, e, o]), v(() => {
+    if (!r) return;
+    const u = (n) => {
+      if (n.key === "Escape") {
+        o();
+        return;
+      }
+      const c = n.key.toUpperCase(), l = t.find((s) => s.disabled || s.separator || !s.shortcut || !s.onClick ? !1 : s.shortcut === "⌫" ? n.key === "Backspace" || n.key === "Delete" : s.shortcut.toUpperCase() === c);
+      l && (n.preventDefault(), l.onClick(), o());
+    };
+    return document.addEventListener("keydown", u), () => document.removeEventListener("keydown", u);
+  }, [r, o, t]), v(() => {
+    if (!r || !m.current) return;
+    const u = m.current, n = () => {
+      const l = u.scrollWidth, s = u.scrollHeight;
+      let h, b, w = 0;
+      if (x)
+        h = x.x, b = x.y, w = x.y;
+      else if (e) {
+        const g = e.getBoundingClientRect();
+        f === "right" ? h = g.right - l : f === "left" ? h = g.left : h = g.left + l <= window.innerWidth - 8 ? g.left : g.right - l, b = g.bottom + 4, w = g.top, a && (u.style.width = g.width + "px");
+      } else
+        return;
+      h + l > window.innerWidth - 8 && (h = Math.max(8, window.innerWidth - l - 8)), h < 8 && (h = 8), b + s > window.innerHeight - 8 && (b = Math.max(8, w - s - 4)), u.style.left = h + "px", u.style.top = b + "px";
+    };
+    n();
+    const c = requestAnimationFrame(n);
+    return window.addEventListener("scroll", n, { passive: !0, capture: !0 }), window.addEventListener("resize", n, { passive: !0 }), () => {
+      cancelAnimationFrame(c), window.removeEventListener("scroll", n, { capture: !0 }), window.removeEventListener("resize", n);
+    };
+  }, [r, e, x, a, f]), !r) return null;
+  const y = X(p);
+  return C(
+    /* @__PURE__ */ d(
+      "div",
+      {
+        ref: m,
+        "data-dui-ctx-menu": "true",
+        style: {
+          position: "fixed",
+          zIndex: 99998,
+          width: y,
+          minWidth: "140px",
+          background: "var(--color-elevated, var(--color-surface-bg))",
+          border: "1px solid var(--color-surface-border)",
+          borderRadius: i ? "8px" : "0px",
+          padding: "4px",
+          boxShadow: "0 12px 40px rgba(0,0,0,.35), 0 0 0 1px var(--color-panel-border, rgba(255,255,255,.04))",
+          animation: "dui_menu-in 120ms ease-out"
+        },
+        children: /* @__PURE__ */ d(H, { items: t, onClose: o, rounded: i })
+      }
+    ),
+    document.body
+  );
+}
+let U = "idle", M = null, L = null;
+const k = /* @__PURE__ */ new Set();
+function K() {
+  for (const t of k) t();
+}
+function D() {
+  return U;
+}
+function ft(t) {
+  M = t;
+}
+function mt(t) {
+  L = t;
+}
+function ht() {
+  return M;
+}
+function gt() {
+  return L;
+}
+function bt() {
+  U = "ready", K();
+}
+function vt() {
+  return $(
+    (t) => (k.add(t), () => k.delete(t)),
+    D,
+    D
+  );
+}
+function yt({
+  bordered: t,
+  containerHeight: e,
+  children: r,
+  contextMenuMode: o = "native",
+  contextMenuItems: p,
+  accentColor: i
+}) {
+  const [a, x] = E(null), f = o === "dui";
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      className: `dui-editor-shell relative${t ? " rounded border border-[var(--color-surface-border)]" : ""}`,
+      style: { height: e, width: "100%", position: "relative", ...i ? { "--editor-accent": i } : {} },
+      onContextMenu: f ? (m) => {
+        m.preventDefault(), x({ x: m.clientX, y: m.clientY });
+      } : void 0,
+      children: [
+        r,
+        f && p && /* @__PURE__ */ d(
+          Y,
+          {
+            open: !!a,
+            anchorEl: null,
+            position: a ?? void 0,
+            items: p,
+            onClose: () => x(null)
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  Y as C,
+  at as D,
+  yt as E,
+  ct as a,
+  lt as b,
+  xt as c,
+  st as d,
+  et as e,
+  N as f,
+  nt as g,
+  z as h,
+  rt as i,
+  it as j,
+  pt as k,
+  vt as l,
+  ht as m,
+  gt as n,
+  ot as o,
+  O as p,
+  B as q,
+  j as r,
+  ut as s,
+  dt as t,
+  W as u,
+  bt as v,
+  ft as w,
+  mt as x
+};
+//# sourceMappingURL=EditorView.shell-BGH2VhWM.js.map