@uisatin/ui 0.0.0-stage → 0.1.0

package/chunk-72OCFAPT.js

@@ -0,0 +1,175 @@
+import { useFormField } from './chunk-UBNHSZSE.js';
+import { MenuItemContent, menuItemClass, menuGroupClass, menuGroupLabelClass, menuSurfaceClass } from './chunk-3DINAQLL.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Select as Select$1 } from 'radix-ui';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var isOptionGroups = (o) => o.length > 0 && typeof o[0] === "object" && o[0] !== null && "options" in o[0];
+function useFieldChrome({
+  id,
+  disabled,
+  error,
+  hint
+}) {
+  const field = useFormField();
+  const autoId = React.useId();
+  const controlId = id ?? field?.id ?? autoId;
+  const isError = typeof error === "string" || React.isValidElement(error);
+  const message = isError ? error : hint;
+  const messageId = message ? `${controlId}-hint` : void 0;
+  return {
+    controlId,
+    disabled: disabled ?? field?.disabled ?? false,
+    invalid: Boolean(error) || (field?.invalid ?? false),
+    required: field?.required,
+    describedBy: [field?.describedBy, messageId].filter(Boolean).join(" ") || void 0,
+    message,
+    messageId,
+    isError
+  };
+}
+function FieldChrome({
+  label,
+  action,
+  chrome,
+  className,
+  children
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("grid w-full gap-2", className), children: [
+    label && // The row keeps the label's 18px whatever the action, so the field never moves.
+    /* @__PURE__ */ jsxs("div", { className: "flex h-[18px] items-center justify-between gap-2", children: [
+      /* @__PURE__ */ jsx("label", { htmlFor: chrome.controlId, className: "text-sm leading-[18px] font-medium text-text-default", children: label }),
+      action && /* @__PURE__ */ jsx("div", { className: "-my-[3px] flex shrink-0 items-center", children: action })
+    ] }),
+    children,
+    chrome.message && /* @__PURE__ */ jsx("p", { id: chrome.messageId, className: cn("text-sm", chrome.isError ? "text-action-destructive-bg" : "text-text-muted"), children: chrome.message })
+  ] });
+}
+function SelectChevron({ className }) {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: cn("satin-field-icon text-text-muted", className), children: /* @__PURE__ */ jsx("path", { d: "M4 6L8 10L12 6", stroke: "currentColor", strokeWidth: "1.25", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function Select({
+  options,
+  value,
+  defaultValue,
+  onValueChange,
+  placeholder = "Select\u2026",
+  label,
+  hint,
+  error,
+  size = "md",
+  leadingIcon,
+  layout = "inline",
+  iconSize = 16,
+  disabled,
+  required,
+  name,
+  id,
+  open,
+  defaultOpen,
+  onOpenChange,
+  container,
+  wrapperClassName,
+  className,
+  "data-force": force,
+  ...props
+}) {
+  const chrome = useFieldChrome({ id, disabled, error, hint });
+  const [uncontrolled, setUncontrolled] = React.useState(defaultValue);
+  const current = value ?? uncontrolled;
+  const groups = isOptionGroups(options) ? options : [{ options }];
+  const lead = leadingIcon ?? groups.flatMap((g) => g.options).find((o) => o.value === current)?.icon;
+  return /* @__PURE__ */ jsx(FieldChrome, { label, chrome, className: wrapperClassName, children: /* @__PURE__ */ jsxs(
+    Select$1.Root,
+    {
+      value,
+      defaultValue,
+      onValueChange: (v) => {
+        if (value == null) setUncontrolled(v);
+        onValueChange?.(v);
+      },
+      open,
+      defaultOpen,
+      onOpenChange,
+      disabled: chrome.disabled,
+      required: required ?? chrome.required,
+      name,
+      children: [
+        /* @__PURE__ */ jsxs(
+          Select$1.Trigger,
+          {
+            id: chrome.controlId,
+            "data-slot": "select-trigger",
+            "data-size": size,
+            "data-filled": current ? true : void 0,
+            "data-invalid": chrome.invalid || void 0,
+            "data-disabled": chrome.disabled || void 0,
+            "data-force": force,
+            "aria-invalid": chrome.invalid || void 0,
+            "aria-describedby": chrome.describedBy,
+            "aria-label": props["aria-label"],
+            className: cn("satin-field satin-select", className),
+            children: [
+              lead && /* @__PURE__ */ jsx("span", { className: "satin-field-icon", "aria-hidden": true, children: lead }),
+              /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-text-default", children: /* @__PURE__ */ jsx(Select$1.Value, { placeholder: /* @__PURE__ */ jsx("span", { className: "text-text-muted", children: placeholder }) }) }),
+              /* @__PURE__ */ jsx(Select$1.Icon, { asChild: true, children: /* @__PURE__ */ jsx(SelectChevron, {}) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(Select$1.Portal, { container, children: /* @__PURE__ */ jsx(
+          Select$1.Content,
+          {
+            "data-slot": "select-menu",
+            position: "popper",
+            side: "bottom",
+            align: "start",
+            sideOffset: 4,
+            collisionPadding: 8,
+            className: cn(
+              "pointer-events-auto z-50 max-w-[520px] min-w-(--radix-select-trigger-width) overflow-hidden",
+              "max-h-(--radix-select-content-available-height)",
+              menuSurfaceClass,
+              "origin-(--radix-select-content-transform-origin) outline-none",
+              "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]"
+            ),
+            children: /* @__PURE__ */ jsx(Select$1.Viewport, { className: "flex flex-col gap-1 p-1", children: groups.map((g, gi) => {
+              const rows = g.options.map((o) => /* @__PURE__ */ jsx(
+                Select$1.Item,
+                {
+                  value: o.value,
+                  disabled: o.disabled,
+                  textValue: o.label,
+                  "data-slot": "select-item",
+                  className: cn(menuItemClass, "data-[state=checked]:bg-bg-selected"),
+                  children: /* @__PURE__ */ jsx(
+                    MenuItemContent,
+                    {
+                      label: o.label,
+                      description: o.description,
+                      icon: o.icon,
+                      iconSize,
+                      layout,
+                      shortcut: o.shortcut,
+                      selected: o.value === current,
+                      renderLabel: (l) => /* @__PURE__ */ jsx(Select$1.ItemText, { children: l })
+                    }
+                  )
+                },
+                o.value
+              ));
+              return groups.length > 1 || g.label ? /* @__PURE__ */ jsxs(Select$1.Group, { className: menuGroupClass, children: [
+                g.label && /* @__PURE__ */ jsx(Select$1.Label, { className: menuGroupLabelClass, children: g.label }),
+                rows
+              ] }, gi) : /* @__PURE__ */ jsx(React.Fragment, { children: rows }, gi);
+            }) })
+          }
+        ) })
+      ]
+    }
+  ) });
+}
+
+export { FieldChrome, Select, SelectChevron, isOptionGroups, useFieldChrome };
+//# sourceMappingURL=chunk-72OCFAPT.js.map
+//# sourceMappingURL=chunk-72OCFAPT.js.map

package/chunk-72OCFAPT.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/select.tsx"],"names":["SelectPrimitive"],"mappings":";;;;;;;AAuEO,IAAM,iBAAiB,CAAK,CAAA,KACjC,CAAA,CAAE,MAAA,GAAS,KAAK,OAAO,CAAA,CAAE,CAAC,CAAA,KAAM,YAAY,CAAA,CAAE,CAAC,MAAM,IAAA,IAAQ,SAAA,IAAa,EAAE,CAAC;AAGxE,SAAS,cAAA,CAAe;AAAA,EAC7B,EAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA;AACF,CAAA,EAKG;AACD,EAAA,MAAM,QAAQ,YAAA,EAAa;AAC3B,EAAA,MAAM,SAAe,KAAA,CAAA,KAAA,EAAM;AAC3B,EAAA,MAAM,SAAA,GAAY,EAAA,IAAM,KAAA,EAAO,EAAA,IAAM,MAAA;AACrC,EAAA,MAAM,OAAA,GAAU,OAAO,KAAA,KAAU,QAAA,IAAkB,qBAAe,KAAK,CAAA;AACvE,EAAA,MAAM,OAAA,GAAU,UAAW,KAAA,GAA4B,IAAA;AACvD,EAAA,MAAM,SAAA,GAAY,OAAA,GAAU,CAAA,EAAG,SAAS,CAAA,KAAA,CAAA,GAAU,MAAA;AAClD,EAAA,OAAO;AAAA,IACL,SAAA;AAAA,IACA,QAAA,EAAU,QAAA,IAAY,KAAA,EAAO,QAAA,IAAY,KAAA;AAAA,IACzC,OAAA,EAAS,OAAA,CAAQ,KAAK,CAAA,KAAM,OAAO,OAAA,IAAW,KAAA,CAAA;AAAA,IAC9C,UAAU,KAAA,EAAO,QAAA;AAAA,IACjB,WAAA,EAAa,CAAC,KAAA,EAAO,WAAA,EAAa,SAAS,CAAA,CAAE,MAAA,CAAO,OAAO,CAAA,CAAE,IAAA,CAAK,GAAG,CAAA,IAAK,MAAA;AAAA,IAC1E,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GACF;AACF;AAGO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,MAAA;AAAA,EACA,MAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAOG;AACD,EAAA,4BACG,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,mBAAA,EAAqB,SAAS,CAAA,EAC9C,QAAA,EAAA;AAAA,IAAA,KAAA;AAAA,oBAEC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,kDAAA,EACb,QAAA,EAAA;AAAA,sBAAA,GAAA,CAAC,WAAM,OAAA,EAAS,MAAA,CAAO,SAAA,EAAW,SAAA,EAAU,wDACzC,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,MACC,MAAA,oBAAU,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,wCAAwC,QAAA,EAAA,MAAA,EAAO;AAAA,KAAA,EAC3E,CAAA;AAAA,IAED,QAAA;AAAA,IACA,OAAO,OAAA,oBACN,GAAA,CAAC,GAAA,EAAA,EAAE,EAAA,EAAI,OAAO,SAAA,EAAW,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,OAAO,OAAA,GAAU,4BAAA,GAA+B,iBAAiB,CAAA,EAChH,iBAAO,OAAA,EACV;AAAA,GAAA,EAEJ,CAAA;AAEJ;AAGO,SAAS,aAAA,CAAc,EAAE,SAAA,EAAU,EAA2B;AACnE,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAW,IAAA,EAAC,SAAA,EAAW,EAAA,CAAG,kCAAA,EAAoC,SAAS,CAAA,EACjI,QAAA,kBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA,EAAE,gBAAA,EAAiB,MAAA,EAAO,cAAA,EAAe,WAAA,EAAY,MAAA,EAAO,aAAA,EAAc,OAAA,EAAQ,cAAA,EAAe,SAAQ,CAAA,EACjH,CAAA;AAEJ;AAEO,SAAS,MAAA,CAAO;AAAA,EACrB,OAAA;AAAA,EACA,KAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA,GAAc,cAAA;AAAA,EACd,KAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,WAAA;AAAA,EACA,MAAA,GAAS,QAAA;AAAA,EACT,QAAA,GAAW,EAAA;AAAA,EACX,QAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA;AAAA,EACA,EAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA,EAAc,KAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAgB;AACd,EAAA,MAAM,SAAS,cAAA,CAAe,EAAE,IAAI,QAAA,EAAU,KAAA,EAAO,MAAM,CAAA;AAG3D,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAU,eAAS,YAAY,CAAA;AACnE,EAAA,MAAM,UAAU,KAAA,IAAS,YAAA;AACzB,EAAA,MAAM,MAAA,GAAwB,eAAe,OAAO,CAAA,GAAK,UAA4B,CAAC,EAAE,SAAoC,CAAA;AAC5H,EAAA,MAAM,IAAA,GAAO,WAAA,IAAe,MAAA,CAAO,OAAA,CAAQ,CAAC,CAAA,KAAM,CAAA,CAAE,OAAO,CAAA,CAAE,KAAK,CAAC,CAAA,KAAM,CAAA,CAAE,KAAA,KAAU,OAAO,CAAA,EAAG,IAAA;AAE/F,EAAA,uBACE,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,MAAA,EAAgB,WAAW,gBAAA,EACpD,QAAA,kBAAA,IAAA;AAAA,IAACA,QAAA,CAAgB,IAAA;AAAA,IAAhB;AAAA,MACC,KAAA;AAAA,MACA,YAAA;AAAA,MACA,aAAA,EAAe,CAAC,CAAA,KAAM;AACpB,QAAA,IAAI,KAAA,IAAS,IAAA,EAAM,eAAA,CAAgB,CAAC,CAAA;AACpC,QAAA,aAAA,GAAgB,CAAC,CAAA;AAAA,MACnB,CAAA;AAAA,MACA,IAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,UAAU,MAAA,CAAO,QAAA;AAAA,MACjB,QAAA,EAAU,YAAY,MAAA,CAAO,QAAA;AAAA,MAC7B,IAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAACA,QAAA,CAAgB,OAAA;AAAA,UAAhB;AAAA,YACC,IAAI,MAAA,CAAO,SAAA;AAAA,YACX,WAAA,EAAU,gBAAA;AAAA,YACV,WAAA,EAAW,IAAA;AAAA,YACX,aAAA,EAAa,UAAU,IAAA,GAAO,MAAA;AAAA,YAC9B,cAAA,EAAc,OAAO,OAAA,IAAW,MAAA;AAAA,YAChC,eAAA,EAAe,OAAO,QAAA,IAAY,MAAA;AAAA,YAClC,YAAA,EAAY,KAAA;AAAA,YACZ,cAAA,EAAc,OAAO,OAAA,IAAW,MAAA;AAAA,YAChC,oBAAkB,MAAA,CAAO,WAAA;AAAA,YACzB,YAAA,EAAY,MAAM,YAAY,CAAA;AAAA,YAC9B,SAAA,EAAW,EAAA,CAAG,0BAAA,EAA4B,SAAS,CAAA;AAAA,YAElD,QAAA,EAAA;AAAA,cAAA,IAAA,wBACE,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAmB,aAAA,EAAW,MAC3C,QAAA,EAAA,IAAA,EACH,CAAA;AAAA,8BAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,2CAAA,EACd,8BAACA,QAAA,CAAgB,KAAA,EAAhB,EAAsB,WAAA,sBAAc,MAAA,EAAA,EAAK,SAAA,EAAU,iBAAA,EAAmB,QAAA,EAAA,WAAA,EAAY,GAAS,CAAA,EAC9F,CAAA;AAAA,8BACA,GAAA,CAACA,SAAgB,IAAA,EAAhB,EAAqB,SAAO,IAAA,EAC3B,QAAA,kBAAA,GAAA,CAAC,iBAAc,CAAA,EACjB;AAAA;AAAA;AAAA,SACF;AAAA,wBAEA,GAAA,CAACA,QAAA,CAAgB,MAAA,EAAhB,EAAuB,SAAA,EACtB,QAAA,kBAAA,GAAA;AAAA,UAACA,QAAA,CAAgB,OAAA;AAAA,UAAhB;AAAA,YACC,WAAA,EAAU,aAAA;AAAA,YACV,QAAA,EAAS,QAAA;AAAA,YACT,IAAA,EAAK,QAAA;AAAA,YACL,KAAA,EAAM,OAAA;AAAA,YACN,UAAA,EAAY,CAAA;AAAA,YACZ,gBAAA,EAAkB,CAAA;AAAA,YAClB,SAAA,EAAW,EAAA;AAAA,cACT,6FAAA;AAAA,cACA,iDAAA;AAAA,cACA,gBAAA;AAAA,cACA,+DAAA;AAAA,cACA;AAAA,aACF;AAAA,YAEA,QAAA,kBAAA,GAAA,CAACA,QAAA,CAAgB,QAAA,EAAhB,EAAyB,SAAA,EAAU,2BACjC,QAAA,EAAA,MAAA,CAAO,GAAA,CAAI,CAAC,CAAA,EAAG,EAAA,KAAO;AACrB,cAAA,MAAM,IAAA,GAAO,CAAA,CAAE,OAAA,CAAQ,GAAA,CAAI,CAAC,CAAA,qBAC1B,GAAA;AAAA,gBAACA,QAAA,CAAgB,IAAA;AAAA,gBAAhB;AAAA,kBAEC,OAAO,CAAA,CAAE,KAAA;AAAA,kBACT,UAAU,CAAA,CAAE,QAAA;AAAA,kBACZ,WAAW,CAAA,CAAE,KAAA;AAAA,kBACb,WAAA,EAAU,aAAA;AAAA,kBACV,SAAA,EAAW,EAAA,CAAG,aAAA,EAAe,qCAAqC,CAAA;AAAA,kBAElE,QAAA,kBAAA,GAAA;AAAA,oBAAC,eAAA;AAAA,oBAAA;AAAA,sBACC,OAAO,CAAA,CAAE,KAAA;AAAA,sBACT,aAAa,CAAA,CAAE,WAAA;AAAA,sBACf,MAAM,CAAA,CAAE,IAAA;AAAA,sBACR,QAAA;AAAA,sBACA,MAAA;AAAA,sBACA,UAAU,CAAA,CAAE,QAAA;AAAA,sBACZ,QAAA,EAAU,EAAE,KAAA,KAAU,OAAA;AAAA,sBACtB,aAAa,CAAC,CAAA,yBAAOA,QAAA,CAAgB,QAAA,EAAhB,EAA0B,QAAA,EAAA,CAAA,EAAE;AAAA;AAAA;AACnD,iBAAA;AAAA,gBAhBK,CAAA,CAAE;AAAA,eAkBV,CAAA;AACD,cAAA,OAAO,MAAA,CAAO,MAAA,GAAS,CAAA,IAAK,CAAA,CAAE,KAAA,wBAC3BA,QAAA,CAAgB,KAAA,EAAhB,EAA+B,SAAA,EAAW,cAAA,EACxC,QAAA,EAAA;AAAA,gBAAA,CAAA,CAAE,KAAA,wBAAUA,QAAA,CAAgB,KAAA,EAAhB,EAAsB,SAAA,EAAW,mBAAA,EAAsB,YAAE,KAAA,EAAM,CAAA;AAAA,gBAC3E;AAAA,eAAA,EAAA,EAFyB,EAG5B,CAAA,mBAEA,GAAA,CAAO,KAAA,CAAA,QAAA,EAAN,EAAyB,kBAAL,EAAU,CAAA;AAAA,YAEnC,CAAC,CAAA,EACH;AAAA;AAAA,SACF,EACF;AAAA;AAAA;AAAA,GACF,EACF,CAAA;AAEJ","file":"chunk-72OCFAPT.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Select as SelectPrimitive } from 'radix-ui'\nimport { cn } from '../lib/utils'\nimport { MenuItemContent, menuGroupClass, menuGroupLabelClass, menuItemClass, menuSurfaceClass, type MenuItemContentProps } from './dropdown'\nimport { useFormField } from './form-field'\n\n/**\n * Select, 1:1 with the uiKit `Select` set (4022:3531): the field around it is Input's (a 13px\n * medium label 8px above, a 13px hint or error under it), the trigger is Input's skin with the\n * value and a 16px chevron (sm 28, md 32, lg 36; 12px in, 8px gaps), an optional 16px leading\n * icon (by default the picked option's own icon, when the options have icons). Placeholder is text/muted, a value text/default. While the list is open the trigger\n * keeps the focus border and ring.\n *\n * The list is the Dropdown menu: the same surface, rows, groups and options, so every option\n * takes what a `DropdownMenuItem` takes (icon, description, stacked or inline layout, 20px\n * icons, a shortcut) and the current one is marked with the check. It opens 4px under the\n * trigger, at least as wide.\n *\n * Built on the Radix Select: arrow keys, typeahead, Home/End, Escape, a native form value\n * (`name`), and focus back on the trigger. Inside a FormField, leave out `label`, `hint` and\n * `error`.\n */\nexport interface SelectOption extends Omit<MenuItemContentProps, 'label' | 'selected' | 'renderLabel' | 'layout' | 'iconSize'> {\n  value: string\n  label: string\n  disabled?: boolean\n}\n\nexport interface SelectGroup {\n  label?: React.ReactNode\n  options: SelectOption[]\n}\n\nexport interface SelectProps {\n  /** Options, or titled groups of options. */\n  options: SelectOption[] | SelectGroup[]\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  placeholder?: string\n  label?: React.ReactNode\n  hint?: React.ReactNode\n  /** An error message (replaces the hint), or `true` to mark the field invalid without one. */\n  error?: React.ReactNode | boolean\n  size?: 'sm' | 'md' | 'lg'\n  /** A 16px icon before the value. Left out, the picked option's own icon shows there. */\n  leadingIcon?: React.ReactNode\n  /** Row layout of every option: description under the label, or after it. */\n  layout?: MenuItemContentProps['layout']\n  /** Option icon size; 20 suits stacked two-line options. */\n  iconSize?: MenuItemContentProps['iconSize']\n  disabled?: boolean\n  required?: boolean\n  /** Form field name, for a native form submit. */\n  name?: string\n  id?: string\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Portal target. Defaults to `document.body`. */\n  container?: HTMLElement | null\n  'aria-label'?: string\n  /** Classes for the outer wrapper (label + field + hint). `className` styles the trigger. */\n  wrapperClassName?: string\n  className?: string\n  /** Show a state without interacting, for state sheets. */\n  'data-force'?: 'hover' | 'focus'\n}\n\nexport const isOptionGroups = <T,>(o: T[] | { options: T[] }[]): o is { options: T[] }[] =>\n  o.length > 0 && typeof o[0] === 'object' && o[0] !== null && 'options' in o[0]\n\n/** Ids and state for a field with a label, a hint or an error, inside or outside a FormField. */\nexport function useFieldChrome({\n  id,\n  disabled,\n  error,\n  hint,\n}: {\n  id?: string\n  disabled?: boolean\n  error?: React.ReactNode | boolean\n  hint?: React.ReactNode\n}) {\n  const field = useFormField()\n  const autoId = React.useId()\n  const controlId = id ?? field?.id ?? autoId\n  const isError = typeof error === 'string' || React.isValidElement(error)\n  const message = isError ? (error as React.ReactNode) : hint\n  const messageId = message ? `${controlId}-hint` : undefined\n  return {\n    controlId,\n    disabled: disabled ?? field?.disabled ?? false,\n    invalid: Boolean(error) || (field?.invalid ?? false),\n    required: field?.required,\n    describedBy: [field?.describedBy, messageId].filter(Boolean).join(' ') || undefined,\n    message,\n    messageId,\n    isError,\n  }\n}\n\n/** Label 8px above the control, hint or error 8px under it: Input's field, for Select and Combobox. */\nexport function FieldChrome({\n  label,\n  action,\n  chrome,\n  className,\n  children,\n}: {\n  label?: React.ReactNode\n  /** On the label's line, at the field's right edge: the smallest button, e.g. Clear. */\n  action?: React.ReactNode\n  chrome: ReturnType<typeof useFieldChrome>\n  className?: string\n  children: React.ReactNode\n}) {\n  return (\n    <div className={cn('grid w-full gap-2', className)}>\n      {label && (\n        // The row keeps the label's 18px whatever the action, so the field never moves.\n        <div className=\"flex h-[18px] items-center justify-between gap-2\">\n          <label htmlFor={chrome.controlId} className=\"text-sm leading-[18px] font-medium text-text-default\">\n            {label}\n          </label>\n          {action && <div className=\"-my-[3px] flex shrink-0 items-center\">{action}</div>}\n        </div>\n      )}\n      {children}\n      {chrome.message && (\n        <p id={chrome.messageId} className={cn('text-sm', chrome.isError ? 'text-action-destructive-bg' : 'text-text-muted')}>\n          {chrome.message}\n        </p>\n      )}\n    </div>\n  )\n}\n\n/** The trigger's chevron, 16px in the icon colour. */\nexport function SelectChevron({ className }: { className?: string }) {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden className={cn('satin-field-icon text-text-muted', className)}>\n      <path d=\"M4 6L8 10L12 6\" stroke=\"currentColor\" strokeWidth=\"1.25\" strokeLinecap=\"round\" strokeLinejoin=\"round\" />\n    </svg>\n  )\n}\n\nexport function Select({\n  options,\n  value,\n  defaultValue,\n  onValueChange,\n  placeholder = 'Select…',\n  label,\n  hint,\n  error,\n  size = 'md',\n  leadingIcon,\n  layout = 'inline',\n  iconSize = 16,\n  disabled,\n  required,\n  name,\n  id,\n  open,\n  defaultOpen,\n  onOpenChange,\n  container,\n  wrapperClassName,\n  className,\n  'data-force': force,\n  ...props\n}: SelectProps) {\n  const chrome = useFieldChrome({ id, disabled, error, hint })\n\n  // Figma's `filled` and the check: track the value, controlled or not.\n  const [uncontrolled, setUncontrolled] = React.useState(defaultValue)\n  const current = value ?? uncontrolled\n  const groups: SelectGroup[] = isOptionGroups(options) ? (options as SelectGroup[]) : [{ options: options as SelectOption[] }]\n  const lead = leadingIcon ?? groups.flatMap((g) => g.options).find((o) => o.value === current)?.icon\n\n  return (\n    <FieldChrome label={label} chrome={chrome} className={wrapperClassName}>\n      <SelectPrimitive.Root\n        value={value}\n        defaultValue={defaultValue}\n        onValueChange={(v) => {\n          if (value == null) setUncontrolled(v)\n          onValueChange?.(v)\n        }}\n        open={open}\n        defaultOpen={defaultOpen}\n        onOpenChange={onOpenChange}\n        disabled={chrome.disabled}\n        required={required ?? chrome.required}\n        name={name}\n      >\n        <SelectPrimitive.Trigger\n          id={chrome.controlId}\n          data-slot=\"select-trigger\"\n          data-size={size}\n          data-filled={current ? true : undefined}\n          data-invalid={chrome.invalid || undefined}\n          data-disabled={chrome.disabled || undefined}\n          data-force={force}\n          aria-invalid={chrome.invalid || undefined}\n          aria-describedby={chrome.describedBy}\n          aria-label={props['aria-label']}\n          className={cn('satin-field satin-select', className)}\n        >\n          {lead && (\n            <span className=\"satin-field-icon\" aria-hidden>\n              {lead}\n            </span>\n          )}\n          <span className=\"min-w-0 flex-1 truncate text-text-default\">\n            <SelectPrimitive.Value placeholder={<span className=\"text-text-muted\">{placeholder}</span>} />\n          </span>\n          <SelectPrimitive.Icon asChild>\n            <SelectChevron />\n          </SelectPrimitive.Icon>\n        </SelectPrimitive.Trigger>\n\n        <SelectPrimitive.Portal container={container}>\n          <SelectPrimitive.Content\n            data-slot=\"select-menu\"\n            position=\"popper\"\n            side=\"bottom\"\n            align=\"start\"\n            sideOffset={4}\n            collisionPadding={8}\n            className={cn(\n              'pointer-events-auto z-50 max-w-[520px] min-w-(--radix-select-trigger-width) overflow-hidden',\n              'max-h-(--radix-select-content-available-height)',\n              menuSurfaceClass,\n              'origin-(--radix-select-content-transform-origin) outline-none',\n              'data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]',\n            )}\n          >\n            <SelectPrimitive.Viewport className=\"flex flex-col gap-1 p-1\">\n              {groups.map((g, gi) => {\n                const rows = g.options.map((o) => (\n                  <SelectPrimitive.Item\n                    key={o.value}\n                    value={o.value}\n                    disabled={o.disabled}\n                    textValue={o.label}\n                    data-slot=\"select-item\"\n                    className={cn(menuItemClass, 'data-[state=checked]:bg-bg-selected')}\n                  >\n                    <MenuItemContent\n                      label={o.label}\n                      description={o.description}\n                      icon={o.icon}\n                      iconSize={iconSize}\n                      layout={layout}\n                      shortcut={o.shortcut}\n                      selected={o.value === current}\n                      renderLabel={(l) => <SelectPrimitive.ItemText>{l}</SelectPrimitive.ItemText>}\n                    />\n                  </SelectPrimitive.Item>\n                ))\n                return groups.length > 1 || g.label ? (\n                  <SelectPrimitive.Group key={gi} className={menuGroupClass}>\n                    {g.label && <SelectPrimitive.Label className={menuGroupLabelClass}>{g.label}</SelectPrimitive.Label>}\n                    {rows}\n                  </SelectPrimitive.Group>\n                ) : (\n                  <React.Fragment key={gi}>{rows}</React.Fragment>\n                )\n              })}\n            </SelectPrimitive.Viewport>\n          </SelectPrimitive.Content>\n        </SelectPrimitive.Portal>\n      </SelectPrimitive.Root>\n    </FieldChrome>\n  )\n}\n"]}

package/chunk-7TXHCRAG.js

@@ -0,0 +1,51 @@
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var percent = (value, max) => `${Math.round(value / max * 100)}%`;
+function Progress({
+  value,
+  max = 100,
+  label,
+  showValue = true,
+  size = "sm",
+  formatValue = percent,
+  className,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const labelId = React.useId();
+  const known = value != null;
+  const v = known ? Math.min(max, Math.max(0, value)) : 0;
+  const text = known ? formatValue(v, max) : void 0;
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "progress", "data-size": size, className: cn("flex w-full flex-col gap-2", className), ...props, children: [
+    (label || showValue && known) && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3 text-sm leading-5", children: [
+      label ? /* @__PURE__ */ jsx("span", { id: labelId, className: "min-w-0 truncate font-medium text-text-default", children: label }) : /* @__PURE__ */ jsx("span", {}),
+      showValue && known && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "shrink-0 text-text-muted tabular-nums", children: text })
+    ] }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "progressbar",
+        "aria-labelledby": label ? labelId : void 0,
+        "aria-label": label ? void 0 : ariaLabel,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        "aria-valuenow": known ? v : void 0,
+        "aria-valuetext": text,
+        className: cn("relative w-full overflow-hidden rounded-full bg-bg-muted", size === "md" ? "h-2" : "h-1"),
+        children: known ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "h-full rounded-full bg-action-primary-bg transition-[width] duration-300 ease-(--ease-out)",
+            style: { width: `${v / max * 100}%` }
+          }
+        ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-y-0 left-0 w-1/3 rounded-full bg-action-primary-bg animate-[satin-progress-indeterminate_1.4s_var(--ease-in-out)_infinite]" })
+      }
+    )
+  ] });
+}
+
+export { Progress };
+//# sourceMappingURL=chunk-7TXHCRAG.js.map
+//# sourceMappingURL=chunk-7TXHCRAG.js.map

package/chunk-7TXHCRAG.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/progress.tsx"],"names":[],"mappings":";;;;AA4BA,IAAM,OAAA,GAAU,CAAC,KAAA,EAAe,GAAA,KAAgB,CAAA,EAAG,KAAK,KAAA,CAAO,KAAA,GAAQ,GAAA,GAAO,GAAG,CAAC,CAAA,CAAA,CAAA;AAE3E,SAAS,QAAA,CAAS;AAAA,EACvB,KAAA;AAAA,EACA,GAAA,GAAM,GAAA;AAAA,EACN,KAAA;AAAA,EACA,SAAA,GAAY,IAAA;AAAA,EACZ,IAAA,GAAO,IAAA;AAAA,EACP,WAAA,GAAc,OAAA;AAAA,EACd,SAAA;AAAA,EACA,YAAA,EAAc,SAAA;AAAA,EACd,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,UAAgB,KAAA,CAAA,KAAA,EAAM;AAC5B,EAAA,MAAM,QAAQ,KAAA,IAAS,IAAA;AACvB,EAAA,MAAM,CAAA,GAAI,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,GAAA,EAAK,KAAK,GAAA,CAAI,CAAA,EAAG,KAAK,CAAC,CAAA,GAAI,CAAA;AACtD,EAAA,MAAM,IAAA,GAAO,KAAA,GAAQ,WAAA,CAAY,CAAA,EAAG,GAAG,CAAA,GAAI,MAAA;AAE3C,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,UAAA,EAAW,WAAA,EAAW,IAAA,EAAM,SAAA,EAAW,EAAA,CAAG,4BAAA,EAA8B,SAAS,CAAA,EAAI,GAAG,KAAA,EACnG,QAAA,EAAA;AAAA,IAAA,CAAA,KAAA,IAAU,SAAA,IAAa,KAAA,qBACvB,IAAA,CAAC,KAAA,EAAA,EAAI,WAAU,2DAAA,EACZ,QAAA,EAAA;AAAA,MAAA,KAAA,mBACC,GAAA,CAAC,UAAK,EAAA,EAAI,OAAA,EAAS,WAAU,gDAAA,EAC1B,QAAA,EAAA,KAAA,EACH,CAAA,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,CAAA;AAAA,MAEP,SAAA,IAAa,yBACZ,GAAA,CAAC,MAAA,EAAA,EAAK,eAAW,IAAA,EAAC,SAAA,EAAU,yCACzB,QAAA,EAAA,IAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,oBAEF,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,aAAA;AAAA,QACL,iBAAA,EAAiB,QAAQ,OAAA,GAAU,MAAA;AAAA,QACnC,YAAA,EAAY,QAAQ,MAAA,GAAY,SAAA;AAAA,QAChC,eAAA,EAAe,CAAA;AAAA,QACf,eAAA,EAAe,GAAA;AAAA,QACf,eAAA,EAAe,QAAQ,CAAA,GAAI,MAAA;AAAA,QAC3B,gBAAA,EAAgB,IAAA;AAAA,QAChB,WAAW,EAAA,CAAG,0DAAA,EAA4D,IAAA,KAAS,IAAA,GAAO,QAAQ,KAAK,CAAA;AAAA,QAEtG,QAAA,EAAA,KAAA,mBACC,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,4FAAA;AAAA,YACV,OAAO,EAAE,KAAA,EAAO,GAAI,CAAA,GAAI,GAAA,GAAO,GAAG,CAAA,CAAA,CAAA;AAAI;AAAA,SACxC,mBAEA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2IAAA,EAA4I;AAAA;AAAA;AAE/J,GAAA,EACF,CAAA;AAEJ","file":"chunk-7TXHCRAG.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { cn } from '../lib/utils'\n\n/**\n * Progress, 1:1 with the uiKit `Progress` set (4025:3851): a bg/muted track, 4px (sm) or 8px\n * (md), fully rounded, with the done part in action/primary/bg. Above it, optionally, a label\n * row 8px up: the label (13px medium, text/default) on the left and the percentage (13px,\n * text/muted) on the right.\n *\n * Leave `value` out while the amount is unknown: a third of the track then slides across.\n * The bar moves to a new value over 300 ms on ease-out.\n *\n * A `progressbar` with aria-valuenow (and the label as its name) when there is a value.\n */\nexport interface ProgressProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  /** 0 to `max`; left out, the bar is indeterminate. */\n  value?: number | null\n  max?: number\n  label?: React.ReactNode\n  /** The percentage at the right of the label row. */\n  showValue?: boolean\n  size?: 'sm' | 'md'\n  /** How the value reads on the right and to screen readers. Defaults to a whole percentage. */\n  formatValue?: (value: number, max: number) => string\n}\n\nconst percent = (value: number, max: number) => `${Math.round((value / max) * 100)}%`\n\nexport function Progress({\n  value,\n  max = 100,\n  label,\n  showValue = true,\n  size = 'sm',\n  formatValue = percent,\n  className,\n  'aria-label': ariaLabel,\n  ...props\n}: ProgressProps) {\n  const labelId = React.useId()\n  const known = value != null\n  const v = known ? Math.min(max, Math.max(0, value)) : 0\n  const text = known ? formatValue(v, max) : undefined\n\n  return (\n    <div data-slot=\"progress\" data-size={size} className={cn('flex w-full flex-col gap-2', className)} {...props}>\n      {(label || (showValue && known)) && (\n        <div className=\"flex items-center justify-between gap-3 text-sm leading-5\">\n          {label ? (\n            <span id={labelId} className=\"min-w-0 truncate font-medium text-text-default\">\n              {label}\n            </span>\n          ) : (\n            <span />\n          )}\n          {showValue && known && (\n            <span aria-hidden className=\"shrink-0 text-text-muted tabular-nums\">\n              {text}\n            </span>\n          )}\n        </div>\n      )}\n      <div\n        role=\"progressbar\"\n        aria-labelledby={label ? labelId : undefined}\n        aria-label={label ? undefined : ariaLabel}\n        aria-valuemin={0}\n        aria-valuemax={max}\n        aria-valuenow={known ? v : undefined}\n        aria-valuetext={text}\n        className={cn('relative w-full overflow-hidden rounded-full bg-bg-muted', size === 'md' ? 'h-2' : 'h-1')}\n      >\n        {known ? (\n          <div\n            className=\"h-full rounded-full bg-action-primary-bg transition-[width] duration-300 ease-(--ease-out)\"\n            style={{ width: `${(v / max) * 100}%` }}\n          />\n        ) : (\n          <div className=\"absolute inset-y-0 left-0 w-1/3 rounded-full bg-action-primary-bg animate-[satin-progress-indeterminate_1.4s_var(--ease-in-out)_infinite]\" />\n        )}\n      </div>\n    </div>\n  )\n}\n"]}

package/chunk-A5XEM3GF.js

@@ -0,0 +1,260 @@
+import { Button } from './chunk-HNQUX43Z.js';
+import { cn } from './chunk-H63FYCMY.js';
+import * as React from 'react';
+import { Check, Copy } from 'iconoir-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var tokenClass = {
+  plain: "text-[var(--code-plain,#18181b)] dark:text-[var(--code-plain,#fafafa)]",
+  keyword: "text-[var(--code-keyword,#dc2626)] dark:text-[var(--code-keyword,#f87171)]",
+  string: "text-[var(--code-string,#0369a1)] dark:text-[var(--code-string,#7dd3fc)]",
+  function: "text-[var(--code-function,#8b5cf6)] dark:text-[var(--code-function,#a78bfa)]",
+  parameter: "text-[var(--code-parameter,#b45309)] dark:text-[var(--code-parameter,#fcd34d)]",
+  variable: "text-[var(--code-variable,#0284c7)] dark:text-[var(--code-variable,#38bdf8)]",
+  // No comment colour in Figma: comments take the line-number grey.
+  comment: "text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]"
+};
+var lineNumberClass = "text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]";
+var highlightClass = "bg-[var(--code-line-highlight,rgba(0,0,0,0.05))] dark:bg-[var(--code-line-highlight,rgba(255,255,255,0.06))]";
+var KEYWORDS = /* @__PURE__ */ new Set([
+  "import",
+  "from",
+  "export",
+  "default",
+  "async",
+  "await",
+  "function",
+  "return",
+  "const",
+  "let",
+  "var",
+  "if",
+  "else",
+  "for",
+  "while",
+  "do",
+  "switch",
+  "case",
+  "break",
+  "continue",
+  "new",
+  "class",
+  "extends",
+  "try",
+  "catch",
+  "finally",
+  "throw",
+  "typeof",
+  "instanceof",
+  "in",
+  "of",
+  "type",
+  "interface",
+  "as",
+  "true",
+  "false",
+  "null",
+  "undefined",
+  "this",
+  "yield",
+  "void",
+  "delete",
+  "static",
+  "public",
+  "private"
+]);
+function tokenize(line) {
+  const out = [];
+  const re = /(\/\/.*$)|("(?:[^"\\]|\\.)*"?|'(?:[^'\\]|\\.)*'?|`(?:[^`\\]|\\.)*`?)|([A-Za-z_$][\w$]*)|(=>|===|!==|==|=)|(\s+)|(.)/g;
+  let declaring = false;
+  let params = false;
+  let depth = 0;
+  let afterFunction = false;
+  let m;
+  while (m = re.exec(line)) {
+    const [text, comment, str, ident, op, space] = m;
+    if (comment) out.push({ text, kind: "comment" });
+    else if (str) out.push({ text, kind: "string" });
+    else if (space) out.push({ text, kind: "plain" });
+    else if (op) {
+      if (op === "=") declaring = false;
+      out.push({ text, kind: "keyword" });
+    } else if (ident) {
+      const rest = line.slice(re.lastIndex);
+      if (KEYWORDS.has(ident)) {
+        if (ident === "const" || ident === "let" || ident === "var") declaring = true;
+        if (ident === "function") afterFunction = true;
+        out.push({ text, kind: "keyword" });
+      } else if (params && /^\s*[:,)=?]/.test(rest)) out.push({ text, kind: "parameter" });
+      else if (/^\s*\(/.test(rest) || /^[A-Z]/.test(ident)) {
+        if (afterFunction) params = true;
+        afterFunction = false;
+        out.push({ text, kind: "function" });
+      } else if (declaring) out.push({ text, kind: "variable" });
+      else out.push({ text, kind: "plain" });
+    } else {
+      if (params && text === "(") depth++;
+      if (params && text === ")" && --depth <= 0) params = false;
+      out.push({ text, kind: "plain" });
+    }
+  }
+  return out.reduce((acc, t) => {
+    const last = acc[acc.length - 1];
+    if (last && last.kind === t.kind) last.text += t.text;
+    else acc.push({ ...t });
+    return acc;
+  }, []);
+}
+function parse(code, view, highlightLines) {
+  const raw = code.replace(/\n$/, "").split("\n");
+  if (view === "code") {
+    return raw.map((text, i) => ({
+      text,
+      number: i + 1,
+      kind: highlightLines.includes(i + 1) ? "highlighted" : "default"
+    }));
+  }
+  let n = 1;
+  return raw.map((line) => {
+    const sign = line[0];
+    const text = line.slice(1);
+    if (sign === "-") return { text, number: n, kind: "removed" };
+    if (sign === "+") return { text, number: n++, kind: "added" };
+    return { text: sign === " " ? text : line, number: n++, kind: "context" };
+  });
+}
+function FileCodeIcon() {
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "shrink-0 text-text-muted", children: /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M13.333 5.333L9.333 1.333H4C3.264 1.333 2.667 1.93 2.667 2.667V13.333C2.667 14.07 3.264 14.667 4 14.667H12C12.736 14.667 13.333 14.07 13.333 13.333V5.333ZM9.333 1.333V5.333H13.333M6.667 8.333L5.333 9.667L6.667 11M9.333 8.333L10.667 9.667L9.333 11",
+      stroke: "currentColor",
+      strokeWidth: "1.25",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function CodeBlock({
+  code,
+  filename,
+  view = "code",
+  showHeader = true,
+  showActions = true,
+  highlightLines = [],
+  highlight = true,
+  className,
+  ...props
+}) {
+  const lines = React.useMemo(() => parse(code, view, highlightLines), [code, view, highlightLines]);
+  const [copied, setCopied] = React.useState(false);
+  const timer = React.useRef(void 0);
+  React.useEffect(() => () => clearTimeout(timer.current), []);
+  const added = lines.filter((l) => l.kind === "added").length;
+  const removed = lines.filter((l) => l.kind === "removed").length;
+  const copy = async () => {
+    const text = lines.filter((l) => l.kind !== "removed").map((l) => l.text).join("\n");
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopied(false), 1500);
+    } catch {
+      setCopied(false);
+    }
+  };
+  const diff = view === "diff";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "code-block",
+      "data-view": view,
+      className: cn(
+        "flex flex-col overflow-hidden rounded-2xl border border-border-default bg-bg-card pb-3",
+        className
+      ),
+      ...props,
+      children: [
+        showHeader && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 pt-2 pr-2 pb-1 pl-4", children: [
+          /* @__PURE__ */ jsx(FileCodeIcon, {}),
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm leading-[18px] font-medium text-text-default", children: filename }),
+          diff && /* @__PURE__ */ jsxs("span", { className: "flex shrink-0 items-center gap-1.5 font-mono text-sm leading-(--text-sm--line-height) tracking-normal", children: [
+            /* @__PURE__ */ jsxs("span", { className: "text-status-green-fg", children: [
+              "+",
+              added
+            ] }),
+            /* @__PURE__ */ jsxs("span", { className: "text-status-red-fg", children: [
+              "\u2212",
+              removed
+            ] })
+          ] }),
+          showActions && /* @__PURE__ */ jsxs(Button, { variant: "tertiary", size: "xs", onClick: copy, className: "text-text-default", children: [
+            copied ? /* @__PURE__ */ jsx(Check, {}) : /* @__PURE__ */ jsx(Copy, {}),
+            /* @__PURE__ */ jsx("span", { "aria-live": "polite", children: copied ? "Copied" : "Copy" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx(
+          "pre",
+          {
+            tabIndex: 0,
+            role: "region",
+            "aria-label": filename ? `${filename} code` : "Code",
+            className: cn(
+              "outline-none focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]",
+              "overflow-x-auto font-mono text-sm leading-(--text-sm--line-height) font-normal tracking-normal",
+              // Without the header the code sits in the middle: 12px above, as below.
+              showHeader ? "pt-1" : "pt-3",
+              tokenClass.plain
+            ),
+            children: /* @__PURE__ */ jsx("code", { className: "block w-max min-w-full", children: lines.map((line, i) => /* @__PURE__ */ jsxs(
+              "span",
+              {
+                "data-line": line.kind,
+                className: cn(
+                  "flex h-6 items-center px-4",
+                  diff ? "gap-2" : "gap-4",
+                  line.kind === "highlighted" && highlightClass,
+                  line.kind === "added" && "bg-status-green-bg",
+                  line.kind === "removed" && "bg-status-red-bg"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      "aria-hidden": true,
+                      className: cn(
+                        "w-5 shrink-0 text-right select-none",
+                        line.kind === "added" ? "text-status-green-fg" : line.kind === "removed" ? "text-status-red-fg" : lineNumberClass
+                      ),
+                      children: line.number
+                    }
+                  ),
+                  diff && /* @__PURE__ */ jsxs(
+                    "span",
+                    {
+                      className: cn(
+                        "w-2 shrink-0 text-center select-none",
+                        line.kind === "added" ? "text-status-green-fg" : line.kind === "removed" ? "text-status-red-fg" : lineNumberClass
+                      ),
+                      children: [
+                        line.kind === "added" ? "+" : line.kind === "removed" ? "\u2212" : " ",
+                        line.kind === "added" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " added" }),
+                        line.kind === "removed" && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " removed" })
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsx("span", { className: "whitespace-pre", children: line.text === "" ? "\u200B" : highlight ? tokenize(line.text).map((t, j) => /* @__PURE__ */ jsx("span", { className: t.kind === "plain" ? void 0 : tokenClass[t.kind], children: t.text }, j)) : line.text })
+                ]
+              },
+              i
+            )) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+export { CodeBlock };
+//# sourceMappingURL=chunk-A5XEM3GF.js.map
+//# sourceMappingURL=chunk-A5XEM3GF.js.map

package/chunk-A5XEM3GF.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/code-block.tsx"],"names":[],"mappings":";;;;;;AA8BA,IAAM,UAAA,GAAwC;AAAA,EAC5C,KAAA,EAAO,wEAAA;AAAA,EACP,OAAA,EAAS,4EAAA;AAAA,EACT,MAAA,EAAQ,0EAAA;AAAA,EACR,QAAA,EAAU,8EAAA;AAAA,EACV,SAAA,EAAW,gFAAA;AAAA,EACX,QAAA,EAAU,8EAAA;AAAA;AAAA,EAEV,OAAA,EAAS;AACX,CAAA;AAEA,IAAM,eAAA,GAAkB,oFAAA;AACxB,IAAM,cAAA,GAAiB,8GAAA;AAEvB,IAAM,QAAA,uBAAe,GAAA,CAAI;AAAA,EACvB,QAAA;AAAA,EAAU,MAAA;AAAA,EAAQ,QAAA;AAAA,EAAU,SAAA;AAAA,EAAW,OAAA;AAAA,EAAS,OAAA;AAAA,EAAS,UAAA;AAAA,EAAY,QAAA;AAAA,EAAU,OAAA;AAAA,EAAS,KAAA;AAAA,EAAO,KAAA;AAAA,EAC/F,IAAA;AAAA,EAAM,MAAA;AAAA,EAAQ,KAAA;AAAA,EAAO,OAAA;AAAA,EAAS,IAAA;AAAA,EAAM,QAAA;AAAA,EAAU,MAAA;AAAA,EAAQ,OAAA;AAAA,EAAS,UAAA;AAAA,EAAY,KAAA;AAAA,EAAO,OAAA;AAAA,EAAS,SAAA;AAAA,EAC3F,KAAA;AAAA,EAAO,OAAA;AAAA,EAAS,SAAA;AAAA,EAAW,OAAA;AAAA,EAAS,QAAA;AAAA,EAAU,YAAA;AAAA,EAAc,IAAA;AAAA,EAAM,IAAA;AAAA,EAAM,MAAA;AAAA,EAAQ,WAAA;AAAA,EAAa,IAAA;AAAA,EAC7F,MAAA;AAAA,EAAQ,OAAA;AAAA,EAAS,MAAA;AAAA,EAAQ,WAAA;AAAA,EAAa,MAAA;AAAA,EAAQ,OAAA;AAAA,EAAS,MAAA;AAAA,EAAQ,QAAA;AAAA,EAAU,QAAA;AAAA,EAAU,QAAA;AAAA,EAAU;AAC/F,CAAC,CAAA;AAKD,SAAS,SAAS,IAAA,EAAuB;AACvC,EAAA,MAAM,MAAe,EAAC;AACtB,EAAA,MAAM,EAAA,GAAK,sHAAA;AACX,EAAA,IAAI,SAAA,GAAY,KAAA;AAChB,EAAA,IAAI,MAAA,GAAS,KAAA;AACb,EAAA,IAAI,KAAA,GAAQ,CAAA;AACZ,EAAA,IAAI,aAAA,GAAgB,KAAA;AACpB,EAAA,IAAI,CAAA;AACJ,EAAA,OAAQ,CAAA,GAAI,EAAA,CAAG,IAAA,CAAK,IAAI,CAAA,EAAI;AAC1B,IAAA,MAAM,CAAC,IAAA,EAAM,OAAA,EAAS,KAAK,KAAA,EAAO,EAAA,EAAI,KAAK,CAAA,GAAI,CAAA;AAC/C,IAAA,IAAI,SAAS,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,WAAW,CAAA;AAAA,SAAA,IACtC,KAAK,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,UAAU,CAAA;AAAA,SAAA,IACtC,OAAO,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,CAAA;AAAA,SAAA,IACvC,EAAA,EAAI;AACX,MAAA,IAAI,EAAA,KAAO,KAAK,SAAA,GAAY,KAAA;AAC5B,MAAA,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,WAAW,CAAA;AAAA,IACpC,WAAW,KAAA,EAAO;AAChB,MAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,EAAA,CAAG,SAAS,CAAA;AACpC,MAAA,IAAI,QAAA,CAAS,GAAA,CAAI,KAAK,CAAA,EAAG;AACvB,QAAA,IAAI,UAAU,OAAA,IAAW,KAAA,KAAU,KAAA,IAAS,KAAA,KAAU,OAAO,SAAA,GAAY,IAAA;AACzE,QAAA,IAAI,KAAA,KAAU,YAAY,aAAA,GAAgB,IAAA;AAC1C,QAAA,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,WAAW,CAAA;AAAA,MACpC,CAAA,MAAA,IAAW,MAAA,IAAU,aAAA,CAAc,IAAA,CAAK,IAAI,CAAA,EAAG,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,WAAA,EAAa,CAAA;AAAA,WAAA,IAC1E,SAAS,IAAA,CAAK,IAAI,KAAK,QAAA,CAAS,IAAA,CAAK,KAAK,CAAA,EAAG;AAEpD,QAAA,IAAI,eAAe,MAAA,GAAS,IAAA;AAC5B,QAAA,aAAA,GAAgB,KAAA;AAChB,QAAA,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,YAAY,CAAA;AAAA,MACrC,CAAA,MAAA,IAAW,WAAW,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,YAAY,CAAA;AAAA,eAChD,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,CAAA;AAAA,IACvC,CAAA,MAAO;AACL,MAAA,IAAI,MAAA,IAAU,SAAS,GAAA,EAAK,KAAA,EAAA;AAC5B,MAAA,IAAI,UAAU,IAAA,KAAS,GAAA,IAAO,EAAE,KAAA,IAAS,GAAG,MAAA,GAAS,KAAA;AACrD,MAAA,GAAA,CAAI,IAAA,CAAK,EAAE,IAAA,EAAM,IAAA,EAAM,SAAS,CAAA;AAAA,IAClC;AAAA,EACF;AAEA,EAAA,OAAO,GAAA,CAAI,MAAA,CAAgB,CAAC,GAAA,EAAK,CAAA,KAAM;AACrC,IAAA,MAAM,IAAA,GAAO,GAAA,CAAI,GAAA,CAAI,MAAA,GAAS,CAAC,CAAA;AAC/B,IAAA,IAAI,QAAQ,IAAA,CAAK,IAAA,KAAS,EAAE,IAAA,EAAM,IAAA,CAAK,QAAQ,CAAA,CAAE,IAAA;AAAA,SAC5C,GAAA,CAAI,IAAA,CAAK,EAAE,GAAG,GAAG,CAAA;AACtB,IAAA,OAAO,GAAA;AAAA,EACT,CAAA,EAAG,EAAE,CAAA;AACP;AAIA,SAAS,KAAA,CAAM,IAAA,EAAc,IAAA,EAAuB,cAAA,EAAkC;AACpF,EAAA,MAAM,MAAM,IAAA,CAAK,OAAA,CAAQ,OAAO,EAAE,CAAA,CAAE,MAAM,IAAI,CAAA;AAC9C,EAAA,IAAI,SAAS,MAAA,EAAQ;AACnB,IAAA,OAAO,GAAA,CAAI,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,MAAO;AAAA,MAC3B,IAAA;AAAA,MACA,QAAQ,CAAA,GAAI,CAAA;AAAA,MACZ,MAAM,cAAA,CAAe,QAAA,CAAS,CAAA,GAAI,CAAC,IAAI,aAAA,GAAgB;AAAA,KACzD,CAAE,CAAA;AAAA,EACJ;AAEA,EAAA,IAAI,CAAA,GAAI,CAAA;AACR,EAAA,OAAO,GAAA,CAAI,GAAA,CAAI,CAAC,IAAA,KAAS;AACvB,IAAA,MAAM,IAAA,GAAO,KAAK,CAAC,CAAA;AACnB,IAAA,MAAM,IAAA,GAAO,IAAA,CAAK,KAAA,CAAM,CAAC,CAAA;AACzB,IAAA,IAAI,IAAA,KAAS,KAAK,OAAO,EAAE,MAAM,MAAA,EAAQ,CAAA,EAAG,MAAM,SAAA,EAAmB;AACrE,IAAA,IAAI,IAAA,KAAS,KAAK,OAAO,EAAE,MAAM,MAAA,EAAQ,CAAA,EAAA,EAAK,MAAM,OAAA,EAAiB;AACrE,IAAA,OAAO,EAAE,MAAM,IAAA,KAAS,GAAA,GAAM,OAAO,IAAA,EAAM,MAAA,EAAQ,CAAA,EAAA,EAAK,IAAA,EAAM,SAAA,EAAmB;AAAA,EACnF,CAAC,CAAA;AACH;AAGA,SAAS,YAAA,GAAe;AACtB,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,KAAA,EAAM,IAAA,EAAK,MAAA,EAAO,IAAA,EAAK,OAAA,EAAQ,WAAA,EAAY,IAAA,EAAK,MAAA,EAAO,aAAA,EAAW,IAAA,EAAC,WAAU,0BAAA,EAChF,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,CAAA,EAAE,wPAAA;AAAA,MACF,MAAA,EAAO,cAAA;AAAA,MACP,WAAA,EAAY,MAAA;AAAA,MACZ,aAAA,EAAc,OAAA;AAAA,MACd,cAAA,EAAe;AAAA;AAAA,GACjB,EACF,CAAA;AAEJ;AAcO,SAAS,SAAA,CAAU;AAAA,EACxB,IAAA;AAAA,EACA,QAAA;AAAA,EACA,IAAA,GAAO,MAAA;AAAA,EACP,UAAA,GAAa,IAAA;AAAA,EACb,WAAA,GAAc,IAAA;AAAA,EACd,iBAAiB,EAAC;AAAA,EAClB,SAAA,GAAY,IAAA;AAAA,EACZ,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAmB;AACjB,EAAA,MAAM,KAAA,GAAc,KAAA,CAAA,OAAA,CAAQ,MAAM,KAAA,CAAM,IAAA,EAAM,IAAA,EAAM,cAAc,CAAA,EAAG,CAAC,IAAA,EAAM,IAAA,EAAM,cAAc,CAAC,CAAA;AACjG,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAS,CAAA,GAAU,eAAS,KAAK,CAAA;AAChD,EAAA,MAAM,KAAA,GAAc,aAAkD,MAAS,CAAA;AAC/E,EAAM,KAAA,CAAA,SAAA,CAAU,MAAM,MAAM,YAAA,CAAa,MAAM,OAAO,CAAA,EAAG,EAAE,CAAA;AAE3D,EAAA,MAAM,KAAA,GAAQ,MAAM,MAAA,CAAO,CAAC,MAAM,CAAA,CAAE,IAAA,KAAS,OAAO,CAAA,CAAE,MAAA;AACtD,EAAA,MAAM,OAAA,GAAU,MAAM,MAAA,CAAO,CAAC,MAAM,CAAA,CAAE,IAAA,KAAS,SAAS,CAAA,CAAE,MAAA;AAE1D,EAAA,MAAM,OAAO,YAAY;AAEvB,IAAA,MAAM,OAAO,KAAA,CAAM,MAAA,CAAO,CAAC,CAAA,KAAM,EAAE,IAAA,KAAS,SAAS,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,KAAM,CAAA,CAAE,IAAI,CAAA,CAAE,KAAK,IAAI,CAAA;AACnF,IAAA,IAAI;AACF,MAAA,MAAM,SAAA,CAAU,SAAA,CAAU,SAAA,CAAU,IAAI,CAAA;AACxC,MAAA,SAAA,CAAU,IAAI,CAAA;AACd,MAAA,YAAA,CAAa,MAAM,OAAO,CAAA;AAC1B,MAAA,KAAA,CAAM,UAAU,UAAA,CAAW,MAAM,SAAA,CAAU,KAAK,GAAG,IAAI,CAAA;AAAA,IACzD,CAAA,CAAA,MAAQ;AACN,MAAA,SAAA,CAAU,KAAK,CAAA;AAAA,IACjB;AAAA,EACF,CAAA;AAEA,EAAA,MAAM,OAAO,IAAA,KAAS,MAAA;AAEtB,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,YAAA;AAAA,MACV,WAAA,EAAW,IAAA;AAAA,MACX,SAAA,EAAW,EAAA;AAAA,QACT,wFAAA;AAAA,QACA;AAAA,OACF;AAAA,MACC,GAAG,KAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QAAA,UAAA,oBACC,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6CAAA,EACb,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,YAAA,EAAA,EAAa,CAAA;AAAA,0BACd,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,8EAAA,EAAgF,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,UACxG,IAAA,oBACC,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uGAAA,EACd,QAAA,EAAA;AAAA,4BAAA,IAAA,CAAC,MAAA,EAAA,EAAK,WAAU,sBAAA,EAAuB,QAAA,EAAA;AAAA,cAAA,GAAA;AAAA,cAAE;AAAA,aAAA,EAAM,CAAA;AAAA,4BAC/C,IAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oBAAA,EAAqB,QAAA,EAAA;AAAA,cAAA,QAAA;AAAA,cAAE;AAAA,aAAA,EAAQ;AAAA,WAAA,EACjD,CAAA;AAAA,UAED,WAAA,oBACC,IAAA,CAAC,MAAA,EAAA,EAAO,OAAA,EAAQ,UAAA,EAAW,MAAK,IAAA,EAAK,OAAA,EAAS,IAAA,EAAM,SAAA,EAAU,mBAAA,EAC3D,QAAA,EAAA;AAAA,YAAA,MAAA,mBAAS,GAAA,CAAC,KAAA,EAAA,EAAM,CAAA,mBAAK,GAAA,CAAC,IAAA,EAAA,EAAK,CAAA;AAAA,gCAC3B,MAAA,EAAA,EAAK,WAAA,EAAU,QAAA,EAAU,QAAA,EAAA,MAAA,GAAS,WAAW,MAAA,EAAO;AAAA,WAAA,EACvD;AAAA,SAAA,EAEJ,CAAA;AAAA,wBAGF,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,QAAA,EAAU,CAAA;AAAA,YACV,IAAA,EAAK,QAAA;AAAA,YACL,YAAA,EAAY,QAAA,GAAW,CAAA,EAAG,QAAQ,CAAA,KAAA,CAAA,GAAU,MAAA;AAAA,YAC5C,SAAA,EAAW,EAAA;AAAA,cACT,kFAAA;AAAA,cACA,gGAAA;AAAA;AAAA,cAEA,aAAa,MAAA,GAAS,MAAA;AAAA,cACtB,UAAA,CAAW;AAAA,aACb;AAAA,YAEA,QAAA,kBAAA,GAAA,CAAC,UAAK,SAAA,EAAU,wBAAA,EACb,gBAAM,GAAA,CAAI,CAAC,MAAM,CAAA,qBAChB,IAAA;AAAA,cAAC,MAAA;AAAA,cAAA;AAAA,gBAEC,aAAW,IAAA,CAAK,IAAA;AAAA,gBAChB,SAAA,EAAW,EAAA;AAAA,kBACT,4BAAA;AAAA,kBACA,OAAO,OAAA,GAAU,OAAA;AAAA,kBACjB,IAAA,CAAK,SAAS,aAAA,IAAiB,cAAA;AAAA,kBAC/B,IAAA,CAAK,SAAS,OAAA,IAAW,oBAAA;AAAA,kBACzB,IAAA,CAAK,SAAS,SAAA,IAAa;AAAA,iBAC7B;AAAA,gBAEA,QAAA,EAAA;AAAA,kCAAA,GAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,aAAA,EAAW,IAAA;AAAA,sBACX,SAAA,EAAW,EAAA;AAAA,wBACT,qCAAA;AAAA,wBACA,KAAK,IAAA,KAAS,OAAA,GAAU,yBAAyB,IAAA,CAAK,IAAA,KAAS,YAAY,oBAAA,GAAuB;AAAA,uBACpG;AAAA,sBAEC,QAAA,EAAA,IAAA,CAAK;AAAA;AAAA,mBACR;AAAA,kBACC,IAAA,oBACC,IAAA;AAAA,oBAAC,MAAA;AAAA,oBAAA;AAAA,sBACC,SAAA,EAAW,EAAA;AAAA,wBACT,sCAAA;AAAA,wBACA,KAAK,IAAA,KAAS,OAAA,GAAU,yBAAyB,IAAA,CAAK,IAAA,KAAS,YAAY,oBAAA,GAAuB;AAAA,uBACpG;AAAA,sBAEC,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAK,SAAS,OAAA,GAAU,GAAA,GAAM,IAAA,CAAK,IAAA,KAAS,YAAY,QAAA,GAAM,GAAA;AAAA,wBAE9D,KAAK,IAAA,KAAS,OAAA,wBAAY,MAAA,EAAA,EAAK,SAAA,EAAU,WAAU,QAAA,EAAA,QAAA,EAAM,CAAA;AAAA,wBACzD,KAAK,IAAA,KAAS,SAAA,wBAAc,MAAA,EAAA,EAAK,SAAA,EAAU,WAAU,QAAA,EAAA,UAAA,EAAQ;AAAA;AAAA;AAAA,mBAChE;AAAA,kCAEF,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,gBAAA,EACb,eAAK,IAAA,KAAS,EAAA,GACX,QAAA,GACA,SAAA,GACE,SAAS,IAAA,CAAK,IAAI,CAAA,CAAE,GAAA,CAAI,CAAC,CAAA,EAAG,CAAA,qBAC1B,GAAA,CAAC,MAAA,EAAA,EAAa,SAAA,EAAW,CAAA,CAAE,IAAA,KAAS,OAAA,GAAU,SAAY,UAAA,CAAW,CAAA,CAAE,IAAI,CAAA,EACxE,YAAE,IAAA,EAAA,EADM,CAEX,CACD,CAAA,GACD,KAAK,IAAA,EACb;AAAA;AAAA,eAAA;AAAA,cA1CK;AAAA,aA4CR,CAAA,EACH;AAAA;AAAA;AACF;AAAA;AAAA,GACF;AAEJ","file":"chunk-A5XEM3GF.js","sourcesContent":["'use client'\n\nimport * as React from 'react'\nimport { Check, Copy } from 'iconoir-react'\nimport { cn } from '../lib/utils'\nimport { Button } from './button'\n\n/**\n * CodeBlock, 1:1 with the uiKit `CodeBlock` set (3179:20414) and its `CodeLine` rows\n * (3124:20131): a card-surface block, 1px border-default, radius-2xl, 12px bottom padding.\n * The header holds the file icon, the filename (medium 13/18), diff stats in a diff, and a\n * tertiary xs Copy button that reads \"Copied\" with a check for 1.5 s. Lines are Geist Mono\n * 13/19.5, 24 high, 16px side padding, a 20px right-aligned number column 16px from the\n * code (8px, plus an 8px sign column, in a diff).\n *\n * Line types: highlighted (code/line-highlight fill), added (status green bg, green number\n * and +), removed (status red bg, red number and −).\n *\n * `code` is plain text. In `view=\"diff\"` each line starts with \"+\", \"-\" or a space, like a\n * unified diff. Highlighting is a small JS/TS tokenizer: keyword, string, function, parameter\n * and variable, in the `code/*` colours.\n *\n * The `code/*` variables exist only in Figma so far, not in theme.css, so each colour is\n * `var(--code-…, <Figma light value>)` with the Figma dark value under `dark:`. Once the\n * theme defines them, the variables take over.\n */\n\ntype LineKind = 'default' | 'highlighted' | 'added' | 'removed' | 'context'\ntype TokenKind = 'plain' | 'keyword' | 'string' | 'function' | 'parameter' | 'variable' | 'comment'\n\nconst tokenClass: Record<TokenKind, string> = {\n  plain: 'text-[var(--code-plain,#18181b)] dark:text-[var(--code-plain,#fafafa)]',\n  keyword: 'text-[var(--code-keyword,#dc2626)] dark:text-[var(--code-keyword,#f87171)]',\n  string: 'text-[var(--code-string,#0369a1)] dark:text-[var(--code-string,#7dd3fc)]',\n  function: 'text-[var(--code-function,#8b5cf6)] dark:text-[var(--code-function,#a78bfa)]',\n  parameter: 'text-[var(--code-parameter,#b45309)] dark:text-[var(--code-parameter,#fcd34d)]',\n  variable: 'text-[var(--code-variable,#0284c7)] dark:text-[var(--code-variable,#38bdf8)]',\n  // No comment colour in Figma: comments take the line-number grey.\n  comment: 'text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]',\n}\n\nconst lineNumberClass = 'text-[var(--code-line-number,#a1a1aa)] dark:text-[var(--code-line-number,#71717a)]'\nconst highlightClass = 'bg-[var(--code-line-highlight,rgba(0,0,0,0.05))] dark:bg-[var(--code-line-highlight,rgba(255,255,255,0.06))]'\n\nconst KEYWORDS = new Set([\n  'import', 'from', 'export', 'default', 'async', 'await', 'function', 'return', 'const', 'let', 'var',\n  'if', 'else', 'for', 'while', 'do', 'switch', 'case', 'break', 'continue', 'new', 'class', 'extends',\n  'try', 'catch', 'finally', 'throw', 'typeof', 'instanceof', 'in', 'of', 'type', 'interface', 'as',\n  'true', 'false', 'null', 'undefined', 'this', 'yield', 'void', 'delete', 'static', 'public', 'private',\n])\n\ntype Token = { text: string; kind: TokenKind }\n\n/** A deliberately small tokenizer for JS/TS-like code, one line at a time. */\nfunction tokenize(line: string): Token[] {\n  const out: Token[] = []\n  const re = /(\\/\\/.*$)|(\"(?:[^\"\\\\]|\\\\.)*\"?|'(?:[^'\\\\]|\\\\.)*'?|`(?:[^`\\\\]|\\\\.)*`?)|([A-Za-z_$][\\w$]*)|(=>|===|!==|==|=)|(\\s+)|(.)/g\n  let declaring = false // after const / let / var, until \"=\"\n  let params = false // inside a function's parameter list\n  let depth = 0\n  let afterFunction = false\n  let m: RegExpExecArray | null\n  while ((m = re.exec(line))) {\n    const [text, comment, str, ident, op, space] = m\n    if (comment) out.push({ text, kind: 'comment' })\n    else if (str) out.push({ text, kind: 'string' })\n    else if (space) out.push({ text, kind: 'plain' })\n    else if (op) {\n      if (op === '=') declaring = false\n      out.push({ text, kind: 'keyword' })\n    } else if (ident) {\n      const rest = line.slice(re.lastIndex)\n      if (KEYWORDS.has(ident)) {\n        if (ident === 'const' || ident === 'let' || ident === 'var') declaring = true\n        if (ident === 'function') afterFunction = true\n        out.push({ text, kind: 'keyword' })\n      } else if (params && /^\\s*[:,)=?]/.test(rest)) out.push({ text, kind: 'parameter' })\n      else if (/^\\s*\\(/.test(rest) || /^[A-Z]/.test(ident)) {\n        // Calls and PascalCase names (types, components) take the function colour, as in Figma.\n        if (afterFunction) params = true\n        afterFunction = false\n        out.push({ text, kind: 'function' })\n      } else if (declaring) out.push({ text, kind: 'variable' })\n      else out.push({ text, kind: 'plain' })\n    } else {\n      if (params && text === '(') depth++\n      if (params && text === ')' && --depth <= 0) params = false\n      out.push({ text, kind: 'plain' })\n    }\n  }\n  // Merge neighbours of the same kind so the DOM stays small.\n  return out.reduce<Token[]>((acc, t) => {\n    const last = acc[acc.length - 1]\n    if (last && last.kind === t.kind) last.text += t.text\n    else acc.push({ ...t })\n    return acc\n  }, [])\n}\n\ntype Line = { kind: LineKind; number: number; text: string }\n\nfunction parse(code: string, view: 'code' | 'diff', highlightLines: number[]): Line[] {\n  const raw = code.replace(/\\n$/, '').split('\\n')\n  if (view === 'code') {\n    return raw.map((text, i) => ({\n      text,\n      number: i + 1,\n      kind: highlightLines.includes(i + 1) ? 'highlighted' : 'default',\n    }))\n  }\n  // Diff: a removed line shows the number the next line will take; added and context count up.\n  let n = 1\n  return raw.map((line) => {\n    const sign = line[0]\n    const text = line.slice(1)\n    if (sign === '-') return { text, number: n, kind: 'removed' as const }\n    if (sign === '+') return { text, number: n++, kind: 'added' as const }\n    return { text: sign === ' ' ? text : line, number: n++, kind: 'context' as const }\n  })\n}\n\n/** The file icon from Figma (fileCode, 16 at 1.25). */\nfunction FileCodeIcon() {\n  return (\n    <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden className=\"shrink-0 text-text-muted\">\n      <path\n        d=\"M13.333 5.333L9.333 1.333H4C3.264 1.333 2.667 1.93 2.667 2.667V13.333C2.667 14.07 3.264 14.667 4 14.667H12C12.736 14.667 13.333 14.07 13.333 13.333V5.333ZM9.333 1.333V5.333H13.333M6.667 8.333L5.333 9.667L6.667 11M9.333 8.333L10.667 9.667L9.333 11\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.25\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  )\n}\n\nexport interface CodeBlockProps extends Omit<React.ComponentProps<'div'>, 'children'> {\n  code: string\n  filename?: string\n  view?: 'code' | 'diff'\n  showHeader?: boolean\n  showActions?: boolean\n  /** 1-based line numbers to mark (code view). */\n  highlightLines?: number[]\n  /** Turn syntax colours off for plain output such as logs. */\n  highlight?: boolean\n}\n\nexport function CodeBlock({\n  code,\n  filename,\n  view = 'code',\n  showHeader = true,\n  showActions = true,\n  highlightLines = [],\n  highlight = true,\n  className,\n  ...props\n}: CodeBlockProps) {\n  const lines = React.useMemo(() => parse(code, view, highlightLines), [code, view, highlightLines])\n  const [copied, setCopied] = React.useState(false)\n  const timer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n  React.useEffect(() => () => clearTimeout(timer.current), [])\n\n  const added = lines.filter((l) => l.kind === 'added').length\n  const removed = lines.filter((l) => l.kind === 'removed').length\n\n  const copy = async () => {\n    // A diff copies the new version of the file.\n    const text = lines.filter((l) => l.kind !== 'removed').map((l) => l.text).join('\\n')\n    try {\n      await navigator.clipboard.writeText(text)\n      setCopied(true)\n      clearTimeout(timer.current)\n      timer.current = setTimeout(() => setCopied(false), 1500)\n    } catch {\n      setCopied(false)\n    }\n  }\n\n  const diff = view === 'diff'\n\n  return (\n    <div\n      data-slot=\"code-block\"\n      data-view={view}\n      className={cn(\n        'flex flex-col overflow-hidden rounded-2xl border border-border-default bg-bg-card pb-3',\n        className,\n      )}\n      {...props}\n    >\n      {showHeader && (\n        <div className=\"flex items-center gap-2 pt-2 pr-2 pb-1 pl-4\">\n          <FileCodeIcon />\n          <span className=\"min-w-0 flex-1 truncate text-sm leading-[18px] font-medium text-text-default\">{filename}</span>\n          {diff && (\n            <span className=\"flex shrink-0 items-center gap-1.5 font-mono text-sm leading-(--text-sm--line-height) tracking-normal\">\n              <span className=\"text-status-green-fg\">+{added}</span>\n              <span className=\"text-status-red-fg\">−{removed}</span>\n            </span>\n          )}\n          {showActions && (\n            <Button variant=\"tertiary\" size=\"xs\" onClick={copy} className=\"text-text-default\">\n              {copied ? <Check /> : <Copy />}\n              <span aria-live=\"polite\">{copied ? 'Copied' : 'Copy'}</span>\n            </Button>\n          )}\n        </div>\n      )}\n      {/* Long lines scroll sideways, so the code is a focusable region keyboard users can scroll. */}\n      <pre\n        tabIndex={0}\n        role=\"region\"\n        aria-label={filename ? `${filename} code` : 'Code'}\n        className={cn(\n          'outline-none focus-visible:[box-shadow:inset_0_0_0_2px_var(--action-focus-ring)]',\n          'overflow-x-auto font-mono text-sm leading-(--text-sm--line-height) font-normal tracking-normal',\n          // Without the header the code sits in the middle: 12px above, as below.\n          showHeader ? 'pt-1' : 'pt-3',\n          tokenClass.plain,\n        )}\n      >\n        <code className=\"block w-max min-w-full\">\n          {lines.map((line, i) => (\n            <span\n              key={i}\n              data-line={line.kind}\n              className={cn(\n                'flex h-6 items-center px-4',\n                diff ? 'gap-2' : 'gap-4',\n                line.kind === 'highlighted' && highlightClass,\n                line.kind === 'added' && 'bg-status-green-bg',\n                line.kind === 'removed' && 'bg-status-red-bg',\n              )}\n            >\n              <span\n                aria-hidden\n                className={cn(\n                  'w-5 shrink-0 text-right select-none',\n                  line.kind === 'added' ? 'text-status-green-fg' : line.kind === 'removed' ? 'text-status-red-fg' : lineNumberClass,\n                )}\n              >\n                {line.number}\n              </span>\n              {diff && (\n                <span\n                  className={cn(\n                    'w-2 shrink-0 text-center select-none',\n                    line.kind === 'added' ? 'text-status-green-fg' : line.kind === 'removed' ? 'text-status-red-fg' : lineNumberClass,\n                  )}\n                >\n                  {line.kind === 'added' ? '+' : line.kind === 'removed' ? '−' : ' '}\n                  {/* Screen readers hear the change, not the glyph. */}\n                  {line.kind === 'added' && <span className=\"sr-only\"> added</span>}\n                  {line.kind === 'removed' && <span className=\"sr-only\"> removed</span>}\n                </span>\n              )}\n              <span className=\"whitespace-pre\">\n                {line.text === ''\n                  ? '​'\n                  : highlight\n                    ? tokenize(line.text).map((t, j) => (\n                        <span key={j} className={t.kind === 'plain' ? undefined : tokenClass[t.kind]}>\n                          {t.text}\n                        </span>\n                      ))\n                    : line.text}\n              </span>\n            </span>\n          ))}\n        </code>\n      </pre>\n    </div>\n  )\n}\n"]}