@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-OQERHIQP.js

@@ -0,0 +1,287 @@
+"use client";
+
+// src/token-usage.tsx
+import { Button } from "@elabs-ai/components-ui";
+import { HoverCard, HoverCardContent, HoverCardTrigger } from "@elabs-ai/components-ui";
+import { Progress } from "@elabs-ai/components-ui";
+import { useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { createContext, useContext, useMemo } from "react";
+import { getUsage } from "tokenlens";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PERCENT_MAX = 100;
+var ICON_RADIUS = 10;
+var ICON_VIEWBOX = 24;
+var ICON_CENTER = 12;
+var ICON_STROKE_WIDTH = 2;
+var TokenUsageContext = createContext(null);
+var useTokenUsageValue = () => {
+  const context = useContext(TokenUsageContext);
+  if (!context) {
+    throw new Error("TokenUsage components must be used within TokenUsage");
+  }
+  return context;
+};
+var TokenUsage = ({
+  usedTokens,
+  maxTokens,
+  usage,
+  modelId,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ maxTokens, modelId, usage, usedTokens }),
+    [maxTokens, modelId, usage, usedTokens]
+  );
+  return /* @__PURE__ */ jsx(TokenUsageContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(HoverCard, { closeDelay: 0, openDelay: 0, ...props }) });
+};
+var TokenUsageIcon = () => {
+  const { t } = useLocale();
+  const { usedTokens, maxTokens } = useTokenUsageValue();
+  const circumference = 2 * Math.PI * ICON_RADIUS;
+  const usedPercent = usedTokens / maxTokens;
+  const dashOffset = circumference * (1 - usedPercent);
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-label": t("ai.tokenUsage.usage"),
+      height: "20",
+      role: "img",
+      style: { color: "currentcolor" },
+      viewBox: `0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`,
+      width: "20",
+      children: [
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.25",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeWidth: ICON_STROKE_WIDTH
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: ICON_CENTER,
+            cy: ICON_CENTER,
+            fill: "none",
+            opacity: "0.7",
+            r: ICON_RADIUS,
+            stroke: "currentColor",
+            strokeDasharray: `${circumference} ${circumference}`,
+            strokeDashoffset: dashOffset,
+            strokeLinecap: "round",
+            strokeWidth: ICON_STROKE_WIDTH,
+            style: { transform: "rotate(-90deg)", transformOrigin: "center" }
+          }
+        )
+      ]
+    }
+  );
+};
+var TokenUsageTrigger = ({ children, ...props }) => {
+  const { formatNumber } = useLocale();
+  const { usedTokens, maxTokens } = useTokenUsageValue();
+  const usedPercent = usedTokens / maxTokens;
+  const renderedPercent = formatNumber(usedPercent, {
+    maximumFractionDigits: 1,
+    style: "percent"
+  });
+  return /* @__PURE__ */ jsx(HoverCardTrigger, { asChild: true, children: children ?? /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "font-medium text-muted-foreground", children: renderedPercent }),
+    /* @__PURE__ */ jsx(TokenUsageIcon, {})
+  ] }) });
+};
+var TokenUsageContent = ({ className, ...props }) => /* @__PURE__ */ jsx(HoverCardContent, { className: cn("min-w-60 divide-y overflow-hidden p-0", className), ...props });
+var TokenUsageContentHeader = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { formatNumber } = useLocale();
+  const { usedTokens, maxTokens } = useTokenUsageValue();
+  const usedPercent = usedTokens / maxTokens;
+  const displayPct = formatNumber(usedPercent, {
+    maximumFractionDigits: 1,
+    style: "percent"
+  });
+  const used = formatNumber(usedTokens, {
+    notation: "compact"
+  });
+  const total = formatNumber(maxTokens, {
+    notation: "compact"
+  });
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full space-y-2 p-3", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-meta", children: [
+      /* @__PURE__ */ jsx("p", { children: displayPct }),
+      /* @__PURE__ */ jsxs("p", { className: "font-mono text-muted-foreground", children: [
+        used,
+        " / ",
+        total
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx(Progress, { className: "bg-muted", value: usedPercent * PERCENT_MAX }) })
+  ] }) });
+};
+var TokenUsageContentBody = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("w-full p-3", className), ...props, children });
+var TokenUsageContentFooter = ({
+  children,
+  className,
+  ...props
+}) => {
+  const { formatNumber, t } = useLocale();
+  const { modelId, usage } = useTokenUsageValue();
+  const costUSD = modelId ? getUsage({
+    modelId,
+    usage: {
+      input: usage?.inputTokens ?? 0,
+      output: usage?.outputTokens ?? 0
+    }
+  }).costUSD?.totalUSD : void 0;
+  const totalCost = formatNumber(costUSD ?? 0, {
+    currency: "USD",
+    style: "currency"
+  });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "flex w-full items-center justify-between gap-3 bg-secondary p-3 text-meta",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ai.tokenUsage.totalCost") }),
+        /* @__PURE__ */ jsx("span", { children: totalCost })
+      ] })
+    }
+  );
+};
+var TokensWithCost = ({ tokens, costText }) => {
+  const { formatNumber } = useLocale();
+  return /* @__PURE__ */ jsxs("span", { children: [
+    tokens === void 0 ? "\u2014" : formatNumber(tokens, { notation: "compact" }),
+    costText ? /* @__PURE__ */ jsxs("span", { className: "ms-2 text-muted-foreground", children: [
+      "\u2022 ",
+      costText
+    ] }) : null
+  ] });
+};
+var TokenUsageInput = ({ className, children, ...props }) => {
+  const { formatNumber, t } = useLocale();
+  const { usage, modelId } = useTokenUsageValue();
+  const inputTokens = usage?.inputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!inputTokens) {
+    return null;
+  }
+  const inputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: inputTokens, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const inputCostText = formatNumber(inputCost ?? 0, {
+    currency: "USD",
+    style: "currency"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between text-meta", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ai.tokenUsage.input") }),
+    /* @__PURE__ */ jsx(TokensWithCost, { costText: inputCostText, tokens: inputTokens })
+  ] });
+};
+var TokenUsageOutput = ({ className, children, ...props }) => {
+  const { formatNumber, t } = useLocale();
+  const { usage, modelId } = useTokenUsageValue();
+  const outputTokens = usage?.outputTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!outputTokens) {
+    return null;
+  }
+  const outputCost = modelId ? getUsage({
+    modelId,
+    usage: { input: 0, output: outputTokens }
+  }).costUSD?.totalUSD : void 0;
+  const outputCostText = formatNumber(outputCost ?? 0, {
+    currency: "USD",
+    style: "currency"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between text-meta", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ai.tokenUsage.output") }),
+    /* @__PURE__ */ jsx(TokensWithCost, { costText: outputCostText, tokens: outputTokens })
+  ] });
+};
+var TokenUsageReasoning = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { formatNumber, t } = useLocale();
+  const { usage, modelId } = useTokenUsageValue();
+  const reasoningTokens = usage?.outputTokenDetails?.reasoningTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!reasoningTokens) {
+    return null;
+  }
+  const reasoningCost = modelId ? getUsage({
+    modelId,
+    usage: { reasoningTokens }
+  }).costUSD?.totalUSD : void 0;
+  const reasoningCostText = formatNumber(reasoningCost ?? 0, {
+    currency: "USD",
+    style: "currency"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between text-meta", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ai.tokenUsage.reasoning") }),
+    /* @__PURE__ */ jsx(TokensWithCost, { costText: reasoningCostText, tokens: reasoningTokens })
+  ] });
+};
+var TokenUsageCache = ({ className, children, ...props }) => {
+  const { formatNumber, t } = useLocale();
+  const { usage, modelId } = useTokenUsageValue();
+  const cacheTokens = usage?.inputTokenDetails?.cacheReadTokens ?? 0;
+  if (children) {
+    return children;
+  }
+  if (!cacheTokens) {
+    return null;
+  }
+  const cacheCost = modelId ? getUsage({
+    modelId,
+    usage: { cacheReads: cacheTokens, input: 0, output: 0 }
+  }).costUSD?.totalUSD : void 0;
+  const cacheCostText = formatNumber(cacheCost ?? 0, {
+    currency: "USD",
+    style: "currency"
+  });
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center justify-between text-meta", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: t("ai.tokenUsage.cache") }),
+    /* @__PURE__ */ jsx(TokensWithCost, { costText: cacheCostText, tokens: cacheTokens })
+  ] });
+};
+
+export {
+  TokenUsage,
+  TokenUsageTrigger,
+  TokenUsageContent,
+  TokenUsageContentHeader,
+  TokenUsageContentBody,
+  TokenUsageContentFooter,
+  TokenUsageInput,
+  TokenUsageOutput,
+  TokenUsageReasoning,
+  TokenUsageCache
+};
+//# sourceMappingURL=chunk-OQERHIQP.js.map

