@vegastack/design 0.3.2 → 0.4.1

package/dist/create-animated-icon.js

@@ -0,0 +1,350 @@
+"use client";
+import {
+  cn
+} from "./chunk-DS7SBEDS.js";
+
+// src/icons/create-animated-icon.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  MotionConfigContext,
+  motion,
+  useAnimation
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var REDUCED_MOTION_QUERY = "(prefers-reduced-motion: reduce)";
+function subscribeToReducedMotion(onStoreChange) {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return () => {
+    };
+  const query = window.matchMedia(REDUCED_MOTION_QUERY);
+  query.addEventListener("change", onStoreChange);
+  return () => query.removeEventListener("change", onStoreChange);
+}
+function readReducedMotion() {
+  if (typeof window === "undefined" || typeof window.matchMedia !== "function")
+    return false;
+  return window.matchMedia(REDUCED_MOTION_QUERY).matches;
+}
+function readReducedMotionOnServer() {
+  return false;
+}
+function useLiveReducedMotion() {
+  const preference = React.useSyncExternalStore(
+    subscribeToReducedMotion,
+    readReducedMotion,
+    readReducedMotionOnServer
+  );
+  const { reducedMotion } = React.useContext(MotionConfigContext);
+  if (reducedMotion === "always") return true;
+  return preference;
+}
+var TAGS = {
+  circle: "circle",
+  defs: "defs",
+  ellipse: "ellipse",
+  g: "g",
+  line: "line",
+  path: "path",
+  pattern: "pattern",
+  polygon: "polygon",
+  polyline: "polyline",
+  rect: "rect",
+  text: "text",
+  "motion.circle": motion.circle,
+  "motion.ellipse": motion.ellipse,
+  "motion.g": motion.g,
+  "motion.line": motion.line,
+  "motion.path": motion.path,
+  "motion.pattern": motion.pattern,
+  "motion.polygon": motion.polygon,
+  "motion.polyline": motion.polyline,
+  "motion.rect": motion.rect,
+  "motion.text": motion.text
+};
+var ANIMATED_ICON_RESERVED_KEYS = /* @__PURE__ */ new Set([
+  "animate",
+  "children",
+  "className",
+  "custom",
+  "exit",
+  "group",
+  "inherit",
+  "initial",
+  "style",
+  "tag",
+  "text",
+  "transition",
+  "variants"
+]);
+var ROOT_DEFAULTS = {
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: "2",
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+function isPresence(node) {
+  return typeof node === "object" && node.tag === "presence";
+}
+function isMotionTag(tag) {
+  return tag.startsWith("motion.");
+}
+function asNode(child) {
+  return typeof child === "string" ? { tag: "path", d: child } : child;
+}
+function specUsesControls(spec) {
+  if (spec.start || spec.stop) return true;
+  if (spec.svg?.tag === "motion.svg" && !spec.svg.inherit) return true;
+  const walk = (nodes) => nodes.some((child) => {
+    if (isPresence(child)) return false;
+    const node = asNode(child);
+    if (isMotionTag(node.tag) && !node.inherit && !node.animate) return true;
+    return node.children ? walk(node.children) : false;
+  });
+  return walk(spec.elements);
+}
+function hasPresenceNode(spec) {
+  return spec.elements.some(isPresence);
+}
+function svgAttributes(node) {
+  const attributes = {};
+  for (const [key, value] of Object.entries(node)) {
+    if (ANIMATED_ICON_RESERVED_KEYS.has(key)) continue;
+    if (value !== void 0) attributes[key] = value;
+  }
+  return attributes;
+}
+function renderNode(child, key, controls) {
+  const node = asNode(child);
+  const Tag = TAGS[node.tag];
+  const motionProps = isMotionTag(node.tag) ? {
+    animate: node.animate ?? (node.inherit ? void 0 : controls[node.group ?? "default"]),
+    initial: node.initial,
+    exit: node.exit,
+    variants: node.variants,
+    transition: node.transition,
+    custom: node.custom
+  } : void 0;
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...svgAttributes(node),
+      className: node.className,
+      style: node.style,
+      ...motionProps,
+      children: [
+        node.text,
+        node.children?.map(
+          (grandchild, index) => renderNode(grandchild, index, controls)
+        )
+      ]
+    },
+    key
+  );
+}
+function createAnimatedIcon(spec) {
+  const groupNames = spec.groups ?? ["default"];
+  const usesControls = specUsesControls(spec);
+  const usesPresence = hasPresenceNode(spec);
+  const root = spec.svg ?? {};
+  const rootTag = root.tag ?? "svg";
+  const RootTag = rootTag === "motion.svg" ? motion.svg : "svg";
+  function AnimatedIconComponent({
+    className,
+    size = "var(--icon-default)",
+    ref,
+    onPointerEnter,
+    onPointerLeave,
+    onPointerDown,
+    onFocus,
+    onBlur,
+    ...props
+  }) {
+    const controlList = groupNames.map(() => useAnimation());
+    const shouldReduceMotion = useLiveReducedMotion();
+    const [isActive, setIsActive] = React.useState(false);
+    const reduceRef = React.useRef(shouldReduceMotion);
+    reduceRef.current = shouldReduceMotion;
+    const isControlledRef = React.useRef(false);
+    const timersRef = React.useRef([]);
+    const controls = React.useMemo(
+      () => Object.fromEntries(
+        groupNames.map((name, index) => [name, controlList[index]])
+      ),
+      // Each entry is referentially stable for the life of the component.
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      controlList
+    );
+    const clearTimers = React.useCallback(() => {
+      for (const timer of timersRef.current) clearTimeout(timer);
+      timersRef.current = [];
+    }, []);
+    React.useEffect(() => clearTimers, [clearTimers]);
+    const run = React.useCallback(
+      (control2, definition, transition) => {
+        if (reduceRef.current) {
+          control2.stop();
+          return Promise.resolve();
+        }
+        return Promise.resolve(control2.start(definition, transition)).then(
+          () => void 0,
+          () => void 0
+        );
+      },
+      []
+    );
+    const reset = React.useCallback(
+      (control2, definition, transition) => {
+        if (reduceRef.current) {
+          control2.stop();
+          control2.set(definition);
+          return Promise.resolve();
+        }
+        return Promise.resolve(control2.start(definition, transition)).then(
+          () => void 0,
+          () => void 0
+        );
+      },
+      []
+    );
+    const set = React.useCallback(
+      (control2, definition) => {
+        control2.stop();
+        control2.set(definition);
+      },
+      []
+    );
+    const after = React.useCallback(
+      (delayMs, task) => {
+        timersRef.current.push(setTimeout(task, delayMs));
+      },
+      []
+    );
+    const flagsRef = React.useRef({});
+    const control = React.useCallback(
+      (group) => {
+        const index = group ? groupNames.indexOf(group) : 0;
+        return controlList[index === -1 ? 0 : index];
+      },
+      // eslint-disable-next-line react-hooks/exhaustive-deps -- stable entries
+      controlList
+    );
+    const choreography = React.useMemo(
+      () => ({
+        control,
+        shouldReduceMotion,
+        run,
+        reset,
+        set,
+        after,
+        flags: flagsRef.current
+      }),
+      [control, shouldReduceMotion, run, reset, set, after]
+    );
+    const primaryControl = control();
+    const startAnimation = React.useCallback(() => {
+      clearTimers();
+      if (usesPresence) setIsActive(!reduceRef.current);
+      if (spec.start) {
+        void spec.start(choreography);
+        return;
+      }
+      if (usesControls) void run(primaryControl, "animate");
+    }, [choreography, clearTimers, run, primaryControl]);
+    const stopAnimation = React.useCallback(() => {
+      clearTimers();
+      if (usesPresence) setIsActive(false);
+      if (spec.stop) {
+        void spec.stop(choreography);
+        return;
+      }
+      if (usesControls) void reset(primaryControl, "normal");
+    }, [choreography, clearTimers, reset, primaryControl]);
+    React.useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return { startAnimation, stopAnimation };
+    });
+    React.useEffect(() => {
+      if (shouldReduceMotion) stopAnimation();
+    }, [shouldReduceMotion, stopAnimation]);
+    const handlePointerEnter = (event) => {
+      onPointerEnter?.(event);
+      if (!isControlledRef.current && event.pointerType !== "touch")
+        startAnimation();
+    };
+    const handlePointerLeave = (event) => {
+      onPointerLeave?.(event);
+      if (!isControlledRef.current && event.pointerType !== "touch")
+        stopAnimation();
+    };
+    const handlePointerDown = (event) => {
+      onPointerDown?.(event);
+      if (!isControlledRef.current && event.pointerType === "touch")
+        startAnimation();
+    };
+    const handleFocus = (event) => {
+      onFocus?.(event);
+      if (!isControlledRef.current) startAnimation();
+    };
+    const handleBlur = (event) => {
+      onBlur?.(event);
+      if (!isControlledRef.current) stopAnimation();
+    };
+    const rootMotionProps = rootTag === "motion.svg" ? {
+      animate: root.animate ?? (root.inherit ? void 0 : controls[root.group ?? "default"]),
+      initial: root.initial,
+      variants: root.variants,
+      transition: root.transition,
+      custom: root.custom
+    } : void 0;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "inline-flex shrink-0 items-center justify-center",
+          className
+        ),
+        onPointerEnter: handlePointerEnter,
+        onPointerLeave: handlePointerLeave,
+        onPointerDown: handlePointerDown,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          RootTag,
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            width: size,
+            height: size,
+            viewBox: root.viewBox ?? ROOT_DEFAULTS.viewBox,
+            fill: root.fill ?? ROOT_DEFAULTS.fill,
+            stroke: root.stroke ?? ROOT_DEFAULTS.stroke,
+            strokeWidth: root.strokeWidth ?? ROOT_DEFAULTS.strokeWidth,
+            strokeLinecap: root.strokeLinecap ?? ROOT_DEFAULTS.strokeLinecap,
+            strokeLinejoin: root.strokeLinejoin ?? ROOT_DEFAULTS.strokeLinejoin,
+            overflow: root.overflow,
+            className: root.className,
+            style: root.style,
+            ...rootMotionProps,
+            children: spec.elements.map((node, index) => {
+              if (!isPresence(node)) return renderNode(node, index, controls);
+              return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, mode: "wait", children: isActive ? /* @__PURE__ */ jsx(React.Fragment, { children: node.active.map(
+                (child, childIndex) => renderNode(child, childIndex, controls)
+              ) }, `${spec.name}-active`) : /* @__PURE__ */ jsx(React.Fragment, { children: node.rest.map(
+                (child, childIndex) => renderNode(child, childIndex, controls)
+              ) }, `${spec.name}-rest`) }, index);
+            })
+          }
+        )
+      }
+    );
+  }
+  AnimatedIconComponent.displayName = spec.name;
+  return AnimatedIconComponent;
+}
+export {
+  ANIMATED_ICON_RESERVED_KEYS,
+  createAnimatedIcon
+};

