@sableui/react 0.0.0-stage → 0.1.0

package/dist/ios/chrome.css

@@ -0,0 +1,83 @@
+/* Optional shared browser iOS material; imported only in the native document. */
+/* The scroll-edge effect under the status bar and navigation: a fade from the
+   page color, not a backdrop blur. A blur darkens toward the edges of whatever
+   clips it, which drew grey smudges in the screen's top corners when framed. */
+.ios-route::before {
+  content: ''; position: absolute; inset: 0 0 auto; height: var(--ios-header-height); z-index: 10; pointer-events: none;
+  background: linear-gradient(to bottom, var(--ios-canvas) 45%, color-mix(in srgb, var(--ios-canvas) 85%, transparent) 65%, color-mix(in srgb, var(--ios-canvas) 40%, transparent) 85%, transparent);
+}
+.ios-prototype .k-navbar { top: var(--ios-safe-top); margin-top: var(--ios-navbar-offset, var(--ios-safe-top)); color: var(--ios-ink); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
+/* A single full-height scrim owns the header, avoiding the upstream gradient restart. */
+.ios-prototype .k-navbar > .pointer-events-none { display: none; }
+.ios-navigation-title, .ios-prototype .ios-sheet-heading h2 { font-family: var(--ios-display, inherit); font-weight: var(--ios-title-weight, 600); }
+.ios-glass-filters { position: absolute; pointer-events: none; }
+.ios-prototype .k-glass {
+  position: relative;
+  background: color-mix(in srgb, var(--ios-canvas) calc(var(--ios-glass-tint) * 100%), transparent);
+  -webkit-backdrop-filter: blur(7px) saturate(1.25);
+  backdrop-filter: blur(7px) saturate(1.25);
+  --tw-shadow:
+    inset 0 .75px .5px rgb(255 255 255 / .75),
+    inset 0 -.75px .5px rgb(255 255 255 / .5),
+    inset .75px 0 .5px rgb(255 255 255 / .35),
+    inset 0 -2px 6px color-mix(in srgb, var(--ios-ink) 4%, transparent),
+    0 3px 12px color-mix(in srgb, var(--ios-ink) 7%, transparent),
+    0 .5px 2px color-mix(in srgb, var(--ios-ink) 3%, transparent);
+}
+/* Chromium can refract the actual backdrop; other engines retain the CSS material. */
+@supports (backdrop-filter: url('#glass')) {
+  .ios-prototype .k-glass {
+    backdrop-filter: var(--ios-glass-optics, blur(7px)) saturate(1.25);
+  }
+}
+.ios-prototype.dark .k-glass {
+  --tw-shadow:
+    inset 0 .75px .5px rgb(255 255 255 / .4),
+    inset 0 -.75px .5px rgb(255 255 255 / .2),
+    inset .75px 0 .5px rgb(255 255 255 / .15),
+    0 3px 12px rgb(0 0 0 / .14);
+}
+/* Directional rim reflections and a faint surface reflection, separate from the fill. */
+.ios-prototype .k-glass::before,
+.ios-prototype .k-glass::after {
+  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
+}
+.ios-prototype .k-glass::before {
+  padding: 1px;
+  background: linear-gradient(145deg, rgb(255 255 255 / .95), rgb(255 255 255 / .1) 32%, rgb(255 255 255 / .4) 60%, rgb(255 255 255 / .8));
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  mask-composite: exclude;
+}
+.ios-prototype .k-glass::after {
+  background: linear-gradient(165deg, rgb(255 255 255 / .17), transparent 42%, transparent 70%, rgb(255 255 255 / .06));
+}
+.ios-prototype.dark .k-glass::before { opacity: .55; }
+.ios-prototype.dark .k-glass::after { opacity: .65; }
+.ios-prototype :focus-visible { outline-color: var(--color-primary); }
+.native-tabbar { position: absolute; z-index: 30; bottom: var(--ios-tabbar-bottom); }
+/* Carry the toolbar's background through the home safe area, not just to the glass bar. */
+.native-tabbar > .pointer-events-none {
+  bottom: calc(-1 * var(--ios-tabbar-bottom));
+  height: calc(var(--k-safe-area-bottom) + 96px + var(--ios-tabbar-bottom));
+}
+/* The home-area fade under the tab bar is unblurred for the same reason as the
+   header; the glass bar above it keeps its material. */
+.native-tabbar > .pointer-events-none { -webkit-backdrop-filter: none; backdrop-filter: none; }
+.native-tab-scrim { background: linear-gradient(to top, color-mix(in srgb, var(--ios-canvas) 92%, transparent) 25%, color-mix(in srgb, var(--ios-canvas) 60%, transparent) 60%, transparent); }
+.native-tab-glass { display: flex; width: 100%; border-radius: 36px; }
+.native-tab-glass > button { flex: 1; position: relative; z-index: 1; }
+.native-tab-glass > button:not([aria-current='page']) { color: var(--ios-ink); }
+.ios-prototype .ios-icon-action { width: 44px; height: 44px; min-width: 44px; padding: 0; flex-shrink: 0; }
+.ios-icon-action svg { flex-shrink: 0; }
+.native-tab-glass > button[aria-current='page']::before {
+  content: ''; position: absolute; inset: 5px 6px; z-index: -1; border-radius: 28px; pointer-events: none;
+  background: color-mix(in srgb, var(--ios-ink) 6%, transparent);
+  box-shadow: inset 0 .5px 0 rgb(255 255 255 / .3);
+}
+@media (prefers-reduced-transparency: reduce) {
+  .ios-prototype .k-glass { -webkit-backdrop-filter: none; backdrop-filter: none; }
+  .native-tabbar > .pointer-events-none { -webkit-backdrop-filter: none; backdrop-filter: none; }
+  .ios-prototype .k-glass::after { display: none; }
+}

package/dist/ios/frame.css

@@ -0,0 +1,5 @@
+/* Host-page layout for PhoneFrame only. The device itself is Sable's Phone, so it
+   follows the host's theme; nothing here reaches the native document. */
+.ios-preview-host { width: 100%; min-width: 0; margin-inline: auto; position: relative; }
+.ios-phone-frame { position: absolute; inset-inline-start: 0; top: 0; transform-origin: top left; }
+.ios-phone-screen { display: block; width: 100%; height: 100%; border: 0; }

package/dist/ios/index.d.ts

@@ -0,0 +1,70 @@
+import * as react from 'react';
+import { CSSProperties, ReactNode, ComponentProps } from 'react';
+import { NavbarBackLink, Button, Navbar, Page, TabbarLink, Tabbar } from 'konsta/react';
+
+declare const NAMES: readonly ["--background", "--card", "--foreground", "--muted-foreground", "--primary", "--primary-foreground", "--muted", "--font-sans", "--font-display", "--type-title-weight"];
+/** Resolved preset values or app-owned CSS variables, keyed by Sable's semantic names. */
+type IosBrandTokens = Partial<Record<(typeof NAMES)[number], string>>;
+/**
+ * Set Sable's semantic tokens on the native root. `ios/styles.css` maps those
+ * names onto the native chrome (canvas, ink, panels, tint, title font), so this
+ * is only needed when the values do not already come from Sable's styles in the
+ * same document — e.g. a preset sent from a host page. Geometry is never themed.
+ */
+declare function iosThemeStyle(tokens: IosBrandTokens): CSSProperties;
+
+/**
+ * The root of a native prototype document: Konsta's iOS App, Sable's preset on
+ * the chrome, glass material, and the system status bar and home indicator.
+ *
+ * Load Sable's styles in the same document and set `data-sable-theme` on <html>;
+ * the chrome and any Sable content then follow the preset together. `tokens`
+ * overrides individual semantic values. `mode` also sets `dark` on <html>, so
+ * Sable popups portaled to <body> follow the prototype's appearance.
+ */
+declare function NativeApp({ children, mode, glassTint, reducedMotion, className, tokens, style, }: {
+    children: ReactNode;
+    mode?: "light" | "dark";
+    glassTint?: number;
+    reducedMotion?: boolean;
+    className?: string;
+    tokens?: IosBrandTokens;
+    style?: CSSProperties;
+}): react.JSX.Element;
+
+type Navigation = {
+    push: (id: string, content: ReactNode) => void;
+    pop: () => void;
+    depth: number;
+};
+declare function useNavigation(): Navigation;
+/** Keep one mounted stack per tab so each tab retains its route and scroll. */
+declare function NavigationStack({ children, active, label }: {
+    children: ReactNode;
+    active?: boolean;
+    label: string;
+}): react.JSX.Element;
+
+/** Browser dialog owns focus trapping, Escape, inert background, and restoration. */
+declare function IosSheet({ open, onOpenChange, title, children, detent }: {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    children: ReactNode;
+    detent?: 'medium' | 'large';
+}): react.JSX.Element;
+
+/** A screen: the scrolling page under the navigation bar. Its content is Sable. */
+declare function IosPage(props: ComponentProps<typeof Page>): react.JSX.Element;
+/** The navigation bar's back control. */
+declare function IosBackLink({ component, ...props }: ComponentProps<typeof NavbarBackLink>): react.JSX.Element;
+/** One tab bar destination. Pass a Sable `<Icon>` as `icon`. */
+declare function IosTab({ component, active, ...props }: ComponentProps<typeof TabbarLink>): react.JSX.Element;
+/** Brand typography on native navigation, including its expanding large title. */
+declare function IosNavbar({ titleClassName, titleLargeFontSizeIos, ...props }: ComponentProps<typeof Navbar>): react.JSX.Element;
+/** The tab bar: shared glass material and home-area fade; children are IosTabs. */
+declare function IosTabbar({ children, className, colors, ...props }: ComponentProps<typeof Tabbar>): react.JSX.Element;
+/** Keep icon actions square inside the native circular glass container. */
+declare function IosIconButton({ className, ...props }: ComponentProps<typeof Button>): react.JSX.Element;
+
+export { IosBackLink, type IosBrandTokens, IosIconButton, IosNavbar, IosPage, IosSheet, IosTab, IosTabbar, NativeApp, NavigationStack, iosThemeStyle, useNavigation };

package/dist/ios/index.js

@@ -0,0 +1,313 @@
+import { StatusIcons } from '../chunk-NEQNXI2G.js';
+import { App, Sheet, Button, Page, NavbarBackLink, TabbarLink, Navbar, Tabbar, Glass } from 'konsta/react';
+import { createContext, useEffect, useContext, useState, useRef, useId } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var SVG_NS = "http://www.w3.org/2000/svg";
+function refractionMap(width, height) {
+  const canvas = document.createElement("canvas");
+  canvas.width = Math.ceil(width);
+  canvas.height = Math.ceil(height);
+  const context = canvas.getContext("2d");
+  const pixels = context.createImageData(canvas.width, canvas.height);
+  const radius = Math.min(width, height) / 2;
+  const edge = Math.min(12, radius * 0.45);
+  for (let y = 0; y < canvas.height; y++) for (let x = 0; x < canvas.width; x++) {
+    const dx = x + 0.5 - width / 2, dy = y + 0.5 - height / 2;
+    const qx = Math.abs(dx) - width / 2 + radius;
+    const qy = Math.abs(dy) - height / 2 + radius;
+    const ox = Math.max(qx, 0), oy = Math.max(qy, 0);
+    const length = Math.hypot(ox, oy);
+    const depth = radius - length - Math.min(Math.max(qx, qy), 0);
+    const bend = depth > 0 && depth < edge ? Math.sin(depth / edge * Math.PI) * 0.44 : 0;
+    const nx = length ? Math.sign(dx) * ox / length : 0;
+    const ny = length ? Math.sign(dy) * oy / length : 0;
+    const index = (y * canvas.width + x) * 4;
+    pixels.data[index] = Math.round((0.5 + nx * bend) * 255);
+    pixels.data[index + 1] = Math.round((0.5 + ny * bend) * 255);
+    pixels.data[index + 2] = 128;
+    pixels.data[index + 3] = 255;
+  }
+  context.putImageData(pixels, 0, 0);
+  return canvas.toDataURL();
+}
+function LiquidGlassMaterial() {
+  const svg = useRef(null);
+  const prefix = useId().replace(/[^a-zA-Z0-9_-]/g, "");
+  useEffect(() => {
+    const root = svg.current?.closest(".ios-prototype");
+    const defs = svg.current?.querySelector("defs");
+    if (!root || !defs) return;
+    const filters = /* @__PURE__ */ new Map();
+    let sequence = 0, frame = 0;
+    const pending = /* @__PURE__ */ new Set();
+    const primitive = (name, attributes) => {
+      const element = document.createElementNS(SVG_NS, name);
+      for (const [key, value] of Object.entries(attributes)) element.setAttribute(key, value);
+      return element;
+    };
+    const update = (element) => {
+      const { width, height } = element.getBoundingClientRect();
+      if (!width || !height) return;
+      let filter = filters.get(element);
+      if (!filter) {
+        filter = primitive("filter", { id: `${prefix}-glass-${sequence++}`, x: "0", y: "0", width: "100%", height: "100%", "color-interpolation-filters": "sRGB" });
+        defs.append(filter);
+        filters.set(element, filter);
+      }
+      filter.replaceChildren(
+        primitive("feGaussianBlur", { in: "SourceGraphic", stdDeviation: "3", result: "softened" }),
+        primitive("feImage", { href: refractionMap(width, height), x: "0", y: "0", width: String(width), height: String(height), preserveAspectRatio: "none", result: "rim" }),
+        primitive("feDisplacementMap", { in: "softened", in2: "rim", scale: "14", xChannelSelector: "R", yChannelSelector: "G" })
+      );
+      element.style.setProperty("--ios-glass-optics", `url("#${filter.id}")`);
+    };
+    const resize = new ResizeObserver((entries) => {
+      for (const entry of entries) pending.add(entry.target);
+      cancelAnimationFrame(frame);
+      frame = requestAnimationFrame(() => {
+        for (const element of pending) update(element);
+        pending.clear();
+      });
+    });
+    const scan = () => {
+      for (const element of root.querySelectorAll(".k-glass")) {
+        if (!filters.has(element)) {
+          resize.observe(element);
+          update(element);
+        }
+      }
+      for (const [element, filter] of filters) if (!root.contains(element)) {
+        resize.unobserve(element);
+        filter.remove();
+        filters.delete(element);
+      }
+    };
+    scan();
+    const mutations = new MutationObserver((records) => {
+      if (records.some((record) => [...record.addedNodes, ...record.removedNodes].some((node) => node instanceof Element && (node.matches(".k-glass") || node.querySelector(".k-glass"))))) scan();
+    });
+    mutations.observe(root, { childList: true, subtree: true });
+    return () => {
+      cancelAnimationFrame(frame);
+      resize.disconnect();
+      mutations.disconnect();
+      for (const [element, filter] of filters) {
+        element.style.removeProperty("--ios-glass-optics");
+        filter.remove();
+      }
+    };
+  }, [prefix]);
+  return /* @__PURE__ */ jsx("svg", { ref: svg, className: "ios-glass-filters", width: "0", height: "0", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("defs", {}) });
+}
+
+// src/ios/theme.ts
+var NAMES = [
+  "--background",
+  "--card",
+  "--foreground",
+  "--muted-foreground",
+  "--primary",
+  "--primary-foreground",
+  "--muted",
+  "--font-sans",
+  "--font-display",
+  "--type-title-weight"
+];
+function iosThemeStyle(tokens) {
+  return Object.fromEntries(NAMES.flatMap((name) => tokens[name] === void 0 ? [] : [[name, tokens[name]]]));
+}
+function NativeApp({
+  children,
+  mode = "light",
+  glassTint = 0.35,
+  reducedMotion = false,
+  className = "",
+  tokens = {},
+  style
+}) {
+  const dark = mode === "dark";
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", dark);
+  }, [dark]);
+  const tint = Math.max(0, Math.min(1, Number.isFinite(glassTint) ? glassTint : 0.35));
+  return /* @__PURE__ */ jsxs(
+    App,
+    {
+      theme: "ios",
+      dark,
+      className: `ios-prototype ${dark ? "dark" : ""} ${className}`,
+      "data-reduced-motion": reducedMotion || void 0,
+      style: { ...iosThemeStyle(tokens), "--ios-glass-tint": tint, ...style },
+      children: [
+        /* @__PURE__ */ jsx(LiquidGlassMaterial, {}),
+        /* @__PURE__ */ jsxs("div", { className: "ios-status-bar", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsx("span", { children: "9:41" }),
+          /* @__PURE__ */ jsx("span", { className: "ios-island" }),
+          /* @__PURE__ */ jsx(StatusIcons, { className: "ios-status-icons" })
+        ] }),
+        children,
+        /* @__PURE__ */ jsx("div", { className: "ios-home-indicator", "aria-hidden": "true" })
+      ]
+    }
+  );
+}
+var Context = createContext(null);
+function useNavigation() {
+  const value = useContext(Context);
+  if (!value) throw new Error("useNavigation needs a NavigationStack");
+  return value;
+}
+function NavigationStack({ children, active = true, label }) {
+  const [entries, setEntries] = useState([]);
+  const [direction, setDirection] = useState("push");
+  const gesture = useRef(null);
+  const host = useRef(null);
+  const focusTarget = useRef(null);
+  const push = (id, content) => {
+    const returnFocus = document.activeElement;
+    setDirection("push");
+    setEntries((previous) => [...previous, { id, content, returnFocus }]);
+  };
+  const pop = () => {
+    setDirection("pop");
+    setEntries((previous) => {
+      focusTarget.current = previous.at(-1)?.returnFocus || null;
+      return previous.slice(0, -1);
+    });
+  };
+  useEffect(() => {
+    if (!active) return;
+    if (direction === "pop" && focusTarget.current?.isConnected) focusTarget.current.focus({ preventScroll: true });
+    else if (entries.length) host.current?.querySelector("[data-ios-route]:last-child h1, [data-ios-route]:last-child [data-ios-title]")?.focus({ preventScroll: true });
+  }, [entries.length, active, direction]);
+  const endGesture = (event) => {
+    const start = gesture.current;
+    gesture.current = null;
+    if (start && entries.length && event.clientX - start.x > 80 && Math.abs(event.clientY - start.y) < 50) pop();
+  };
+  return /* @__PURE__ */ jsx(Context.Provider, { value: { push, pop, depth: entries.length }, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: host,
+      className: "ios-navigation-stack",
+      hidden: !active,
+      "aria-label": label,
+      "data-direction": direction,
+      onPointerDown: (event) => {
+        if (event.clientX < 24 && event.isPrimary) gesture.current = { x: event.clientX, y: event.clientY };
+      },
+      onPointerUp: endGesture,
+      onPointerCancel: () => {
+        gesture.current = null;
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "ios-route", "data-ios-route": "root", hidden: entries.length > 0, children }),
+        entries.map((entry, index) => /* @__PURE__ */ jsx("div", { className: "ios-route", "data-ios-route": entry.id, hidden: index !== entries.length - 1, children: entry.content }, `${index}:${entry.id}`))
+      ]
+    }
+  ) });
+}
+function IosSheet({ open, onOpenChange, title, children, detent = "medium" }) {
+  const dialog = useRef(null);
+  const titleId = useId();
+  const [shown, setShown] = useState(false);
+  const [expanded, setExpanded] = useState(detent === "large");
+  const startY = useRef(null);
+  const dragged = useRef(false);
+  useEffect(() => {
+    const el = dialog.current;
+    if (!el) return;
+    if (open) {
+      setExpanded(detent === "large");
+      if (!el.open) {
+        el.showModal();
+        el.querySelector("h2")?.focus();
+      }
+      const frame = requestAnimationFrame(() => setShown(true));
+      return () => cancelAnimationFrame(frame);
+    }
+    setShown(false);
+    const reduced = matchMedia("(prefers-reduced-motion: reduce)").matches || !!el.closest("[data-reduced-motion]");
+    const timer = setTimeout(() => el.close(), reduced ? 0 : 220);
+    return () => clearTimeout(timer);
+  }, [open, detent]);
+  return /* @__PURE__ */ jsx(
+    "dialog",
+    {
+      ref: dialog,
+      className: "ios-sheet-dialog",
+      "aria-labelledby": titleId,
+      onCancel: (event) => {
+        event.preventDefault();
+        onOpenChange(false);
+      },
+      onClick: (event) => {
+        if (event.target === event.currentTarget) onOpenChange(false);
+      },
+      children: /* @__PURE__ */ jsxs(Sheet, { opened: shown, backdrop: false, className: "ios-sheet", style: { height: expanded ? "90%" : "56%" }, children: [
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            clear: true,
+            className: "ios-sheet-grabber",
+            "aria-label": expanded ? "Reduce sheet height" : "Expand sheet",
+            onClick: () => {
+              if (dragged.current) {
+                dragged.current = false;
+                return;
+              }
+              setExpanded((value) => !value);
+            },
+            onPointerDown: (event) => {
+              startY.current = event.clientY;
+              dragged.current = false;
+              event.currentTarget.setPointerCapture(event.pointerId);
+            },
+            onPointerUp: (event) => {
+              if (startY.current === null) return;
+              const distance = event.clientY - startY.current;
+              dragged.current = Math.abs(distance) > 10;
+              startY.current = null;
+              if (distance > 80) onOpenChange(false);
+              else if (distance < -40) setExpanded(true);
+            },
+            children: /* @__PURE__ */ jsx("span", { className: "ios-grabber-mark" })
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "ios-sheet-heading", children: [
+          /* @__PURE__ */ jsx("h2", { id: titleId, tabIndex: -1, children: title }),
+          /* @__PURE__ */ jsx(Button, { clear: true, onClick: () => onOpenChange(false), children: "Cancel" })
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ios-sheet-content", children })
+      ] })
+    }
+  );
+}
+function IosPage(props) {
+  return /* @__PURE__ */ jsx(Page, { ...props });
+}
+function IosBackLink({ component = "button", ...props }) {
+  return /* @__PURE__ */ jsx(NavbarBackLink, { component, ...props });
+}
+function IosTab({ component = "button", active, ...props }) {
+  return /* @__PURE__ */ jsx(TabbarLink, { component, active, "aria-current": active ? "page" : void 0, ...props });
+}
+function IosNavbar({ titleClassName = "", titleLargeFontSizeIos = "text-[34px]", ...props }) {
+  return /* @__PURE__ */ jsx(
+    Navbar,
+    {
+      ...props,
+      titleClassName: `ios-navigation-title ${titleClassName}`,
+      titleLargeFontSizeIos: `ios-navigation-title ${titleLargeFontSizeIos}`
+    }
+  );
+}
+function IosTabbar({ children, className = "", colors, ...props }) {
+  return /* @__PURE__ */ jsx(Tabbar, { labels: true, icons: true, component: "nav", ...props, className: `native-tabbar ${className}`, colors: { bgIos: "native-tab-scrim", ...colors }, children: /* @__PURE__ */ jsx(Glass, { className: "native-tab-glass", children }) });
+}
+function IosIconButton({ className = "", ...props }) {
+  return /* @__PURE__ */ jsx(Button, { inline: true, rounded: true, clear: true, ...props, className: `ios-icon-action ${className}` });
+}
+
+export { IosBackLink, IosIconButton, IosNavbar, IosPage, IosSheet, IosTab, IosTabbar, NativeApp, NavigationStack, iosThemeStyle, useNavigation };

package/dist/ios/preview.d.ts

@@ -0,0 +1,64 @@
+import * as react from 'react';
+import { Ref, ReactEventHandler, RefObject } from 'react';
+
+declare const phoneSizes: {
+    readonly compact: {
+        readonly width: 375;
+        readonly height: 812;
+    };
+    /** A current 6.3" iPhone Pro. */
+    readonly standard: {
+        readonly width: 402;
+        readonly height: 874;
+    };
+    /** A current 6.9" iPhone Pro Max. */
+    readonly large: {
+        readonly width: 440;
+        readonly height: 956;
+    };
+};
+/**
+ * A logical iPhone viewport in Sable's Phone frame, scaled down to fit its host.
+ *
+ * The prototype is a separate document in an iframe, so Konsta's theme and the
+ * prototype's fixed overlays, safe areas and fonts never touch the host page.
+ * The iframe keeps the logical size (402×874 by default); the whole device is
+ * scaled, never the viewport, so the prototype lays out as it would on a phone.
+ * The document draws its own status bar, island and home indicator, so the
+ * frame draws neither.
+ */
+declare function PhoneFrame({ src, title, size, frameRef, onLoad, }: {
+    src: string;
+    title?: string;
+    size?: keyof typeof phoneSizes;
+    frameRef?: Ref<HTMLIFrameElement>;
+    onLoad?: ReactEventHandler<HTMLIFrameElement>;
+}): react.JSX.Element;
+
+type IosPreviewTheme = {
+    type: 'sable:ios-theme';
+    mode: 'light' | 'dark';
+    tokens: Record<string, string>;
+    fonts: string[];
+    icons: 'reicon' | 'fallback';
+    reducedMotion: boolean;
+};
+declare function isIosPreviewTheme(value: unknown): value is IosPreviewTheme;
+declare function loadIosPreviewFonts(fonts: string[]): void;
+/** Same-origin frames receive computed tokens and fonts, never competing global CSS. */
+declare function useIosPreviewBridge(frame: RefObject<HTMLIFrameElement | null>, { mode, icons, reducedMotion, revision, }: {
+    mode: 'light' | 'dark';
+    icons?: 'reicon' | 'fallback';
+    reducedMotion?: boolean;
+    revision?: unknown;
+}): () => void;
+/**
+ * The prototype side of the bridge: accept the host's look, set its tokens on
+ * <html> (where Sable's styles and the iOS adapter both read them), load its
+ * fonts, and return it for mode, icons and motion. Konsta chrome pins its own
+ * spacing and radii, so the host's density reaches Sable content only.
+ * Returns null until the host has sent a look; render the document's defaults.
+ */
+declare function useIosPreviewTheme(): IosPreviewTheme | null;
+
+export { type IosPreviewTheme, PhoneFrame, isIosPreviewTheme, loadIosPreviewFonts, phoneSizes, useIosPreviewBridge, useIosPreviewTheme };

package/dist/ios/preview.js

@@ -0,0 +1,133 @@
+import { Phone } from '../chunk-RWP4XBSK.js';
+import '../chunk-NEQNXI2G.js';
+import '../chunk-SRQWQUTW.js';
+import { useRef, useState, useEffect, useCallback } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var phoneSizes = {
+  compact: { width: 375, height: 812 },
+  /** A current 6.3" iPhone Pro. */
+  standard: { width: 402, height: 874 },
+  /** A current 6.9" iPhone Pro Max. */
+  large: { width: 440, height: 956 }
+};
+function PhoneFrame({
+  src,
+  title = "iPhone prototype",
+  size = "standard",
+  frameRef,
+  onLoad
+}) {
+  const host = useRef(null);
+  const device = useRef(null);
+  const [fit, setFit] = useState({ scale: 1, width: 0, height: 0 });
+  const { width, height } = phoneSizes[size];
+  useEffect(() => {
+    const hostEl = host.current;
+    const deviceEl = device.current;
+    if (!hostEl || !deviceEl) return;
+    const measure = () => {
+      const natural = { width: deviceEl.offsetWidth, height: deviceEl.offsetHeight };
+      const scale = natural.width ? Math.min(1, hostEl.clientWidth / natural.width) : 1;
+      setFit({ scale, ...natural });
+    };
+    const observer = new ResizeObserver(measure);
+    observer.observe(hostEl);
+    observer.observe(deviceEl);
+    return () => observer.disconnect();
+  }, []);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: host,
+      className: "ios-preview-host",
+      style: { maxWidth: fit.width || void 0, height: fit.height ? fit.height * fit.scale : height },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: device,
+          className: "ios-phone-frame",
+          style: { width: width / 0.926, transform: `scale(${fit.scale})` },
+          children: /* @__PURE__ */ jsx(Phone, { statusBar: false, systemChrome: false, className: "w-full", children: /* @__PURE__ */ jsx("iframe", { ref: frameRef, onLoad, src, title, className: "ios-phone-screen" }) })
+        }
+      )
+    }
+  );
+}
+function isIosPreviewTheme(value) {
+  if (!value || typeof value !== "object") return false;
+  const data = value;
+  return data.type === "sable:ios-theme" && (data.mode === "light" || data.mode === "dark") && (data.icons === "reicon" || data.icons === "fallback") && typeof data.reducedMotion === "boolean" && !!data.tokens && !Array.isArray(data.tokens) && typeof data.tokens === "object" && Object.entries(data.tokens).every(([name, token]) => /^--[\w-]+$/.test(name) && typeof token === "string") && Array.isArray(data.fonts) && data.fonts.every((url) => typeof url === "string" && url.startsWith("https://fonts.googleapis.com/"));
+}
+function loadIosPreviewFonts(fonts) {
+  for (const url of fonts) {
+    if (!url.startsWith("https://fonts.googleapis.com/")) continue;
+    if (Array.from(document.querySelectorAll('link[rel="stylesheet"]')).some((link2) => link2.href === url)) continue;
+    const link = document.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    document.head.appendChild(link);
+  }
+}
+function useIosPreviewBridge(frame, {
+  mode,
+  icons = "fallback",
+  reducedMotion = false,
+  revision
+}) {
+  const sync = useCallback(() => {
+    const computed = getComputedStyle(document.documentElement);
+    const message = {
+      type: "sable:ios-theme",
+      mode,
+      icons,
+      reducedMotion,
+      tokens: Object.fromEntries(Array.from(computed).filter((name) => name.startsWith("--")).map((name) => [name, computed.getPropertyValue(name).trim()])),
+      fonts: Array.from(document.querySelectorAll('link[rel="stylesheet"]')).map((link) => link.href).filter((url) => url.startsWith("https://fonts.googleapis.com/"))
+    };
+    frame.current?.contentWindow?.postMessage(message, location.origin);
+  }, [frame, mode, icons, reducedMotion]);
+  useEffect(() => {
+    let pending = 0;
+    const schedule = () => {
+      cancelAnimationFrame(pending);
+      pending = requestAnimationFrame(sync);
+    };
+    const receive = (event) => {
+      if (event.origin === location.origin && event.source === frame.current?.contentWindow && event.data?.type === "sable:ios-ready") schedule();
+    };
+    schedule();
+    window.addEventListener("message", receive);
+    const observer = new MutationObserver(schedule);
+    observer.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-sable-theme", "style"] });
+    observer.observe(document.head, { childList: true, subtree: true, characterData: true });
+    return () => {
+      cancelAnimationFrame(pending);
+      observer.disconnect();
+      window.removeEventListener("message", receive);
+    };
+  }, [frame, sync, revision]);
+  return sync;
+}
+function useIosPreviewTheme() {
+  const [look, setLook] = useState(null);
+  const applied = useRef([]);
+  useEffect(() => {
+    const receive = (event) => {
+      if (event.origin !== location.origin || event.source !== window.parent || !isIosPreviewTheme(event.data)) return;
+      const root = document.documentElement;
+      const { tokens } = event.data;
+      for (const name of applied.current) if (!(name in tokens)) root.style.removeProperty(name);
+      for (const [name, value] of Object.entries(tokens)) root.style.setProperty(name, value);
+      applied.current = Object.keys(tokens);
+      loadIosPreviewFonts(event.data.fonts);
+      setLook(event.data);
+    };
+    window.addEventListener("message", receive);
+    if (window.parent !== window) window.parent.postMessage({ type: "sable:ios-ready" }, location.origin);
+    return () => window.removeEventListener("message", receive);
+  }, []);
+  return look;
+}
+
+export { PhoneFrame, isIosPreviewTheme, loadIosPreviewFonts, phoneSizes, useIosPreviewBridge, useIosPreviewTheme };