package/dist/chunk-OQERHIQP.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/token-usage.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@elabs-ai/components-ui\";\nimport { HoverCard, HoverCardContent, HoverCardTrigger } from \"@elabs-ai/components-ui\";\nimport { Progress } from \"@elabs-ai/components-ui\";\nimport { useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { LanguageModelUsage } from \"ai\";\nimport type { ComponentProps } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\nimport { getUsage } from \"tokenlens\";\n\nconst PERCENT_MAX = 100;\nconst ICON_RADIUS = 10;\nconst ICON_VIEWBOX = 24;\nconst ICON_CENTER = 12;\nconst ICON_STROKE_WIDTH = 2;\n\ntype ModelId = string;\n\ninterface TokenUsageSchema {\n  usedTokens: number;\n  maxTokens: number;\n  usage?: LanguageModelUsage;\n  modelId?: ModelId;\n}\n\nconst TokenUsageContext = createContext<TokenUsageSchema | null>(null);\n\nconst useTokenUsageValue = () => {\n  const context = useContext(TokenUsageContext);\n\n  if (!context) {\n    throw new Error(\"TokenUsage components must be used within TokenUsage\");\n  }\n\n  return context;\n};\n\nexport type TokenUsageProps = ComponentProps<typeof HoverCard> & TokenUsageSchema;\n\nexport const TokenUsage = ({\n  usedTokens,\n  maxTokens,\n  usage,\n  modelId,\n  ...props\n}: TokenUsageProps) => {\n  const contextValue = useMemo(\n    () => ({ maxTokens, modelId, usage, usedTokens }),\n    [maxTokens, modelId, usage, usedTokens],\n  );\n\n  return (\n    <TokenUsageContext.Provider value={contextValue}>\n      <HoverCard closeDelay={0} openDelay={0} {...props} />\n    </TokenUsageContext.Provider>\n  );\n};\n\nconst TokenUsageIcon = () => {\n  const { t } = useLocale();\n  const { usedTokens, maxTokens } = useTokenUsageValue();\n  const circumference = 2 * Math.PI * ICON_RADIUS;\n  const usedPercent = usedTokens / maxTokens;\n  const dashOffset = circumference * (1 - usedPercent);\n\n  return (\n    <svg\n      aria-label={t(\"ai.tokenUsage.usage\")}\n      height=\"20\"\n      role=\"img\"\n      style={{ color: \"currentcolor\" }}\n      viewBox={`0 0 ${ICON_VIEWBOX} ${ICON_VIEWBOX}`}\n      width=\"20\"\n    >\n      <circle\n        cx={ICON_CENTER}\n        cy={ICON_CENTER}\n        fill=\"none\"\n        opacity=\"0.25\"\n        r={ICON_RADIUS}\n        stroke=\"currentColor\"\n        strokeWidth={ICON_STROKE_WIDTH}\n      />\n      <circle\n        cx={ICON_CENTER}\n        cy={ICON_CENTER}\n        fill=\"none\"\n        opacity=\"0.7\"\n        r={ICON_RADIUS}\n        stroke=\"currentColor\"\n        strokeDasharray={`${circumference} ${circumference}`}\n        strokeDashoffset={dashOffset}\n        strokeLinecap=\"round\"\n        strokeWidth={ICON_STROKE_WIDTH}\n        style={{ transform: \"rotate(-90deg)\", transformOrigin: \"center\" }}\n      />\n    </svg>\n  );\n};\n\nexport type TokenUsageTriggerProps = ComponentProps<typeof Button>;\n\nexport const TokenUsageTrigger = ({ children, ...props }: TokenUsageTriggerProps) => {\n  const { formatNumber } = useLocale();\n  const { usedTokens, maxTokens } = useTokenUsageValue();\n  const usedPercent = usedTokens / maxTokens;\n  const renderedPercent = formatNumber(usedPercent, {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  });\n\n  return (\n    <HoverCardTrigger asChild>\n      {children ?? (\n        <Button type=\"button\" variant=\"ghost\" {...props}>\n          <span className=\"font-medium text-muted-foreground\">{renderedPercent}</span>\n          <TokenUsageIcon />\n        </Button>\n      )}\n    </HoverCardTrigger>\n  );\n};\n\nexport type TokenUsageContentProps = ComponentProps<typeof HoverCardContent>;\n\nexport const TokenUsageContent = ({ className, ...props }: TokenUsageContentProps) => (\n  <HoverCardContent className={cn(\"min-w-60 divide-y overflow-hidden p-0\", className)} {...props} />\n);\n\nexport type TokenUsageContentHeaderProps = ComponentProps<\"div\">;\n\nexport const TokenUsageContentHeader = ({\n  children,\n  className,\n  ...props\n}: TokenUsageContentHeaderProps) => {\n  const { formatNumber } = useLocale();\n  const { usedTokens, maxTokens } = useTokenUsageValue();\n  const usedPercent = usedTokens / maxTokens;\n  const displayPct = formatNumber(usedPercent, {\n    maximumFractionDigits: 1,\n    style: \"percent\",\n  });\n  const used = formatNumber(usedTokens, {\n    notation: \"compact\",\n  });\n  const total = formatNumber(maxTokens, {\n    notation: \"compact\",\n  });\n\n  return (\n    <div className={cn(\"w-full space-y-2 p-3\", className)} {...props}>\n      {children ?? (\n        <>\n          <div className=\"flex items-center justify-between gap-3 text-meta\">\n            <p>{displayPct}</p>\n            <p className=\"font-mono text-muted-foreground\">\n              {used} / {total}\n            </p>\n          </div>\n          <div className=\"space-y-2\">\n            <Progress className=\"bg-muted\" value={usedPercent * PERCENT_MAX} />\n          </div>\n        </>\n      )}\n    </div>\n  );\n};\n\nexport type TokenUsageContentBodyProps = ComponentProps<\"div\">;\n\nexport const TokenUsageContentBody = ({\n  children,\n  className,\n  ...props\n}: TokenUsageContentBodyProps) => (\n  <div className={cn(\"w-full p-3\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type TokenUsageContentFooterProps = ComponentProps<\"div\">;\n\nexport const TokenUsageContentFooter = ({\n  children,\n  className,\n  ...props\n}: TokenUsageContentFooterProps) => {\n  const { formatNumber, t } = useLocale();\n  const { modelId, usage } = useTokenUsageValue();\n  const costUSD = modelId\n    ? getUsage({\n        modelId,\n        usage: {\n          input: usage?.inputTokens ?? 0,\n          output: usage?.outputTokens ?? 0,\n        },\n      }).costUSD?.totalUSD\n    : undefined;\n  const totalCost = formatNumber(costUSD ?? 0, {\n    currency: \"USD\",\n    style: \"currency\",\n  });\n\n  return (\n    <div\n      className={cn(\n        \"flex w-full items-center justify-between gap-3 bg-secondary p-3 text-meta\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          <span className=\"text-muted-foreground\">{t(\"ai.tokenUsage.totalCost\")}</span>\n          <span>{totalCost}</span>\n        </>\n      )}\n    </div>\n  );\n};\n\nconst TokensWithCost = ({ tokens, costText }: { tokens?: number; costText?: string }) => {\n  const { formatNumber } = useLocale();\n  return (\n    <span>\n      {tokens === undefined ? \"—\" : formatNumber(tokens, { notation: \"compact\" })}\n      {costText ? <span className=\"ms-2 text-muted-foreground\">• {costText}</span> : null}\n    </span>\n  );\n};\n\nexport type TokenUsageInputProps = ComponentProps<\"div\">;\n\nexport const TokenUsageInput = ({ className, children, ...props }: TokenUsageInputProps) => {\n  const { formatNumber, t } = useLocale();\n  const { usage, modelId } = useTokenUsageValue();\n  const inputTokens = usage?.inputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!inputTokens) {\n    return null;\n  }\n\n  const inputCost = modelId\n    ? getUsage({\n        modelId,\n        usage: { input: inputTokens, output: 0 },\n      }).costUSD?.totalUSD\n    : undefined;\n  const inputCostText = formatNumber(inputCost ?? 0, {\n    currency: \"USD\",\n    style: \"currency\",\n  });\n\n  return (\n    <div className={cn(\"flex items-center justify-between text-meta\", className)} {...props}>\n      <span className=\"text-muted-foreground\">{t(\"ai.tokenUsage.input\")}</span>\n      <TokensWithCost costText={inputCostText} tokens={inputTokens} />\n    </div>\n  );\n};\n\nexport type TokenUsageOutputProps = ComponentProps<\"div\">;\n\nexport const TokenUsageOutput = ({ className, children, ...props }: TokenUsageOutputProps) => {\n  const { formatNumber, t } = useLocale();\n  const { usage, modelId } = useTokenUsageValue();\n  const outputTokens = usage?.outputTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!outputTokens) {\n    return null;\n  }\n\n  const outputCost = modelId\n    ? getUsage({\n        modelId,\n        usage: { input: 0, output: outputTokens },\n      }).costUSD?.totalUSD\n    : undefined;\n  const outputCostText = formatNumber(outputCost ?? 0, {\n    currency: \"USD\",\n    style: \"currency\",\n  });\n\n  return (\n    <div className={cn(\"flex items-center justify-between text-meta\", className)} {...props}>\n      <span className=\"text-muted-foreground\">{t(\"ai.tokenUsage.output\")}</span>\n      <TokensWithCost costText={outputCostText} tokens={outputTokens} />\n    </div>\n  );\n};\n\nexport type TokenUsageReasoningProps = ComponentProps<\"div\">;\n\nexport const TokenUsageReasoning = ({\n  className,\n  children,\n  ...props\n}: TokenUsageReasoningProps) => {\n  const { formatNumber, t } = useLocale();\n  const { usage, modelId } = useTokenUsageValue();\n  // `reasoningTokens` moved under `outputTokenDetails` in ai@7 (the flat,\n  // deprecated top-level alias from ai@6 was removed).\n  const reasoningTokens = usage?.outputTokenDetails?.reasoningTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!reasoningTokens) {\n    return null;\n  }\n\n  const reasoningCost = modelId\n    ? getUsage({\n        modelId,\n        usage: { reasoningTokens },\n      }).costUSD?.totalUSD\n    : undefined;\n  const reasoningCostText = formatNumber(reasoningCost ?? 0, {\n    currency: \"USD\",\n    style: \"currency\",\n  });\n\n  return (\n    <div className={cn(\"flex items-center justify-between text-meta\", className)} {...props}>\n      <span className=\"text-muted-foreground\">{t(\"ai.tokenUsage.reasoning\")}</span>\n      <TokensWithCost costText={reasoningCostText} tokens={reasoningTokens} />\n    </div>\n  );\n};\n\nexport type TokenUsageCacheProps = ComponentProps<\"div\">;\n\nexport const TokenUsageCache = ({ className, children, ...props }: TokenUsageCacheProps) => {\n  const { formatNumber, t } = useLocale();\n  const { usage, modelId } = useTokenUsageValue();\n  // `cachedInputTokens` moved under `inputTokenDetails.cacheReadTokens` in\n  // ai@7 (the flat, deprecated top-level alias from ai@6 was removed).\n  const cacheTokens = usage?.inputTokenDetails?.cacheReadTokens ?? 0;\n\n  if (children) {\n    return children;\n  }\n\n  if (!cacheTokens) {\n    return null;\n  }\n\n  const cacheCost = modelId\n    ? getUsage({\n        modelId,\n        usage: { cacheReads: cacheTokens, input: 0, output: 0 },\n      }).costUSD?.totalUSD\n    : undefined;\n  const cacheCostText = formatNumber(cacheCost ?? 0, {\n    currency: \"USD\",\n    style: \"currency\",\n  });\n\n  return (\n    <div className={cn(\"flex items-center justify-between text-meta\", className)} {...props}>\n      <span className=\"text-muted-foreground\">{t(\"ai.tokenUsage.cache\")}</span>\n      <TokensWithCost costText={cacheCostText} tokens={cacheTokens} />\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}

