@elabs-ai/components-ai 4.2.0 → 5.0.0

package/dist/chunk-OEUXHVFW.js

@@ -0,0 +1,86 @@
+"use client";
+
+// src/permission-mode-select.tsx
+import { forwardRef, useId } from "react";
+import { Badge, Kbd, Label, RadioGroup, RadioGroupItem, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PermissionModeSelect = forwardRef(
+  function PermissionModeSelect2({ modes, value, defaultValue, onValueChange, currentId, className, dir, ...props }, ref) {
+    const { t } = useLocale();
+    const baseId = useId();
+    return /* @__PURE__ */ jsx(
+      RadioGroup,
+      {
+        ref,
+        dir,
+        defaultValue: defaultValue ?? currentId,
+        value,
+        onValueChange,
+        "data-slot": "permission-mode-select",
+        className: cn("grid gap-3", className),
+        ...props,
+        children: modes.map((mode) => {
+          const isCurrent = mode.id === currentId;
+          const itemId = `${baseId}-${mode.id}`;
+          const consequenceId = `${itemId}-consequence`;
+          return /* @__PURE__ */ jsxs(
+            "div",
+            {
+              "data-slot": "permission-mode-select-option",
+              className: cn(
+                "flex items-start gap-3 rounded-lg border border-border bg-card p-4",
+                "has-[[data-state=checked]]:border-primary"
+              ),
+              children: [
+                /* @__PURE__ */ jsx(
+                  RadioGroupItem,
+                  {
+                    "aria-describedby": consequenceId,
+                    className: "mt-1",
+                    "data-slot": "permission-mode-select-input",
+                    id: itemId,
+                    value: mode.id
+                  }
+                ),
+                /* @__PURE__ */ jsxs("div", { className: "grid flex-1 gap-1", children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                    /* @__PURE__ */ jsxs(
+                      Label,
+                      {
+                        className: "text-body flex items-center gap-2 font-medium",
+                        "data-slot": "permission-mode-select-label",
+                        htmlFor: itemId,
+                        children: [
+                          mode.label,
+                          isCurrent ? /* @__PURE__ */ jsx(Badge, { "data-slot": "permission-mode-select-current", variant: "secondary", children: t("ai.permissionModeSelect.current") }) : null
+                        ]
+                      }
+                    ),
+                    mode.keyHint ? /* @__PURE__ */ jsx(Kbd, { "data-slot": "permission-mode-select-key-hint", children: mode.keyHint }) : null
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "p",
+                    {
+                      className: "text-meta text-muted-foreground",
+                      "data-slot": "permission-mode-select-consequence",
+                      id: consequenceId,
+                      children: mode.consequence
+                    }
+                  )
+                ] })
+              ]
+            },
+            mode.id
+          );
+        })
+      }
+    );
+  }
+);
+PermissionModeSelect.displayName = "PermissionModeSelect";
+
+export {
+  PermissionModeSelect
+};
+//# sourceMappingURL=chunk-OEUXHVFW.js.map

