@sableui/react 0.14.0 → 0.16.0

package/dist/index.js

@@ -18,6 +18,9 @@ import {
   DENSITY_TOKENS,
   RHYTHM_TOKENS,
   WORKSPACE_SURFACE_TOKENS,
+  FIELD_TOKENS,
+  APP_SHELL_TOKENS,
+  MARK_TOKENS,
   ART_TOKENS,
   PALETTE_TOKENS,
   TYPE_UI_TOKENS
@@ -44,6 +47,7 @@ export * from "./motion/index.js";
 export * from "./components/button/index.js";
 export * from "./components/button-group/index.js";
 export * from "./components/confirm-button/index.js";
+export * from "./components/like-button/index.js";
 export * from "./components/card/index.js";
 export * from "./components/caret-menu/index.js";
 export * from "./components/badge/index.js";
@@ -163,11 +167,13 @@ export * from "./components/chat-composer/index.js";
 export * from "./components/settings-menu/index.js";
 export * from "./components/message/index.js";
 export * from "./components/bubble/index.js";
+export * from "./components/reaction-picker/index.js";
 export * from "./components/attachment/index.js";
 export * from "./components/marker/index.js";
 import { Density, DensityProvider, useDensity, useAnchoredDensity, useTypeTier } from "./lib/density.js";
 import { PresentationProvider, usePresentation } from "./lib/presentation.js";
 import { useScrollActivity } from "./lib/use-scroll-activity.js";
+import { useMatchHighlight } from "./lib/use-match-highlight.js";
 import { useCopy } from "./lib/use-copy.js";
 import { useSmoothWheel } from "./lib/use-smooth-wheel.js";
 import {
@@ -175,8 +181,9 @@ import {
 } from "./lib/use-caret-trigger.js";
 import { STATUS_TONES, STATUS_TONE_ICON } from "./lib/status-tone.js";
 import { PALETTE_COLORS, PALETTE_FAMILIES, PALETTE_SCALES, PALETTE_STEPS, PALETTE_TONES, isPaletteColor } from "./lib/palette.js";
-var SABLE_UI_VERSION = "0.14.0";
+var SABLE_UI_VERSION = "0.16.0";
 export {
+  APP_SHELL_TOKENS,
   ART_TOKENS,
   CHART_SERIES_COUNT,
   COMPONENT_GROUPS,
@@ -185,6 +192,8 @@ export {
   DENSITY_TOKENS,
   Density,
   DensityProvider,
+  FIELD_TOKENS,
+  MARK_TOKENS,
   MOTION_TOKENS,
   PALETTE_COLORS,
   PALETTE_FAMILIES,
@@ -229,6 +238,7 @@ export {
   useCaretTrigger,
   useCopy,
   useDensity,
+  useMatchHighlight,
   usePresentation,
   useSableTheme,
   useScrollActivity,

package/dist/lib/chart/types.js

@@ -4,18 +4,18 @@ function chartColor(index) {
   return `var(--chart-${index % CHART_SERIES_COUNT + 1})`;
 }
 var TONE_VAR = {
-  "1": "var(--tone-1)",
-  "2": "var(--tone-2)",
-  "3": "var(--tone-3)",
-  info: "var(--tone-info)",
-  warning: "var(--tone-warning)",
+  "1": "var(--tone-1-mark)",
+  "2": "var(--tone-2-mark)",
+  "3": "var(--tone-3-mark)",
+  info: "var(--tone-info-mark)",
+  warning: "var(--tone-warning-mark)",
   primary: "var(--primary)",
   neutral: "var(--muted-foreground)",
-  success: "var(--success)",
-  destructive: "var(--destructive)"
+  success: "var(--success-mark)",
+  destructive: "var(--destructive-mark)"
 };
 function toneColor(tone) {
-  return `oklch(from ${TONE_VAR[tone]} clamp(0.5, calc(l + 0.1), 0.72) max(calc(c * 1.1), 0.1) h)`;
+  return `oklch(from ${TONE_VAR[tone]} clamp(0.5, l, 0.78) max(c, 0.1) h)`;
 }
 function resolveSeries(series) {
   return series.map((s, i) => ({

package/dist/lib/chart/use-arrival.js

@@ -25,13 +25,14 @@ function useArrival() {
       cancelAnimationFrame(frame);
       frame = requestAnimationFrame(() => onScreen() && setArrived(true));
     };
-    window.addEventListener("scroll", check, { passive: true, capture: true });
-    window.addEventListener("resize", check, { passive: true });
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    window.addEventListener("scroll", check, { passive: true, capture: true, signal });
+    window.addEventListener("resize", check, { passive: true, signal });
     return () => {
       observer.disconnect();
       cancelAnimationFrame(frame);
-      window.removeEventListener("scroll", check, { capture: true });
-      window.removeEventListener("resize", check);
+      listeners.abort();
     };
   }, [el, arrived]);
   return [ref, arrived];

package/dist/lib/field-shell.js

@@ -1,5 +1,5 @@
 // src/lib/field-shell.ts
-var FIELD_SHELL = "rounded-sm border border-input bg-card motion-interactive placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
+var FIELD_SHELL = "rounded-sm border border-field-border bg-field motion-interactive placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50";
 var MOBILE_FIELD_TIER = "max-sm:text-body-lg";
 var FIELD_INVALID = "aria-[invalid=true]:border-destructive aria-[invalid=true]:ring-destructive/30";
 var FIELD_SHELL_XS = "rounded-[var(--panel-field-radius,var(--radius-xs))] border-transparent bg-panel-field hover:bg-panel-field-hover";

package/dist/lib/highlight-glide.js

@@ -95,16 +95,16 @@ function HighlightGlide({
     mutations.observe(host, { attributes: true, attributeFilter: [follow], subtree: true, childList: true });
     const resize = new ResizeObserver(place);
     resize.observe(host);
-    host.addEventListener("scroll", place, true);
-    host.addEventListener("transitionend", place);
-    host.addEventListener("animationend", place);
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    host.addEventListener("scroll", place, { capture: true, signal });
+    host.addEventListener("transitionend", place, { signal });
+    host.addEventListener("animationend", place, { signal });
     return () => {
       cancelAnimationFrame(frame);
       mutations.disconnect();
       resize.disconnect();
-      host.removeEventListener("scroll", place, true);
-      host.removeEventListener("transitionend", place);
-      host.removeEventListener("animationend", place);
+      listeners.abort();
       host.removeAttribute("data-glide");
     };
   }, [follow, timing]);

package/dist/lib/scrub-gesture.js

@@ -15,6 +15,8 @@ function beginScrub(e, {
   const startValue = value;
   const target = e.currentTarget;
   let moved = false;
+  const gesture = new AbortController();
+  const { signal } = gesture;
   function onMove(ev) {
     const dx = ev.clientX - startX;
     if (!moved) {
@@ -37,13 +39,11 @@ function beginScrub(e, {
         { capture: true, once: true }
       );
     }
-    window.removeEventListener("pointermove", onMove);
-    window.removeEventListener("pointerup", onUp);
-    window.removeEventListener("pointercancel", onUp);
+    gesture.abort();
   }
-  window.addEventListener("pointermove", onMove);
-  window.addEventListener("pointerup", onUp);
-  window.addEventListener("pointercancel", onUp);
+  window.addEventListener("pointermove", onMove, { signal });
+  window.addEventListener("pointerup", onUp, { signal });
+  window.addEventListener("pointercancel", onUp, { signal });
 }
 export {
   beginScrub

package/dist/lib/taxonomy.js

@@ -26,8 +26,10 @@ var COMPONENT_TAXONOMY = {
   Button: ["Actions", "either"],
   ButtonGroup: ["Actions", "either"],
   ConfirmButton: ["Actions", "either"],
+  LikeButton: ["Actions", "either"],
   Menubar: ["Actions", "either"],
   OverflowMenu: ["Actions", "either"],
+  ReactionPicker: ["Actions", "either"],
   Toolbar: ["Actions", "either"],
   /* ── Forms ────────────────────────────────────────────────────────────────
      Typing or entering a value, and the structure a form is built from.

package/dist/lib/use-caret-trigger.js

@@ -36,24 +36,17 @@ function useCaretTrigger({ triggers }) {
     const onInput = (event) => {
       if (event.target === field) evaluate();
     };
-    doc.addEventListener("input", onInput);
-    field.addEventListener("focus", evaluate);
-    field.addEventListener("click", evaluate);
-    field.addEventListener("keyup", evaluate);
-    field.addEventListener("compositionstart", onCompositionStart);
-    field.addEventListener("compositionend", onCompositionEnd);
-    field.addEventListener("blur", onBlur);
-    doc.addEventListener("selectionchange", onSelection);
-    return () => {
-      doc.removeEventListener("input", onInput);
-      field.removeEventListener("focus", evaluate);
-      field.removeEventListener("click", evaluate);
-      field.removeEventListener("keyup", evaluate);
-      field.removeEventListener("compositionstart", onCompositionStart);
-      field.removeEventListener("compositionend", onCompositionEnd);
-      field.removeEventListener("blur", onBlur);
-      doc.removeEventListener("selectionchange", onSelection);
-    };
+    const listeners = new AbortController();
+    const { signal } = listeners;
+    doc.addEventListener("input", onInput, { signal });
+    field.addEventListener("focus", evaluate, { signal });
+    field.addEventListener("click", evaluate, { signal });
+    field.addEventListener("keyup", evaluate, { signal });
+    field.addEventListener("compositionstart", onCompositionStart, { signal });
+    field.addEventListener("compositionend", onCompositionEnd, { signal });
+    field.addEventListener("blur", onBlur, { signal });
+    doc.addEventListener("selectionchange", onSelection, { signal });
+    return () => listeners.abort();
   }, [field, evaluate]);
   const dismiss = useCallback(() => {
     setMatch((current) => {

package/dist/lib/use-match-highlight.js

@@ -0,0 +1,69 @@
+"use client";
+
+// src/lib/use-match-highlight.ts
+import { useEffect, useState } from "react";
+function useMatchHighlight(query, options = {}) {
+  const { selector, enabled = true } = options;
+  const [element, setElement] = useState(null);
+  useEffect(() => {
+    const highlight = enabled && element ? sharedHighlight() : null;
+    if (!highlight || !element) return;
+    let ranges = [];
+    const paint = () => {
+      for (const range of ranges) highlight.delete(range);
+      ranges = matchRanges(element, query, selector);
+      for (const range of ranges) highlight.add(range);
+    };
+    paint();
+    let frame = 0;
+    const observer = new MutationObserver(() => {
+      if (frame) return;
+      frame = requestAnimationFrame(() => {
+        frame = 0;
+        paint();
+      });
+    });
+    observer.observe(element, { subtree: true, childList: true, characterData: true });
+    return () => {
+      observer.disconnect();
+      cancelAnimationFrame(frame);
+      for (const range of ranges) highlight.delete(range);
+    };
+  }, [element, query, selector, enabled]);
+  return setElement;
+}
+var MATCH_HIGHLIGHT = "sable-match";
+var shared = null;
+function sharedHighlight() {
+  if (typeof CSS === "undefined" || !("highlights" in CSS) || typeof Highlight === "undefined") {
+    return null;
+  }
+  shared ??= new Highlight();
+  if (CSS.highlights.get(MATCH_HIGHLIGHT) !== shared) CSS.highlights.set(MATCH_HIGHLIGHT, shared);
+  return shared;
+}
+function matchRanges(root, query, selector) {
+  const needle = query.trim().toLocaleLowerCase();
+  if (!needle) return [];
+  const scopes = selector ? Array.from(root.querySelectorAll(selector)) : [root];
+  const ranges = [];
+  for (const scope of scopes) {
+    const walker = document.createTreeWalker(scope, NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      const haystack = node.data.toLocaleLowerCase();
+      if (haystack.length !== node.data.length) continue;
+      for (let at = haystack.indexOf(needle); at !== -1; at = haystack.indexOf(needle, at + needle.length)) {
+        const range = document.createRange();
+        range.setStart(node, at);
+        range.setEnd(node, at + needle.length);
+        ranges.push(range);
+      }
+    }
+  }
+  return ranges;
+}
+export {
+  MATCH_HIGHLIGHT,
+  matchRanges,
+  useMatchHighlight
+};

package/dist/lib/use-smooth-wheel.js

@@ -112,21 +112,23 @@ function useSmoothWheel({
   const activeRef = useRef(active);
   activeRef.current = active;
   const attached = useRef(null);
+  const listeners = useRef(null);
   const sync = useCallback(() => {
     const want = activeRef.current ? nodeRef.current : null;
     if (attached.current === want) return;
-    const was = attached.current;
-    if (was) {
-      was.removeEventListener("wheel", onWheel);
-      was.removeEventListener("scroll", onScroll);
-      was.removeEventListener("pointerdown", stop);
+    if (attached.current) {
+      listeners.current?.abort();
+      listeners.current = null;
       stop();
     }
     attached.current = want;
     if (want) {
-      want.addEventListener("wheel", onWheel, { passive: false });
-      want.addEventListener("scroll", onScroll, { passive: true });
-      want.addEventListener("pointerdown", stop, { passive: true });
+      const controller = new AbortController();
+      listeners.current = controller;
+      const { signal } = controller;
+      want.addEventListener("wheel", onWheel, { passive: false, signal });
+      want.addEventListener("scroll", onScroll, { passive: true, signal });
+      want.addEventListener("pointerdown", stop, { passive: true, signal });
     }
   }, [onWheel, onScroll, stop]);
   useEffect(sync, [active, sync]);

package/dist/motion/Burst.js

@@ -0,0 +1,79 @@
+"use client";
+
+// src/motion/Burst.tsx
+import { useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { motionAttribute, useMotionLevel } from "./MotionProvider.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_PALETTE = ["pink", "purple", "blue", "orange"];
+function Burst({
+  trigger,
+  palette = DEFAULT_PALETTE,
+  count = 7,
+  particle,
+  playOnMount = false,
+  className,
+  motion
+}) {
+  const { expressive } = useMotionLevel(motion);
+  const [last, setLast] = useState(trigger);
+  const [shot, setShot] = useState(playOnMount ? 1 : 0);
+  if (!Object.is(trigger, last)) {
+    setLast(trigger);
+    setShot((n) => n + 1);
+  }
+  const [done, setDone] = useState(0);
+  const landed = useRef({ shot: 0, pieces: 0 });
+  if (shot === 0 || shot === done || !expressive || palette.length === 0) return null;
+  const places = Math.max(1, Math.round(count));
+  const onAnimationEnd = (event) => {
+    if (!event.target.classList.contains("sable-burst-dot")) return;
+    if (landed.current.shot !== shot) landed.current = { shot, pieces: 0 };
+    landed.current.pieces += 1;
+    if (landed.current.pieces >= places * 2) setDone(shot);
+  };
+  const step = 360 / places;
+  const scale = particle === void 0 ? 1 : 2.5;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-motion": motionAttribute(motion),
+      className: cn("sable-burst [--burst-size:2.25em]", className),
+      onAnimationEnd,
+      children: [
+        particle === void 0 ? /* @__PURE__ */ jsx("span", { className: "sable-burst-ring", "data-palette": palette[0] }) : null,
+        Array.from({ length: places }, (_, i) => {
+          const angle = i * step - 90;
+          return [
+            { angle, reach: 0.95, size: `calc(var(--burst-size) * ${0.14 * scale})`, family: palette[i % palette.length] },
+            {
+              angle: angle + step / 3,
+              reach: 0.75,
+              size: `calc(var(--burst-size) * ${0.1 * scale})`,
+              family: palette[(i + 1) % palette.length]
+            }
+          ].map((dot, j) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "sable-burst-dot",
+              "data-palette": particle === void 0 ? dot.family : void 0,
+              "data-particle": particle === void 0 ? void 0 : "",
+              style: {
+                "--burst-dot-angle": `${dot.angle}deg`,
+                "--burst-dot-reach": dot.reach,
+                "--burst-dot-size": dot.size
+              },
+              children: particle
+            },
+            `${i}-${j}`
+          ));
+        })
+      ]
+    },
+    shot
+  );
+}
+export {
+  Burst
+};

package/dist/motion/index.js

@@ -13,12 +13,14 @@ import { useInView } from "./useInView.js";
 import { Reveal } from "./Reveal.js";
 import { TextReveal } from "./TextReveal.js";
 import { Presence } from "./Presence.js";
+import { Burst } from "./Burst.js";
 import {
   startViewTransition,
   supportsViewTransitions,
   ViewTransitionName
 } from "./viewTransition.js";
 export {
+  Burst,
   MotionProvider,
   MotionScope,
   Presence,

package/dist/presets/index.d.ts

@@ -1,4 +1,4 @@
-import { T as ThemeManifest } from '../_contract-CkqXDVww.js';
+import { T as ThemeManifest } from '../_contract-CDa9-NdB.js';
 
 /** An OKLCH colour, lightness 0–1. Extra fields (alpha) ride along untouched. */
 interface OklchColor {
@@ -31,6 +31,17 @@ declare function fitFillToInk<T extends OklchColor>(fill: T, ink: OklchColor): T
  * once, on the colour as picked, then `fitFillToInk` each mode's fill to it.
  */
 declare function inkPolarity<T extends OklchColor>(color: OklchColor, inks: readonly T[]): T;
+/** A mark's floor against the surfaces it sits on: visibility, not text contrast. */
+declare const MARK_FLOOR = 2;
+/**
+ * The mark for a fill: its hue at graphic strength. In light mode the fill is
+ * lifted to its hue's mark lightness and its chroma raised 1.3× (never past the
+ * gamut, never below its own); in dark mode, where fills are already light, a
+ * red is lifted a little and every hue gains 1.15×. A grey tone stays grey.
+ * Then it steps back toward the ink until it clears MARK_FLOOR on every surface
+ * given, so a pale amber never vanishes into a cream page.
+ */
+declare function markFor<T extends OklchColor>(fill: T, mode: "light" | "dark", surfaces?: readonly OklchColor[]): T;
 /** Fills a theme or preset authors from its brand. Their ink follows the colour as picked. */
 declare const BRAND_FILLS: readonly ["primary", "sidebar-primary", "highlight"];
 /**
@@ -143,4 +154,4 @@ declare function presetLabelContrast(input: SablePreset): {
     unmeasured: string[];
 };
 
-export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, type OklchColor, PAGE_WIDTH_TOKENS, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };
+export { BRAND_FILLS, LABELLED_FILLS, LABEL_CONTRAST_RULE, type LabelFinding, MARK_FLOOR, type OklchColor, PAGE_WIDTH_TOKENS, PRESET_TOKEN_NAMES, type PresetException, STATUS_FILLS, type SablePreset, checkLabelledFills, fitFillToInk, inkFor, inkPolarity, labelContrast, markFor, parsePreset, presetCss, presetLabelContrast, presetManifest, validatePreset };

package/dist/presets/index.js

@@ -11,6 +11,9 @@ import {
   LAYERING_TOKENS,
   WORKSPACE_SURFACE_TOKENS,
   DERIVED_EDGE_TOKENS,
+  FIELD_TOKENS,
+  APP_SHELL_TOKENS,
+  MARK_TOKENS,
   TYPE_UI_TOKENS,
   ART_TOKENS,
   PALETTE_TOKENS
@@ -25,7 +28,9 @@ import {
   fitFillToInk,
   inkFor,
   inkPolarity,
-  labelContrast
+  labelContrast,
+  MARK_FLOOR,
+  markFor
 } from "../themes/contrast.js";
 var PAGE_WIDTH_TOKENS = [
   "page-inset",
@@ -39,11 +44,20 @@ var PRESET_TOKEN_NAMES = [.../* @__PURE__ */ new Set([
   ...SEMANTIC_TOKENS,
   ...WORKSPACE_SURFACE_TOKENS.map((name) => `theme-${name}`),
   ...DERIVED_EDGE_TOKENS.map((name) => `theme-${name}`),
+  // The field's fill and outline: optional — a preset without them keeps outlined fields.
+  ...FIELD_TOKENS.map((name) => `theme-${name}`),
+  // The inset frame's ground: optional — a preset without it keeps the derived step off the rail.
+  ...APP_SHELL_TOKENS.map((name) => `theme-${name}`),
+  // Graphic-strength status colours: optional — a preset without them derives them from its fills.
+  ...MARK_TOKENS.map((name) => `theme-${name}`),
   // Art direction: optional hooks — a preset without them paints the default art.
   ...ART_TOKENS.map((name) => `theme-${name}`),
   ...PALETTE_TOKENS.map((name) => `theme-${name}`),
   ...WORKSPACE_SURFACE_TOKENS,
   ...DERIVED_EDGE_TOKENS,
+  ...FIELD_TOKENS,
+  ...APP_SHELL_TOKENS,
+  ...MARK_TOKENS,
   ...RADIUS_TOKENS,
   ...MOTION_TOKENS,
   ...TYPE_SCALE_TOKENS,
@@ -226,6 +240,7 @@ export {
   BRAND_FILLS,
   LABELLED_FILLS2 as LABELLED_FILLS,
   LABEL_CONTRAST_RULE2 as LABEL_CONTRAST_RULE,
+  MARK_FLOOR,
   PAGE_WIDTH_TOKENS,
   PRESET_TOKEN_NAMES,
   STATUS_FILLS,
@@ -234,6 +249,7 @@ export {
   inkFor,
   inkPolarity,
   labelContrast,
+  markFor,
   parsePreset,
   presetCss,
   presetLabelContrast,