package/dist/chunk-P6YJAZFG.js

@@ -0,0 +1,103 @@
+"use client";
+
+// src/prompt-input-effort.tsx
+import { forwardRef } from "react";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import {
+  RadioGroup,
+  RadioGroupItem,
+  cn,
+  effortRungForIndex
+} from "@elabs-ai/components-ui";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PromptInputEffort = forwardRef(
+  function PromptInputEffort2({ levels, value, onValueChange, className, "aria-label": ariaLabel, ...props }, ref) {
+    const [selected, setSelected] = useControllableState({
+      defaultProp: levels[0]?.id ?? "",
+      onChange: onValueChange,
+      prop: value
+    });
+    const handleChange = (next) => {
+      if (!next) return;
+      setSelected(next);
+    };
+    const currentIndex = levels.findIndex((level) => level.id === selected);
+    const current = currentIndex >= 0 ? levels[currentIndex] : levels[0];
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-slot": "prompt-input-effort",
+        className: cn("inline-flex items-center gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            RadioGroup,
+            {
+              value: selected,
+              onValueChange: handleChange,
+              orientation: "horizontal",
+              "aria-label": ariaLabel,
+              "data-slot": "prompt-input-effort-scale",
+              className: "flex items-end gap-1",
+              children: levels.map((level, index) => {
+                const filled = currentIndex >= 0 && index <= currentIndex;
+                return (
+                  // The visible bar (`-visual`) and the click/tap/focus target
+                  // (the radio itself) are decoupled (WCAG 2.5.8, #161): the
+                  // radio's authored size IS the ramp's meaning, so it can't
+                  // simply grow to 24px without flattening the ramp. Instead the
+                  // radio is stretched to fill this `size-6` (24px) frame —
+                  // invisible, but a real >=24x24 hit box — while a separate,
+                  // `aria-hidden` sibling paints the small bar at its authored
+                  // `effortRungForIndex` size. Both are bottom-flush + centered
+                  // so the radio's own checked-state indicator still lands on
+                  // (and stays invisible against) the visible bar, exactly as
+                  // when the radio painted the bar directly.
+                  /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      "data-slot": "prompt-input-effort-item-frame",
+                      className: "relative inline-flex size-6 shrink-0 items-end justify-center",
+                      children: [
+                        /* @__PURE__ */ jsx(
+                          "span",
+                          {
+                            "aria-hidden": "true",
+                            "data-slot": "prompt-input-effort-item-visual",
+                            className: cn(
+                              effortRungForIndex(index, levels.length),
+                              "rounded-sm border",
+                              filled ? "border-primary bg-primary" : "border-border-strong bg-transparent"
+                            )
+                          }
+                        ),
+                        /* @__PURE__ */ jsx(
+                          RadioGroupItem,
+                          {
+                            value: level.id,
+                            "aria-label": level.label,
+                            "data-slot": "prompt-input-effort-item",
+                            "data-filled": filled ? "true" : "false",
+                            className: "absolute inset-0 flex size-full items-end justify-center rounded-sm border-0 bg-transparent p-0 shadow-none"
+                          }
+                        )
+                      ]
+                    },
+                    level.id
+                  )
+                );
+              })
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "text-body", "data-slot": "prompt-input-effort-label", children: current?.label })
+        ]
+      }
+    );
+  }
+);
+
+export {
+  PromptInputEffort
+};
+//# sourceMappingURL=chunk-P6YJAZFG.js.map