package/dist/chunk-OEUXHVFW.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/permission-mode-select.tsx"],"sourcesContent":["\"use client\";\n\nimport { forwardRef, useId, type ComponentProps } from \"react\";\nimport { Badge, Kbd, Label, RadioGroup, RadioGroupItem, useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\n\n/**\n * PermissionModeSelect — the standing-permission-policy chooser (#104).\n *\n * Distinct from `Confirmation`/`ApprovalCard` (#103): those render ONE\n * per-call decision (\"may I run this command?\"). This renders the POLICY\n * that governs how many of those per-call decisions ever occur (\"how much\n * may you do without asking?\"). The two stay separate components with a\n * documented relationship rather than one growing a boolean \"policy mode\"\n * prop — see `.claude/rules/component-api.md` (\"Avoid boolean-prop\n * proliferation\").\n *\n * The mode vocabulary is entirely app-defined: no agent's mode names are\n * hardcoded in this file or in `PermissionMode`/`PermissionModeSelectProps`.\n * `consequence` is a REQUIRED field — a mode whose effect is unstated is\n * exactly the failure this component exists to prevent (three unlabelled\n * radio buttons).\n *\n * Built on `@elabs-ai/components-ui`'s `RadioGroup` (Radix) for roving\n * focus / arrow-key navigation / Space-Enter selection / announcement — this\n * component does not hand-roll any of that. The in-force mode is marked in\n * TEXT: a \"Current\" badge lives inside the `<Label>` associated with that\n * mode's radio input, so it is part of the control's accessible name and\n * recoverable in greyscale — never colour alone (WCAG 1.4.1).\n */\nexport interface PermissionMode {\n  id: string;\n  label: string;\n  /** What this mode actually permits — required, not optional. */\n  consequence: string;\n  keyHint?: string;\n}\n\nexport interface PermissionModeSelectProps extends ComponentProps<\"div\"> {\n  modes: PermissionMode[];\n  value?: string;\n  defaultValue?: string;\n  onValueChange?: (id: string) => void;\n  /** The mode currently in force, marked distinctly from the highlighted one. */\n  currentId?: string;\n}\n\nexport const PermissionModeSelect = forwardRef<HTMLDivElement, PermissionModeSelectProps>(\n  function PermissionModeSelect(\n    { modes, value, defaultValue, onValueChange, currentId, className, dir, ...props },\n    ref,\n  ) {\n    const { t } = useLocale();\n    const baseId = useId();\n\n    return (\n      <RadioGroup\n        ref={ref}\n        // `dir` on a plain <div> is a free-form HTML string; Radix's RadioGroup\n        // narrows it to \"ltr\" | \"rtl\". Cast at this single call site rather\n        // than widening (and so weakening) the public prop type.\n        dir={dir as \"ltr\" | \"rtl\" | undefined}\n        // The RadioGroup's own highlighted value is independent of `currentId`\n        // (the mode already in force) — they answer different questions, so\n        // neither prop ever derives the other except as an uncontrolled\n        // starting point: with nothing else specified, pre-select the mode\n        // that is currently in force.\n        defaultValue={defaultValue ?? currentId}\n        value={value}\n        onValueChange={onValueChange}\n        data-slot=\"permission-mode-select\"\n        className={cn(\"grid gap-3\", className)}\n        {...props}\n      >\n        {modes.map((mode) => {\n          const isCurrent = mode.id === currentId;\n          const itemId = `${baseId}-${mode.id}`;\n          // The consequence sentence is the whole point of this component (see\n          // the `consequence` prop doc above), so it has to reach assistive\n          // tech as a DESCRIPTION of the radio — not merely sit next to it in\n          // the DOM. Without this link a screen-reader user arrowing through\n          // the modes hears \"Unrestricted\" and never hears what unrestricted\n          // costs them. Same wiring as `ApprovalCardOptions` in\n          // `confirmation.tsx`, deliberately: one convention, not two.\n          const consequenceId = `${itemId}-consequence`;\n\n          return (\n            <div\n              key={mode.id}\n              data-slot=\"permission-mode-select-option\"\n              className={cn(\n                \"flex items-start gap-3 rounded-lg border border-border bg-card p-4\",\n                \"has-[[data-state=checked]]:border-primary\",\n              )}\n            >\n              <RadioGroupItem\n                aria-describedby={consequenceId}\n                className=\"mt-1\"\n                data-slot=\"permission-mode-select-input\"\n                id={itemId}\n                value={mode.id}\n              />\n              <div className=\"grid flex-1 gap-1\">\n                <div className=\"flex items-center justify-between gap-2\">\n                  <Label\n                    className=\"text-body flex items-center gap-2 font-medium\"\n                    data-slot=\"permission-mode-select-label\"\n                    htmlFor={itemId}\n                  >\n                    {mode.label}\n                    {isCurrent ? (\n                      <Badge data-slot=\"permission-mode-select-current\" variant=\"secondary\">\n                        {t(\"ai.permissionModeSelect.current\")}\n                      </Badge>\n                    ) : null}\n                  </Label>\n                  {mode.keyHint ? (\n                    <Kbd data-slot=\"permission-mode-select-key-hint\">{mode.keyHint}</Kbd>\n                  ) : null}\n                </div>\n                <p\n                  className=\"text-meta text-muted-foreground\"\n                  data-slot=\"permission-mode-select-consequence\"\n                  id={consequenceId}\n                >\n                  {mode.consequence}\n                </p>\n              </div>\n            </div>\n          );\n        })}\n      </RadioGroup>\n    );\n  },\n);\n\nPermissionModeSelect.displayName = \"PermissionModeSelect\";\n"],"mappings":";;;AAEA,SAAS,YAAY,aAAkC;AACvD,SAAS,OAAO,KAAK,OAAO,YAAY,gBAAgB,iBAAiB;AACzE,SAAS,UAAU;AA2FL,cASI,YATJ;AAhDP,IAAM,uBAAuB;AAAA,EAClC,SAASA,sBACP,EAAE,OAAO,OAAO,cAAc,eAAe,WAAW,WAAW,KAAK,GAAG,MAAM,GACjF,KACA;AACA,UAAM,EAAE,EAAE,IAAI,UAAU;AACxB,UAAM,SAAS,MAAM;AAErB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QAIA;AAAA,QAMA,cAAc,gBAAgB;AAAA,QAC9B;AAAA,QACA;AAAA,QACA,aAAU;AAAA,QACV,WAAW,GAAG,cAAc,SAAS;AAAA,QACpC,GAAG;AAAA,QAEH,gBAAM,IAAI,CAAC,SAAS;AACnB,gBAAM,YAAY,KAAK,OAAO;AAC9B,gBAAM,SAAS,GAAG,MAAM,IAAI,KAAK,EAAE;AAQnC,gBAAM,gBAAgB,GAAG,MAAM;AAE/B,iBACE;AAAA,YAAC;AAAA;AAAA,cAEC,aAAU;AAAA,cACV,WAAW;AAAA,gBACT;AAAA,gBACA;AAAA,cACF;AAAA,cAEA;AAAA;AAAA,kBAAC;AAAA;AAAA,oBACC,oBAAkB;AAAA,oBAClB,WAAU;AAAA,oBACV,aAAU;AAAA,oBACV,IAAI;AAAA,oBACJ,OAAO,KAAK;AAAA;AAAA,gBACd;AAAA,gBACA,qBAAC,SAAI,WAAU,qBACb;AAAA,uCAAC,SAAI,WAAU,2CACb;AAAA;AAAA,sBAAC;AAAA;AAAA,wBACC,WAAU;AAAA,wBACV,aAAU;AAAA,wBACV,SAAS;AAAA,wBAER;AAAA,+BAAK;AAAA,0BACL,YACC,oBAAC,SAAM,aAAU,kCAAiC,SAAQ,aACvD,YAAE,iCAAiC,GACtC,IACE;AAAA;AAAA;AAAA,oBACN;AAAA,oBACC,KAAK,UACJ,oBAAC,OAAI,aAAU,mCAAmC,eAAK,SAAQ,IAC7D;AAAA,qBACN;AAAA,kBACA;AAAA,oBAAC;AAAA;AAAA,sBACC,WAAU;AAAA,sBACV,aAAU;AAAA,sBACV,IAAI;AAAA,sBAEH,eAAK;AAAA;AAAA,kBACR;AAAA,mBACF;AAAA;AAAA;AAAA,YAvCK,KAAK;AAAA,UAwCZ;AAAA,QAEJ,CAAC;AAAA;AAAA,IACH;AAAA,EAEJ;AACF;AAEA,qBAAqB,cAAc;","names":["PermissionModeSelect"]}

