@sableui/react 0.0.0-stage → 0.1.0

package/dist/_contract-CYScOdf5.d.ts

@@ -0,0 +1,150 @@
+/**
+ * The theme contract. Every Sable theme MUST define a value (light + dark) for
+ * each semantic token below. Components reference ONLY these semantic roles —
+ * never a theme's internal palette steps — which is what makes the system
+ * re-themeable without touching component code.
+ *
+ * To author a new theme: copy `themes/base/`, keep these token names, and
+ * supply your own palette + values. See CONTRIBUTING.md → "Theme contract".
+ */
+declare const SEMANTIC_TOKENS: readonly ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "muted", "muted-foreground", "border", "border-strong", "input", "ring", "primary", "primary-foreground", "secondary", "secondary-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "success", "success-foreground", "tone-standard", "tone-collectible", "tone-edition", "tone-info", "tone-warning", "highlight", "tone-standard-foreground", "tone-collectible-foreground", "tone-edition-foreground", "tone-info-foreground", "tone-warning-foreground", "highlight-foreground", "overlay", "overlay-foreground", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
+type SemanticToken = (typeof SEMANTIC_TOKENS)[number];
+/**
+ * Motion tokens (mode-independent). A theme MAY override these to retune its
+ * motion feel; if omitted, the Base defaults apply. Components reference
+ * them via `duration-(--motion-duration-*)` + the `ease-*` utilities, or — far
+ * more often — via the named motion recipes (`motion-pop`, `motion-press`, …)
+ * defined in styles.css. Every duration is multiplied by `--motion-scale`, the
+ * single lever the reduced-motion policy and <MotionProvider> collapse to 0.
+ * See DESIGN.md → Motion.
+ */
+declare const MOTION_TOKENS: readonly ["motion-scale", "motion-duration-instant", "motion-duration-fast", "motion-duration-base", "motion-duration-slow", "motion-duration-slower", "motion-duration-enter", "motion-duration-exit", "motion-ease-standard", "motion-ease-decelerate", "motion-ease-emphasized", "motion-ease-spring", "motion-ease-bounce", "motion-ease-linear"];
+type MotionToken = (typeof MOTION_TOKENS)[number];
+/**
+ * Radius tokens (mode-independent). A theme MAY override these to retune its
+ * shape language (soft-square, rectilinear, full-pill, …); if omitted, the
+ * Base defaults apply (see styles.css → `@theme inline`, which bridges
+ * each `--theme-radius-*` var to the `radius-*` Tailwind scale). Components
+ * never reference these directly — they use the derived `rounded-*`
+ * utilities.
+ */
+declare const RADIUS_TOKENS: readonly ["theme-radius-none", "theme-radius-xs", "theme-radius-sm", "theme-radius-md", "theme-radius-lg", "theme-radius-xl", "theme-radius-full"];
+type RadiusToken = (typeof RADIUS_TOKENS)[number];
+/**
+ * Type-scale tokens (mode-independent). A theme MAY override these to retune
+ * its typographic voice (weight, leading, tracking, and — for heading/display
+ * tiers — size); if omitted, the Base defaults baked into styles.css's
+ * paired `text-*` utilities apply. Additional body/label/caption/mono and size
+ * hooks are advertised separately in TYPE_REFINEMENT_TOKENS: they are optional,
+ * so a theme can retune its reading voice without duplicating every default.
+ */
+declare const TYPE_SCALE_TOKENS: readonly ["type-display-4xl-weight", "type-display-4xl-leading", "type-display-4xl-tracking", "type-display-3xl-size", "type-display-3xl-weight", "type-display-3xl-leading", "type-display-3xl-tracking", "type-display-2xl-size", "type-display-2xl-weight", "type-display-2xl-leading", "type-display-2xl-tracking", "type-display-xl-size", "type-display-xl-weight", "type-display-xl-leading", "type-display-xl-tracking", "type-display-lg-size", "type-display-lg-weight", "type-display-lg-leading", "type-display-lg-tracking", "type-heading-weight", "type-heading-1-size", "type-heading-1-leading", "type-heading-1-tracking", "type-heading-2-size", "type-heading-2-leading", "type-heading-2-tracking", "type-heading-3-size", "type-heading-3-leading", "type-heading-3-tracking", "type-heading-4-size", "type-heading-4-leading", "type-heading-4-tracking", "type-title-weight", "type-title-leading", "type-title-tracking", "type-title-sm-tracking"];
+type TypeScaleToken = (typeof TYPE_SCALE_TOKENS)[number];
+/**
+ * Optional art-direction overrides for the paired typography utilities.
+ * Every hook has a CSS fallback; existing themes need not declare any of these.
+ * Set them at a theme or region scope, then keep consuming whole `text-*` tiers.
+ * Compact controls still follow TYPE_UI_TOKENS for the workspace register.
+ */
+declare const TYPE_REFINEMENT_TOKENS: readonly ["type-display-4xl-size", "type-title-lg-size", "type-title-sm-size", "type-body-lg-size", "type-body-lg-weight", "type-body-lg-leading", "type-body-lg-tracking", "type-body-md-size", "type-body-md-weight", "type-body-md-leading", "type-body-md-tracking", "type-body-sm-size", "type-body-sm-weight", "type-body-sm-leading", "type-body-sm-tracking", "type-body-xs-size", "type-body-xs-weight", "type-body-xs-leading", "type-body-xs-tracking", "type-label-lg-size", "type-label-lg-weight", "type-label-lg-leading", "type-label-lg-tracking", "type-label-md-size", "type-label-md-weight", "type-label-md-leading", "type-label-md-tracking", "type-label-sm-size", "type-label-sm-weight", "type-label-sm-leading", "type-label-sm-tracking", "type-label-xs-size", "type-label-xs-weight", "type-label-xs-leading", "type-label-xs-tracking", "type-label-xs-transform", "type-caption-size", "type-caption-weight", "type-caption-leading", "type-caption-tracking", "type-mono-xl-size", "type-mono-xl-weight", "type-mono-xl-leading", "type-mono-xl-tracking", "type-mono-lg-size", "type-mono-lg-weight", "type-mono-lg-leading", "type-mono-lg-tracking", "type-mono-md-size", "type-mono-md-weight", "type-mono-md-leading", "type-mono-md-tracking", "type-mono-caption-size", "type-mono-caption-weight", "type-mono-caption-leading", "type-mono-caption-tracking", "type-mono-sm-size", "type-mono-sm-weight", "type-mono-sm-leading", "type-mono-sm-tracking"];
+type TypeRefinementToken = (typeof TYPE_REFINEMENT_TOKENS)[number];
+/**
+ * Overline/eyebrow/kicker type tokens (mode-independent). A theme MAY override
+ * these to retune its annotation voice; if omitted, styles.css's fallback
+ * defaults apply. Covers the small, uppercase, letter-spaced text role used
+ * for badge labels, section eyebrows, and stat captions — a distinct
+ * typographic tier from `TYPE_SCALE_TOKENS`'s display/heading/title ramp.
+ * `type-overline-transform` is themeable (not hardcoded `uppercase`) so a
+ * theme can opt a reference's quieter eyebrow style out of all-caps.
+ */
+declare const TYPE_OVERLINE_TOKENS: readonly ["type-overline-size", "type-overline-weight", "type-overline-leading", "type-overline-tracking", "type-overline-transform"];
+type TypeOverlineToken = (typeof TYPE_OVERLINE_TOKENS)[number];
+/**
+ * Density tokens (mode-independent) — the control ladder every sized component
+ * renders from.
+ *
+ * This is the mechanism behind the two REGISTERS (see DESIGN.md → Registers).
+ * Components never hardcode a height; they read `--control-*`. A density scope
+ * (`data-density="compact"`) redefines those vars, so the same `size="md"`
+ * Button is 40px in the page register and 32px in a tool panel — without any
+ * selector reaching into rendered output to override a height after the fact.
+ *
+ * Values are set by `styles.css`; a theme MAY override them to retune its own
+ * control rhythm, the same as MOTION_TOKENS and RADIUS_TOKENS.
+ *
+ * The compact values are measured, not invented: the Figma and Paper editors
+ * run their chrome at 24/28/32/36 with a ~40px numeric field. See DESIGN.md →
+ * Registers for the full audit.
+ */
+declare const DENSITY_TOKENS: readonly ["control-xs", "control-sm", "control-md", "control-cta", "control-lg", "field-numeric-width", "panel-width", "panel-width-min", "panel-width-max", "chrome-bar-height", "status-bar-height", "button-radius", "control-gap", "item-px", "item-gap", "tree-rail", "tree-column", "tree-indent"];
+type DensityToken = (typeof DENSITY_TOKENS)[number];
+/**
+ * Workspace surface tokens (light + dark) — the surface roles a tool shell needs
+ * that the page register has no use for.
+ *
+ * OPTIONAL: `styles.css` derives every one of these from the theme's existing
+ * semantic tokens, so a theme inherits a sane workspace band for free and only
+ * declares `--theme-*` overrides where it wants to tune. That's deliberate —
+ * requiring five hand-authored values per mode per theme would have been ten
+ * times the work for values that derive cleanly.
+ *
+ * Why these exist at all, rather than reusing `background`/`card`:
+ * - `canvas` is the WORK surface (the artboard). It is not `background`, because
+ *   the thing being edited is not the page behind the UI.
+ * - `panel` / `panel-raised` are docked chrome, and they sit in a deliberately
+ *   COMPRESSED tonal band — Paper's whole ladder spans 249→242→238, about 3-7
+ *   RGB units, with a low-contrast hairline doing the structural work. `card` is
+ *   tuned for the opposite job (lifting content off a page).
+ * - `hairline` / `hairline-strong` are that structural edge. In this register
+ *   hairlines carry structure INSTEAD of tonal steps — a deliberate reversal of
+ *   the page register's "prefer a tonal step or space over a divider line".
+ */
+declare const WORKSPACE_SURFACE_TOKENS: readonly ["canvas", "canvas-foreground", "panel", "panel-foreground", "panel-raised", "hairline", "hairline-strong"];
+type WorkspaceSurfaceToken = (typeof WORKSPACE_SURFACE_TOKENS)[number];
+/**
+ * UI type tiers (mode-independent) — the chrome typography register.
+ *
+ * A separate ramp from TYPE_SCALE_TOKENS on purpose. Tool chrome runs 10-12px at
+ * weight 450-550 (measured: Figma 11/400 and 11/550, Paper 12/500 and 12/465),
+ * where the page register's 14-16px at 400/600 reads as shouting. `ui-num` is
+ * tabular so a column of values doesn't dance while a slider drags.
+ *
+ * These back the paired `text-ui-*` utilities in styles.css. Like every other
+ * paired tier they must be registered in `lib/cn.ts`'s `ds-typography` group —
+ * an unrecognised `text-*` class falls into tailwind-merge's COLOUR group and
+ * silently evicts the real colour class, which is a genuinely hard bug to see.
+ */
+declare const TYPE_UI_TOKENS: readonly ["type-ui-md-size", "type-ui-md-weight", "type-ui-sm-size", "type-ui-sm-weight", "type-ui-leading", "type-ui-section-weight", "type-ui-micro-size", "type-ui-micro-weight"];
+type TypeUiToken = (typeof TYPE_UI_TOKENS)[number];
+type ThemeMode = "light" | "dark";
+/** Lightweight, typed description of a theme (the TS manifest each theme ships). */
+interface ThemeManifest {
+    /** Retained for existing imports; omitted from the featured preset picker. */
+    deprecated?: {
+        replacement: string;
+    };
+    /** Stable id, e.g. "verdant". */
+    id: string;
+    /** Human label, e.g. "Verdant". */
+    label: string;
+    /** Modes this theme supports. */
+    modes: ThemeMode[];
+    /** Mode used when none is specified. */
+    defaultMode: ThemeMode;
+    /**
+     * Font stacks the theme expects the host app to provide.
+     * `display` is optional — a distinct display/heading typeface separate from
+     * `sans` (e.g. a reference that uses a headline face like "Chalet" for
+     * display/heading type but a different sans for body). When omitted, the
+     * `text-display-*`/`text-heading-*` utilities in styles.css fall back to
+     * `--font-sans` via `var(--font-display, var(--font-sans))` — a theme that
+     * doesn't set it renders identically to today.
+     */
+    fonts: {
+        sans: string;
+        mono: string;
+        display?: string;
+    };
+}
+
+export { DENSITY_TOKENS as D, MOTION_TOKENS as M, RADIUS_TOKENS as R, SEMANTIC_TOKENS as S, type ThemeManifest as T, WORKSPACE_SURFACE_TOKENS as W, type ThemeMode as a, type DensityToken as b, type MotionToken as c, type RadiusToken as d, type SemanticToken as e, TYPE_OVERLINE_TOKENS as f, TYPE_REFINEMENT_TOKENS as g, TYPE_SCALE_TOKENS as h, TYPE_UI_TOKENS as i, type TypeOverlineToken as j, type TypeRefinementToken as k, type TypeScaleToken as l, type TypeUiToken as m, type WorkspaceSurfaceToken as n };