package/dist/chunk-P6YJAZFG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/prompt-input-effort.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, type HTMLAttributes } from \"react\";\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport {\n  RadioGroup,\n  RadioGroupItem,\n  cn,\n  effortRungForIndex,\n  type EffortLevel,\n} from \"@elabs-ai/components-ui\";\n\n// `EffortLevel` and the growing-square size ramp (`effortRungForIndex`,\n// formerly this file's private `SIZE_RUNGS`/`rungForIndex`) moved to\n// `@elabs-ai/components-ui` (`lib/operating-mode.ts`) — the terminal CLI\n// look-alike family's own effort chips (issue #117) reuse the same\n// vocabulary shape, and `@elabs-ai/components-ai`/\n// `@elabs-ai/components-terminal` are layer-2 DAG siblings that may not\n// import each other (T0; see\n// docs/decisions/2026-09-01-brainless-adoption-architecture.md § 4). Imported\n// above; NOT re-exported from here — a consumer imports `EffortLevel` from\n// `@elabs-ai/components-ui`.\n\nexport type PromptInputEffortProps = Omit<HTMLAttributes<HTMLDivElement>, \"onChange\"> & {\n  /** Ordered low → high. The order IS the semantics — render in this order. */\n  levels: EffortLevel[];\n  /** Controlled selected level id. Omit for the uncontrolled default (`levels[0]`). */\n  value?: string;\n  /** Fires with the chosen level's id. */\n  onValueChange?: (id: string) => void;\n  /**\n   * Accessible name for the whole scale (e.g. \"Reasoning effort\", \"Thinking\n   * budget\") — required because the NAME of the scale is as much the\n   * consumer's vocabulary as its levels are; this component has no default\n   * to fall back to.\n   */\n  \"aria-label\": string;\n};\n\n/**\n * PromptInputEffort — an ORDERED reasoning-effort/budget control.\n *\n * Renders `levels` as a row of same-shape squares that GROW in size, low to\n * high — the size ramp encodes the order on its own, before any selection is\n * made. Selecting a level fills every square up to and including it (solid\n * fill + coloured border) and leaves the rest hollow (outline only): the\n * indicator's FILL is the second, non-colour channel required by a\n * greyscale-legibility read — the size ramp and the solid/hollow shape both\n * survive a greyscale render, so the level is recoverable without colour.\n * The current level's name is additionally rendered as text.\n *\n * Built on Radix (`RadioGroup`/`RadioGroupItem` from `@elabs-ai/components-ui`,\n * `role=\"radiogroup\"` of `role=\"radio\"`s) for arrow-key navigation, roving\n * focus and an accessible-name announcement on the checked item — no\n * hand-rolled key handling.\n */\nexport const PromptInputEffort = forwardRef<HTMLDivElement, PromptInputEffortProps>(\n  function PromptInputEffort(\n    { levels, value, onValueChange, className, \"aria-label\": ariaLabel, ...props },\n    ref,\n  ) {\n    const [selected, setSelected] = useControllableState<string>({\n      defaultProp: levels[0]?.id ?? \"\",\n      onChange: onValueChange,\n      prop: value,\n    });\n\n    const handleChange = (next: string) => {\n      if (!next) return;\n      setSelected(next);\n    };\n\n    const currentIndex = levels.findIndex((level) => level.id === selected);\n    const current = currentIndex >= 0 ? levels[currentIndex] : levels[0];\n\n    return (\n      <div\n        ref={ref}\n        data-slot=\"prompt-input-effort\"\n        className={cn(\"inline-flex items-center gap-2\", className)}\n        {...props}\n      >\n        <RadioGroup\n          value={selected}\n          onValueChange={handleChange}\n          orientation=\"horizontal\"\n          aria-label={ariaLabel}\n          data-slot=\"prompt-input-effort-scale\"\n          className=\"flex items-end gap-1\"\n        >\n          {levels.map((level, index) => {\n            const filled = currentIndex >= 0 && index <= currentIndex;\n            return (\n              // The visible bar (`-visual`) and the click/tap/focus target\n              // (the radio itself) are decoupled (WCAG 2.5.8, #161): the\n              // radio's authored size IS the ramp's meaning, so it can't\n              // simply grow to 24px without flattening the ramp. Instead the\n              // radio is stretched to fill this `size-6` (24px) frame —\n              // invisible, but a real >=24x24 hit box — while a separate,\n              // `aria-hidden` sibling paints the small bar at its authored\n              // `effortRungForIndex` size. Both are bottom-flush + centered\n              // so the radio's own checked-state indicator still lands on\n              // (and stays invisible against) the visible bar, exactly as\n              // when the radio painted the bar directly.\n              <span\n                key={level.id}\n                data-slot=\"prompt-input-effort-item-frame\"\n                className=\"relative inline-flex size-6 shrink-0 items-end justify-center\"\n              >\n                <span\n                  aria-hidden=\"true\"\n                  data-slot=\"prompt-input-effort-item-visual\"\n                  className={cn(\n                    effortRungForIndex(index, levels.length),\n                    \"rounded-sm border\",\n                    filled ? \"border-primary bg-primary\" : \"border-border-strong bg-transparent\",\n                  )}\n                />\n                <RadioGroupItem\n                  value={level.id}\n                  aria-label={level.label}\n                  data-slot=\"prompt-input-effort-item\"\n                  data-filled={filled ? \"true\" : \"false\"}\n                  className=\"absolute inset-0 flex size-full items-end justify-center rounded-sm border-0 bg-transparent p-0 shadow-none\"\n                />\n              </span>\n            );\n          })}\n        </RadioGroup>\n        <span className=\"text-body\" data-slot=\"prompt-input-effort-label\">\n          {current?.label}\n        </span>\n      </div>\n    );\n  },\n);\n"],"mappings":";;;AAEA,SAAS,kBAAuC;AAChD,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AA8FO,SAKE,KALF;AAhDP,IAAM,oBAAoB;AAAA,EAC/B,SAASA,mBACP,EAAE,QAAQ,OAAO,eAAe,WAAW,cAAc,WAAW,GAAG,MAAM,GAC7E,KACA;AACA,UAAM,CAAC,UAAU,WAAW,IAAI,qBAA6B;AAAA,MAC3D,aAAa,OAAO,CAAC,GAAG,MAAM;AAAA,MAC9B,UAAU;AAAA,MACV,MAAM;AAAA,IACR,CAAC;AAED,UAAM,eAAe,CAAC,SAAiB;AACrC,UAAI,CAAC,KAAM;AACX,kBAAY,IAAI;AAAA,IAClB;AAEA,UAAM,eAAe,OAAO,UAAU,CAAC,UAAU,MAAM,OAAO,QAAQ;AACtE,UAAM,UAAU,gBAAgB,IAAI,OAAO,YAAY,IAAI,OAAO,CAAC;AAEnE,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,aAAU;AAAA,QACV,WAAW,GAAG,kCAAkC,SAAS;AAAA,QACxD,GAAG;AAAA,QAEJ;AAAA;AAAA,YAAC;AAAA;AAAA,cACC,OAAO;AAAA,cACP,eAAe;AAAA,cACf,aAAY;AAAA,cACZ,cAAY;AAAA,cACZ,aAAU;AAAA,cACV,WAAU;AAAA,cAET,iBAAO,IAAI,CAAC,OAAO,UAAU;AAC5B,sBAAM,SAAS,gBAAgB,KAAK,SAAS;AAC7C;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAYE;AAAA,oBAAC;AAAA;AAAA,sBAEC,aAAU;AAAA,sBACV,WAAU;AAAA,sBAEV;AAAA;AAAA,0BAAC;AAAA;AAAA,4BACC,eAAY;AAAA,4BACZ,aAAU;AAAA,4BACV,WAAW;AAAA,8BACT,mBAAmB,OAAO,OAAO,MAAM;AAAA,8BACvC;AAAA,8BACA,SAAS,8BAA8B;AAAA,4BACzC;AAAA;AAAA,wBACF;AAAA,wBACA;AAAA,0BAAC;AAAA;AAAA,4BACC,OAAO,MAAM;AAAA,4BACb,cAAY,MAAM;AAAA,4BAClB,aAAU;AAAA,4BACV,eAAa,SAAS,SAAS;AAAA,4BAC/B,WAAU;AAAA;AAAA,wBACZ;AAAA;AAAA;AAAA,oBAnBK,MAAM;AAAA,kBAoBb;AAAA;AAAA,cAEJ,CAAC;AAAA;AAAA,UACH;AAAA,UACA,oBAAC,UAAK,WAAU,aAAY,aAAU,6BACnC,mBAAS,OACZ;AAAA;AAAA;AAAA,IACF;AAAA,EAEJ;AACF;","names":["PromptInputEffort"]}