package/dist/chunk-ONBHFIMZ.js

@@ -0,0 +1,137 @@
+"use client";
+
+// src/package-info.tsx
+import { Badge, useLocale } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { ArrowRightIcon, MinusIcon, PackageIcon, PlusIcon } from "lucide-react";
+import { createContext, useContext, useMemo } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var PackageInfoContext = createContext({
+  name: ""
+});
+var PackageInfoHeader = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between gap-2", className), ...props, children });
+var PackageInfoName = ({ className, children, ...props }) => {
+  const { name } = useContext(PackageInfoContext);
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), ...props, children: [
+    /* @__PURE__ */ jsx(PackageIcon, { className: "size-4 text-muted-foreground" }),
+    /* @__PURE__ */ jsx("span", { className: "font-medium font-mono text-body", children: children ?? name })
+  ] });
+};
+var changeTypeStyles = {
+  added: "bg-info/10 text-info-text",
+  major: "bg-destructive/10 text-destructive-text",
+  minor: "bg-warning/10 text-warning-text",
+  patch: "bg-success/10 text-success-text",
+  removed: "bg-muted text-muted-foreground"
+};
+var changeTypeIcons = {
+  added: /* @__PURE__ */ jsx(PlusIcon, { className: "size-3" }),
+  major: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+  minor: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+  patch: /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+  removed: /* @__PURE__ */ jsx(MinusIcon, { className: "size-3" })
+};
+var PackageInfoChangeType = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { changeType } = useContext(PackageInfoContext);
+  if (!changeType) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs(
+    Badge,
+    {
+      className: cn("gap-1 text-meta capitalize", changeTypeStyles[changeType], className),
+      variant: "secondary",
+      ...props,
+      children: [
+        changeTypeIcons[changeType],
+        children ?? changeType
+      ]
+    }
+  );
+};
+var PackageInfoVersion = ({ className, children, ...props }) => {
+  const { currentVersion, newVersion } = useContext(PackageInfoContext);
+  if (!(currentVersion || newVersion)) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        "mt-2 flex items-center gap-2 font-mono text-muted-foreground text-body",
+        className
+      ),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        currentVersion && /* @__PURE__ */ jsx("span", { children: currentVersion }),
+        currentVersion && newVersion && /* @__PURE__ */ jsx(ArrowRightIcon, { className: "size-3" }),
+        newVersion && /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground", children: newVersion })
+      ] })
+    }
+  );
+};
+var PackageInfo = ({
+  name,
+  currentVersion,
+  newVersion,
+  changeType,
+  className,
+  children,
+  ...props
+}) => {
+  const contextValue = useMemo(
+    () => ({ changeType, currentVersion, name, newVersion }),
+    [changeType, currentVersion, name, newVersion]
+  );
+  return /* @__PURE__ */ jsx(PackageInfoContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx("div", { className: cn("rounded-lg border bg-background p-4", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(PackageInfoHeader, { children: [
+      /* @__PURE__ */ jsx(PackageInfoName, {}),
+      changeType && /* @__PURE__ */ jsx(PackageInfoChangeType, {})
+    ] }),
+    (currentVersion || newVersion) && /* @__PURE__ */ jsx(PackageInfoVersion, {})
+  ] }) }) });
+};
+var PackageInfoDescription = ({
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("p", { className: cn("mt-2 text-muted-foreground text-body", className), ...props, children });
+var PackageInfoContent = ({ className, children, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("mt-3 border-t pt-3", className), ...props, children });
+var PackageInfoDependencies = ({
+  className,
+  children,
+  ...props
+}) => {
+  const { t } = useLocale();
+  return /* @__PURE__ */ jsxs("div", { className: cn("space-y-2", className), ...props, children: [
+    /* @__PURE__ */ jsx("span", { className: "text-eyebrow uppercase text-muted-foreground", children: t("ai.packageInfo.dependencies") }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-1", children })
+  ] });
+};
+var PackageInfoDependency = ({
+  name,
+  version,
+  className,
+  children,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center justify-between text-body", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx("span", { className: "font-mono text-muted-foreground", children: name }),
+  version && /* @__PURE__ */ jsx("span", { className: "font-mono text-meta", children: version })
+] }) });
+
+export {
+  PackageInfoHeader,
+  PackageInfoName,
+  PackageInfoChangeType,
+  PackageInfoVersion,
+  PackageInfo,
+  PackageInfoDescription,
+  PackageInfoContent,
+  PackageInfoDependencies,
+  PackageInfoDependency
+};
+//# sourceMappingURL=chunk-ONBHFIMZ.js.map

