sinwan-ui-core 0.0.0 → 1.1.0

package/CHANGELOG.md

@@ -0,0 +1,28 @@
+# Changelog
+
+All notable changes to this package are documented in this file. The format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/), and this package uses [Semantic Versioning](https://semver.org/).
+
+## [1.1.0]
+
+### Added
+
+- `cazview` palette: `Palette` now accepts `"cazview"` and `ThemeProvider`'s default `palettes` list is `["credit-blue", "jomlaty", "cazview"]`. Pair it with the registry stylesheet, which defines the `html[data-palette="cazview"]` tokens (midnight `#111E2E` text, `#1A73E8` → `#3B52D9` → `#7B2CBF` brand gradient, `#FAFAFA` surface).
+
+## [1.0.0]
+
+Initial release: the headless primitives extracted from `sinwan-ui` 0.1.0, published separately so registry components copied into apps can depend on them.
+
+### Added
+
+- Modules `core`, `overlay`, `controls`, `floating`, `dismiss`, `menu-sub`, `slot`, `types`, `theme` and `direction`, each available as a subpath export and through the root barrel. They were previously `sinwan-ui/src/primitives/*`, `src/lib/slot.ts`, `src/lib/types.ts`, `src/theme/theme-provider.tsx` and `src/theme/direction.tsx`.
+- `sinwan` is a peer dependency (`>=2.0.3 <3.0.0`) and stays a bare import in `dist/`; the build fails if a Sinwan runtime or an undeclared package is bundled. Sinwan 2.0.3 is required because older runtimes keep a submenu's portal in `document.body` when the parent menu unmounts during the submenu's exit animation.
+- `createMenuSubApi` accepts `parentOpen`: when the enclosing menu or submenu closes, the submenu closes too (and reports `onOpenChange(false)`), so its Presence exit runs with the parent instead of leaving an open layer behind.
+- `createMenuSubTriggerHandlers(api)`: shared sub-trigger handlers. Hover, click and ArrowRight open the submenu; a click never toggles it closed; leaving starts the hover close delay.
+
+### Changed
+
+- `MenuSubContentLayer` is headless: it renders only the `class` it receives. The former default Tailwind classes now live in the registry's `dropdown-menu`, `context-menu` and `menubar` components.
+
+### Fixed
+
+- `dist/` uses the production JSX runtime (`jsx` from `sinwan/jsx-runtime`). The build sets Bun's `jsx.development: false`; before, every JSX chunk imported `jsxDEV` from `sinwan/jsx-dev-runtime` even though the Sinwan compiler ran with `dev: false`. The dist check now fails on any `sinwan/jsx-dev-runtime` import.

package/README.md

@@ -1,23 +1,42 @@
 # sinwan-ui-core
 
-To install dependencies:
+Headless behaviour primitives for [Sinwan](https://sinwanjs.com) UI components — the Radix-style layer under the `sinwan-ui` registry components.
 
-```bash
-bun install
-```
+`sinwan-ui-core` owns state, accessibility attributes, focus handling, dismissal, positioning and exit-animation timing. It ships **no styles**: no Tailwind classes, no `clsx`/`tailwind-merge`, no icons. Components copied from the `sinwan-ui` registry (`bunx sinwan-ui add dialog`) import these primitives and add their own classes through `class` props. Use it directly only if you are building your own styled components.
 
-To run:
+## Install
 
 ```bash
-bun run index.ts
+bun add sinwan-ui-core
 ```
 
-To type check:
+Requirements:
 
-```bash
-bun check
-```
+- `sinwan` 2.x as a peer dependency (your app's runtime; the package never bundles its own copy).
+- `@floating-ui/dom` is installed as a dependency.
+- Compile your app with `bun-plugin-sinwan` or `vite-plugin-sinwan` (JSX with `jsxImportSource: "sinwan"`).
+
+## Modules
+
+Import from the root barrel or from a subpath (subpaths keep bundles small):
+
+| Subpath | Contents |
+| --- | --- |
+| `sinwan-ui-core/core` | `Presence` (keeps content mounted through CSS exit), `UiPortal`, `useControllableState`, `getFocusableElements`, `trapFocus`; re-exports the positioning helpers from `floating` |
+| `sinwan-ui-core/overlay` | Dialog, Collapsible, Popover and Tooltip primitives (`DialogRoot`, `DialogTrigger`, `DialogOverlay`, `DialogContent`, `PopoverRoot`, …), their injection keys and `OpenApi` |
+| `sinwan-ui-core/controls` | Tabs, Accordion, Checkbox, Switch, RadioGroup, Toggle and ToggleGroup primitives with injection keys |
+| `sinwan-ui-core/floating` | `useAnchorPosition`, `usePointPosition`, `computePosition`, `estimatePosition` and placement helpers (Floating UI based) |
+| `sinwan-ui-core/dismiss` | `isDismissExemptPointerTarget` for outside-press handling across portaled layers |
+| `sinwan-ui-core/menu-sub` | `createMenuSubApi` (closes with its `parentOpen`), `createMenuSubTriggerHandlers`, `isInsideMenuSubContent`, `MenuSubContentLayer` for nested menus |
+| `sinwan-ui-core/slot` | `Slot` (the `asChild` prop merge) |
+| `sinwan-ui-core/types` | Intrinsic prop aliases, `isSinwanElement`, `flattenChildren` |
+| `sinwan-ui-core/theme` | `ThemeProvider`, `useTheme`, `ThemeToggle` (unstyled), `ThemeKey` |
+| `sinwan-ui-core/direction` | `DirectionProvider`, `useDirection`, `DirectionKey` |
+
+## Styling contract
+
+Every primitive renders a `data-slot` and, where relevant, `data-state` (`open`/`closed`, `checked`/`unchecked`, `on`/`off`, `active`/`inactive`) and `data-side`. Style those attributes from your component layer. `Presence` keeps closing content mounted for `exitMs` (200 ms by default), so exit animations must hold their last keyframe (`animation-fill-mode: forwards`) and finish within that time.
 
-Run `bun fmt` to format the code.
+## License
 
-This project was created using `bun init` in bun v1.4.4. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.
+MIT

package/dist/chunks/chunk-3zrktrd2.js

@@ -0,0 +1,189 @@
+// src/theme.tsx
+import { _$createTemplate } from "sinwan/renderer/web";
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import {
+  cc,
+  inject,
+  onMounted,
+  onUnmounted,
+  provide
+} from "sinwan/component";
+import { batch, computed, signal } from "sinwan/reactivity";
+import { jsx, Fragment } from "sinwan/jsx-runtime";
+var _$tmpl_0 = {
+  html: '<button type="button" data-slot="theme-toggle" aria-label="Toggle color theme"></button>',
+  slots: [
+    { path: [], type: "attr", name: "class" },
+    { path: [], type: "event", name: "onclick" },
+    { path: [], type: "child" }
+  ]
+};
+var DEFAULT_PALETTES = ["credit-blue", "jomlaty", "cazview"];
+var ThemeKey2 = Symbol("sinwan-ui.theme");
+function isTheme(value) {
+  return value === "light" || value === "dark" || value === "system";
+}
+function isPalette(value, allowed) {
+  return value !== null && allowed.includes(value);
+}
+function readStoredTheme(storageKey, fallback) {
+  if (typeof localStorage === "undefined")
+    return fallback;
+  try {
+    const value = localStorage.getItem(storageKey);
+    if (isTheme(value))
+      return value;
+  } catch {}
+  return fallback;
+}
+function readStoredPalette(storageKey, fallback, allowed) {
+  if (typeof localStorage === "undefined")
+    return fallback;
+  try {
+    const value = localStorage.getItem(storageKey);
+    if (isPalette(value, allowed))
+      return value;
+  } catch {}
+  return fallback;
+}
+function getSystemTheme() {
+  if (typeof window === "undefined" || !window.matchMedia)
+    return "light";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function disableTransitionsTemporarily() {
+  const style = document.createElement("style");
+  style.appendChild(document.createTextNode("*,*::before,*::after{transition:none!important;animation:none!important}"));
+  document.head.appendChild(style);
+  return () => {
+    window.getComputedStyle(document.body);
+    requestAnimationFrame(() => {
+      style.parentNode?.removeChild(style);
+    });
+  };
+}
+function writeDomTheme(next, attribute) {
+  if (typeof document === "undefined")
+    return;
+  const root = document.documentElement;
+  if (attribute === "class") {
+    root.classList.remove("light", "dark");
+    root.classList.add(next);
+  } else {
+    root.setAttribute("data-theme", next);
+  }
+  root.style.colorScheme = next;
+}
+function writeDomPalette(next) {
+  if (typeof document === "undefined")
+    return;
+  document.documentElement.setAttribute("data-palette", next);
+}
+var ThemeProvider2 = cc((props) => {
+  const allowedPalettes = (props.palettes === undefined ? DEFAULT_PALETTES : props.palettes).length > 0 ? props.palettes === undefined ? DEFAULT_PALETTES : props.palettes : DEFAULT_PALETTES;
+  const initialTheme = props.forcedTheme ?? readStoredTheme(props.storageKey === undefined ? "sinwan-ui-theme" : props.storageKey, props.defaultTheme === undefined ? "system" : props.defaultTheme);
+  const initialPalette = props.forcedPalette ?? readStoredPalette(props.paletteStorageKey === undefined ? "sinwan-ui-palette" : props.paletteStorageKey, props.defaultPalette === undefined ? "credit-blue" : props.defaultPalette, allowedPalettes);
+  const theme = signal(initialTheme);
+  const palette = signal(initialPalette);
+  const resolved = signal(initialTheme === "system" ? getSystemTheme() : initialTheme);
+  const resolve = (value) => {
+    if (props.forcedTheme === "light" || props.forcedTheme === "dark")
+      return props.forcedTheme;
+    if (props.forcedTheme === "system")
+      return getSystemTheme();
+    if (value === "system")
+      return (props.enableSystem === undefined ? true : props.enableSystem) ? getSystemTheme() : "light";
+    return value;
+  };
+  const withTransitionLock = (apply) => {
+    const restore = (props.disableTransitionOnChange === undefined ? true : props.disableTransitionOnChange) && typeof document !== "undefined" ? disableTransitionsTemporarily() : null;
+    apply();
+    restore?.();
+  };
+  const commit = (value, nextTheme) => {
+    const next = resolve(value);
+    withTransitionLock(() => {
+      writeDomTheme(next, props.attribute === undefined ? "class" : props.attribute);
+      writeDomPalette(palette.value);
+      batch(() => {
+        if (nextTheme !== undefined) {
+          theme.value = nextTheme;
+        }
+        resolved.value = next;
+      });
+    });
+  };
+  const commitPalette = (next) => {
+    withTransitionLock(() => {
+      writeDomPalette(next);
+      writeDomTheme(resolved.value, props.attribute === undefined ? "class" : props.attribute);
+      palette.value = next;
+    });
+  };
+  const setTheme = (value) => {
+    if (props.forcedTheme)
+      return;
+    try {
+      localStorage.setItem(props.storageKey === undefined ? "sinwan-ui-theme" : props.storageKey, value);
+    } catch {}
+    commit(value, value);
+  };
+  const setPalette = (value) => {
+    if (props.forcedPalette)
+      return;
+    if (!allowedPalettes.includes(value))
+      return;
+    try {
+      localStorage.setItem(props.paletteStorageKey === undefined ? "sinwan-ui-palette" : props.paletteStorageKey, value);
+    } catch {}
+    commitPalette(value);
+  };
+  onMounted(() => {
+    commit(theme.value);
+    writeDomPalette(palette.value);
+    if (!(props.enableSystem === undefined ? true : props.enableSystem))
+      return;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const onChange = () => {
+      if (theme.value === "system" || props.forcedTheme === "system") {
+        commit("system");
+      }
+    };
+    mq.addEventListener("change", onChange);
+    onUnmounted(() => mq.removeEventListener("change", onChange));
+  });
+  provide(ThemeKey2, {
+    theme,
+    resolved,
+    setTheme,
+    themes: (props.enableSystem === undefined ? true : props.enableSystem) ? ["light", "dark", "system"] : ["light", "dark"],
+    palette,
+    setPalette,
+    palettes: allowedPalettes
+  });
+  computed(() => resolved.value);
+  computed(() => palette.value);
+  return /* @__PURE__ */ jsx(Fragment, {
+    children: () => _$unwrap(props).children
+  });
+});
+function useTheme2() {
+  const api = inject(ThemeKey2);
+  if (!api) {
+    throw new Error("useTheme() must be used within a ThemeProvider");
+  }
+  return api;
+}
+var ThemeToggle2 = cc((props) => {
+  const { theme, resolved, setTheme } = useTheme2();
+  return _$createTemplate(_$tmpl_0, [
+    () => _$unwrap(props).class,
+    () => {
+      const next = theme.value === "system" ? resolved.value === "dark" ? "light" : "dark" : theme.value === "dark" ? "light" : "dark";
+      setTheme(next);
+    },
+    () => _$unwrap(props).children ?? (resolved.value === "dark" ? "Light" : "Dark")
+  ]);
+});
+
+export { ThemeKey2, ThemeProvider2, useTheme2, ThemeToggle2 };

package/dist/chunks/chunk-6r59k5mb.js

@@ -0,0 +1,384 @@
+// src/floating.ts
+import {
+  autoUpdate,
+  computePosition as fuiComputePosition,
+  flip,
+  limitShift,
+  offset,
+  platform as domPlatform,
+  shift
+} from "@floating-ui/dom";
+import { onMounted, onUnmounted } from "sinwan/component";
+import {
+  effect,
+  signal,
+  untrack
+} from "sinwan/reactivity";
+function toFloatingPlacement2(placement = "bottom", align = "center") {
+  if (align === "center")
+    return placement;
+  return `${placement}-${align}`;
+}
+function basePlacement2(placement) {
+  const base = String(placement).split("-")[0] ?? "bottom";
+  if (base === "top" || base === "right" || base === "bottom" || base === "left") {
+    return base;
+  }
+  return "bottom";
+}
+function readDocumentRtl2() {
+  try {
+    const root = document.documentElement;
+    if (!(root instanceof Element))
+      return false;
+    return getComputedStyle(root).direction === "rtl";
+  } catch {
+    return false;
+  }
+}
+var safePlatform = {
+  ...domPlatform,
+  isRTL: readDocumentRtl2
+};
+function virtualClientRect(x, y, width, height) {
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    toJSON() {
+      return this;
+    }
+  };
+}
+function createRectReference2(rect) {
+  return {
+    getBoundingClientRect() {
+      return virtualClientRect(rect.left, rect.top, rect.width, rect.height);
+    }
+  };
+}
+function createSizeFloating2(width, height) {
+  return {
+    getBoundingClientRect() {
+      return virtualClientRect(0, 0, width, height);
+    }
+  };
+}
+function createPointReference2(x, y) {
+  return {
+    getBoundingClientRect() {
+      return virtualClientRect(x, y, 0, 0);
+    }
+  };
+}
+function defaultMiddleware(gap) {
+  return [
+    offset(gap),
+    flip({ crossAxis: true, fallbackAxisSideDirection: "start" }),
+    shift({ padding: 8, limiter: limitShift() })
+  ];
+}
+async function runFloatingCompute(reference, floating, placement, gap) {
+  const result = await fuiComputePosition(reference, floating, {
+    placement,
+    strategy: "fixed",
+    middleware: defaultMiddleware(gap),
+    platform: safePlatform
+  });
+  return { top: result.y, left: result.x, placement: result.placement };
+}
+async function computePosition2(anchor, content, placement = "bottom", align = "center", gap = 8) {
+  try {
+    return await runFloatingCompute(createRectReference2(anchor), createSizeFloating2(content.width, content.height), toFloatingPlacement2(placement, align), gap);
+  } catch {
+    const estimated = estimatePosition2(anchor, content, placement, align, gap);
+    return {
+      top: estimated.top,
+      left: estimated.left,
+      placement: toFloatingPlacement2(placement, align)
+    };
+  }
+}
+function estimatePosition2(anchor, content, placement = "bottom", align = "center", gap = 8) {
+  let top = 0;
+  let left = 0;
+  switch (placement) {
+    case "top":
+      top = anchor.top - content.height - gap;
+      break;
+    case "bottom":
+      top = anchor.bottom + gap;
+      break;
+    case "left":
+      left = anchor.left - content.width - gap;
+      top = anchor.top;
+      break;
+    case "right":
+      left = anchor.right + gap;
+      top = anchor.top;
+      break;
+  }
+  if (placement === "top" || placement === "bottom") {
+    if (align === "start")
+      left = anchor.left;
+    else if (align === "end")
+      left = anchor.right - content.width;
+    else
+      left = anchor.left + (anchor.width - content.width) / 2;
+  } else {
+    if (align === "start")
+      top = anchor.top;
+    else if (align === "end")
+      top = anchor.bottom - content.height;
+    else
+      top = anchor.top + (anchor.height - content.height) / 2;
+  }
+  const maxLeft = window.innerWidth - content.width - 8;
+  const maxTop = window.innerHeight - content.height - 8;
+  return {
+    top: Math.max(8, Math.min(top, maxTop)),
+    left: Math.max(8, Math.min(left, maxLeft))
+  };
+}
+function applyFixedStyle(style, top, left, extra) {
+  untrack(() => {
+    style.value = {
+      position: "fixed",
+      top: `${top}px`,
+      left: `${left}px`,
+      zIndex: "50",
+      ...extra
+    };
+  });
+}
+function bindAutoUpdate(reference, floating, update) {
+  if (!floating.isConnected)
+    return;
+  try {
+    return autoUpdate(reference, floating, update, { layoutShift: false });
+  } catch {
+    return;
+  }
+}
+function readContentRect(content) {
+  if (content == null || typeof content.getBoundingClientRect !== "function") {
+    return;
+  }
+  try {
+    return content.getBoundingClientRect();
+  } catch {
+    return;
+  }
+}
+function useAnchorPosition2(options) {
+  const initialSide = options.placement ?? "bottom";
+  const style = signal({
+    position: "fixed",
+    top: "0px",
+    left: "0px",
+    zIndex: "50"
+  });
+  const ready = signal(false);
+  const side = signal(initialSide);
+  let generation = 0;
+  let stopAutoUpdate;
+  const clearAutoUpdate = () => {
+    stopAutoUpdate?.();
+    stopAutoUpdate = undefined;
+  };
+  const readContent = () => options.content?.value;
+  const contentSize = () => {
+    const measured = readContentRect(readContent());
+    return {
+      width: measured && measured.width > 0 ? measured.width : options.fallbackSize?.width ?? 0,
+      height: measured && measured.height > 0 ? measured.height : options.fallbackSize?.height ?? 0
+    };
+  };
+  const refineWithFloatingUi = (trigger, floating, gen) => {
+    const placement = options.placement ?? "bottom";
+    const align = options.align ?? "center";
+    const gap = options.gap ?? 8;
+    runFloatingCompute(trigger, floating, toFloatingPlacement2(placement, align), gap).then((result) => {
+      if (gen !== generation)
+        return;
+      if (!options.open.value)
+        return;
+      const anchor = trigger.getBoundingClientRect();
+      applyFixedStyle(style, result.top, result.left, options.extra?.(anchor));
+      untrack(() => {
+        side.value = basePlacement2(result.placement);
+        ready.value = true;
+      });
+    }).catch(() => {});
+  };
+  const place = () => {
+    const trigger = options.trigger.value;
+    if (!options.open.value || !trigger) {
+      untrack(() => {
+        ready.value = false;
+      });
+      clearAutoUpdate();
+      return false;
+    }
+    const placement = options.placement ?? "bottom";
+    const align = options.align ?? "center";
+    const gap = options.gap ?? 8;
+    const size = contentSize();
+    const anchor = trigger.getBoundingClientRect();
+    const estimated = estimatePosition2(anchor, size, placement, align, gap);
+    applyFixedStyle(style, estimated.top, estimated.left, options.extra?.(anchor));
+    untrack(() => {
+      side.value = placement;
+      ready.value = true;
+    });
+    const gen = ++generation;
+    const content = readContent();
+    const floating = content ?? createSizeFloating2(size.width, size.height);
+    refineWithFloatingUi(trigger, floating, gen);
+    clearAutoUpdate();
+    if (content) {
+      stopAutoUpdate = bindAutoUpdate(trigger, content, () => {
+        refineWithFloatingUi(trigger, content, generation);
+      });
+    }
+    return true;
+  };
+  const present = () => {
+    if (!options.open.value) {
+      untrack(() => {
+        ready.value = false;
+      });
+      clearAutoUpdate();
+      return false;
+    }
+    return place();
+  };
+  onMounted(() => {
+    const stop = effect(() => {
+      options.open.value;
+      options.trigger.value;
+      readContent();
+      untrack(() => {
+        place();
+      });
+    });
+    onUnmounted(() => {
+      stop();
+      clearAutoUpdate();
+      generation += 1;
+    });
+  });
+  return {
+    style,
+    ready,
+    side,
+    present: {
+      get value() {
+        return present();
+      }
+    }
+  };
+}
+function usePointPosition2(options) {
+  const style = signal({
+    position: "fixed",
+    top: "0px",
+    left: "0px",
+    zIndex: "50"
+  });
+  const ready = signal(false);
+  const side = signal("bottom");
+  let generation = 0;
+  let stopAutoUpdate;
+  const clearAutoUpdate = () => {
+    stopAutoUpdate?.();
+    stopAutoUpdate = undefined;
+  };
+  const readContent = () => options.content?.value;
+  const refinePoint = (reference, floating, gen) => {
+    runFloatingCompute(reference, floating, "bottom-start", 0).then((result) => {
+      if (gen !== generation)
+        return;
+      if (!options.open.value)
+        return;
+      applyFixedStyle(style, result.top, result.left);
+      untrack(() => {
+        side.value = basePlacement2(result.placement);
+        ready.value = true;
+      });
+    }).catch(() => {});
+  };
+  const place = () => {
+    if (!options.open.value) {
+      untrack(() => {
+        ready.value = false;
+      });
+      clearAutoUpdate();
+      return false;
+    }
+    const { x, y } = options.point.value;
+    applyFixedStyle(style, y, x);
+    untrack(() => {
+      ready.value = true;
+    });
+    const content = readContent();
+    const measured = readContentRect(content);
+    const size = {
+      width: measured && measured.width > 0 ? measured.width : options.fallbackSize?.width ?? 0,
+      height: measured && measured.height > 0 ? measured.height : options.fallbackSize?.height ?? 0
+    };
+    const gen = ++generation;
+    const reference = createPointReference2(x, y);
+    const floating = content ?? createSizeFloating2(size.width, size.height);
+    refinePoint(reference, floating, gen);
+    clearAutoUpdate();
+    if (content) {
+      stopAutoUpdate = bindAutoUpdate(reference, content, () => {
+        refinePoint(reference, content, generation);
+      });
+    }
+    return true;
+  };
+  const present = () => {
+    if (!options.open.value) {
+      untrack(() => {
+        ready.value = false;
+      });
+      clearAutoUpdate();
+      return false;
+    }
+    return place();
+  };
+  onMounted(() => {
+    const stop = effect(() => {
+      options.open.value;
+      options.point.value;
+      readContent();
+      untrack(() => {
+        place();
+      });
+    });
+    onUnmounted(() => {
+      stop();
+      clearAutoUpdate();
+      generation += 1;
+    });
+  });
+  return {
+    style,
+    ready,
+    side,
+    present: {
+      get value() {
+        return present();
+      }
+    }
+  };
+}
+
+export { toFloatingPlacement2, basePlacement2, readDocumentRtl2, createRectReference2, createSizeFloating2, createPointReference2, computePosition2, estimatePosition2, useAnchorPosition2, usePointPosition2 };

package/dist/chunks/chunk-7r6fwdyt.js

@@ -0,0 +1,16 @@
+// src/types.ts
+import { unwrap } from "sinwan/reactivity";
+function isSinwanElement2(node) {
+  return typeof node === "object" && node !== null && !Array.isArray(node) && "tag" in node && "props" in node;
+}
+function flattenChildren2(children) {
+  const resolved = unwrap(children);
+  if (resolved == null || resolved === false || resolved === true)
+    return [];
+  if (Array.isArray(resolved)) {
+    return resolved.flatMap((child) => flattenChildren2(child));
+  }
+  return [resolved];
+}
+
+export { isSinwanElement2, flattenChildren2 };