@withpotter/components 0.13.0-next.101

package/dist/mobile/primitives/layout.js

@@ -0,0 +1,157 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { useModalBehaviour } from "@withpotter/hooks/use-modal-behaviour";
+function Caption({ children }) {
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      className: "text-3xs font-medium",
+      style: { color: "var(--mb-text-tertiary)" },
+      children
+    }
+  );
+}
+function Section({
+  eyebrow,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("section", { className: `space-y-2 ${className ?? ""}`, children: [
+    eyebrow && (typeof eyebrow === "string" ? /* @__PURE__ */ jsx(Caption, { children: eyebrow }) : eyebrow),
+    children
+  ] });
+}
+function SectionHeader({
+  title,
+  trailing
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-baseline justify-between", children: [
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        className: "text-xs font-semibold",
+        style: { color: "var(--mb-text-tertiary)" },
+        children: title
+      }
+    ),
+    trailing && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "text-xs font-medium",
+        style: { color: "var(--mb-accent)" },
+        children: trailing
+      }
+    )
+  ] });
+}
+function Sheet({
+  title,
+  subtitle,
+  onDismiss,
+  children
+}) {
+  const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);
+  const panelRef = useModalBehaviour(true, handleDismiss);
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "fixed inset-0 z-[var(--z-modal)] flex flex-col justify-end",
+      style: { background: "var(--mb-scrim)" },
+      onClick: onDismiss,
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-label": title ? void 0 : "Dialog",
+          tabIndex: -1,
+          className: "max-h-[calc(100dvh-1rem)] overflow-y-auto overscroll-contain rounded-t-3xl border-t p-5",
+          style: {
+            background: "var(--mb-canvas)",
+            borderColor: "var(--mb-border)",
+            color: "var(--mb-text)",
+            paddingBottom: "calc(1.25rem + env(safe-area-inset-bottom))"
+          },
+          onClick: (e) => e.stopPropagation(),
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "mx-auto mb-4 h-1 w-10 rounded-full",
+                style: { background: "var(--mb-border)" }
+              }
+            ),
+            (title || subtitle) && /* @__PURE__ */ jsxs("div", { className: "mb-4 text-center", children: [
+              title && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  id: titleId,
+                  className: "text-base font-semibold",
+                  style: { color: "var(--mb-text)" },
+                  children: title
+                }
+              ),
+              subtitle && /* @__PURE__ */ jsx(
+                "p",
+                {
+                  className: "mt-0.5 text-sm",
+                  style: { color: "var(--mb-text-tertiary)" },
+                  children: subtitle
+                }
+              )
+            ] }),
+            children
+          ]
+        }
+      )
+    }
+  );
+}
+function EmptyState({
+  icon: Icon,
+  title,
+  body,
+  action
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col items-center justify-center gap-4 px-8 py-16 text-center", children: [
+    Icon && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "flex h-16 w-16 items-center justify-center rounded-3xl",
+        style: { background: "var(--mb-elevated)" },
+        children: /* @__PURE__ */ jsx(Icon, { className: "h-8 w-8", style: { color: "var(--mb-text-muted)" } })
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-xl font-semibold",
+          style: { color: "var(--mb-text)" },
+          children: title
+        }
+      ),
+      body && /* @__PURE__ */ jsx(
+        "p",
+        {
+          className: "text-md leading-relaxed",
+          style: { color: "var(--mb-text-tertiary)" },
+          children: body
+        }
+      )
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: action })
+  ] });
+}
+export {
+  Caption,
+  EmptyState,
+  Section,
+  SectionHeader,
+  Sheet
+};
+//# sourceMappingURL=layout.js.map