package/dist/chunk-ONBHFIMZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/package-info.tsx"],"sourcesContent":["\"use client\";\n\nimport { Badge, useLocale } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { ArrowRightIcon, MinusIcon, PackageIcon, PlusIcon } from \"lucide-react\";\nimport type { HTMLAttributes } from \"react\";\nimport { createContext, useContext, useMemo } from \"react\";\n\ntype ChangeType = \"major\" | \"minor\" | \"patch\" | \"added\" | \"removed\";\n\ninterface PackageInfoContextType {\n  name: string;\n  currentVersion?: string;\n  newVersion?: string;\n  changeType?: ChangeType;\n}\n\nconst PackageInfoContext = createContext<PackageInfoContextType>({\n  name: \"\",\n});\n\nexport type PackageInfoHeaderProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoHeader = ({ className, children, ...props }: PackageInfoHeaderProps) => (\n  <div className={cn(\"flex items-center justify-between gap-2\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type PackageInfoNameProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoName = ({ className, children, ...props }: PackageInfoNameProps) => {\n  const { name } = useContext(PackageInfoContext);\n\n  return (\n    <div className={cn(\"flex items-center gap-2\", className)} {...props}>\n      <PackageIcon className=\"size-4 text-muted-foreground\" />\n      <span className=\"font-medium font-mono text-body\">{children ?? name}</span>\n    </div>\n  );\n};\n\nconst changeTypeStyles: Record<ChangeType, string> = {\n  added: \"bg-info/10 text-info-text\",\n  major: \"bg-destructive/10 text-destructive-text\",\n  minor: \"bg-warning/10 text-warning-text\",\n  patch: \"bg-success/10 text-success-text\",\n  removed: \"bg-muted text-muted-foreground\",\n};\n\nconst changeTypeIcons: Record<ChangeType, React.ReactNode> = {\n  added: <PlusIcon className=\"size-3\" />,\n  major: <ArrowRightIcon className=\"size-3\" />,\n  minor: <ArrowRightIcon className=\"size-3\" />,\n  patch: <ArrowRightIcon className=\"size-3\" />,\n  removed: <MinusIcon className=\"size-3\" />,\n};\n\nexport type PackageInfoChangeTypeProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoChangeType = ({\n  className,\n  children,\n  ...props\n}: PackageInfoChangeTypeProps) => {\n  const { changeType } = useContext(PackageInfoContext);\n\n  if (!changeType) {\n    return null;\n  }\n\n  return (\n    <Badge\n      className={cn(\"gap-1 text-meta capitalize\", changeTypeStyles[changeType], className)}\n      variant=\"secondary\"\n      {...props}\n    >\n      {changeTypeIcons[changeType]}\n      {children ?? changeType}\n    </Badge>\n  );\n};\n\nexport type PackageInfoVersionProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoVersion = ({ className, children, ...props }: PackageInfoVersionProps) => {\n  const { currentVersion, newVersion } = useContext(PackageInfoContext);\n\n  if (!(currentVersion || newVersion)) {\n    return null;\n  }\n\n  return (\n    <div\n      className={cn(\n        \"mt-2 flex items-center gap-2 font-mono text-muted-foreground text-body\",\n        className,\n      )}\n      {...props}\n    >\n      {children ?? (\n        <>\n          {currentVersion && <span>{currentVersion}</span>}\n          {currentVersion && newVersion && <ArrowRightIcon className=\"size-3\" />}\n          {newVersion && <span className=\"font-medium text-foreground\">{newVersion}</span>}\n        </>\n      )}\n    </div>\n  );\n};\n\nexport type PackageInfoProps = HTMLAttributes<HTMLDivElement> & {\n  name: string;\n  currentVersion?: string;\n  newVersion?: string;\n  changeType?: ChangeType;\n};\n\nexport const PackageInfo = ({\n  name,\n  currentVersion,\n  newVersion,\n  changeType,\n  className,\n  children,\n  ...props\n}: PackageInfoProps) => {\n  const contextValue = useMemo(\n    () => ({ changeType, currentVersion, name, newVersion }),\n    [changeType, currentVersion, name, newVersion],\n  );\n\n  return (\n    <PackageInfoContext.Provider value={contextValue}>\n      <div className={cn(\"rounded-lg border bg-background p-4\", className)} {...props}>\n        {children ?? (\n          <>\n            <PackageInfoHeader>\n              <PackageInfoName />\n              {changeType && <PackageInfoChangeType />}\n            </PackageInfoHeader>\n            {(currentVersion || newVersion) && <PackageInfoVersion />}\n          </>\n        )}\n      </div>\n    </PackageInfoContext.Provider>\n  );\n};\n\nexport type PackageInfoDescriptionProps = HTMLAttributes<HTMLParagraphElement>;\n\nexport const PackageInfoDescription = ({\n  className,\n  children,\n  ...props\n}: PackageInfoDescriptionProps) => (\n  <p className={cn(\"mt-2 text-muted-foreground text-body\", className)} {...props}>\n    {children}\n  </p>\n);\n\nexport type PackageInfoContentProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoContent = ({ className, children, ...props }: PackageInfoContentProps) => (\n  <div className={cn(\"mt-3 border-t pt-3\", className)} {...props}>\n    {children}\n  </div>\n);\n\nexport type PackageInfoDependenciesProps = HTMLAttributes<HTMLDivElement>;\n\nexport const PackageInfoDependencies = ({\n  className,\n  children,\n  ...props\n}: PackageInfoDependenciesProps) => {\n  const { t } = useLocale();\n  return (\n    <div className={cn(\"space-y-2\", className)} {...props}>\n      <span className=\"text-eyebrow uppercase text-muted-foreground\">\n        {t(\"ai.packageInfo.dependencies\")}\n      </span>\n      <div className=\"space-y-1\">{children}</div>\n    </div>\n  );\n};\n\nexport type PackageInfoDependencyProps = HTMLAttributes<HTMLDivElement> & {\n  name: string;\n  version?: string;\n};\n\nexport const PackageInfoDependency = ({\n  name,\n  version,\n  className,\n  children,\n  ...props\n}: PackageInfoDependencyProps) => (\n  <div className={cn(\"flex items-center justify-between text-body\", className)} {...props}>\n    {children ?? (\n      <>\n        <span className=\"font-mono text-muted-foreground\">{name}</span>\n        {version && <span className=\"font-mono text-meta\">{version}</span>}\n      </>\n    )}\n  </div>\n);\n"],"mappings":"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","names":[]}

