@sableui/react 0.6.2 → 0.7.1

package/skills/sable/SKILL.md

@@ -9,6 +9,33 @@ Build the user's idea with the installed Sable library. The product brief determ
 content, structure, and behavior; a preset supplies theme values and design guidance.
 References inform an original direction. A reference or preset is optional.
 
+## Finish checklist — before you call any build, repair, or polish done
+
+1. Run `sable check <source paths>` (default `src`). It runs `sable doctor`,
+   `sable lint`, and `sable grade` and exits 1 if any fails. Repair the findings
+   instead of suppressing them, then run it again until it passes. Also run the
+   project's own build and type checks.
+2. Review the rendered design: `sable docs reviewing-a-design`. Capture desktop and
+   mobile in every promised colour mode, and judge brief fit, composition,
+   hierarchy, rhythm, and imagery.
+3. Walk the journey: `sable docs reviewing-a-journey`. Operate the primary task and
+   its recovery path with keyboard and touch through loading, empty, error, and
+   success states.
+4. Review the motion: `sable docs reviewing-motion`. Observe playback and
+   interruption for anything that moves.
+5. Check reduced motion: with `prefers-reduced-motion` (or MotionProvider
+   `"reduced"`), state still changes and nothing keeps moving.
+6. Write the reuse inventory: the Sable components, parts, utilities, and token
+   groups used, and every app-owned UI or CSS addition with the catalog search
+   that justified it. Start from the app-owned surfaces `sable check` lists:
+   each one composes the component named beside it, or the inventory says why
+   the app owns it.
+7. Record what you learned: `sable docs learning-from-builds`. Keep conditional
+   lessons with evidence; never fabricate human approval or preference records.
+
+Steps 2–7 are what no tool can verify; `sable check` prints them after its
+results. A passing check is a contract result, not design approval.
+
 ## Route the request
 
 These are agent skill modes, not shell commands. Use `$sable` in Codex and
@@ -53,7 +80,7 @@ Start in the target app, not this skill's folder. Read project instructions. Res
 node -p "require.resolve('@sableui/react/registry.json')"
 ```
 
-The registry's parent is the package root; read its `AGENTS.md` and use its
+The registry's parent is the package root; read its `AGENTS.md` (`sable docs AGENTS`) and use its
 `bin/sable.mjs`. In the Sable repository use `packages/sable/bin/sable.mjs` and
 `packages/sable/registry.json`. Below, `sable` means this resolved CLI invoked with
 the target project as its working directory. Never fetch an unrelated public
@@ -70,13 +97,24 @@ Complete setup before implementing UI:
 - Dedupe React in the bundler. Import Tailwind, then Sable's stylesheet; add the
   package `dist` glob to Tailwind `@source`, relative to the consumer stylesheet.
 - Load the selected fonts through the project's font setup. Presets declare stacks;
-  they do not load files. Reicon works by default; IconProvider can replace or extend the set.
+  they do not load files.
+- Icons are opt-in: wrap the app once in `<IconProvider set={reiconIconSet}>` with
+  `reiconIconSet` from `@sableui/react/icons/reicon`, or pass another set. Without a
+  provider every `<Icon>`, including those inside Sable components, renders nothing.
+  `sable provider IconProvider` has the props and examples; `sable provider --list`
+  covers the other providers (SableThemeProvider, MotionProvider, ToastProvider).
 - Run `sable doctor`, repair wiring issues, and verify the app renders a real
   Sable component. Reuse an existing app server; never start duplicate instances.
 
 Run `sable setup --agent` once from the project root to install discoverable entry
 files for Codex/Cursor and Claude Code. `--target codex|claude|cursor|all` selects
-hosts. The entry files read this installed package's instructions on each task;
+hosts. For Claude Code, setup also prints a Stop hook that runs `sable check`
+before a task can end; it writes that hook to `.claude/settings.json` only with
+`--hook`, so add it only when the user wants it. The hook is one plain command
+(for example `pnpm exec sable check --stop-hook`) with no `cd` or `&&`, so it runs
+under Git Bash and PowerShell alike; `sable check --stop-hook` finds the project
+through Claude Code's `CLAUDE_PROJECT_DIR`, plus `--root` for a workspace package.
+The entry files read this installed package's instructions on each task;
 upgrading the package updates the workflow. After an upgrade, use
 `sable setup --agent --update` to refresh managed entry metadata when needed.
 Keep project-specific preferences in project instructions rather than editing
@@ -119,12 +157,21 @@ The installed catalog and guides are authoritative for API and token names.
 ## Develop or use a preset
 
 Save a short brief in the project's existing design location: audience, primary
-task, content, constraints, selected identity, and meaningful states. Label invented
-sample content. A supplied preset is an explicit input: read its exact record and
+task, content, constraints, selected identity, and meaningful states, plus each
+route's width (a Region `max`, or fluid) and why, chosen by what the person does
+there (`sable docs building-a-page`). Label invented sample content. A supplied preset is an explicit input: read its exact record and
 revision, validate it through `sable preset --check <path> --json`, and read
 `sable docs using-presets`. Preserve its tokens and guidance unless the user requests
 a change or the new task requires a documented adaptation.
 
+A preset pasted or supplied for a project that already has an app (for example
+from Canvas's “Copy for agent”) is a request to restyle that app, so it is
+`polish`: save and check it, then apply it. Generate its CSS, load its fonts,
+make it SableThemeProvider's default theme and mode in place of the old one, run
+the build and the finish checklist, and look at it rendered. Don't stop at a saved
+file plus a list of wiring steps for the user. Stop after saving only when the
+user says so or the project has no app yet.
+
 Without a preset, develop an appropriate direction from the brief. Use the bundled
 presets as starting points or create original app-owned tokens. When the project has
 its own visual atlas, retrieve references with `sable atlas --search "<problem>"