package/dist/mobile/primitives/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/layout.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile Primitives — Layout layer\n *\n * Section, Caption, SectionHeader, Sheet, EmptyState\n */\n\nimport React from 'react';\nimport { useModalBehaviour } from '@withpotter/hooks/use-modal-behaviour';\n\n// ─────────────────────────────────────────────────────────────\n// Caption\n// Small uppercase eyebrow label above a section.\n// ─────────────────────────────────────────────────────────────\n\nexport function Caption({ children }: { children: React.ReactNode }) {\n  return (\n    <p\n      className=\"text-3xs font-medium\"\n      style={{ color: 'var(--mb-text-tertiary)' }}\n    >\n      {children}\n    </p>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Section\n// Vertical grouping with an optional eyebrow (Caption).\n// ─────────────────────────────────────────────────────────────\n\nexport function Section({\n  eyebrow,\n  children,\n  className,\n}: {\n  eyebrow?: React.ReactNode;\n  children: React.ReactNode;\n  className?: string;\n}) {\n  return (\n    <section className={`space-y-2 ${className ?? ''}`}>\n      {eyebrow &&\n        (typeof eyebrow === 'string' ? <Caption>{eyebrow}</Caption> : eyebrow)}\n      {children}\n    </section>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// SectionHeader\n// Title line with an optional trailing action link / button.\n// ─────────────────────────────────────────────────────────────\n\nexport function SectionHeader({\n  title,\n  trailing,\n}: {\n  title: string;\n  trailing?: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex items-baseline justify-between\">\n      <p\n        className=\"text-xs font-semibold\"\n        style={{ color: 'var(--mb-text-tertiary)' }}\n      >\n        {title}\n      </p>\n      {trailing && (\n        <div\n          className=\"text-xs font-medium\"\n          style={{ color: 'var(--mb-accent)' }}\n        >\n          {trailing}\n        </div>\n      )}\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// Sheet\n// Bottom sheet overlay (action sheet, FAB menu, filters).\n// Wraps children in a frosted-glass panel anchored to the bottom.\n// ─────────────────────────────────────────────────────────────\n\nexport function Sheet({\n  title,\n  subtitle,\n  onDismiss,\n  children,\n}: {\n  title?: string;\n  subtitle?: string;\n  onDismiss?: () => void;\n  children: React.ReactNode;\n}) {\n  const handleDismiss = React.useCallback(() => onDismiss?.(), [onDismiss]);\n  const panelRef = useModalBehaviour(true, handleDismiss);\n  const titleId = React.useId();\n\n  return (\n    <div\n      className=\"fixed inset-0 z-[var(--z-modal)] flex flex-col justify-end\"\n      style={{ background: 'var(--mb-scrim)' }}\n      onClick={onDismiss}\n    >\n      <div\n        ref={panelRef}\n        role=\"dialog\"\n        aria-modal=\"true\"\n        aria-labelledby={title ? titleId : undefined}\n        aria-label={title ? undefined : 'Dialog'}\n        tabIndex={-1}\n        className=\"max-h-[calc(100dvh-1rem)] overflow-y-auto overscroll-contain rounded-t-3xl border-t p-5\"\n        style={{\n          background: 'var(--mb-canvas)',\n          borderColor: 'var(--mb-border)',\n          color: 'var(--mb-text)',\n          paddingBottom: 'calc(1.25rem + env(safe-area-inset-bottom))',\n        }}\n        onClick={(e) => e.stopPropagation()}\n      >\n        {/* Drag handle */}\n        <div\n          className=\"mx-auto mb-4 h-1 w-10 rounded-full\"\n          style={{ background: 'var(--mb-border)' }}\n        />\n        {(title || subtitle) && (\n          <div className=\"mb-4 text-center\">\n            {title && (\n              <p\n                id={titleId}\n                className=\"text-base font-semibold\"\n                style={{ color: 'var(--mb-text)' }}\n              >\n                {title}\n              </p>\n            )}\n            {subtitle && (\n              <p\n                className=\"mt-0.5 text-sm\"\n                style={{ color: 'var(--mb-text-tertiary)' }}\n              >\n                {subtitle}\n              </p>\n            )}\n          </div>\n        )}\n        {children}\n      </div>\n    </div>\n  );\n}\n\n// ─────────────────────────────────────────────────────────────\n// EmptyState\n// First-run / zero-state with optional icon, title, body, action.\n// ─────────────────────────────────────────────────────────────\n\nexport function EmptyState({\n  icon: Icon,\n  title,\n  body,\n  action,\n}: {\n  icon?: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  title: string;\n  body?: string;\n  action?: React.ReactNode;\n}) {\n  return (\n    <div className=\"flex flex-1 flex-col items-center justify-center gap-4 px-8 py-16 text-center\">\n      {Icon && (\n        <div\n          className=\"flex h-16 w-16 items-center justify-center rounded-3xl\"\n          style={{ background: 'var(--mb-elevated)' }}\n        >\n          <Icon className=\"h-8 w-8\" style={{ color: 'var(--mb-text-muted)' }} />\n        </div>\n      )}\n      <div className=\"space-y-1.5\">\n        <p\n          className=\"text-xl font-semibold\"\n          style={{ color: 'var(--mb-text)' }}\n        >\n          {title}\n        </p>\n        {body && (\n          <p\n            className=\"text-md leading-relaxed\"\n            style={{ color: 'var(--mb-text-tertiary)' }}\n          >\n            {body}\n          </p>\n        )}\n      </div>\n      {action && <div className=\"mt-2\">{action}</div>}\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/primitives/progressive-list.d.ts

@@ -0,0 +1,26 @@
+/**
+ * ProgressiveList — render an initial batch of children, then progressively
+ * reveal more as the sentinel scrolls into view.
+ *
+ * Reduces first-paint cost on long lists (catalog, customers, orders) without
+ * needing virtualization or paginated APIs.
+ *
+ * Usage:
+ *   <ProgressiveList initial={5} step={10}>
+ *     {items.map(item => <Card key={item.id} ... />)}
+ *   </ProgressiveList>
+ */
+import { type ReactNode } from 'react';
+interface ProgressiveListProps {
+    /** Number of children rendered immediately on mount */
+    initial?: number;
+    /** Additional children revealed each time the sentinel intersects */
+    step?: number;
+    /** Distance (px) before the bottom at which to trigger the next batch */
+    rootMargin?: string;
+    /** Class for the wrapping container */
+    className?: string;
+    children: ReactNode;
+}
+export declare function ProgressiveList({ initial, step, rootMargin, className, children, }: ProgressiveListProps): import("react").JSX.Element;
+export {};

package/dist/mobile/primitives/progressive-list.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useEffect, useRef, useState } from "react";
+function ProgressiveList({
+  initial = 5,
+  step = 10,
+  rootMargin = "300px",
+  className,
+  children
+}) {
+  const items = Children.toArray(children);
+  const [visibleCount, setVisibleCount] = useState(
+    () => Math.min(initial, items.length)
+  );
+  const sentinelRef = useRef(null);
+  useEffect(() => {
+    if (visibleCount > items.length) {
+      setVisibleCount(items.length);
+    }
+  }, [items.length, visibleCount]);
+  useEffect(() => {
+    if (visibleCount >= items.length) return;
+    const node = sentinelRef.current;
+    if (!node) return;
+    if (typeof IntersectionObserver === "undefined") {
+      setVisibleCount(items.length);
+      return;
+    }
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            setVisibleCount((prev) => Math.min(prev + step, items.length));
+          }
+        }
+      },
+      { rootMargin }
+    );
+    observer.observe(node);
+    return () => observer.disconnect();
+  }, [visibleCount, items.length, step, rootMargin]);
+  return /* @__PURE__ */ jsxs("div", { className, children: [
+    items.slice(0, visibleCount),
+    visibleCount < items.length ? /* @__PURE__ */ jsx("div", { ref: sentinelRef, "aria-hidden": true, className: "h-px w-full" }) : null
+  ] });
+}
+export {
+  ProgressiveList
+};
+//# sourceMappingURL=progressive-list.js.map

