silvery 0.21.0 → 0.23.0

package/README.md

@@ -28,7 +28,7 @@ term.modes.rawMode(true)
 await render(<Counter />, term).run()
 ```
 
-![Silvery counter rendered in a terminal](docs/public/screenshots/counter.svg)
+![Silvery counter rendered in a terminal](docs/public/screenshots/counter-readme-static.svg)
 
 React 18 + 19 with concurrent mode, Suspense, and flexbox layout. [Drop-in Ink compatible](https://silvery.dev/guide/silvery-vs-ink#compatibility) ([`@silvery/ink`](https://silvery.dev/guide/silvery-vs-ink)) — same `Box`, `Text`, `useInput` API with 918/931 Ink 7.0 tests passing.
 

package/dist/{Text-Lq0dmj8-.mjs → Text-Ci6UCSTL.mjs}

@@ -1,10 +1,49 @@
-import { r as effect } from "./src-DKp-_OFG.mjs";
-import { a as NodeContext } from "./context-BU5LkkIy.mjs";
-import { r as getLayoutSignals, s as observeLayoutSignal } from "./layout-signals-Cnw6xk8Q.mjs";
-import { s as KNOWN_VARIANTS, t as init_src } from "./src-BNTToU7l.mjs";
-import { a as defaultDarkTheme, l as init_schemes } from "./schemes-JjNp4aSl.mjs";
+import { r as effect } from "./src-BqeBFB3X.mjs";
+import { o as getLayoutSignals, u as observeLayoutSignal } from "./layout-signals-CGYbHmxy.mjs";
+import { a as KNOWN_VARIANTS } from "./src-B8lf1kiR.mjs";
+import { a as defaultDarkTheme } from "./schemes-DWQPxXAi.mjs";
+import { a as NodeContext } from "./context-CEhuD1R_.mjs";
 import { createContext, forwardRef, useContext, useImperativeHandle, useLayoutEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
+//#region packages/ag-react/src/ThemeContext.tsx
+/**
+* ThemeContext — delivers a Theme to the component tree.
+*
+* Wrap your app (or a subtree) in `<ThemeProvider theme={…}>` to make
+* `$token` color props resolve against that theme. Components call
+* `useTheme()` to read the current theme.
+*
+* @example
+* ```tsx
+* import { ThemeProvider, defaultDarkTheme } from '@silvery/ag-react'
+*
+* <ThemeProvider theme={defaultDarkTheme}>
+*   <App />
+* </ThemeProvider>
+* ```
+*/
+/** @internal Exported for ThemeProvider and Text component — not public API. */
+const ThemeContext = createContext(defaultDarkTheme);
+/**
+* Context that carries scheme detection metadata (name, source, confidence).
+*
+* Separate from ThemeContext because scheme metadata is orthogonal to the
+* theme token bag. Populated by `<ThemeProvider scheme={...}>` when the
+* caller passes detection provenance (e.g. from `runThemed`). Null when
+* no scheme metadata was injected.
+*
+* @internal Exported for ThemeProvider.
+*/
+const ActiveSchemeContext = createContext(null);
+/**
+* Read the current theme from context.
+*
+* Returns `defaultDarkTheme` when no `ThemeProvider` is present.
+*/
+function useTheme() {
+	return useContext(ThemeContext);
+}
+//#endregion
 //#region packages/ag-react/src/components/Box.tsx
 /**
 * Silvery Box Component
@@ -98,46 +137,6 @@ const Box = forwardRef(function Box(props, ref) {
 	});
 });
 //#endregion
-//#region packages/ag-react/src/ThemeContext.tsx
-/**
-* ThemeContext — delivers a Theme to the component tree.
-*
-* Wrap your app (or a subtree) in `<ThemeProvider theme={…}>` to make
-* `$token` color props resolve against that theme. Components call
-* `useTheme()` to read the current theme.
-*
-* @example
-* ```tsx
-* import { ThemeProvider, defaultDarkTheme } from '@silvery/ag-react'
-*
-* <ThemeProvider theme={defaultDarkTheme}>
-*   <App />
-* </ThemeProvider>
-* ```
-*/
-init_schemes();
-/** @internal Exported for ThemeProvider and Text component — not public API. */
-const ThemeContext = createContext(defaultDarkTheme);
-/**
-* Context that carries scheme detection metadata (name, source, confidence).
-*
-* Separate from ThemeContext because scheme metadata is orthogonal to the
-* theme token bag. Populated by `<ThemeProvider scheme={...}>` when the
-* caller passes detection provenance (e.g. from `runThemed`). Null when
-* no scheme metadata was injected.
-*
-* @internal Exported for ThemeProvider.
-*/
-const ActiveSchemeContext = createContext(null);
-/**
-* Read the current theme from context.
-*
-* Returns `defaultDarkTheme` when no `ThemeProvider` is present.
-*/
-function useTheme() {
-	return useContext(ThemeContext);
-}
-//#endregion
 //#region packages/ag-react/src/components/Text.tsx
 /**
 * Silvery Text Component
@@ -150,7 +149,6 @@ function useTheme() {
 *
 * Supports forwardRef for imperative access to the underlying node.
 */
-init_src();
 /** Per-theme set of variant names that have already triggered a warning. */
 const _warnedVariants = /* @__PURE__ */ new WeakMap();
 function warnOnce(theme, variant) {
@@ -234,6 +232,6 @@ const Text = forwardRef(function Text(props, ref) {
 	});
 });
 //#endregion
-export { Box as a, useTheme as i, ActiveSchemeContext as n, ThemeContext as r, Text as t };
+export { useTheme as a, ThemeContext as i, Box as n, ActiveSchemeContext as r, Text as t };
 
-//# sourceMappingURL=Text-Lq0dmj8-.mjs.map
+//# sourceMappingURL=Text-Ci6UCSTL.mjs.map

package/dist/Text-Ci6UCSTL.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text-Ci6UCSTL.mjs","names":["signalEffect"],"sources":["../packages/ag-react/src/ThemeContext.tsx","../packages/ag-react/src/components/Box.tsx","../packages/ag-react/src/components/Text.tsx"],"sourcesContent":["/**\n * ThemeContext — delivers a Theme to the component tree.\n *\n * Wrap your app (or a subtree) in `<ThemeProvider theme={…}>` to make\n * `$token` color props resolve against that theme. Components call\n * `useTheme()` to read the current theme.\n *\n * @example\n * ```tsx\n * import { ThemeProvider, defaultDarkTheme } from '@silvery/ag-react'\n *\n * <ThemeProvider theme={defaultDarkTheme}>\n *   <App />\n * </ThemeProvider>\n * ```\n */\n\nimport { createContext, useContext } from \"react\"\nimport type { Theme, ActiveScheme } from \"@silvery/ansi\"\nimport { defaultDarkTheme } from \"@silvery/theme/schemes\"\n\n// ============================================================================\n// Context\n// ============================================================================\n\n/** @internal Exported for ThemeProvider and Text component — not public API. */\nexport const ThemeContext = createContext<Theme>(defaultDarkTheme)\n\n/**\n * Context that carries scheme detection metadata (name, source, confidence).\n *\n * Separate from ThemeContext because scheme metadata is orthogonal to the\n * theme token bag. Populated by `<ThemeProvider scheme={...}>` when the\n * caller passes detection provenance (e.g. from `runThemed`). Null when\n * no scheme metadata was injected.\n *\n * @internal Exported for ThemeProvider.\n */\nexport const ActiveSchemeContext = createContext<ActiveScheme | null>(null)\n\n// ============================================================================\n// Hook\n// ============================================================================\n\n/**\n * Read the current theme from context.\n *\n * Returns `defaultDarkTheme` when no `ThemeProvider` is present.\n */\nexport function useTheme(): Theme {\n  return useContext(ThemeContext)\n}\n","/**\n * Silvery Box Component\n *\n * The primary layout primitive for Silvery. Box is a flexbox container that can hold\n * other Box or Text components. It supports all standard flexbox properties,\n * dimensions, spacing, and borders.\n *\n * Box renders to an 'silvery-box' host element that the reconciler converts to an\n * SilveryNode with an associated Yoga layout node.\n *\n * Box provides NodeContext to its children, enabling useBoxRect/useScrollRect hooks.\n * It also supports forwardRef for imperative access and onLayout for layout callbacks.\n */\n\nimport {\n  type ForwardedRef,\n  type JSX,\n  type ReactNode,\n  forwardRef,\n  useImperativeHandle,\n  useLayoutEffect,\n  useRef,\n  useState,\n} from \"react\"\nimport { effect as signalEffect } from \"@silvery/signals\"\nimport { NodeContext } from \"../context\"\nimport { getLayoutSignals, observeLayoutSignal } from \"@silvery/ag/layout-signals\"\nimport type { BoxProps as BoxPropsType, AgNode, Rect } from \"@silvery/ag/types\"\n\n// ============================================================================\n// Props\n// ============================================================================\n\nexport interface BoxProps extends BoxPropsType {\n  /** Child elements */\n  children?: ReactNode\n}\n\n/**\n * Methods exposed via ref on Box component.\n */\nexport interface BoxHandle {\n  /** Get the underlying SilveryNode */\n  getNode(): AgNode | null\n  /** Get the current content-relative layout rect */\n  getBoxRect(): Rect | null\n  /** Get the current screen-relative layout rect */\n  getScrollRect(): Rect | null\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Flexbox container component for terminal UIs.\n *\n * Provides NodeContext to children, enabling useBoxRect/useScrollRect hooks.\n * Supports forwardRef for imperative access and onLayout for layout callbacks.\n *\n * @example\n * ```tsx\n * // Basic vertical layout (default)\n * <Box>\n *   <Text>Line 1</Text>\n *   <Text>Line 2</Text>\n * </Box>\n *\n * // Horizontal layout with spacing\n * <Box flexDirection=\"row\" gap={2}>\n *   <Box width={10}><Text>Left</Text></Box>\n *   <Box flexGrow={1}><Text>Center</Text></Box>\n *   <Box width={10}><Text>Right</Text></Box>\n * </Box>\n *\n * // With border\n * <Box borderStyle=\"single\" borderColor=\"green\" padding={1}>\n *   <Text>Boxed content</Text>\n * </Box>\n *\n * // With ref and onLayout\n * const boxRef = useRef<BoxHandle>(null);\n * <Box\n *   ref={boxRef}\n *   onLayout={(layout) => console.log('Size:', layout.width, layout.height)}\n * >\n *   <Text>Content</Text>\n * </Box>\n * ```\n */\nexport const Box = forwardRef(function Box(\n  props: BoxProps,\n  ref: ForwardedRef<BoxHandle>,\n): JSX.Element {\n  const { children, onLayout, ...restProps } = props\n  const nodeRef = useRef<AgNode | null>(null)\n  const [node, setNode] = useState<AgNode | null>(null)\n\n  // Track the last layout we reported to onLayout to avoid duplicate calls\n  const lastReportedLayout = useRef<Rect | null>(null)\n\n  // After mount, ref points to the SilveryNode. Update state once to provide\n  // the node to children via context. Only runs on mount ([] deps).\n  useLayoutEffect(() => {\n    if (nodeRef.current) {\n      setNode(nodeRef.current)\n    }\n  }, [])\n\n  // Wire up onLayout callback - subscribe via layout signals\n  useLayoutEffect(() => {\n    if (!onLayout || !node) return\n\n    const releaseObservation = observeLayoutSignal(node, \"boxRect\")\n    const signals = getLayoutSignals(node)\n    const onLayoutRef = { current: onLayout }\n    onLayoutRef.current = onLayout\n\n    const dispose = signalEffect(() => {\n      const layout = signals.boxRect()\n      if (!layout) return\n\n      // Only call onLayout if layout actually changed\n      const last = lastReportedLayout.current\n      if (\n        !last ||\n        last.x !== layout.x ||\n        last.y !== layout.y ||\n        last.width !== layout.width ||\n        last.height !== layout.height\n      ) {\n        lastReportedLayout.current = layout\n        onLayoutRef.current(layout)\n      }\n    })\n\n    return () => {\n      dispose()\n      releaseObservation()\n    }\n  }, [node, onLayout])\n\n  // Expose imperative methods via ref\n  useImperativeHandle(\n    ref,\n    () => ({\n      getNode: () => nodeRef.current,\n      getBoxRect: () => nodeRef.current?.boxRect ?? null,\n      getScrollRect: () => nodeRef.current?.scrollRect ?? null,\n    }),\n    [],\n  )\n\n  // Render silvery-box with ref, wrap children in NodeContext\n  // The reconciler creates an SilveryNode, ref gives us access to it\n  return (\n    <silvery-box ref={nodeRef} {...restProps}>\n      <NodeContext.Provider value={node}>{children}</NodeContext.Provider>\n    </silvery-box>\n  )\n})\n","/**\n * Silvery Text Component\n *\n * The primitive for rendering text content in Silvery. Text supports styling\n * (colors, bold, italic, etc.) and text wrapping/truncation modes.\n *\n * Text renders to an 'silvery-text' host element that the reconciler converts\n * to an SilveryNode containing the text content.\n *\n * Supports forwardRef for imperative access to the underlying node.\n */\n\nimport { type ForwardedRef, type JSX, type ReactNode, forwardRef, useContext } from \"react\"\nimport type { AgNode, TextProps as TextPropsType } from \"@silvery/ag/types\"\nimport type { KnownVariant, Theme } from \"@silvery/ansi\"\nimport { KNOWN_VARIANTS } from \"@silvery/ansi\"\nimport { ThemeContext } from \"../ThemeContext\"\n\n// ============================================================================\n// Runtime variant warning — fires once per (theme, variantName) pair.\n// Warns the developer that a variant lookup returned undefined (typo, etc.).\n// Does NOT throw — silent no-op rendering is still the correct behavior.\n// Only fires in development/test (process.env.NODE_ENV !== \"production\").\n// ============================================================================\n\n/** Per-theme set of variant names that have already triggered a warning. */\nconst _warnedVariants = new WeakMap<Theme, Set<string>>()\n\nfunction warnOnce(theme: Theme, variant: string): void {\n  if (process.env.NODE_ENV === \"production\") return\n  let warned = _warnedVariants.get(theme)\n  if (warned === undefined) {\n    warned = new Set<string>()\n    _warnedVariants.set(theme, warned)\n  }\n  if (warned.has(variant)) return\n  warned.add(variant)\n  const known = KNOWN_VARIANTS.join(\", \")\n  // eslint-disable-next-line no-console\n  console.warn(\n    `[silvery] <Text variant=\"${variant}\"> — unknown variant, defaulting to bare. ` +\n      `Known: ${known}. ` +\n      `Register custom variants via <ThemeProvider tokens={{ variants: { ${variant}: {...} } }}>.`,\n  )\n}\n\n// ============================================================================\n// Props\n// ============================================================================\n\nexport interface TextProps extends TextPropsType {\n  /** Text content (string, number, or nested Text elements) */\n  children?: ReactNode\n  /**\n   * Typography variant — pulls defaults from `theme.variants[variant]`.\n   * Caller props always win over variant values (variant is the *default*).\n   *\n   * @example\n   * ```tsx\n   * <Text variant=\"h1\">Title</Text>\n   * // → uses theme.variants.h1 as defaults ({ color: \"$fg-accent\", bold: true })\n   *\n   * <Text variant=\"h1\" color=\"$fg-success\">Done</Text>\n   * // → color=\"$fg-success\" wins; bold still comes from variant\n   * ```\n   */\n  variant?: KnownVariant\n}\n\n/**\n * Methods exposed via ref on Text component.\n */\nexport interface TextHandle {\n  /** Get the underlying SilveryNode */\n  getNode(): AgNode | null\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Text rendering component for terminal UIs.\n *\n * Supports forwardRef for imperative access to the underlying node.\n *\n * @example\n * ```tsx\n * // Basic text\n * <Text>Hello, world!</Text>\n *\n * // Colored text\n * <Text color=\"green\">Success!</Text>\n * <Text color=\"#ff6600\">Orange text</Text>\n *\n * // Styled text\n * <Text bold>Important</Text>\n * <Text italic underline>Emphasized</Text>\n *\n * // Combined styles\n * <Text color=\"red\" bold inverse>Alert!</Text>\n *\n * // Nested text with different styles\n * <Text>\n *   Normal <Text bold>bold</Text> normal\n * </Text>\n *\n * // Truncation modes\n * <Text wrap=\"truncate\">This long text will be truncated...</Text>\n * <Text wrap=\"truncate-middle\">Long...text</Text>\n *\n * // With ref\n * const textRef = useRef<TextHandle>(null);\n * <Text ref={textRef}>Hello</Text>\n *\n * // With variant — typography presets from theme\n * <Text variant=\"h1\">Page Title</Text>\n * <Text variant=\"body-muted\">Caption text</Text>\n * <Text variant=\"h1\" color=\"$fg-success\">Done</Text>  // caller color wins\n * ```\n */\nexport const Text = forwardRef(function Text(\n  props: TextProps,\n  ref: ForwardedRef<TextHandle>,\n): JSX.Element {\n  const { children, variant, ...callerProps } = props\n  const theme = useContext(ThemeContext)\n\n  // Resolve variant defaults. Variant is the DEFAULT; caller props always win.\n  //\n  // Merge strategy (three passes):\n  //   1. callerProps — base layer: all caller props including undefined values\n  //                    (preserves non-style props like wrap, data-*, etc.)\n  //   2. variantDefaults — overwrite only where callerProps was undefined\n  //                        (fills in color/bold/etc when caller didn't specify)\n  //   3. definedCallerProps — restore any explicitly provided caller overrides\n  //                           (e.g. color=\"$fg-success\", bold={false} win over variant)\n  //\n  // Example: `<Text variant=\"h1\">T</Text>` (color not passed → undefined)\n  //   callerProps = { color: undefined }\n  //   variantDefaults = { color: \"$fg-accent\", bold: true }\n  //   definedCallerProps = {} (color=undefined excluded)\n  //   → { color: \"$fg-accent\", bold: true } ✓\n  //\n  // Example: `<Text variant=\"h1\" color=\"$fg-success\">T</Text>`\n  //   callerProps = { color: \"$fg-success\" }\n  //   variantDefaults = { color: \"$fg-accent\", bold: true }\n  //   definedCallerProps = { color: \"$fg-success\" }\n  //   → { color: \"$fg-success\", bold: true } ✓ (caller color wins)\n  let styleProps = callerProps\n  if (variant != null) {\n    const resolved = theme.variants?.[variant]\n    if (resolved === undefined) {\n      warnOnce(theme, variant)\n    }\n    const variantDefaults = resolved ?? {}\n    const definedCallerProps: Record<string, unknown> = {}\n    for (const key of Object.keys(callerProps)) {\n      const v = (callerProps as Record<string, unknown>)[key]\n      if (v !== undefined) definedCallerProps[key] = v\n    }\n    styleProps = { ...callerProps, ...variantDefaults, ...definedCallerProps } as typeof callerProps\n  }\n\n  // For Text, we need to pass the ref through to the host element\n  // The reconciler's getPublicInstance will return the SilveryNode\n  // We wrap it in a TextHandle for type safety\n  return (\n    <silvery-text\n      ref={(node: AgNode | null) => {\n        // Handle both callback refs and RefObjects\n        if (typeof ref === \"function\") {\n          ref(node ? { getNode: () => node } : null)\n        } else if (ref) {\n          ref.current = node ? { getNode: () => node } : null\n        }\n      }}\n      {...styleProps}\n    >\n      {children}\n    </silvery-text>\n  )\n})\n"],"mappings":"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"}