package/dist/chunk-OPH2HHL2.js

@@ -0,0 +1,228 @@
+"use client";
+
+// src/speech-input.tsx
+import { Button } from "@elabs-ai/components-ui";
+import { Spinner } from "@elabs-ai/components-ui";
+import { cn } from "@elabs-ai/components-ui/lib/cn";
+import { MicIcon, SquareIcon } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var detectSpeechInputMode = () => {
+  if (typeof window === "undefined") {
+    return "none";
+  }
+  if ("SpeechRecognition" in window || "webkitSpeechRecognition" in window) {
+    return "speech-recognition";
+  }
+  if ("MediaRecorder" in window && "mediaDevices" in navigator) {
+    return "media-recorder";
+  }
+  return "none";
+};
+var SpeechInput = ({
+  className,
+  onTranscriptionChange,
+  onAudioRecorded,
+  lang = "en-US",
+  ...props
+}) => {
+  const [isListening, setIsListening] = useState(false);
+  const [isProcessing, setIsProcessing] = useState(false);
+  const [mode] = useState(detectSpeechInputMode);
+  const [isRecognitionReady, setIsRecognitionReady] = useState(false);
+  const recognitionRef = useRef(null);
+  const mediaRecorderRef = useRef(null);
+  const streamRef = useRef(null);
+  const audioChunksRef = useRef([]);
+  const onTranscriptionChangeRef = useRef(onTranscriptionChange);
+  const onAudioRecordedRef = useRef(onAudioRecorded);
+  const isStartingMediaRecorderRef = useRef(false);
+  const isMountedRef = useRef(true);
+  useEffect(
+    () => () => {
+      isMountedRef.current = false;
+    },
+    []
+  );
+  onTranscriptionChangeRef.current = onTranscriptionChange;
+  onAudioRecordedRef.current = onAudioRecorded;
+  useEffect(() => {
+    if (mode !== "speech-recognition") {
+      return;
+    }
+    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
+    const speechRecognition = new SpeechRecognition();
+    speechRecognition.continuous = true;
+    speechRecognition.interimResults = true;
+    speechRecognition.lang = lang;
+    const handleStart = () => {
+      setIsListening(true);
+    };
+    const handleEnd = () => {
+      setIsListening(false);
+    };
+    const handleResult = (event) => {
+      const speechEvent = event;
+      let finalTranscript = "";
+      for (let i = speechEvent.resultIndex; i < speechEvent.results.length; i += 1) {
+        const result = speechEvent.results[i];
+        if (result?.isFinal) {
+          finalTranscript += result[0]?.transcript ?? "";
+        }
+      }
+      if (finalTranscript) {
+        onTranscriptionChangeRef.current?.(finalTranscript);
+      }
+    };
+    const handleError = () => {
+      setIsListening(false);
+    };
+    speechRecognition.addEventListener("start", handleStart);
+    speechRecognition.addEventListener("end", handleEnd);
+    speechRecognition.addEventListener("result", handleResult);
+    speechRecognition.addEventListener("error", handleError);
+    recognitionRef.current = speechRecognition;
+    setIsRecognitionReady(true);
+    return () => {
+      speechRecognition.removeEventListener("start", handleStart);
+      speechRecognition.removeEventListener("end", handleEnd);
+      speechRecognition.removeEventListener("result", handleResult);
+      speechRecognition.removeEventListener("error", handleError);
+      speechRecognition.stop();
+      recognitionRef.current = null;
+      setIsRecognitionReady(false);
+    };
+  }, [mode, lang]);
+  useEffect(
+    () => () => {
+      if (mediaRecorderRef.current?.state === "recording") {
+        mediaRecorderRef.current.stop();
+      }
+      if (streamRef.current) {
+        for (const track of streamRef.current.getTracks()) {
+          track.stop();
+        }
+      }
+    },
+    []
+  );
+  const startMediaRecorder = useCallback(async () => {
+    if (!onAudioRecordedRef.current || isStartingMediaRecorderRef.current) {
+      return;
+    }
+    isStartingMediaRecorderRef.current = true;
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      if (!isMountedRef.current) {
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        return;
+      }
+      streamRef.current = stream;
+      const mediaRecorder = new MediaRecorder(stream);
+      audioChunksRef.current = [];
+      const handleDataAvailable = (event) => {
+        if (event.data.size > 0) {
+          audioChunksRef.current.push(event.data);
+        }
+      };
+      const handleStop = async () => {
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+        const audioBlob = new Blob(audioChunksRef.current, {
+          type: "audio/webm"
+        });
+        if (audioBlob.size > 0 && onAudioRecordedRef.current) {
+          setIsProcessing(true);
+          try {
+            const transcript = await onAudioRecordedRef.current(audioBlob);
+            if (transcript) {
+              onTranscriptionChangeRef.current?.(transcript);
+            }
+          } catch {
+          } finally {
+            setIsProcessing(false);
+          }
+        }
+      };
+      const handleError = () => {
+        setIsListening(false);
+        for (const track of stream.getTracks()) {
+          track.stop();
+        }
+        streamRef.current = null;
+      };
+      mediaRecorder.addEventListener("dataavailable", handleDataAvailable);
+      mediaRecorder.addEventListener("stop", handleStop);
+      mediaRecorder.addEventListener("error", handleError);
+      mediaRecorderRef.current = mediaRecorder;
+      mediaRecorder.start();
+      setIsListening(true);
+    } catch {
+      setIsListening(false);
+    } finally {
+      isStartingMediaRecorderRef.current = false;
+    }
+  }, []);
+  const stopMediaRecorder = useCallback(() => {
+    if (mediaRecorderRef.current?.state === "recording") {
+      mediaRecorderRef.current.stop();
+    }
+    setIsListening(false);
+  }, []);
+  const toggleListening = useCallback(() => {
+    if (mode === "speech-recognition" && recognitionRef.current) {
+      if (isListening) {
+        recognitionRef.current.stop();
+      } else {
+        recognitionRef.current.start();
+      }
+    } else if (mode === "media-recorder") {
+      if (isListening) {
+        stopMediaRecorder();
+      } else {
+        startMediaRecorder();
+      }
+    }
+  }, [mode, isListening, startMediaRecorder, stopMediaRecorder]);
+  const isDisabled = mode === "none" || mode === "speech-recognition" && !isRecognitionReady || mode === "media-recorder" && !onAudioRecorded || isProcessing;
+  return /* @__PURE__ */ jsxs("div", { className: "relative inline-flex items-center justify-center", children: [
+    isListening && [0, 1, 2].map((index) => /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "absolute inset-0 animate-ping rounded-full border-2 border-destructive/30",
+        style: {
+          animationDelay: `${index * 0.3}s`,
+          animationDuration: "2s"
+        }
+      },
+      index
+    )),
+    /* @__PURE__ */ jsxs(
+      Button,
+      {
+        className: cn(
+          "relative z-10 rounded-full transition-colors duration-slow ease-standard motion-reduce:transition-none",
+          isListening ? "bg-destructive text-destructive-foreground hover:bg-destructive/80 hover:text-destructive-foreground" : "bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground",
+          className
+        ),
+        disabled: isDisabled,
+        onClick: toggleListening,
+        ...props,
+        children: [
+          isProcessing && /* @__PURE__ */ jsx(Spinner, {}),
+          !isProcessing && isListening && /* @__PURE__ */ jsx(SquareIcon, { className: "size-4" }),
+          !(isProcessing || isListening) && /* @__PURE__ */ jsx(MicIcon, { className: "size-4" })
+        ]
+      }
+    )
+  ] });
+};
+
+export {
+  SpeechInput
+};
+//# sourceMappingURL=chunk-OPH2HHL2.js.map