package/dist/chunk-PG7ERDOD.js

@@ -0,0 +1,65 @@
+"use client";
+
+// src/_lazy-mermaid.ts
+var DEFAULT_CONFIG = {
+  fontFamily: "monospace",
+  securityLevel: "strict",
+  startOnLoad: false,
+  suppressErrorRendering: true,
+  theme: "default"
+};
+var enginePromise;
+var loadEngine = () => {
+  enginePromise ??= import("mermaid").then((m) => {
+    const engine = m.default;
+    if (typeof engine?.initialize !== "function" || typeof engine?.render !== "function") {
+      throw new Error("Cannot find module 'mermaid'");
+    }
+    return engine;
+  });
+  return enginePromise;
+};
+var preloadMermaid = () => {
+  void loadEngine();
+};
+var createLazyMermaidPlugin = (options = {}) => {
+  let initialized = false;
+  let config = { ...DEFAULT_CONFIG, ...options.config };
+  const instance = {
+    // Upstream calls `mermaid.initialize` synchronously here. We can't (the
+    // engine may not have loaded yet), so record the config and apply it inside
+    // `render`, which is the only place it can matter — Streamdown always calls
+    // `getMermaid()` immediately before awaiting `render()`.
+    initialize(next) {
+      config = { ...DEFAULT_CONFIG, ...options.config, ...next };
+      initialized = false;
+    },
+    async render(id, source) {
+      const engine = await loadEngine();
+      if (!initialized) {
+        engine.initialize(config);
+        initialized = true;
+      }
+      return engine.render(id, source);
+    }
+  };
+  return {
+    getMermaid(next) {
+      if (next) {
+        instance.initialize(next);
+      }
+      return instance;
+    },
+    language: "mermaid",
+    name: "mermaid",
+    type: "diagram"
+  };
+};
+var lazyMermaid = createLazyMermaidPlugin();
+
+export {
+  preloadMermaid,
+  createLazyMermaidPlugin,
+  lazyMermaid
+};
+//# sourceMappingURL=chunk-PG7ERDOD.js.map