package/dist/chunk-3IWZYBGH.js

@@ -0,0 +1,398 @@
+import { cn } from './chunk-SRQWQUTW.js';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/layout/_safeArea.ts
+var EDGE_PROP = {
+  top: "paddingTop",
+  bottom: "paddingBottom",
+  left: "paddingLeft",
+  right: "paddingRight"
+};
+function safeAreaInsets(edges) {
+  const out = {};
+  for (const edge of edges) {
+    out[EDGE_PROP[edge]] = `env(safe-area-inset-${edge}, 0px)`;
+  }
+  return out;
+}
+var NAMED_MAX = {
+  prose: "var(--measure-prose)",
+  form: "var(--region-form)",
+  feed: "var(--region-feed)",
+  content: "var(--region-content)",
+  wide: "var(--region-wide)",
+  full: "var(--region-full)",
+  ultrawide: "var(--region-ultrawide)"
+};
+function Region({
+  as,
+  inset = true,
+  max,
+  bleed = false,
+  safeArea = false,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const Comp = as ?? "div";
+  const maxWidth = max ? NAMED_MAX[max] ?? max : void 0;
+  const safeEdges = safeArea === true ? ["top", "bottom"] : Array.isArray(safeArea) ? safeArea : [];
+  const mergedStyle = {
+    ...maxWidth ? { maxWidth, marginInline: "auto" } : null,
+    ...!bleed && inset ? { paddingInline: "var(--page-inset)" } : null,
+    ...safeAreaInsets(safeEdges),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(Comp, { ref, className: cn("w-full", className), style: mergedStyle, ...rest, children });
+}
+var ALIGN = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch"
+};
+var JUSTIFY = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function resolveGap(gap) {
+  return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
+}
+function Stack({
+  gap = 2,
+  align = "stretch",
+  justify = "start",
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const mergedStyle = {
+    display: "flex",
+    flexDirection: "column",
+    alignItems: ALIGN[align],
+    justifyContent: JUSTIFY[justify],
+    gap: resolveGap(gap),
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+}
+function Page({ gap = 4, align, children, ...regionProps }) {
+  return /* @__PURE__ */ jsx(Region, { ...regionProps, children: /* @__PURE__ */ jsx(Stack, { gap, align, children }) });
+}
+Page.displayName = "Page";
+
+// src/layout/_responsive.ts
+var BREAKPOINTS = ["base", "sm", "md", "lg", "xl", "2xl"];
+function responsiveVars(prefix, value) {
+  if (value === void 0) return {};
+  if (typeof value === "number") return { [`${prefix}-base`]: value };
+  const out = {};
+  for (const bp of BREAKPOINTS) {
+    const v = value[bp];
+    if (v != null) out[`${prefix}-${bp}`] = v;
+  }
+  return out;
+}
+function resolveGap2(gap) {
+  if (gap === void 0) return "var(--grid-gutter)";
+  if (typeof gap === "number") return `calc(var(--rhythm-unit) * ${gap})`;
+  return gap;
+}
+function Grid({
+  cols = 12,
+  minItemWidth,
+  gap,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  if (minItemWidth) {
+    const mergedStyle2 = {
+      display: "grid",
+      gridTemplateColumns: `repeat(auto-fit, minmax(min(${minItemWidth}, 100%), 1fr))`,
+      gap: resolveGap2(gap),
+      ...style
+    };
+    return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle2, ...rest, children });
+  }
+  const mergedStyle = {
+    gap: resolveGap2(gap),
+    ...responsiveVars("--cols", cols),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sable-grid-cols": true,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+function resolveGap3(gap) {
+  if (gap === void 0) return "var(--grid-gutter)";
+  if (typeof gap === "number") return `calc(var(--rhythm-unit) * ${gap})`;
+  return gap;
+}
+function cappedColumnGap(gap) {
+  return `min(${gap}, calc(75% / max(var(--cols, var(--grid-columns)) - 1, 1)))`;
+}
+function Columns({
+  count,
+  gap,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const resolvedGap = resolveGap3(gap);
+  const mergedStyle = {
+    rowGap: resolvedGap,
+    columnGap: cappedColumnGap(resolvedGap),
+    ...responsiveVars("--cols", count),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sable-grid-cols": true,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+function Col({
+  span = 1,
+  start,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const mergedStyle = {
+    ...responsiveVars("--col-span", span),
+    ...responsiveVars("--col-start", start),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      "data-sable-col": true,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+var ALIGN2 = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  baseline: "baseline"
+};
+var JUSTIFY2 = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  between: "space-between",
+  around: "space-around"
+};
+function resolveGap4(gap) {
+  return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
+}
+function Row({
+  gap = 2,
+  align = "center",
+  justify = "start",
+  wrap = false,
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  const mergedStyle = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: ALIGN2[align],
+    justifyContent: JUSTIFY2[justify],
+    flexWrap: wrap ? "wrap" : "nowrap",
+    gap: resolveGap4(gap),
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+}
+function Spacer({ size = 1, axis = "vertical", grow, className }) {
+  const style = grow ? { flex: "1 1 0%" } : axis === "vertical" ? { height: `calc(var(--rhythm-unit) * ${size})`, flexShrink: 0 } : { width: `calc(var(--rhythm-unit) * ${size})`, flexShrink: 0 };
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": true, className, style });
+}
+var NAMED_MAX2 = {
+  prose: "var(--measure-prose)",
+  feed: "var(--region-feed)",
+  wide: "var(--region-wide)",
+  ultrawide: "var(--region-ultrawide)"
+};
+function Center({ max, className, style, children, ref, ...rest }) {
+  const maxWidth = max ? NAMED_MAX2[max] ?? max : void 0;
+  const mergedStyle = {
+    marginInline: "auto",
+    ...maxWidth ? { maxWidth } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn("w-full", className), style: mergedStyle, ...rest, children });
+}
+function AspectBox({
+  ratio = 16 / 9,
+  className,
+  style,
+  children,
+  ...rest
+}) {
+  const mergedStyle = {
+    aspectRatio: String(ratio),
+    ...style
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("relative w-full overflow-hidden", className),
+      style: mergedStyle,
+      ...rest,
+      children
+    }
+  );
+}
+function Bleed({ className, style, children, ref, ...rest }) {
+  const mergedStyle = {
+    width: "100cqw",
+    marginInline: "calc(50% - 50cqw)",
+    ...style
+  };
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(className), style: mergedStyle, ...rest, children });
+}
+Bleed.displayName = "Bleed";
+function parseRatio(ratio) {
+  const [a, b] = ratio.split("/");
+  const pa = Number(a);
+  const pb = Number(b);
+  if (!Number.isFinite(pa) || pa <= 0 || !Number.isFinite(pb) || pb <= 0) {
+    return { primary: "1fr", secondary: "1fr" };
+  }
+  return { primary: `${pa}fr`, secondary: `${pb}fr` };
+}
+function resolveGap5(gap) {
+  if (gap === void 0) return void 0;
+  return typeof gap === "number" ? `calc(var(--rhythm-unit) * ${gap})` : gap;
+}
+function SplitPane({
+  primary,
+  secondary,
+  collapseBelow = "lg",
+  ratio = "1/1",
+  gap,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const { primary: p, secondary: s } = parseRatio(ratio);
+  const splitGap = resolveGap5(gap);
+  const mergedStyle = {
+    "--split-primary": p,
+    "--split-secondary": s,
+    ...splitGap ? { "--split-gap": splitGap } : null,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      "data-sable-split": true,
+      "data-collapse": collapseBelow,
+      className: cn(className),
+      style: mergedStyle,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: primary }),
+        /* @__PURE__ */ jsx("div", { className: "min-w-0", children: secondary })
+      ]
+    }
+  );
+}
+SplitPane.displayName = "SplitPane";
+function SafeArea({
+  edges = ["top", "bottom", "left", "right"],
+  className,
+  style,
+  children,
+  ref,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(className),
+      style: { ...safeAreaInsets(edges), ...style },
+      ...rest,
+      children
+    }
+  );
+}
+function GridOverlay({
+  columns = 12,
+  gap = "var(--grid-gutter)",
+  inset = true,
+  show = true,
+  className
+}) {
+  if (!show) return null;
+  const style = {
+    position: "absolute",
+    inset: 0,
+    display: "grid",
+    gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+    gap,
+    paddingInline: inset ? "var(--page-inset)" : void 0
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": true,
+      className: cn("pointer-events-none z-(--z-overlay)", className),
+      style,
+      children: Array.from({ length: columns }, (_, i) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            background: "color-mix(in oklab, var(--highlight) 9%, transparent)",
+            borderInline: "1px solid color-mix(in oklab, var(--highlight) 22%, transparent)"
+          }
+        },
+        i
+      ))
+    }
+  );
+}
+
+export { AspectBox, Bleed, Center, Col, Columns, Grid, GridOverlay, Page, Region, Row, SafeArea, Spacer, SplitPane, Stack };