package/dist/icons/index.cjs

@@ -83,6 +83,32 @@ var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
 function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(inputs));
 }
+var fieldControl = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "placeholder:text-muted-foreground-faint",
+  "not-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus:border-ring/(--alpha-tint-border)",
+  "not-focus:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "disabled:cursor-not-allowed disabled:bg-surface-1 disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
+var fieldControlGroup = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "not-has-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus-within:border-ring/(--alpha-tint-border)",
+  "data-focused:border-ring/(--alpha-tint-border)",
+  // Both the SELF and the DESCENDANT form of the invalid tint (2026-09-09). `has-aria-invalid:` is
+  // a `:has()` over descendants, so a group that carries `aria-invalid` on ITSELF — which is where
+  // `<NumberField aria-invalid />` lands the attribute, on the `[data-field-group]` element —
+  // matched nothing and measured the neutral `--input` border. Inside a `Field` the state arrives
+  // as `data-invalid` on the group and was always correct; this is the standalone path.
+  "not-focus-within:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:has-aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "has-disabled:cursor-not-allowed has-disabled:bg-surface-1 has-disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
 
 // src/icons/brand-icon.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");

package/dist/icons/index.d.cts

@@ -110,15 +110,18 @@ interface AnimatedIconHandle {
 }
 /**
  * Shape of a mirrored `lucide-animated` icon component: a React 19 function
- * component that accepts a runtime CSS length, spreads `div` props, and exposes an
- * {@link AnimatedIconHandle}. This is what `shadcn add @vegastack/<icon>`
+ * component that accepts a runtime CSS length, spreads `span` props, and exposes
+ * an {@link AnimatedIconHandle}. This is what `shadcn add @vegastack/<icon>`
  * copies in (e.g. `ActivityIcon`).
+ *
+ * The host is an `inline-flex` `<span>`: an icon sits inside a line of text, and
+ * a block-level box there is a layout bug.
  */
 type AnimatedIconComponent = React.ComponentType<{
     size?: number | string;
     ref?: React.Ref<AnimatedIconHandle>;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "ref">>;
-interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ref"> {
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "ref">>;
+interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "ref"> {
     /** A mirrored lucide-animated icon component, e.g. `import { ActivityIcon } from '@/components/ui/activity'`. */
     as: AnimatedIconComponent;
     /**
@@ -141,10 +144,14 @@ interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
  * animation (pointer/focus/touch auto-trigger where provided upstream; or call
  * `ref.current.startAnimation()`).
  *
- * Deliberately imports no `motion` — the mirrored icon component carries that
- * dependency, so the base package stays lightweight. Every generated mirror reads
- * Motion's `useReducedMotion()` preference intrinsically and settles immediately at
- * its static resting state when the user requests reduced motion.
+ * Deliberately imports no `motion` — the mirrored icon carries that dependency
+ * through `@vegastack/design/create-animated-icon`, so this entry stays
+ * lightweight for consumers who only use `Icon`/`BrandIcon`. Every mirrored icon
+ * is gated on `prefers-reduced-motion` intrinsically (in the factory, once, as a
+ * live subscription) and settles immediately at its static resting state when
+ * the user requests reduced motion. No <MotionConfig> is required;
+ * <MotionConfig reducedMotion="always"> can add reduction, but nothing can take
+ * the OS preference away.
  *
  * @example
  * 'use client';

package/dist/icons/index.d.ts

@@ -110,15 +110,18 @@ interface AnimatedIconHandle {
 }
 /**
  * Shape of a mirrored `lucide-animated` icon component: a React 19 function
- * component that accepts a runtime CSS length, spreads `div` props, and exposes an
- * {@link AnimatedIconHandle}. This is what `shadcn add @vegastack/<icon>`
+ * component that accepts a runtime CSS length, spreads `span` props, and exposes
+ * an {@link AnimatedIconHandle}. This is what `shadcn add @vegastack/<icon>`
  * copies in (e.g. `ActivityIcon`).
+ *
+ * The host is an `inline-flex` `<span>`: an icon sits inside a line of text, and
+ * a block-level box there is a layout bug.
  */
 type AnimatedIconComponent = React.ComponentType<{
     size?: number | string;
     ref?: React.Ref<AnimatedIconHandle>;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "ref">>;
-interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "ref"> {
+} & Omit<React.HTMLAttributes<HTMLSpanElement>, "ref">>;
+interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "ref"> {
     /** A mirrored lucide-animated icon component, e.g. `import { ActivityIcon } from '@/components/ui/activity'`. */
     as: AnimatedIconComponent;
     /**
@@ -141,10 +144,14 @@ interface AnimatedIconProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
  * animation (pointer/focus/touch auto-trigger where provided upstream; or call
  * `ref.current.startAnimation()`).
  *
- * Deliberately imports no `motion` — the mirrored icon component carries that
- * dependency, so the base package stays lightweight. Every generated mirror reads
- * Motion's `useReducedMotion()` preference intrinsically and settles immediately at
- * its static resting state when the user requests reduced motion.
+ * Deliberately imports no `motion` — the mirrored icon carries that dependency
+ * through `@vegastack/design/create-animated-icon`, so this entry stays
+ * lightweight for consumers who only use `Icon`/`BrandIcon`. Every mirrored icon
+ * is gated on `prefers-reduced-motion` intrinsically (in the factory, once, as a
+ * live subscription) and settles immediately at its static resting state when
+ * the user requests reduced motion. No <MotionConfig> is required;
+ * <MotionConfig reducedMotion="always"> can add reduction, but nothing can take
+ * the OS preference away.
  *
  * @example
  * 'use client';

package/dist/icons/index.js

@@ -1,6 +1,6 @@
 import {
   cn
-} from "../chunk-FBU37ITM.js";
+} from "../chunk-DS7SBEDS.js";
 
 // src/icons/icon.tsx
 import "react";

package/dist/index.cjs

@@ -22,11 +22,65 @@ var src_exports = {};
 __export(src_exports, {
   FLOATING: () => FLOATING,
   TIMINGS: () => TIMINGS,
-  cn: () => cn
+  cn: () => cn,
+  fieldControl: () => fieldControl,
+  fieldControlGroup: () => fieldControlGroup,
+  fillInteractive: () => fillInteractive,
+  mergeRefs: () => mergeRefs,
+  prose: () => prose,
+  proseClassName: () => proseClassName,
+  selectedChipVariants: () => selectedChipVariants,
+  surfaceInteractive: () => surfaceInteractive,
+  surfaceInteractiveGroup: () => surfaceInteractiveGroup
 });
 module.exports = __toCommonJS(src_exports);
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
+
+// src/prose.ts
+var prose = {
+  /** The root's own ink and size — every rule below is relative to this. */
+  root: "text-base text-foreground",
+  // Headings. `scroll-m-20` keeps an anchored heading clear of a sticky header; the weight ladder
+  // caps at 500, which the `text-h*` roles already carry.
+  h1: "[&_h1]:mt-6 [&_h1]:mb-3 [&_h1]:scroll-m-20 [&_h1]:text-h1 [&_h1]:text-foreground [&_h1]:first:mt-0",
+  h2: "[&_h2]:mt-6 [&_h2]:mb-3 [&_h2]:scroll-m-20 [&_h2]:text-h2 [&_h2]:text-foreground [&_h2]:first:mt-0",
+  h3: "[&_h3]:mt-5 [&_h3]:mb-2 [&_h3]:scroll-m-20 [&_h3]:text-h3 [&_h3]:text-foreground [&_h3]:first:mt-0",
+  h4: "[&_h4]:mt-4 [&_h4]:mb-2 [&_h4]:scroll-m-20 [&_h4]:text-h4 [&_h4]:text-foreground [&_h4]:first:mt-0",
+  // h5/h6 leave the display tier and become labels — the type scale has no sixth heading size.
+  h5: "[&_h5]:mt-4 [&_h5]:mb-2 [&_h5]:text-label [&_h5]:text-foreground [&_h5]:first:mt-0",
+  h6: "[&_h6]:mt-4 [&_h6]:mb-2 [&_h6]:text-label [&_h6]:text-muted-foreground [&_h6]:first:mt-0",
+  p: "[&_p]:my-3 [&_p]:leading-relaxed [&_p]:text-foreground [&_p]:first:mt-0 [&_p]:last:mb-0",
+  // Marks. Links are `info` ink per design.md §Colours; `s` is Tiptap's strike element and `del`
+  // is GFM's — the same mark from two producers.
+  a: "[&_a]:font-medium [&_a]:text-info-text [&_a]:underline [&_a]:underline-offset-4 [&_a]:hover:text-info-text/(--alpha-link-hover)",
+  strong: "[&_strong]:font-medium [&_strong]:text-foreground",
+  em: "[&_em]:italic",
+  del: "[&_del]:text-muted-foreground [&_del]:line-through [&_s]:text-muted-foreground [&_s]:line-through",
+  // Lists. A GFM task list carries `contains-task-list` and its checkbox IS the marker, so the
+  // disc goes — expressed as a second, more specific descendant rule rather than a class on the
+  // element, which would lose the cascade (see the header).
+  ul: "[&_ul]:my-3 [&_ul]:ms-6 [&_ul]:list-disc [&_ul]:text-foreground [&_ul]:marker:text-muted-foreground [&_ul.contains-task-list]:list-none",
+  ol: "[&_ol]:my-3 [&_ol]:ms-6 [&_ol]:list-decimal [&_ol]:text-foreground [&_ol]:marker:text-muted-foreground",
+  li: "[&_li]:mt-1.5 [&_li]:leading-relaxed",
+  blockquote: "[&_blockquote]:my-3 [&_blockquote]:border-s-2 [&_blockquote]:border-border [&_blockquote]:ps-4 [&_blockquote]:text-muted-foreground [&_blockquote]:italic",
+  // Inline code is a chip. Code inside a `pre` is not: it inherits the panel's ground, so the chip
+  // is undone at higher specificity (`[&_pre_code]` is (0,1,2) against the chip's (0,1,1)).
+  code: "[&_code]:rounded-sm [&_code]:bg-muted [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:font-mono [&_code]:text-base [&_code]:text-foreground",
+  // A bare `<pre>` wears `CodeBlock`'s surface — the same sunken panel, one vocabulary (B4-09).
+  // `CodeBlock`'s own `pre` is excluded: it already sits inside a `figure` carrying the border,
+  // radius and ground, and re-applying them here would draw a second panel inside the first.
+  pre: "[&_pre:not([data-slot='code-block-pre'])]:my-3 [&_pre:not([data-slot='code-block-pre'])]:overflow-x-auto [&_pre:not([data-slot='code-block-pre'])]:rounded-lg [&_pre:not([data-slot='code-block-pre'])]:border [&_pre:not([data-slot='code-block-pre'])]:border-border [&_pre:not([data-slot='code-block-pre'])]:bg-muted [&_pre:not([data-slot='code-block-pre'])]:p-4 [&_pre:not([data-slot='code-block-pre'])]:text-foreground",
+  preCode: "[&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:font-mono [&_pre_code]:text-code [&_pre_code]:text-foreground",
+  hr: "[&_hr]:my-6 [&_hr]:border-border",
+  // GFM tables. The scroll container is structural and belongs to the consumer (MarkdownView wraps
+  // the table in an `overflow-x-auto` div); these are the cell and rule tokens.
+  table: "[&_table]:w-full [&_table]:border-collapse [&_table]:text-base [&_table]:text-foreground [&_thead]:border-b [&_thead]:border-border [&_tr]:border-b [&_tr]:border-border [&_tr]:last:border-0 [&_th]:px-3 [&_th]:py-2 [&_th]:text-start [&_th]:font-medium [&_th]:text-foreground [&_td]:px-3 [&_td]:py-2 [&_td]:text-muted-foreground",
+  img: "[&_img]:my-3 [&_img]:max-w-full [&_img]:rounded-lg [&_img]:border [&_img]:border-border"
+};
+var proseClassName = Object.values(prose).join(" ");
+
+// src/index.ts
 var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
   extend: {
     classGroups: {
@@ -55,6 +109,60 @@ var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
 function cn(...inputs) {
   return twMerge((0, import_clsx.clsx)(inputs));
 }
+var surfaceInteractive = "hover:bg-surface-2 active:bg-surface-3";
+var surfaceInteractiveGroup = "group-hover/wash:bg-surface-2 group-active/wash:bg-surface-3";
+var fillInteractive = {
+  foreground: "hover:bg-foreground/(--alpha-hover) active:bg-foreground/(--alpha-pressed)",
+  primary: "hover:bg-primary/(--alpha-hover) active:bg-primary/(--alpha-pressed)",
+  destructive: "hover:bg-destructive/(--alpha-hover) active:bg-destructive/(--alpha-pressed)",
+  success: "hover:bg-success/(--alpha-hover) active:bg-success/(--alpha-pressed)",
+  warning: "hover:bg-warning/(--alpha-hover) active:bg-warning/(--alpha-pressed)",
+  info: "hover:bg-info/(--alpha-hover) active:bg-info/(--alpha-pressed)",
+  brand: "hover:bg-brand/(--alpha-hover) active:bg-brand/(--alpha-pressed)"
+};
+var fieldControl = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "placeholder:text-muted-foreground-faint",
+  "not-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus:border-ring/(--alpha-tint-border)",
+  "not-focus:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "disabled:cursor-not-allowed disabled:bg-surface-1 disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
+var fieldControlGroup = [
+  "rounded-md border border-input bg-transparent dark:bg-input/(--alpha-input)",
+  "not-has-disabled:not-data-disabled:hover:border-foreground/(--alpha-border-subtle)",
+  "focus-within:border-ring/(--alpha-tint-border)",
+  "data-focused:border-ring/(--alpha-tint-border)",
+  // Both the SELF and the DESCENDANT form of the invalid tint (2026-09-09). `has-aria-invalid:` is
+  // a `:has()` over descendants, so a group that carries `aria-invalid` on ITSELF — which is where
+  // `<NumberField aria-invalid />` lands the attribute, on the `[data-field-group]` element —
+  // matched nothing and measured the neutral `--input` border. Inside a `Field` the state arrives
+  // as `data-invalid` on the group and was always correct; this is the standalone path.
+  "not-focus-within:aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:has-aria-invalid:border-destructive-border/(--alpha-tint-border)",
+  "not-focus-within:data-invalid:border-destructive-border/(--alpha-tint-border)",
+  "has-disabled:cursor-not-allowed has-disabled:bg-surface-1 has-disabled:opacity-(--opacity-dim)",
+  "data-disabled:cursor-not-allowed data-disabled:bg-surface-1 data-disabled:opacity-(--opacity-dim)"
+].join(" ");
+var selectedChipVariants = {
+  /**
+   * The muted track the chips sit in — the ladder's well rung with a drawn inset boundary. The
+   * pseudo-element keeps the 28 / 32px track boxes unchanged; a real root border would add 2px and
+   * silently break the shared control scale.
+   */
+  track: "relative bg-surface-1 after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] after:border after:border-border after:content-['']",
+  /**
+   * Chrome shared by every chip: a transparent hairline reserved at rest (so selecting adds no
+   * layout shift) and the muted→ink text step.
+   */
+  item: "border border-transparent hover:text-foreground",
+  /** Selected keyed on Base UI's `data-pressed` — Toggle, ToggleGroup, Segmented. */
+  pressed: "not-data-pressed:hover:bg-foreground/(--alpha-hover) not-data-pressed:active:bg-foreground/(--alpha-pressed) data-pressed:border-border data-pressed:bg-foreground/(--alpha-ink-tint) data-pressed:text-foreground data-pressed:hover:bg-foreground/(--alpha-ink-tint-strong) data-pressed:active:bg-foreground/(--alpha-ink-tint)",
+  /** Selected keyed on Base UI's `data-active` — Tabs. */
+  active: "not-data-[active]:hover:bg-foreground/(--alpha-hover) not-data-[active]:active:bg-foreground/(--alpha-pressed) data-[active]:border-border data-[active]:bg-foreground/(--alpha-ink-tint) data-[active]:text-foreground data-[active]:hover:bg-foreground/(--alpha-ink-tint-strong) data-[active]:active:bg-foreground/(--alpha-ink-tint)"
+};
 var TIMINGS = {
   /** How long transient success feedback holds before reverting (CopyButton "Copied ✓"). */
   feedbackRevertMs: 1500,
@@ -63,16 +171,51 @@ var TIMINGS = {
   /** Hover delay before a rich preview (HoverCard) opens — guards accidental opens. */
   hoverOpenDelayMs: 700,
   /** Hover delay before a rich preview closes — lets the pointer travel into the card. */
-  hoverCloseDelayMs: 300
+  hoverCloseDelayMs: 300,
+  /**
+   * Hover delay before a tooltip opens. A tooltip is a cheap label, not a preview, so it is
+   * deliberately much faster than {@link TIMINGS.hoverOpenDelayMs} — long enough that sweeping
+   * across a toolbar does not flash five tips, short enough that a deliberate hover feels
+   * instant. Base UI's `Tooltip.Provider` grouping then opens adjacent tips with no delay at
+   * all. Set once, in the app-root provider.
+   */
+  tooltipOpenDelayMs: 300,
+  /**
+   * Delay before a tooltip closes. Zero: a tooltip has nothing to travel into (it is not
+   * hoverable content, unlike a HoverCard), so holding it after the pointer leaves only
+   * obscures what the user moved on to.
+   */
+  tooltipCloseDelayMs: 0
 };
 var FLOATING = {
   sideOffsetAttached: 4,
   sideOffsetDetached: 8,
   collisionPadding: 8
 };
+function mergeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (ref == null) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   FLOATING,
   TIMINGS,
-  cn
+  cn,
+  fieldControl,
+  fieldControlGroup,
+  fillInteractive,
+  mergeRefs,
+  prose,
+  proseClassName,
+  selectedChipVariants,
+  surfaceInteractive,
+  surfaceInteractiveGroup
 });