package/dist/chunk-PG7ERDOD.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/_lazy-mermaid.ts"],"sourcesContent":["/**\n * A drop-in replacement for `@streamdown/mermaid`'s `mermaid` plugin that loads\n * the Mermaid engine **on first diagram render** instead of at import time.\n *\n * Why this exists\n * ---------------\n * `@streamdown/mermaid`'s dist opens with a static `import n from \"mermaid\"`, and\n * neither it nor `mermaid`/`dompurify`/`d3` declares `sideEffects`, so a bundler\n * must keep the whole edge. `@elabs-ai/components-ai` imported that plugin from three modules\n * (`message`, `reasoning`, `markdown-view`), which put Mermaid + d3 + DOMPurify —\n * several MB — in the **entry chunk** of every consumer, including the vast\n * majority that never render a diagram.\n *\n * How it avoids a render flash\n * ----------------------------\n * `DiagramPlugin` is not the engine; it is a lazy accessor. Streamdown calls\n * `getMermaid()` only from inside its async diagram-render path (immediately\n * before `await instance.render(...)`), never at module or component init. So the\n * plugin object can be present from the very first frame — Streamdown always\n * treats a ```mermaid fence as a diagram — while the engine itself arrives with a\n * dynamic import inside `render()`. No content-sniffing, no plugin swap, no\n * suspense seam at the call sites, and no \"raw source flashes then becomes a\n * diagram\" transition.\n *\n * The upstream plugin is ~10 lines; its defaults and initialize-once semantics\n * are mirrored exactly below. The `DiagramPlugin` type is still imported (as a\n * type, so it erases) from `@streamdown/mermaid`, which keeps this honest against\n * the real contract at typecheck time.\n */\nimport type { DiagramPlugin, MermaidConfig, MermaidInstance } from \"@streamdown/mermaid\";\n\n/** Mirrors `@streamdown/mermaid`'s defaults — notably `securityLevel: \"strict\"`. */\nconst DEFAULT_CONFIG: MermaidConfig = {\n  fontFamily: \"monospace\",\n  securityLevel: \"strict\",\n  startOnLoad: false,\n  suppressErrorRendering: true,\n  theme: \"default\",\n};\n\ntype MermaidModule = {\n  initialize: (config: MermaidConfig) => void;\n  render: (id: string, source: string) => Promise<{ svg: string }>;\n};\n\n/**\n * Module-level singleton: the engine is fetched at most once per app, however\n * many diagrams or Streamdown instances render.\n */\nlet enginePromise: Promise<MermaidModule> | undefined;\n\nconst loadEngine = (): Promise<MermaidModule> => {\n  enginePromise ??= import(\"mermaid\").then((m) => {\n    const engine = m.default as unknown as MermaidModule;\n    // `mermaid` is an optional peer (issue #33), but its bytes are always\n    // installed anyway: TWO of this package's own plain dependencies —\n    // `streamdown` and `@streamdown/mermaid` — each declare `mermaid` as\n    // their own plain, non-optional dependency (issue #94,\n    // `pnpm optional-peers:check` proves and tracks this). So a hoisting\n    // package manager (pnpm's default `node-linker=isolated` included, via\n    // phantom resolution through the virtual store) may still make the real\n    // bytes resolve even when a consumer never installed `mermaid`\n    // themselves — this guard does not cover that case, only a bundler\n    // whose optional-peer handling substitutes an EMPTY module (Vite's\n    // production stub is `export default {}`) once the peer is genuinely\n    // absent from the resolved tree. Without this guard that empty object\n    // resolves successfully and the crash lands one call later, on\n    // `engine.initialize is not a function` — a message\n    // `isModuleNotFoundMessage` does not recognize, so it reaches the user\n    // as \"Diagram couldn't be drawn\" with a Retry button that can never\n    // succeed, instead of the actionable capability-gap panel.\n    if (typeof engine?.initialize !== \"function\" || typeof engine?.render !== \"function\") {\n      throw new Error(\"Cannot find module 'mermaid'\");\n    }\n    return engine;\n  });\n  return enginePromise;\n};\n\n/**\n * Start fetching the Mermaid engine ahead of time.\n *\n * Optional. Call it when you already know the surface will render diagrams (on\n * route entry, or when a conversation is known to contain them) so the first\n * diagram doesn't pay the import latency. Safe to call repeatedly; safe to\n * ignore — rendering a diagram loads the engine either way.\n */\nexport const preloadMermaid = (): void => {\n  void loadEngine();\n};\n\n/**\n * Create a lazy Mermaid diagram plugin for Streamdown.\n *\n * @param options.config Mermaid config merged over the brand defaults.\n */\nexport const createLazyMermaidPlugin = (\n  options: { config?: MermaidConfig } = {},\n): DiagramPlugin => {\n  let initialized = false;\n  let config: MermaidConfig = { ...DEFAULT_CONFIG, ...options.config };\n\n  const instance: MermaidInstance = {\n    // Upstream calls `mermaid.initialize` synchronously here. We can't (the\n    // engine may not have loaded yet), so record the config and apply it inside\n    // `render`, which is the only place it can matter — Streamdown always calls\n    // `getMermaid()` immediately before awaiting `render()`.\n    initialize(next: MermaidConfig) {\n      config = { ...DEFAULT_CONFIG, ...options.config, ...next };\n      initialized = false;\n    },\n    async render(id: string, source: string) {\n      const engine = await loadEngine();\n      if (!initialized) {\n        engine.initialize(config);\n        initialized = true;\n      }\n      return engine.render(id, source);\n    },\n  };\n\n  return {\n    getMermaid(next?: MermaidConfig) {\n      if (next) {\n        instance.initialize(next);\n      }\n      return instance;\n    },\n    language: \"mermaid\",\n    name: \"mermaid\",\n    type: \"diagram\",\n  };\n};\n\n/**\n * The shared lazy Mermaid plugin — the `@elabs-ai/components-ai` replacement for\n * `@streamdown/mermaid`'s eager `mermaid` export. One instance for the whole\n * app, so the engine and its initialize-once state are shared.\n */\nexport const lazyMermaid: DiagramPlugin = createLazyMermaidPlugin();\n"],"mappings":";;;AAgCA,IAAM,iBAAgC;AAAA,EACpC,YAAY;AAAA,EACZ,eAAe;AAAA,EACf,aAAa;AAAA,EACb,wBAAwB;AAAA,EACxB,OAAO;AACT;AAWA,IAAI;AAEJ,IAAM,aAAa,MAA8B;AAC/C,oBAAkB,OAAO,SAAS,EAAE,KAAK,CAAC,MAAM;AAC9C,UAAM,SAAS,EAAE;AAkBjB,QAAI,OAAO,QAAQ,eAAe,cAAc,OAAO,QAAQ,WAAW,YAAY;AACpF,YAAM,IAAI,MAAM,8BAA8B;AAAA,IAChD;AACA,WAAO;AAAA,EACT,CAAC;AACD,SAAO;AACT;AAUO,IAAM,iBAAiB,MAAY;AACxC,OAAK,WAAW;AAClB;AAOO,IAAM,0BAA0B,CACrC,UAAsC,CAAC,MACrB;AAClB,MAAI,cAAc;AAClB,MAAI,SAAwB,EAAE,GAAG,gBAAgB,GAAG,QAAQ,OAAO;AAEnE,QAAM,WAA4B;AAAA;AAAA;AAAA;AAAA;AAAA,IAKhC,WAAW,MAAqB;AAC9B,eAAS,EAAE,GAAG,gBAAgB,GAAG,QAAQ,QAAQ,GAAG,KAAK;AACzD,oBAAc;AAAA,IAChB;AAAA,IACA,MAAM,OAAO,IAAY,QAAgB;AACvC,YAAM,SAAS,MAAM,WAAW;AAChC,UAAI,CAAC,aAAa;AAChB,eAAO,WAAW,MAAM;AACxB,sBAAc;AAAA,MAChB;AACA,aAAO,OAAO,OAAO,IAAI,MAAM;AAAA,IACjC;AAAA,EACF;AAEA,SAAO;AAAA,IACL,WAAW,MAAsB;AAC/B,UAAI,MAAM;AACR,iBAAS,WAAW,IAAI;AAAA,MAC1B;AACA,aAAO;AAAA,IACT;AAAA,IACA,UAAU;AAAA,IACV,MAAM;AAAA,IACN,MAAM;AAAA,EACR;AACF;AAOO,IAAM,cAA6B,wBAAwB;","names":[]}

