sinwan-ui-core 0.0.0-stage → 1.0.0

package/CHANGELOG.md

@@ -0,0 +1,22 @@
+# 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.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,3 +1,42 @@
-# Temporary Holding Version
+# sinwan-ui-core
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Headless behaviour primitives for [Sinwan](https://sinwanjs.com) UI components — the Radix-style layer under the `sinwan-ui` registry components.
+
+`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.
+
+## Install
+
+```bash
+bun add sinwan-ui-core
+```
+
+Requirements:
+
+- `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.
+
+## License
+
+MIT

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 };

package/dist/chunks/chunk-8zvv4kad.js

@@ -0,0 +1,116 @@
+import {
+  useAnchorPosition2
+} from "./chunk-6r59k5mb.js";
+import {
+  Presence2,
+  UiPortal2
+} from "./chunk-ejwby1pn.js";
+
+// src/menu-sub.tsx
+import { unwrap as _$unwrap } from "sinwan/reactivity";
+import { cc } from "sinwan/component";
+import { onUnmounted } from "sinwan/component";
+import {
+  computed,
+  effect,
+  signal,
+  untrack
+} from "sinwan/reactivity";
+import { jsx } from "sinwan/jsx-runtime";
+function createMenuSubApi2(options) {
+  const openLocal = signal(options.defaultOpen ?? false);
+  const open = options.controlled ? computed(options.readOpen) : openLocal;
+  const set = (next) => {
+    if (!options.controlled)
+      openLocal.value = next;
+  };
+  const triggerEl = signal(null);
+  let closeTimer;
+  function cancelClose() {
+    if (closeTimer !== undefined) {
+      window.clearTimeout(closeTimer);
+      closeTimer = undefined;
+    }
+  }
+  function setOpen(value) {
+    cancelClose();
+    set(value);
+    options.onOpenChange?.(value);
+  }
+  function requestClose(delayMs = 100) {
+    cancelClose();
+    closeTimer = window.setTimeout(() => {
+      closeTimer = undefined;
+      setOpen(false);
+    }, delayMs);
+  }
+  const parentOpen = options.parentOpen;
+  if (parentOpen) {
+    effect(() => {
+      if (parentOpen())
+        return;
+      untrack(() => {
+        if (open.value)
+          setOpen(false);
+      });
+    });
+  }
+  onUnmounted(cancelClose);
+  return { open, setOpen, triggerEl, cancelClose, requestClose };
+}
+function createMenuSubTriggerHandlers2(api) {
+  function openSub() {
+    api.cancelClose();
+    if (!api.open.value)
+      api.setOpen(true);
+  }
+  return {
+    onMouseEnter: openSub,
+    onMouseLeave: () => api.requestClose(),
+    onClick: openSub,
+    onKeyDown: (event) => {
+      if (event.key !== "ArrowRight")
+        return;
+      event.preventDefault();
+      openSub();
+    }
+  };
+}
+function isInsideMenuSubContent2(target) {
+  return target instanceof Element && target.closest("[data-slot$='-sub-content']") != null;
+}
+var MenuSubContentLayer2 = cc(function MenuSubContentLayer(props) {
+  const contentEl = signal(null);
+  const { style, side } = useAnchorPosition2({
+    open: props.api.open,
+    trigger: props.api.triggerEl,
+    content: contentEl,
+    placement: "right",
+    align: "start",
+    gap: 4,
+    fallbackSize: { width: 128, height: 120 }
+  });
+  function subState() {
+    return props.api.open.value ? "open" : "closed";
+  }
+  return /* @__PURE__ */ jsx(Presence2, {
+    present: () => _$unwrap(props).api.open.value,
+    children: /* @__PURE__ */ jsx(UiPortal2, {
+      children: /* @__PURE__ */ jsx("div", {
+        "data-slot": () => _$unwrap(props).slot,
+        "data-state": subState,
+        "data-side": () => side.value,
+        class: () => _$unwrap(props).class,
+        style: () => style.value,
+        onmouseenter: () => props.api.cancelClose(),
+        onmouseleave: () => props.api.requestClose(),
+        ref: (el) => {
+          contentEl.value = el;
+        },
+        children: () => _$unwrap(props).children
+      })
+    })
+  });
+});
+
+export { createMenuSubApi2, createMenuSubTriggerHandlers2, isInsideMenuSubContent2, MenuSubContentLayer2 };