package/dist/mobile/primitives/progressive-list.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/progressive-list.tsx"],"sourcesContent":["'use client';\n\n/**\n * ProgressiveList — render an initial batch of children, then progressively\n * reveal more as the sentinel scrolls into view.\n *\n * Reduces first-paint cost on long lists (catalog, customers, orders) without\n * needing virtualization or paginated APIs.\n *\n * Usage:\n *   <ProgressiveList initial={5} step={10}>\n *     {items.map(item => <Card key={item.id} ... />)}\n *   </ProgressiveList>\n */\n\nimport { Children, useEffect, useRef, useState, type ReactNode } from 'react';\n\ninterface ProgressiveListProps {\n  /** Number of children rendered immediately on mount */\n  initial?: number;\n  /** Additional children revealed each time the sentinel intersects */\n  step?: number;\n  /** Distance (px) before the bottom at which to trigger the next batch */\n  rootMargin?: string;\n  /** Class for the wrapping container */\n  className?: string;\n  children: ReactNode;\n}\n\nexport function ProgressiveList({\n  initial = 5,\n  step = 10,\n  rootMargin = '300px',\n  className,\n  children,\n}: ProgressiveListProps) {\n  const items = Children.toArray(children);\n  const [visibleCount, setVisibleCount] = useState(() =>\n    Math.min(initial, items.length),\n  );\n  const sentinelRef = useRef<HTMLDivElement | null>(null);\n\n  // If the underlying list shrinks below the current visible count, snap back.\n  useEffect(() => {\n    if (visibleCount > items.length) {\n      setVisibleCount(items.length);\n    }\n  }, [items.length, visibleCount]);\n\n  useEffect(() => {\n    if (visibleCount >= items.length) return;\n    const node = sentinelRef.current;\n    if (!node) return;\n    if (typeof IntersectionObserver === 'undefined') {\n      // Fallback: reveal everything\n      setVisibleCount(items.length);\n      return;\n    }\n\n    const observer = new IntersectionObserver(\n      (entries) => {\n        for (const entry of entries) {\n          if (entry.isIntersecting) {\n            setVisibleCount((prev) => Math.min(prev + step, items.length));\n          }\n        }\n      },\n      { rootMargin },\n    );\n    observer.observe(node);\n    return () => observer.disconnect();\n  }, [visibleCount, items.length, step, rootMargin]);\n\n  return (\n    <div className={className}>\n      {items.slice(0, visibleCount)}\n      {visibleCount < items.length ? (\n        <div ref={sentinelRef} aria-hidden className=\"h-px w-full\" />\n      ) : null}\n    </div>\n  );\n}\n"],"mappings":";AA0EI,SAGI,KAHJ;AA3DJ,SAAS,UAAU,WAAW,QAAQ,gBAAgC;AAc/D,SAAS,gBAAgB;AAAA,EAC9B,UAAU;AAAA,EACV,OAAO;AAAA,EACP,aAAa;AAAA,EACb;AAAA,EACA;AACF,GAAyB;AACvB,QAAM,QAAQ,SAAS,QAAQ,QAAQ;AACvC,QAAM,CAAC,cAAc,eAAe,IAAI;AAAA,IAAS,MAC/C,KAAK,IAAI,SAAS,MAAM,MAAM;AAAA,EAChC;AACA,QAAM,cAAc,OAA8B,IAAI;AAGtD,YAAU,MAAM;AACd,QAAI,eAAe,MAAM,QAAQ;AAC/B,sBAAgB,MAAM,MAAM;AAAA,IAC9B;AAAA,EACF,GAAG,CAAC,MAAM,QAAQ,YAAY,CAAC;AAE/B,YAAU,MAAM;AACd,QAAI,gBAAgB,MAAM,OAAQ;AAClC,UAAM,OAAO,YAAY;AACzB,QAAI,CAAC,KAAM;AACX,QAAI,OAAO,yBAAyB,aAAa;AAE/C,sBAAgB,MAAM,MAAM;AAC5B;AAAA,IACF;AAEA,UAAM,WAAW,IAAI;AAAA,MACnB,CAAC,YAAY;AACX,mBAAW,SAAS,SAAS;AAC3B,cAAI,MAAM,gBAAgB;AACxB,4BAAgB,CAAC,SAAS,KAAK,IAAI,OAAO,MAAM,MAAM,MAAM,CAAC;AAAA,UAC/D;AAAA,QACF;AAAA,MACF;AAAA,MACA,EAAE,WAAW;AAAA,IACf;AACA,aAAS,QAAQ,IAAI;AACrB,WAAO,MAAM,SAAS,WAAW;AAAA,EACnC,GAAG,CAAC,cAAc,MAAM,QAAQ,MAAM,UAAU,CAAC;AAEjD,SACE,qBAAC,SAAI,WACF;AAAA,UAAM,MAAM,GAAG,YAAY;AAAA,IAC3B,eAAe,MAAM,SACpB,oBAAC,SAAI,KAAK,aAAa,eAAW,MAAC,WAAU,eAAc,IACzD;AAAA,KACN;AAEJ;","names":[]}

package/dist/mobile/primitives/screen-frame.d.ts

@@ -0,0 +1,50 @@
+/**
+ * Mobile Primitives — the screen frame.
+ *
+ * The phone is two layers. The OUTER layer is the app: a near-black ground
+ * carrying the status bar and one slim row of things that are true on every
+ * screen — who you are, where you are, and search. The INNER layer is the
+ * PAGE: a sheet with rounded top corners that runs off the bottom.
+ *
+ * Split out of `chrome.tsx` under the 500-line rule. That file is the bars —
+ * `TopBar`, `BackBar`, `BottomTabBar` — and this is the frame they sit in,
+ * which is a different question from what a bar contains.
+ */
+import React from 'react';
+export declare function AppBar({ leading, center, trailing, }: {
+    /** Who you are — the account. Left, where iOS puts identity. */
+    leading?: React.ReactNode;
+    /** Where you are — the workspace. Centred, so it reads as the app's title. */
+    center?: React.ReactNode;
+    /** True-on-every-screen actions: search. Not page actions. */
+    trailing?: React.ReactNode;
+}): React.JSX.Element;
+/**
+ * One of the screen's own actions, as a glyph beside the title.
+ *
+ * A circle rather than a square: it sits next to a large title, and a rounded
+ * rectangle at this size reads as a small card rather than a control. 36px so
+ * the target clears the 44px minimum once the row's own padding is counted.
+ */
+export declare function SheetAction({ icon: Icon, label, onClick, }: {
+    icon: React.ComponentType<{
+        className?: string;
+        style?: React.CSSProperties;
+    }>;
+    label: string;
+    onClick: () => void;
+}): React.JSX.Element;
+export declare function ScreenSheet({ title, onBack, actions, squareLeft, fillContent, edgeToEdge, children, }: {
+    /** The page title, large, inside the sheet — not in the bar above it. */
+    title?: string;
+    onBack?: () => void;
+    /** Page actions, on the title's row. */
+    actions?: React.ReactNode;
+    /** Lets an edge-to-edge settings surface meet the app rail cleanly. */
+    squareLeft?: boolean;
+    /** Lets immersive surfaces such as the editor occupy the full sheet height. */
+    fillContent?: boolean;
+    /** Removes page gutters for immersive surfaces that own their own canvas. */
+    edgeToEdge?: boolean;
+    children: React.ReactNode;
+}): React.JSX.Element;

package/dist/mobile/primitives/screen-frame.js

@@ -0,0 +1,164 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from "lucide-react";
+function AppBar({
+  leading,
+  center,
+  trailing
+}) {
+  return (
+    /* A three-column grid with equal outer tracks, not a flex row with
+       `justify-between`: the centre has to be centred against the SCREEN, not
+       against whatever the two sides happen to weigh. With flex, a long
+       workspace name or a second trailing glyph would shove it off-centre, and
+       the bar would appear to drift as you moved between screens. */
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "grid shrink-0 grid-cols-[1fr_auto_1fr] items-center px-3",
+        style: {
+          height: "var(--mb-app-bar-height)",
+          background: "var(--mb-app-ground)",
+          position: "relative",
+          zIndex: "var(--z-overlay)"
+        },
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 justify-start", children: leading }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 justify-center", children: center }),
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 justify-end", children: trailing })
+        ]
+      }
+    )
+  );
+}
+function SheetAction({
+  icon: Icon,
+  label,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      "aria-label": label,
+      className: "flex size-9 items-center justify-center rounded-full transition-transform active:scale-95",
+      style: { background: "var(--mb-elevated)" },
+      children: /* @__PURE__ */ jsx(Icon, { className: "size-4", style: { color: "var(--mb-text)" } })
+    }
+  );
+}
+function ScreenSheet({
+  title,
+  onBack,
+  actions,
+  squareLeft = false,
+  fillContent = false,
+  edgeToEdge = false,
+  children
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "mb-force-light flex min-h-0 flex-1 flex-col overflow-hidden",
+      style: {
+        // The content sheet is always light — the phone's appearance setting
+        // and the app's theme toggle do not reach it. The black frame around
+        // it still follows the theme.
+        colorScheme: "light",
+        // Re-declared tokens do not recolour inherited text: without this,
+        // anything with no colour of its own keeps the app's (dark-theme,
+        // near-white) text and vanishes on the white sheet.
+        color: "var(--text-primary)",
+        background: "var(--mb-surface)",
+        marginInline: edgeToEdge ? 0 : "var(--mb-sheet-inset)",
+        borderTopLeftRadius: squareLeft ? 0 : "var(--mb-sheet-radius)",
+        borderTopRightRadius: "var(--mb-sheet-radius)",
+        borderBottomLeftRadius: edgeToEdge || squareLeft ? 0 : void 0,
+        /* The hairline traces the sheet's own edge, so it reads as a lifted
+           object rather than a colour change. Top only: there is no bottom. */
+        borderTop: "1px solid var(--mb-border)",
+        borderLeft: "1px solid var(--mb-border)",
+        borderRight: "1px solid var(--mb-border)"
+      },
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `min-h-0 flex-1 overflow-x-clip overflow-y-auto${fillContent ? " flex flex-col" : ""}`,
+          children: /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: fillContent ? "flex min-h-0 flex-1 flex-col" : void 0,
+              style: {
+                paddingInline: edgeToEdge ? 0 : "var(--mb-sheet-gutter)",
+                paddingBottom: "var(--mb-safe-bottom)"
+              },
+              children: [
+                title && /* One row, one optical centre. `items-center` rather than `start`:
+                   the glyphs are round, so aligning their boxes to the title's
+                   ascender leaves them sitting visibly high — the eye lines the
+                   circle's centre up with the middle of the word, not its cap. */
+                /* @__PURE__ */ jsxs(
+                  "header",
+                  {
+                    className: "sticky top-0 z-20 -mx-[var(--mb-sheet-gutter)] flex items-center gap-3 border-b pb-4 pl-[var(--mb-sheet-gutter)] pr-[var(--mb-sheet-gutter)] pt-5",
+                    style: {
+                      background: "color-mix(in srgb, var(--mb-surface) 82%, transparent)",
+                      borderColor: "var(--mb-border)",
+                      backdropFilter: "blur(16px) saturate(120%)",
+                      WebkitBackdropFilter: "blur(16px) saturate(120%)"
+                    },
+                    children: [
+                      onBack && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          onClick: onBack,
+                          "aria-label": "Back",
+                          className: "flex size-9 shrink-0 items-center justify-center rounded-full",
+                          style: { background: "var(--mb-elevated)" },
+                          children: /* @__PURE__ */ jsx(
+                            ArrowLeft,
+                            {
+                              className: "size-4",
+                              style: { color: "var(--mb-text)" }
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        "h1",
+                        {
+                          className: "min-w-0 flex-1 truncate whitespace-nowrap font-bold leading-[1.1] tracking-tight",
+                          style: {
+                            fontSize: "var(--mb-title-size)",
+                            color: "var(--mb-text)"
+                          },
+                          children: title
+                        }
+                      ),
+                      actions && /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: actions })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    className: fillContent ? "flex min-h-0 flex-1 flex-col" : title ? "pt-6" : void 0,
+                    children
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+}
+export {
+  AppBar,
+  ScreenSheet,
+  SheetAction
+};
+//# sourceMappingURL=screen-frame.js.map

package/dist/mobile/primitives/screen-frame.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/screen-frame.tsx"],"sourcesContent":["'use client';\n\n/**\n * Mobile Primitives — the screen frame.\n *\n * The phone is two layers. The OUTER layer is the app: a near-black ground\n * carrying the status bar and one slim row of things that are true on every\n * screen — who you are, where you are, and search. The INNER layer is the\n * PAGE: a sheet with rounded top corners that runs off the bottom.\n *\n * Split out of `chrome.tsx` under the 500-line rule. That file is the bars —\n * `TopBar`, `BackBar`, `BottomTabBar` — and this is the frame they sit in,\n * which is a different question from what a bar contains.\n */\n\nimport React from 'react';\nimport { ArrowLeft } from 'lucide-react';\n\n// ─────────────────────────────────────────────────────────────\n// AppBar + ScreenSheet — the two layers of the phone frame\n//\n// The outer layer is the APP: the near-black ground, the status bar, and one\n// slim row of things that are true on every screen. The inner layer is the\n// PAGE: a sheet with rounded top corners that runs off the bottom.\n//\n// Splitting them is what stops every screen redrawing the workspace switcher\n// and the global actions in its own way, and it is what makes the phone read\n// as an app rather than a narrow web page.\n// ─────────────────────────────────────────────────────────────\n\nexport function AppBar({\n  leading,\n  center,\n  trailing,\n}: {\n  /** Who you are — the account. Left, where iOS puts identity. */\n  leading?: React.ReactNode;\n  /** Where you are — the workspace. Centred, so it reads as the app's title. */\n  center?: React.ReactNode;\n  /** True-on-every-screen actions: search. Not page actions. */\n  trailing?: React.ReactNode;\n}) {\n  return (\n    /* A three-column grid with equal outer tracks, not a flex row with\n       `justify-between`: the centre has to be centred against the SCREEN, not\n       against whatever the two sides happen to weigh. With flex, a long\n       workspace name or a second trailing glyph would shove it off-centre, and\n       the bar would appear to drift as you moved between screens. */\n    <div\n      className=\"grid shrink-0 grid-cols-[1fr_auto_1fr] items-center px-3\"\n      style={{\n        height: 'var(--mb-app-bar-height)',\n        background: 'var(--mb-app-ground)',\n        position: 'relative',\n        zIndex: 'var(--z-overlay)',\n      }}\n    >\n      <div className=\"flex min-w-0 justify-start\">{leading}</div>\n      <div className=\"flex min-w-0 justify-center\">{center}</div>\n      <div className=\"flex min-w-0 justify-end\">{trailing}</div>\n    </div>\n  );\n}\n\n/**\n * One of the screen's own actions, as a glyph beside the title.\n *\n * A circle rather than a square: it sits next to a large title, and a rounded\n * rectangle at this size reads as a small card rather than a control. 36px so\n * the target clears the 44px minimum once the row's own padding is counted.\n */\nexport function SheetAction({\n  icon: Icon,\n  label,\n  onClick,\n}: {\n  icon: React.ComponentType<{\n    className?: string;\n    style?: React.CSSProperties;\n  }>;\n  label: string;\n  onClick: () => void;\n}) {\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      aria-label={label}\n      className=\"flex size-9 items-center justify-center rounded-full transition-transform active:scale-95\"\n      style={{ background: 'var(--mb-elevated)' }}\n    >\n      <Icon className=\"size-4\" style={{ color: 'var(--mb-text)' }} />\n    </button>\n  );\n}\n\nexport function ScreenSheet({\n  title,\n  onBack,\n  actions,\n  squareLeft = false,\n  fillContent = false,\n  edgeToEdge = false,\n  children,\n}: {\n  /** The page title, large, inside the sheet — not in the bar above it. */\n  title?: string;\n  onBack?: () => void;\n  /** Page actions, on the title's row. */\n  actions?: React.ReactNode;\n  /** Lets an edge-to-edge settings surface meet the app rail cleanly. */\n  squareLeft?: boolean;\n  /** Lets immersive surfaces such as the editor occupy the full sheet height. */\n  fillContent?: boolean;\n  /** Removes page gutters for immersive surfaces that own their own canvas. */\n  edgeToEdge?: boolean;\n  children: React.ReactNode;\n}) {\n  return (\n    <div\n      className=\"mb-force-light flex min-h-0 flex-1 flex-col overflow-hidden\"\n      style={{\n        // The content sheet is always light — the phone's appearance setting\n        // and the app's theme toggle do not reach it. The black frame around\n        // it still follows the theme.\n        colorScheme: 'light',\n        // Re-declared tokens do not recolour inherited text: without this,\n        // anything with no colour of its own keeps the app's (dark-theme,\n        // near-white) text and vanishes on the white sheet.\n        color: 'var(--text-primary)',\n        background: 'var(--mb-surface)',\n        marginInline: edgeToEdge ? 0 : 'var(--mb-sheet-inset)',\n        borderTopLeftRadius: squareLeft ? 0 : 'var(--mb-sheet-radius)',\n        borderTopRightRadius: 'var(--mb-sheet-radius)',\n        borderBottomLeftRadius: edgeToEdge || squareLeft ? 0 : undefined,\n        /* The hairline traces the sheet's own edge, so it reads as a lifted\n           object rather than a colour change. Top only: there is no bottom. */\n        borderTop: '1px solid var(--mb-border)',\n        borderLeft: '1px solid var(--mb-border)',\n        borderRight: '1px solid var(--mb-border)',\n      }}\n    >\n      {/* The title and its actions live INSIDE the scroller, so they scroll\n          away with the content.\n\n          Pinned, they spent a permanent ~60px on a word you have already read\n          — and the app's row above already says where you are, so the page's\n          own name is the half that can go. iOS large titles scroll off for\n          exactly this reason: what stays is the app, not the page.\n\n          The gutter sits on this inner wrapper rather than on the scroller\n          itself so the scrollbar tracks the sheet's edge, not the text's. */}\n      <div\n        className={`min-h-0 flex-1 overflow-x-clip overflow-y-auto${\n          fillContent ? ' flex flex-col' : ''\n        }`}\n      >\n        <div\n          className={fillContent ? 'flex min-h-0 flex-1 flex-col' : undefined}\n          style={{\n            paddingInline: edgeToEdge ? 0 : 'var(--mb-sheet-gutter)',\n            paddingBottom: 'var(--mb-safe-bottom)',\n          }}\n        >\n          {title && (\n            /* One row, one optical centre. `items-center` rather than `start`:\n               the glyphs are round, so aligning their boxes to the title's\n               ascender leaves them sitting visibly high — the eye lines the\n               circle's centre up with the middle of the word, not its cap. */\n            <header\n              className=\"sticky top-0 z-20 -mx-[var(--mb-sheet-gutter)] flex items-center gap-3 border-b pb-4 pl-[var(--mb-sheet-gutter)] pr-[var(--mb-sheet-gutter)] pt-5\"\n              style={{\n                background:\n                  'color-mix(in srgb, var(--mb-surface) 82%, transparent)',\n                borderColor: 'var(--mb-border)',\n                backdropFilter: 'blur(16px) saturate(120%)',\n                WebkitBackdropFilter: 'blur(16px) saturate(120%)',\n              }}\n            >\n              {onBack && (\n                <button\n                  type=\"button\"\n                  onClick={onBack}\n                  aria-label=\"Back\"\n                  className=\"flex size-9 shrink-0 items-center justify-center rounded-full\"\n                  style={{ background: 'var(--mb-elevated)' }}\n                >\n                  <ArrowLeft\n                    className=\"size-4\"\n                    style={{ color: 'var(--mb-text)' }}\n                  />\n                </button>\n              )}\n              <h1\n                className=\"min-w-0 flex-1 truncate whitespace-nowrap font-bold leading-[1.1] tracking-tight\"\n                style={{\n                  fontSize: 'var(--mb-title-size)',\n                  color: 'var(--mb-text)',\n                }}\n              >\n                {title}\n              </h1>\n              {actions && (\n                <div className=\"flex shrink-0 items-center gap-2\">\n                  {actions}\n                </div>\n              )}\n            </header>\n          )}\n          {/* A fill screen (the editor) sizes itself to the sheet, so every box\n              between the sheet and it has to pass the height down. This one was\n              a plain block with no height, which left the editor nothing to\n              fill and collapsed its canvas to the iframe's 150px default. */}\n          <div\n            className={\n              fillContent\n                ? 'flex min-h-0 flex-1 flex-col'\n                : title\n                  ? 'pt-6'\n                  : undefined\n            }\n          >\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/mobile/primitives/status-chip.d.ts

@@ -0,0 +1,42 @@
+import type { OrderStatus } from '@withpotter/lib/api/types';
+import type { OrderDisplay } from '@withpotter/lib/intents/types';
+export interface MobileTone {
+    fg: string;
+    bg: string;
+    border: string;
+    chipBg: string;
+    chipBorder: string;
+}
+/**
+ * Every tone from one value.
+ *
+ * Three of the six hues were tokens and three were literals, and each hue
+ * repeated its colour five times over — the solid plus four alphas typed as
+ * separate rgba(). Thirty numbers where there are six decisions. `color-mix`
+ * derives the alphas, so a hue is now one token and changing it changes the
+ * chip, the border and the ground with it.
+ *
+ * Shared rather than private to the order detail screen, because the orders
+ * LIST had its own map of four hues and seven hardcoded labels beside it. The
+ * two disagreed: an order the detail screen called "Ready for Pickup" in purple
+ * the list called "Checked in" in green. One map, one vocabulary.
+ *
+ * Mobile keys on the archetype's `statusColors` on purpose, where the desktop
+ * table neutralises it — see the note on `--mb-seen` and `--mb-waiting` in
+ * globals.css. Purple is "seen but not acted on" and orange is "waiting on
+ * someone else", and the four semantic slots cannot make those distinctions.
+ */
+export declare const MOBILE_TONE_BY_COLOR: Record<string, MobileTone>;
+/** The hue this business gives a status, falling back the way the tone map does. */
+export declare function mobileToneForStatus(status: OrderStatus, orderDisplay?: OrderDisplay): MobileTone;
+/**
+ * An order's status, in this business's words.
+ *
+ * The label resolves through the same `resolveOrderStatusLabel` the desktop
+ * table and the mobile detail screen use, so a kitchen reads "Preparing" and
+ * "Ready for Pickup" rather than the platform's "Processing" and "Checked in".
+ */
+export declare function MobileStatusChip({ status, orderDisplay, }: {
+    status: OrderStatus;
+    orderDisplay?: OrderDisplay;
+}): import("react").JSX.Element;

package/dist/mobile/primitives/status-chip.js

@@ -0,0 +1,78 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { resolveOrderStatusLabel } from "@withpotter/lib/intents/order-display";
+const MOBILE_TONE_BY_COLOR = {
+  green: {
+    fg: "var(--mb-good)",
+    bg: "color-mix(in srgb, var(--mb-good) 8%, transparent)",
+    border: "color-mix(in srgb, var(--mb-good) 28%, transparent)",
+    chipBg: "color-mix(in srgb, var(--mb-good) 10%, transparent)",
+    chipBorder: "color-mix(in srgb, var(--mb-good) 35%, transparent)"
+  },
+  yellow: {
+    fg: "var(--mb-warn)",
+    bg: "color-mix(in srgb, var(--mb-warn) 8%, transparent)",
+    border: "color-mix(in srgb, var(--mb-warn) 28%, transparent)",
+    chipBg: "color-mix(in srgb, var(--mb-warn) 10%, transparent)",
+    chipBorder: "color-mix(in srgb, var(--mb-warn) 35%, transparent)"
+  },
+  blue: {
+    fg: "var(--mb-accent)",
+    bg: "color-mix(in srgb, var(--mb-accent) 8%, transparent)",
+    border: "color-mix(in srgb, var(--mb-accent) 28%, transparent)",
+    chipBg: "color-mix(in srgb, var(--mb-accent) 10%, transparent)",
+    chipBorder: "color-mix(in srgb, var(--mb-accent) 35%, transparent)"
+  },
+  purple: {
+    fg: "var(--mb-seen)",
+    bg: "color-mix(in srgb, var(--mb-seen) 8%, transparent)",
+    border: "color-mix(in srgb, var(--mb-seen) 28%, transparent)",
+    chipBg: "color-mix(in srgb, var(--mb-seen) 10%, transparent)",
+    chipBorder: "color-mix(in srgb, var(--mb-seen) 35%, transparent)"
+  },
+  orange: {
+    fg: "var(--mb-waiting)",
+    bg: "color-mix(in srgb, var(--mb-waiting) 8%, transparent)",
+    border: "color-mix(in srgb, var(--mb-waiting) 28%, transparent)",
+    chipBg: "color-mix(in srgb, var(--mb-waiting) 10%, transparent)",
+    chipBorder: "color-mix(in srgb, var(--mb-waiting) 35%, transparent)"
+  },
+  red: {
+    fg: "var(--mb-bad)",
+    bg: "color-mix(in srgb, var(--mb-bad) 8%, transparent)",
+    border: "color-mix(in srgb, var(--mb-bad) 28%, transparent)",
+    chipBg: "color-mix(in srgb, var(--mb-bad) 10%, transparent)",
+    chipBorder: "color-mix(in srgb, var(--mb-bad) 35%, transparent)"
+  },
+  gray: {
+    fg: "var(--mb-text-secondary)",
+    bg: "var(--mb-elevated)",
+    border: "var(--mb-border)",
+    chipBg: "var(--mb-elevated)",
+    chipBorder: "var(--mb-border)"
+  }
+};
+function mobileToneForStatus(status, orderDisplay) {
+  const key = orderDisplay?.statusColors?.[status] ?? "yellow";
+  return MOBILE_TONE_BY_COLOR[key] ?? MOBILE_TONE_BY_COLOR.yellow;
+}
+function MobileStatusChip({
+  status,
+  orderDisplay
+}) {
+  const tone = mobileToneForStatus(status, orderDisplay);
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "shrink-0 rounded-full px-2 py-0.5 text-3xs font-medium",
+      style: { background: tone.chipBg, color: tone.fg },
+      children: resolveOrderStatusLabel(orderDisplay, status)
+    }
+  );
+}
+export {
+  MOBILE_TONE_BY_COLOR,
+  MobileStatusChip,
+  mobileToneForStatus
+};
+//# sourceMappingURL=status-chip.js.map

package/dist/mobile/primitives/status-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/mobile/primitives/status-chip.tsx"],"sourcesContent":["'use client';\n\nimport type { OrderStatus } from '@withpotter/lib/api/types';\nimport type { OrderDisplay } from '@withpotter/lib/intents/types';\nimport { resolveOrderStatusLabel } from '@withpotter/lib/intents/order-display';\n\nexport interface MobileTone {\n  fg: string;\n  bg: string;\n  border: string;\n  chipBg: string;\n  chipBorder: string;\n}\n\n/**\n * Every tone from one value.\n *\n * Three of the six hues were tokens and three were literals, and each hue\n * repeated its colour five times over — the solid plus four alphas typed as\n * separate rgba(). Thirty numbers where there are six decisions. `color-mix`\n * derives the alphas, so a hue is now one token and changing it changes the\n * chip, the border and the ground with it.\n *\n * Shared rather than private to the order detail screen, because the orders\n * LIST had its own map of four hues and seven hardcoded labels beside it. The\n * two disagreed: an order the detail screen called \"Ready for Pickup\" in purple\n * the list called \"Checked in\" in green. One map, one vocabulary.\n *\n * Mobile keys on the archetype's `statusColors` on purpose, where the desktop\n * table neutralises it — see the note on `--mb-seen` and `--mb-waiting` in\n * globals.css. Purple is \"seen but not acted on\" and orange is \"waiting on\n * someone else\", and the four semantic slots cannot make those distinctions.\n */\nexport const MOBILE_TONE_BY_COLOR: Record<string, MobileTone> = {\n  green: {\n    fg: 'var(--mb-good)',\n    bg: 'color-mix(in srgb, var(--mb-good) 8%, transparent)',\n    border: 'color-mix(in srgb, var(--mb-good) 28%, transparent)',\n    chipBg: 'color-mix(in srgb, var(--mb-good) 10%, transparent)',\n    chipBorder: 'color-mix(in srgb, var(--mb-good) 35%, transparent)',\n  },\n  yellow: {\n    fg: 'var(--mb-warn)',\n    bg: 'color-mix(in srgb, var(--mb-warn) 8%, transparent)',\n    border: 'color-mix(in srgb, var(--mb-warn) 28%, transparent)',\n    chipBg: 'color-mix(in srgb, var(--mb-warn) 10%, transparent)',\n    chipBorder: 'color-mix(in srgb, var(--mb-warn) 35%, transparent)',\n  },\n  blue: {\n    fg: 'var(--mb-accent)',\n    bg: 'color-mix(in srgb, var(--mb-accent) 8%, transparent)',\n    border: 'color-mix(in srgb, var(--mb-accent) 28%, transparent)',\n    chipBg: 'color-mix(in srgb, var(--mb-accent) 10%, transparent)',\n    chipBorder: 'color-mix(in srgb, var(--mb-accent) 35%, transparent)',\n  },\n  purple: {\n    fg: 'var(--mb-seen)',\n    bg: 'color-mix(in srgb, var(--mb-seen) 8%, transparent)',\n    border: 'color-mix(in srgb, var(--mb-seen) 28%, transparent)',\n    chipBg: 'color-mix(in srgb, var(--mb-seen) 10%, transparent)',\n    chipBorder: 'color-mix(in srgb, var(--mb-seen) 35%, transparent)',\n  },\n  orange: {\n    fg: 'var(--mb-waiting)',\n    bg: 'color-mix(in srgb, var(--mb-waiting) 8%, transparent)',\n    border: 'color-mix(in srgb, var(--mb-waiting) 28%, transparent)',\n    chipBg: 'color-mix(in srgb, var(--mb-waiting) 10%, transparent)',\n    chipBorder: 'color-mix(in srgb, var(--mb-waiting) 35%, transparent)',\n  },\n  red: {\n    fg: 'var(--mb-bad)',\n    bg: 'color-mix(in srgb, var(--mb-bad) 8%, transparent)',\n    border: 'color-mix(in srgb, var(--mb-bad) 28%, transparent)',\n    chipBg: 'color-mix(in srgb, var(--mb-bad) 10%, transparent)',\n    chipBorder: 'color-mix(in srgb, var(--mb-bad) 35%, transparent)',\n  },\n  gray: {\n    fg: 'var(--mb-text-secondary)',\n    bg: 'var(--mb-elevated)',\n    border: 'var(--mb-border)',\n    chipBg: 'var(--mb-elevated)',\n    chipBorder: 'var(--mb-border)',\n  },\n};\n\n/** The hue this business gives a status, falling back the way the tone map does. */\nexport function mobileToneForStatus(\n  status: OrderStatus,\n  orderDisplay?: OrderDisplay,\n): MobileTone {\n  const key = orderDisplay?.statusColors?.[status] ?? 'yellow';\n  return MOBILE_TONE_BY_COLOR[key] ?? MOBILE_TONE_BY_COLOR.yellow;\n}\n\n/**\n * An order's status, in this business's words.\n *\n * The label resolves through the same `resolveOrderStatusLabel` the desktop\n * table and the mobile detail screen use, so a kitchen reads \"Preparing\" and\n * \"Ready for Pickup\" rather than the platform's \"Processing\" and \"Checked in\".\n */\nexport function MobileStatusChip({\n  status,\n  orderDisplay,\n}: {\n  status: OrderStatus;\n  orderDisplay?: OrderDisplay;\n}) {\n  const tone = mobileToneForStatus(status, orderDisplay);\n  return (\n    <span\n      className=\"shrink-0 rounded-full px-2 py-0.5 text-3xs font-medium\"\n      style={{ background: tone.chipBg, color: tone.fg }}\n    >\n      {resolveOrderStatusLabel(orderDisplay, status)}\n    </span>\n  );\n}\n"],"mappings":";AA8GI;AA1GJ,SAAS,+BAA+B;AA6BjC,MAAM,uBAAmD;AAAA,EAC9D,OAAO;AAAA,IACL,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,KAAK;AAAA,IACH,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AAAA,EACA,MAAM;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,QAAQ;AAAA,IACR,QAAQ;AAAA,IACR,YAAY;AAAA,EACd;AACF;AAGO,SAAS,oBACd,QACA,cACY;AACZ,QAAM,MAAM,cAAc,eAAe,MAAM,KAAK;AACpD,SAAO,qBAAqB,GAAG,KAAK,qBAAqB;AAC3D;AASO,SAAS,iBAAiB;AAAA,EAC/B;AAAA,EACA;AACF,GAGG;AACD,QAAM,OAAO,oBAAoB,QAAQ,YAAY;AACrD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,OAAO,EAAE,YAAY,KAAK,QAAQ,OAAO,KAAK,GAAG;AAAA,MAEhD,kCAAwB,cAAc,MAAM;AAAA;AAAA,EAC/C;AAEJ;","names":[]}