package/dist/chunk-PIB5JBMA.js

@@ -0,0 +1,90 @@
+"use client";
+
+// src/transcription.tsx
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { createContext, useCallback, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var TranscriptionContext = createContext(null);
+var useTranscription = () => {
+  const context = useContext(TranscriptionContext);
+  if (!context) {
+    throw new Error("Transcription components must be used within Transcription");
+  }
+  return context;
+};
+var Transcription = ({
+  segments,
+  currentTime: externalCurrentTime,
+  onSeek,
+  className,
+  children,
+  ...props
+}) => {
+  const [currentTime, setCurrentTime] = useControllableState({
+    defaultProp: 0,
+    onChange: onSeek,
+    prop: externalCurrentTime
+  });
+  const contextValue = useMemo(
+    () => ({ currentTime, onSeek, onTimeUpdate: setCurrentTime, segments }),
+    [currentTime, onSeek, setCurrentTime, segments]
+  );
+  return /* @__PURE__ */ jsx(TranscriptionContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("flex flex-wrap gap-1 text-body leading-relaxed", className),
+      "data-slot": "transcription",
+      ...props,
+      children: segments.filter((segment) => segment.text.trim()).map((segment, index) => children(segment, index))
+    }
+  ) });
+};
+var TranscriptionSegment = ({
+  segment,
+  index,
+  className,
+  onClick,
+  ...props
+}) => {
+  const { currentTime, onSeek } = useTranscription();
+  const isActive = currentTime >= segment.startSecond && currentTime < segment.endSecond;
+  const isPast = currentTime >= segment.endSecond;
+  const handleClick = useCallback(
+    (event) => {
+      if (onSeek) {
+        onSeek(segment.startSecond);
+      }
+      onClick?.(event);
+    },
+    [onSeek, segment.startSecond, onClick]
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: cn(
+        "inline text-start",
+        // #399 — the active word is transcript TEXT: `-text` rung, not the fill.
+        isActive && "text-primary-text",
+        isPast && "text-muted-foreground",
+        !(isActive || isPast) && "text-muted-foreground/60",
+        onSeek && "cursor-pointer hover:text-foreground",
+        !onSeek && "cursor-default",
+        className
+      ),
+      "data-active": isActive,
+      "data-index": index,
+      "data-slot": "transcription-segment",
+      onClick: handleClick,
+      type: "button",
+      ...props,
+      children: segment.text
+    }
+  );
+};
+
+export {
+  Transcription,
+  TranscriptionSegment
+};
+//# sourceMappingURL=chunk-PIB5JBMA.js.map