@@ -166,24 +213,20 @@ contract violations, design judgments, intentional choices, and verified library
 gaps. A visual-only review leaves code and unobserved behavior untested. For
 `polish`, reuse the existing direction and inspect the affected product or preset.
 
-Every build includes `sable docs reviewing-a-design`, `sable doctor`,
-`sable lint <source paths> --json`, and the project's build/type checks. Repair
-findings instead of suppressing them to finish. `label-contrast` is Sable's opinion
-on a user's colour: offer its suggested pair, and when the user chose the pair
-deliberately, keep it with a reasoned disable or preset `exceptions` entry. Inspect real desktop/mobile
-layouts, operate the primary task and recovery path, check keyboard/touch and
-loading/empty/error/success states, font loading, focus, and reduced motion.
-Audit source ownership as well as lint: identify the Sable components and composed
-parts actually imported, the utilities/token groups used, and every app-owned UI
-or CSS addition. Ordinary semantic content and domain logic are app-owned; a
-recognizable control or surface must use its library implementation. Explain any
-uncovered capability with the catalog search and the smallest necessary addition.
-Include this reuse inventory with the build's evidence so conformance is reviewable.
-For connected flows read `reviewing-a-journey`; for meaningful temporal behavior
-read `reviewing-motion` and observe interruption as well as playback.
+Every build ends with the finish checklist at the top of this skill. Notes on it:
+
+- `sable check` gives one combined result; while iterating, `sable lint <paths> --json`,
+  `sable doctor`, and `sable grade <paths>` run the parts separately.
+- `label-contrast` is Sable's opinion on a user's colour: offer its suggested pair,
+  and when the user chose the pair deliberately, keep it with a reasoned disable or
+  preset `exceptions` entry.
+- Besides the review guides, check font loading and focus in the rendered app.
+- In the reuse inventory, ordinary semantic content and domain logic are
+  app-owned; a recognizable control or surface must use its library
+  implementation. Explain any uncovered capability with the catalog search and
+  the smallest necessary addition, and include the inventory with the build's
+  evidence so conformance is reviewable.
 
 Iterate on observed defects and recapture changed states. Contract checks cannot
-judge beauty: assess brief fit, composition, hierarchy, rhythm, imagery, and
-interaction in the rendered product. Deliver the result, preset/revision used,
-checks performed, and material limitations. Preserve useful conditional lessons
-through `learning-from-builds`; never fabricate human approval or preference records.
+judge beauty. Deliver the result, the preset/revision used, the checks performed,
+and material limitations.

package/targets/ios.json

@@ -389,6 +389,15 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "DisclosurePicker": {
+      "source": "DisclosurePicker",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "DisclosurePicker"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "EmptyState": {
       "source": "EmptyState",
       "strategy": "preserve",
@@ -435,6 +444,15 @@
       ],
       "guidance": "Drag and drop is not a phone interaction. Pick files with a Sable Button; show them as Attachments."
     },
+    "FontPicker": {
+      "source": "FontPicker",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "FontPicker"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Form": {
       "source": "Form",
       "strategy": "preserve",
@@ -525,6 +543,24 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "MediaImage": {
+      "source": "MediaImage",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "MediaImage"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
+    "MediaTile": {
+      "source": "MediaTile",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "MediaTile"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "Menu": {
       "source": "Menu",
       "strategy": "preserve",
@@ -787,6 +823,15 @@
       ],
       "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
     },
+    "SectionHeader": {
+      "source": "SectionHeader",
+      "strategy": "preserve",
+      "importFrom": "@sableui/react",
+      "components": [
+        "SectionHeader"
+      ],
+      "guidance": "Use the Sable component as it is, in the preset. Adapt layout and touch targets to the phone; do not swap in a native lookalike or restyle it."
+    },
     "SegmentedBar": {
       "source": "SegmentedBar",
       "strategy": "preserve",

package/dist/chunk-3IWZYBGH.js

@@ -1,398 +0,0 @@
-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 };

package/dist/chunk-7MG4SHYX.js

@@ -1,15 +0,0 @@
-// src/themes/prism/index.ts
-var prismTheme = {
-  id: "prism",
-  label: "Prism",
-  modes: ["light", "dark"],
-  defaultMode: "light",
-  fonts: {
-    sans: '"Outfit", ui-sans-serif, system-ui, sans-serif',
-    mono: '"Roboto Mono", ui-monospace, monospace',
-    display: '"Playfair Display", ui-serif, Georgia, serif'
-  }
-};
-var prism_default = prismTheme;
-
-export { prismTheme, prism_default };