package/dist/chunk-OPH2HHL2.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/speech-input.tsx"],"sourcesContent":["\"use client\";\n\nimport { Button } from \"@elabs-ai/components-ui\";\nimport { Spinner } from \"@elabs-ai/components-ui\";\nimport { cn } from \"@elabs-ai/components-ui/lib/cn\";\nimport { MicIcon, SquareIcon } from \"lucide-react\";\nimport type { ComponentProps } from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\ninterface SpeechRecognition extends EventTarget {\n  continuous: boolean;\n  interimResults: boolean;\n  lang: string;\n  start(): void;\n  stop(): void;\n  onstart: ((this: SpeechRecognition, ev: Event) => void) | null;\n  onend: ((this: SpeechRecognition, ev: Event) => void) | null;\n  onresult: ((this: SpeechRecognition, ev: SpeechRecognitionEvent) => void) | null;\n  onerror: ((this: SpeechRecognition, ev: SpeechRecognitionErrorEvent) => void) | null;\n}\n\ninterface SpeechRecognitionEvent extends Event {\n  results: SpeechRecognitionResultList;\n  resultIndex: number;\n}\n\ninterface SpeechRecognitionResultList {\n  readonly length: number;\n  item(index: number): SpeechRecognitionResult;\n  [index: number]: SpeechRecognitionResult;\n}\n\ninterface SpeechRecognitionResult {\n  readonly length: number;\n  item(index: number): SpeechRecognitionAlternative;\n  [index: number]: SpeechRecognitionAlternative;\n  isFinal: boolean;\n}\n\ninterface SpeechRecognitionAlternative {\n  transcript: string;\n  confidence: number;\n}\n\ninterface SpeechRecognitionErrorEvent extends Event {\n  error: string;\n}\n\ndeclare global {\n  interface Window {\n    SpeechRecognition: new () => SpeechRecognition;\n    webkitSpeechRecognition: new () => SpeechRecognition;\n  }\n}\n\ntype SpeechInputMode = \"speech-recognition\" | \"media-recorder\" | \"none\";\n\nexport type SpeechInputProps = ComponentProps<typeof Button> & {\n  onTranscriptionChange?: (text: string) => void;\n  /**\n   * Callback for when audio is recorded using MediaRecorder fallback.\n   * This is called in browsers that don't support the Web Speech API (Firefox, Safari).\n   * The callback receives an audio Blob that should be sent to a transcription service.\n   * Return the transcribed text, which will be passed to onTranscriptionChange.\n   */\n  onAudioRecorded?: (audioBlob: Blob) => Promise<string>;\n  lang?: string;\n};\n\nconst detectSpeechInputMode = (): SpeechInputMode => {\n  if (typeof window === \"undefined\") {\n    return \"none\";\n  }\n\n  if (\"SpeechRecognition\" in window || \"webkitSpeechRecognition\" in window) {\n    return \"speech-recognition\";\n  }\n\n  if (\"MediaRecorder\" in window && \"mediaDevices\" in navigator) {\n    return \"media-recorder\";\n  }\n\n  return \"none\";\n};\n\nexport const SpeechInput = ({\n  className,\n  onTranscriptionChange,\n  onAudioRecorded,\n  lang = \"en-US\",\n  ...props\n}: SpeechInputProps) => {\n  const [isListening, setIsListening] = useState(false);\n  const [isProcessing, setIsProcessing] = useState(false);\n  const [mode] = useState<SpeechInputMode>(detectSpeechInputMode);\n  const [isRecognitionReady, setIsRecognitionReady] = useState(false);\n  const recognitionRef = useRef<SpeechRecognition | null>(null);\n  const mediaRecorderRef = useRef<MediaRecorder | null>(null);\n  const streamRef = useRef<MediaStream | null>(null);\n  const audioChunksRef = useRef<Blob[]>([]);\n  const onTranscriptionChangeRef =\n    useRef<SpeechInputProps[\"onTranscriptionChange\"]>(onTranscriptionChange);\n  const onAudioRecordedRef = useRef<SpeechInputProps[\"onAudioRecorded\"]>(onAudioRecorded);\n  // Guards a pending `getUserMedia()` call against a second click/toggle\n  // firing before the first resolves (both see `isListening === false`, since\n  // that flips only once the stream is actually granted).\n  const isStartingMediaRecorderRef = useRef(false);\n  // Flips false on unmount so an in-flight `getUserMedia()` that resolves\n  // AFTER teardown stops its just-granted tracks immediately instead of\n  // leaving the microphone on with nothing listening.\n  const isMountedRef = useRef(true);\n\n  useEffect(\n    () => () => {\n      isMountedRef.current = false;\n    },\n    [],\n  );\n\n  // Keep refs in sync\n  onTranscriptionChangeRef.current = onTranscriptionChange;\n  onAudioRecordedRef.current = onAudioRecorded;\n\n  // Initialize Speech Recognition when mode is speech-recognition\n  useEffect(() => {\n    if (mode !== \"speech-recognition\") {\n      return;\n    }\n\n    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;\n    const speechRecognition = new SpeechRecognition();\n\n    speechRecognition.continuous = true;\n    speechRecognition.interimResults = true;\n    speechRecognition.lang = lang;\n\n    const handleStart = () => {\n      setIsListening(true);\n    };\n\n    const handleEnd = () => {\n      setIsListening(false);\n    };\n\n    const handleResult = (event: Event) => {\n      const speechEvent = event as SpeechRecognitionEvent;\n      let finalTranscript = \"\";\n\n      for (let i = speechEvent.resultIndex; i < speechEvent.results.length; i += 1) {\n        const result = speechEvent.results[i];\n        if (result?.isFinal) {\n          finalTranscript += result[0]?.transcript ?? \"\";\n        }\n      }\n\n      if (finalTranscript) {\n        onTranscriptionChangeRef.current?.(finalTranscript);\n      }\n    };\n\n    const handleError = () => {\n      setIsListening(false);\n    };\n\n    speechRecognition.addEventListener(\"start\", handleStart);\n    speechRecognition.addEventListener(\"end\", handleEnd);\n    speechRecognition.addEventListener(\"result\", handleResult);\n    speechRecognition.addEventListener(\"error\", handleError);\n\n    recognitionRef.current = speechRecognition;\n    setIsRecognitionReady(true);\n\n    return () => {\n      speechRecognition.removeEventListener(\"start\", handleStart);\n      speechRecognition.removeEventListener(\"end\", handleEnd);\n      speechRecognition.removeEventListener(\"result\", handleResult);\n      speechRecognition.removeEventListener(\"error\", handleError);\n      speechRecognition.stop();\n      recognitionRef.current = null;\n      setIsRecognitionReady(false);\n    };\n  }, [mode, lang]);\n\n  // Cleanup MediaRecorder and stream on unmount\n  useEffect(\n    () => () => {\n      if (mediaRecorderRef.current?.state === \"recording\") {\n        mediaRecorderRef.current.stop();\n      }\n      if (streamRef.current) {\n        for (const track of streamRef.current.getTracks()) {\n          track.stop();\n        }\n      }\n    },\n    [],\n  );\n\n  // Start MediaRecorder recording\n  const startMediaRecorder = useCallback(async () => {\n    if (!onAudioRecordedRef.current || isStartingMediaRecorderRef.current) {\n      return;\n    }\n\n    isStartingMediaRecorderRef.current = true;\n    try {\n      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });\n\n      // Unmounted (or stopped) while getUserMedia was pending — the granted\n      // tracks have no listener left to stop them later, so stop them now.\n      if (!isMountedRef.current) {\n        for (const track of stream.getTracks()) {\n          track.stop();\n        }\n        return;\n      }\n\n      streamRef.current = stream;\n      const mediaRecorder = new MediaRecorder(stream);\n      audioChunksRef.current = [];\n\n      const handleDataAvailable = (event: BlobEvent) => {\n        if (event.data.size > 0) {\n          audioChunksRef.current.push(event.data);\n        }\n      };\n\n      const handleStop = async () => {\n        for (const track of stream.getTracks()) {\n          track.stop();\n        }\n        streamRef.current = null;\n\n        const audioBlob = new Blob(audioChunksRef.current, {\n          type: \"audio/webm\",\n        });\n\n        if (audioBlob.size > 0 && onAudioRecordedRef.current) {\n          setIsProcessing(true);\n          try {\n            const transcript = await onAudioRecordedRef.current(audioBlob);\n            if (transcript) {\n              onTranscriptionChangeRef.current?.(transcript);\n            }\n          } catch {\n            // Error handling delegated to the onAudioRecorded caller\n          } finally {\n            setIsProcessing(false);\n          }\n        }\n      };\n\n      const handleError = () => {\n        setIsListening(false);\n        for (const track of stream.getTracks()) {\n          track.stop();\n        }\n        streamRef.current = null;\n      };\n\n      mediaRecorder.addEventListener(\"dataavailable\", handleDataAvailable);\n      mediaRecorder.addEventListener(\"stop\", handleStop);\n      mediaRecorder.addEventListener(\"error\", handleError);\n\n      mediaRecorderRef.current = mediaRecorder;\n      mediaRecorder.start();\n      setIsListening(true);\n    } catch {\n      setIsListening(false);\n    } finally {\n      isStartingMediaRecorderRef.current = false;\n    }\n  }, []);\n\n  // Stop MediaRecorder recording\n  const stopMediaRecorder = useCallback(() => {\n    if (mediaRecorderRef.current?.state === \"recording\") {\n      mediaRecorderRef.current.stop();\n    }\n    setIsListening(false);\n  }, []);\n\n  const toggleListening = useCallback(() => {\n    if (mode === \"speech-recognition\" && recognitionRef.current) {\n      if (isListening) {\n        recognitionRef.current.stop();\n      } else {\n        recognitionRef.current.start();\n      }\n    } else if (mode === \"media-recorder\") {\n      if (isListening) {\n        stopMediaRecorder();\n      } else {\n        startMediaRecorder();\n      }\n    }\n  }, [mode, isListening, startMediaRecorder, stopMediaRecorder]);\n\n  // Determine if button should be disabled\n  const isDisabled =\n    mode === \"none\" ||\n    (mode === \"speech-recognition\" && !isRecognitionReady) ||\n    (mode === \"media-recorder\" && !onAudioRecorded) ||\n    isProcessing;\n\n  return (\n    <div className=\"relative inline-flex items-center justify-center\">\n      {/* Animated pulse rings */}\n      {isListening &&\n        [0, 1, 2].map((index) => (\n          <div\n            className=\"absolute inset-0 animate-ping rounded-full border-2 border-destructive/30\"\n            key={index}\n            style={{\n              animationDelay: `${index * 0.3}s`,\n              animationDuration: \"2s\",\n            }}\n          />\n        ))}\n\n      {/* Main record button */}\n      <Button\n        className={cn(\n          \"relative z-10 rounded-full transition-colors duration-slow ease-standard motion-reduce:transition-none\",\n          isListening\n            ? \"bg-destructive text-destructive-foreground hover:bg-destructive/80 hover:text-destructive-foreground\"\n            : \"bg-primary text-primary-foreground hover:bg-primary/80 hover:text-primary-foreground\",\n          className,\n        )}\n        disabled={isDisabled}\n        onClick={toggleListening}\n        {...props}\n      >\n        {isProcessing && <Spinner />}\n        {!isProcessing && isListening && <SquareIcon className=\"size-4\" />}\n        {!(isProcessing || isListening) && <MicIcon className=\"size-4\" />}\n      </Button>\n    </div>\n  );\n};\n"],"mappings":"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","names":[]}