package/dist/chunk-PIB5JBMA.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/transcription.tsx"],"sourcesContent":["\"use client\";\n\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport type { Experimental_TranscriptionResult as TranscriptionResult } from \"ai\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { createContext, useCallback, useContext, useMemo } from \"react\";\n\ntype TranscriptionSegment = TranscriptionResult[\"segments\"][number];\n\ninterface TranscriptionContextValue {\n  segments: TranscriptionSegment[];\n  currentTime: number;\n  onTimeUpdate: (time: number) => void;\n  onSeek?: (time: number) => void;\n}\n\nconst TranscriptionContext = createContext<TranscriptionContextValue | null>(null);\n\nconst useTranscription = () => {\n  const context = useContext(TranscriptionContext);\n  if (!context) {\n    throw new Error(\"Transcription components must be used within Transcription\");\n  }\n  return context;\n};\n\nexport type TranscriptionProps = Omit<ComponentProps<\"div\">, \"children\"> & {\n  segments: TranscriptionSegment[];\n  currentTime?: number;\n  onSeek?: (time: number) => void;\n  children: (segment: TranscriptionSegment, index: number) => ReactNode;\n};\n\nexport const Transcription = ({\n  segments,\n  currentTime: externalCurrentTime,\n  onSeek,\n  className,\n  children,\n  ...props\n}: TranscriptionProps) => {\n  const [currentTime, setCurrentTime] = useControllableState({\n    defaultProp: 0,\n    onChange: onSeek,\n    prop: externalCurrentTime,\n  });\n\n  const contextValue = useMemo(\n    () => ({ currentTime, onSeek, onTimeUpdate: setCurrentTime, segments }),\n    [currentTime, onSeek, setCurrentTime, segments],\n  );\n\n  return (\n    <TranscriptionContext.Provider value={contextValue}>\n      <div\n        className={cn(\"flex flex-wrap gap-1 text-body leading-relaxed\", className)}\n        data-slot=\"transcription\"\n        {...props}\n      >\n        {segments\n          .filter((segment) => segment.text.trim())\n          .map((segment, index) => children(segment, index))}\n      </div>\n    </TranscriptionContext.Provider>\n  );\n};\n\nexport type TranscriptionSegmentProps = ComponentProps<\"button\"> & {\n  segment: TranscriptionSegment;\n  index: number;\n};\n\nexport const TranscriptionSegment = ({\n  segment,\n  index,\n  className,\n  onClick,\n  ...props\n}: TranscriptionSegmentProps) => {\n  const { currentTime, onSeek } = useTranscription();\n\n  const isActive = currentTime >= segment.startSecond && currentTime < segment.endSecond;\n  const isPast = currentTime >= segment.endSecond;\n\n  const handleClick = useCallback(\n    (event: React.MouseEvent<HTMLButtonElement>) => {\n      if (onSeek) {\n        onSeek(segment.startSecond);\n      }\n      onClick?.(event);\n    },\n    [onSeek, segment.startSecond, onClick],\n  );\n\n  return (\n    <button\n      className={cn(\n        \"inline text-start\",\n        // #399 — the active word is transcript TEXT: `-text` rung, not the fill.\n        isActive && \"text-primary-text\",\n        isPast && \"text-muted-foreground\",\n        !(isActive || isPast) && \"text-muted-foreground/60\",\n        onSeek && \"cursor-pointer hover:text-foreground\",\n        !onSeek && \"cursor-default\",\n        className,\n      )}\n      data-active={isActive}\n      data-index={index}\n      data-slot=\"transcription-segment\"\n      onClick={handleClick}\n      type=\"button\"\n      {...props}\n    >\n      {segment.text}\n    </button>\n  );\n};\n"],"mappings":";;;AAEA,SAAS,4BAA4B;AACrC,SAAS,UAAU;AAGnB,SAAS,eAAe,aAAa,YAAY,eAAe;AAiD1D;AAtCN,IAAM,uBAAuB,cAAgD,IAAI;AAEjF,IAAM,mBAAmB,MAAM;AAC7B,QAAM,UAAU,WAAW,oBAAoB;AAC/C,MAAI,CAAC,SAAS;AACZ,UAAM,IAAI,MAAM,4DAA4D;AAAA,EAC9E;AACA,SAAO;AACT;AASO,IAAM,gBAAgB,CAAC;AAAA,EAC5B;AAAA,EACA,aAAa;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0B;AACxB,QAAM,CAAC,aAAa,cAAc,IAAI,qBAAqB;AAAA,IACzD,aAAa;AAAA,IACb,UAAU;AAAA,IACV,MAAM;AAAA,EACR,CAAC;AAED,QAAM,eAAe;AAAA,IACnB,OAAO,EAAE,aAAa,QAAQ,cAAc,gBAAgB,SAAS;AAAA,IACrE,CAAC,aAAa,QAAQ,gBAAgB,QAAQ;AAAA,EAChD;AAEA,SACE,oBAAC,qBAAqB,UAArB,EAA8B,OAAO,cACpC;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,GAAG,kDAAkD,SAAS;AAAA,MACzE,aAAU;AAAA,MACT,GAAG;AAAA,MAEH,mBACE,OAAO,CAAC,YAAY,QAAQ,KAAK,KAAK,CAAC,EACvC,IAAI,CAAC,SAAS,UAAU,SAAS,SAAS,KAAK,CAAC;AAAA;AAAA,EACrD,GACF;AAEJ;AAOO,IAAM,uBAAuB,CAAC;AAAA,EACnC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,EAAE,aAAa,OAAO,IAAI,iBAAiB;AAEjD,QAAM,WAAW,eAAe,QAAQ,eAAe,cAAc,QAAQ;AAC7E,QAAM,SAAS,eAAe,QAAQ;AAEtC,QAAM,cAAc;AAAA,IAClB,CAAC,UAA+C;AAC9C,UAAI,QAAQ;AACV,eAAO,QAAQ,WAAW;AAAA,MAC5B;AACA,gBAAU,KAAK;AAAA,IACjB;AAAA,IACA,CAAC,QAAQ,QAAQ,aAAa,OAAO;AAAA,EACvC;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA;AAAA,QAEA,YAAY;AAAA,QACZ,UAAU;AAAA,QACV,EAAE,YAAY,WAAW;AAAA,QACzB,UAAU;AAAA,QACV,CAAC,UAAU;AAAA,QACX;AAAA,MACF;AAAA,MACA,eAAa;AAAA,MACb,cAAY;AAAA,MACZ,aAAU;AAAA,MACV,SAAS;AAAA,MACT,MAAK;AAAA,MACJ,GAAG;AAAA,MAEH,kBAAQ;AAAA;AAAA,EACX;AAEJ;","names":[]}

package/dist/chunk-PQ5BPIWQ.js

@@ -0,0 +1,22 @@
+"use client";
+
+// src/motion-config.tsx
+import { useReducedMotion } from "@elabs-ai/components-tokens";
+import { MotionConfig } from "motion/react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_MOTION_TRANSITION = {
+  duration: 0.18,
+  ease: [0.2, 0, 0, 1]
+};
+function BrandMotionConfig({
+  children,
+  transition = DEFAULT_MOTION_TRANSITION
+}) {
+  const reducedMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx(MotionConfig, { reducedMotion: reducedMotion ? "always" : "never", transition, children });
+}
+
+export {
+  BrandMotionConfig
+};
+//# sourceMappingURL=chunk-PQ5BPIWQ.js.map