@cloudflare/kumo 1.5.1 → 1.6.0

package/dist/{combobox-C9koouxM.js → combobox-BIC-YZ2L.js}

@@ -1,16 +1,16 @@
 "use client";
-import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { CheckIcon as k, XIcon as p, CaretDownIcon as d } from "@phosphor-icons/react";
 import { Fragment as T } from "react";
-import { i as b } from "./input-GZAWBXYX.js";
+import { i as b } from "./input-CCR8NGG7.js";
 import { c as l } from "./cn-Bhsu1vx2.js";
-import { F as R } from "./field-Dt-XuSaQ.js";
-import { P as V, Q as G, U as L, V as P, W as j, X as z, Y as u, Z as F, _ as W, $ as E, a0 as M, a1 as X, a2 as x, a3 as _, a4 as h, a5 as g, a6 as D, a7 as O, a8 as Q } from "./vendor-base-ui-CQ6wEonS.js";
+import { F as R } from "./field-DCq04TgZ.js";
+import { a3 as j, a4 as G, a5 as L, a6 as V, a7 as F, a8 as P, a9 as u, aa as E, ab as M, ac as W, ad as z, ae as D, af as x, ag as O, ah as h, ai as g, aj as X, ak as _, al as q } from "./vendor-base-ui-9w7J6BvW.js";
 function f({
   label: o,
   required: a,
   labelTooltip: s,
-  description: n,
+  description: i,
   error: t,
   children: r,
   ...m
@@ -22,7 +22,7 @@ function f({
       label: o,
       required: a,
       labelTooltip: s,
-      description: n,
+      description: i,
       error: t ? typeof t == "string" ? { message: t, match: !0 } : t : void 0,
       children: c
     }
@@ -32,24 +32,24 @@ function C({
   children: o,
   className: a,
   align: s = "start",
-  sideOffset: n = 4,
+  sideOffset: i = 4,
   alignOffset: t,
   side: r
 }) {
-  return /* @__PURE__ */ e(D, { children: /* @__PURE__ */ e(
-    O,
+  return /* @__PURE__ */ e(X, { children: /* @__PURE__ */ e(
+    _,
     {
-      className: "z-50 outline-none",
+      className: "outline-none",
       align: s,
-      sideOffset: n,
+      sideOffset: i,
       alignOffset: t,
       side: r,
       children: /* @__PURE__ */ e(
-        Q,
+        q,
         {
           className: l(
             "max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) scroll-pt-2 scroll-pb-2 overflow-y-auto overscroll-contain p-1.5",
-            "z-50 overflow-hidden bg-kumo-control text-kumo-default",
+            "overflow-hidden bg-kumo-control text-kumo-default",
             // background
             "rounded-lg shadow-lg ring ring-kumo-line",
             // border part
@@ -65,7 +65,7 @@ function N({
   className: o,
   ...a
 }) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     h,
     {
       className: l(
@@ -81,7 +81,7 @@ function N({
   );
 }
 function y(o) {
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ n(
     "div",
     {
       className: l("relative inline-block w-full max-w-xs", o.className),
@@ -93,28 +93,28 @@ function y(o) {
             className: l(b(), "w-full pr-12")
           }
         ),
-        /* @__PURE__ */ e(_, { className: "absolute top-1/2 right-8 flex -translate-y-1/2 cursor-pointer bg-transparent p-0", children: /* @__PURE__ */ e(p, {}) }),
+        /* @__PURE__ */ e(O, { className: "absolute top-1/2 right-8 flex -translate-y-1/2 cursor-pointer bg-transparent p-0", children: /* @__PURE__ */ e(p, {}) }),
         /* @__PURE__ */ e(h, { className: "p-0", children: /* @__PURE__ */ e(g, { className: "absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer", children: /* @__PURE__ */ e(d, { className: "fill-kumo-ring" }) }) })
       ]
     }
   );
 }
 function v({ children: o, ...a }) {
-  return /* @__PURE__ */ i(
-    F,
+  return /* @__PURE__ */ n(
+    E,
     {
       ...a,
       className: "group grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay",
       children: [
         /* @__PURE__ */ e("div", { className: "col-start-1", children: o }),
-        /* @__PURE__ */ e(W, { className: "col-start-2 flex items-center", children: /* @__PURE__ */ e(k, {}) })
+        /* @__PURE__ */ e(M, { className: "col-start-2 flex items-center", children: /* @__PURE__ */ e(k, {}) })
       ]
     }
   );
 }
-function U(o) {
+function A(o) {
   return /* @__PURE__ */ e(
-    z,
+    P,
     {
       ...o,
       className: l(
@@ -124,7 +124,7 @@ function U(o) {
     }
   );
 }
-function Y(o) {
+function B(o) {
   return /* @__PURE__ */ e(
     u,
     {
@@ -133,27 +133,27 @@ function Y(o) {
     }
   );
 }
-function Z(o) {
+function H(o) {
   return /* @__PURE__ */ e(
-    j,
+    F,
     {
       ...o,
       className: "ml-[16px] px-4 py-1.5 text-sm font-medium"
     }
   );
 }
-function $(o) {
-  return /* @__PURE__ */ e(P, { ...o, className: "mt-2 first:mt-0" });
+function J(o) {
+  return /* @__PURE__ */ e(V, { ...o, className: "mt-2 first:mt-0" });
 }
 function w(o) {
-  return /* @__PURE__ */ i(
-    E,
+  return /* @__PURE__ */ n(
+    W,
     {
       ...o,
       className: "flex items-center gap-1 rounded-md bg-kumo-overlay px-2 py-1",
       children: [
         o.children,
-        /* @__PURE__ */ e(M, { className: "cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover", children: /* @__PURE__ */ e(p, { size: 12, weight: "bold" }) })
+        /* @__PURE__ */ e(z, { className: "cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover", children: /* @__PURE__ */ e(p, { size: 12, weight: "bold" }) })
       ]
     }
   );
@@ -162,12 +162,12 @@ function I({
   placeholder: o,
   renderItem: a,
   className: s,
-  inputSide: n = "right",
+  inputSide: i = "right",
   value: t
 }) {
   const r = t;
-  return /* @__PURE__ */ i(
-    X,
+  return /* @__PURE__ */ n(
+    D,
     {
       className: l(
         b(),
@@ -175,17 +175,17 @@ function I({
         s
       ),
       children: [
-        n === "top" && /* @__PURE__ */ e(
+        i === "top" && /* @__PURE__ */ e(
           u,
           {
             placeholder: o,
             className: "w-full px-2 py-1 outline-none"
           }
         ),
-        /* @__PURE__ */ i("div", { className: "flex flex-wrap gap-1", children: [
+        /* @__PURE__ */ n("div", { className: "flex flex-wrap gap-1", children: [
           r !== void 0 && r.length > 0 && r.map((m) => a(m)),
           /* @__PURE__ */ e(x, { children: (m) => r !== void 0 ? null : /* @__PURE__ */ e(T, { children: m.map((c) => a(c)) }) }),
-          n === "right" && /* @__PURE__ */ e(
+          i === "right" && /* @__PURE__ */ e(
             u,
             {
               placeholder: o,
@@ -214,15 +214,15 @@ const oo = Object.assign(f, {
   Chip: w,
   Item: v,
   // Styled BaseUI
-  Input: Y,
-  Empty: U,
-  GroupLabel: Z,
-  Group: $,
+  Input: B,
+  Empty: A,
+  GroupLabel: H,
+  Group: J,
   // BaseUI
   List: G,
-  Collection: V
+  Collection: j
 });
 export {
   oo as C
 };
-//# sourceMappingURL=combobox-C9koouxM.js.map
+//# sourceMappingURL=combobox-BIC-YZ2L.js.map

package/dist/combobox-BIC-YZ2L.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"combobox-BIC-YZ2L.js","sources":["../src/components/combobox/combobox.tsx"],"sourcesContent":["import { Combobox as ComboboxBase } from \"@base-ui/react/combobox\";\nimport { CaretDownIcon, CheckIcon, XIcon } from \"@phosphor-icons/react\";\nimport { Fragment, type PropsWithChildren, type ReactNode } from \"react\";\nimport { inputVariants } from \"../input/input\";\nimport { cn } from \"../../utils/cn\";\nimport { Field, type FieldErrorMatch } from \"../field/field\";\n\n/** Combobox input position variant definitions. */\nexport const KUMO_COMBOBOX_VARIANTS = {\n  inputSide: {\n    right: {\n      classes: \"\",\n      description: \"Input positioned inline to the right of chips\",\n    },\n    top: {\n      classes: \"\",\n      description: \"Input positioned above chips\",\n    },\n  },\n} as const;\n\nexport const KUMO_COMBOBOX_DEFAULT_VARIANTS = {\n  inputSide: \"right\",\n} as const;\n\n// Derived types from KUMO_COMBOBOX_VARIANTS\nexport type KumoComboboxInputSide =\n  keyof typeof KUMO_COMBOBOX_VARIANTS.inputSide;\n\nexport interface KumoComboboxVariantsProps {\n  /**\n   * Position of the text input relative to chips in multi-select mode.\n   * - `\"right\"` — Input inline to the right of chips\n   * - `\"top\"` — Input above chips\n   * @default \"right\"\n   */\n  inputSide?: KumoComboboxInputSide;\n}\n\nexport function comboboxVariants({\n  inputSide = KUMO_COMBOBOX_DEFAULT_VARIANTS.inputSide,\n}: KumoComboboxVariantsProps = {}) {\n  return cn(KUMO_COMBOBOX_VARIANTS.inputSide[inputSide].classes);\n}\n\n// Legacy type alias for backwards compatibility\nexport type ComboboxInputSide = KumoComboboxInputSide;\n\nexport type ComboboxRootProps<\n  Value = unknown,\n  Multiple extends boolean | undefined = false,\n> = ComboboxBase.Root.Props<Value, Multiple>;\n\n/**\n * Combobox component props (simplified for documentation; the actual Root is generic).\n *\n * Combobox provides an autocomplete/typeahead input with a filterable dropdown.\n * Supports single-select, multi-select with chips, grouped items, and Field wrapper integration.\n *\n * @example\n * ```tsx\n * // Single-select with search input\n * <Combobox value={value} onValueChange={setValue} items={options}>\n *   <Combobox.TriggerInput placeholder=\"Search…\" />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n *     </Combobox.List>\n *     <Combobox.Empty>No results</Combobox.Empty>\n *   </Combobox.Content>\n * </Combobox>\n *\n * // Multi-select with chips\n * <Combobox multiple items={options} label=\"Tags\">\n *   <Combobox.TriggerMultipleWithInput\n *     placeholder=\"Add tag…\"\n *     renderItem={(item) => <Combobox.Chip value={item}>{item.label}</Combobox.Chip>}\n *   />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item.label}</Combobox.Item>}\n *     </Combobox.List>\n *   </Combobox.Content>\n * </Combobox>\n * ```\n */\nexport interface ComboboxProps extends KumoComboboxVariantsProps {\n  /** Array of items to display in the dropdown */\n  items: unknown[];\n  /** Currently selected value(s) */\n  value?: unknown;\n  /** Callback when selection changes */\n  onValueChange?: (value: unknown) => void;\n  /** Enable multi-select mode */\n  multiple?: boolean;\n  /** Combobox content (trigger, content, items) */\n  children: ReactNode;\n  /** Additional CSS classes */\n  className?: string;\n  /** Label content for the combobox (enables Field wrapper) - can be a string or any React node */\n  label?: ReactNode;\n  /** Whether the combobox is required */\n  required?: boolean;\n  /** Tooltip content to display next to the label via an info icon */\n  labelTooltip?: ReactNode;\n  /** Helper text displayed below the combobox */\n  description?: ReactNode;\n  /** Error message or validation error object */\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}\n\nfunction Root<Value, Multiple extends boolean | undefined = false>({\n  label,\n  required,\n  labelTooltip,\n  description,\n  error,\n  children,\n  ...props\n}: ComboboxBase.Root.Props<Value, Multiple> & {\n  label?: ReactNode;\n  required?: boolean;\n  labelTooltip?: ReactNode;\n  description?: ReactNode;\n  error?: string | { message: ReactNode; match: FieldErrorMatch };\n}) {\n  const comboboxControl = (\n    <ComboboxBase.Root {...props}>{children}</ComboboxBase.Root>\n  );\n\n  // Render with Field wrapper if label, description, or error are provided\n  if (label) {\n    return (\n      <Field\n        label={label}\n        required={required}\n        labelTooltip={labelTooltip}\n        description={description}\n        error={\n          error\n            ? typeof error === \"string\"\n              ? { message: error, match: true }\n              : error\n            : undefined\n        }\n      >\n        {comboboxControl}\n      </Field>\n    );\n  }\n\n  // Render bare combobox without Field wrapper\n  return comboboxControl;\n}\n\nfunction Content({\n  children,\n  className,\n  align = \"start\",\n  sideOffset = 4,\n  alignOffset,\n  side,\n}: PropsWithChildren<{\n  className?: string;\n  align?: ComboboxBase.Positioner.Props[\"align\"];\n  alignOffset?: ComboboxBase.Positioner.Props[\"alignOffset\"];\n  side?: ComboboxBase.Positioner.Props[\"side\"];\n  sideOffset?: ComboboxBase.Positioner.Props[\"sideOffset\"];\n}>) {\n  return (\n    <ComboboxBase.Portal>\n      <ComboboxBase.Positioner\n        className=\"outline-none\"\n        align={align}\n        sideOffset={sideOffset}\n        alignOffset={alignOffset}\n        side={side}\n      >\n        <ComboboxBase.Popup\n          className={cn(\n            \"max-h-[min(var(--available-height),24rem)] max-w-(--available-width) min-w-(--anchor-width) scroll-pt-2 scroll-pb-2 overflow-y-auto overscroll-contain p-1.5\",\n            \"overflow-hidden bg-kumo-control text-kumo-default\", // background\n            \"rounded-lg shadow-lg ring ring-kumo-line\", // border part\n            className,\n          )}\n        >\n          {children}\n        </ComboboxBase.Popup>\n      </ComboboxBase.Positioner>\n    </ComboboxBase.Portal>\n  );\n}\n\nfunction TriggerValue({\n  className,\n  ...props\n}: ComboboxBase.Value.Props & { className?: string }) {\n  return (\n    <ComboboxBase.Trigger\n      className={cn(\n        inputVariants(),\n        \"relative flex items-center pr-8\",\n        className,\n      )}\n    >\n      <ComboboxBase.Value>{props.children}</ComboboxBase.Value>\n      <ComboboxBase.Icon className=\"absolute top-1/2 right-2 -translate-y-1/2\">\n        <CaretDownIcon className=\"fill-kumo-ring\" />\n      </ComboboxBase.Icon>\n    </ComboboxBase.Trigger>\n  );\n}\n\nfunction TriggerInput(props: ComboboxBase.Input.Props) {\n  return (\n    <div\n      className={cn(\"relative inline-block w-full max-w-xs\", props.className)}\n    >\n      <ComboboxBase.Input\n        {...props}\n        className={cn(inputVariants(), \"w-full pr-12\")}\n      />\n\n      <ComboboxBase.Clear className=\"absolute top-1/2 right-8 flex -translate-y-1/2 cursor-pointer bg-transparent p-0\">\n        <XIcon />\n      </ComboboxBase.Clear>\n\n      <ComboboxBase.Trigger className=\"p-0\">\n        <ComboboxBase.Icon className=\"absolute top-1/2 right-2 flex -translate-y-1/2 cursor-pointer\">\n          <CaretDownIcon className=\"fill-kumo-ring\" />\n        </ComboboxBase.Icon>\n      </ComboboxBase.Trigger>\n    </div>\n  );\n}\n\nfunction Item({ children, ...props }: ComboboxBase.Item.Props) {\n  return (\n    <ComboboxBase.Item\n      {...props}\n      className=\"group grid cursor-pointer grid-cols-[1fr_16px] gap-2 rounded px-2 py-1.5 text-base data-highlighted:bg-kumo-overlay\"\n    >\n      <div className=\"col-start-1\">{children}</div>\n      <ComboboxBase.ItemIndicator className=\"col-start-2 flex items-center\">\n        <CheckIcon />\n      </ComboboxBase.ItemIndicator>\n    </ComboboxBase.Item>\n  );\n}\n\nfunction Empty(props: ComboboxBase.Empty.Props) {\n  return (\n    <ComboboxBase.Empty\n      {...props}\n      className={cn(\n        \"px-4 py-2 text-[0.925rem] leading-4 text-kumo-subtle empty:m-0 empty:p-0\",\n      )}\n      children={props.children ?? \"No labels found.\"}\n    />\n  );\n}\n\nfunction Input(props: ComboboxBase.Input.Props) {\n  return (\n    <ComboboxBase.Input\n      {...props}\n      className={cn(inputVariants(), \"w-full first:mb-2\", props.className)}\n    />\n  );\n}\n\nfunction GroupLabel(props: ComboboxBase.GroupLabel.Props) {\n  return (\n    <ComboboxBase.GroupLabel\n      {...props}\n      className=\"ml-[16px] px-4 py-1.5 text-sm font-medium\"\n    />\n  );\n}\n\nfunction Group(props: ComboboxBase.Group.Props) {\n  return <ComboboxBase.Group {...props} className=\"mt-2 first:mt-0\" />;\n}\n\nfunction Chip(props: ComboboxBase.Chip.Props) {\n  return (\n    <ComboboxBase.Chip\n      {...props}\n      className=\"flex items-center gap-1 rounded-md bg-kumo-overlay px-2 py-1\"\n    >\n      {props.children}\n      <ComboboxBase.ChipRemove className=\"cursor-pointer rounded-md p-1 hover:bg-kumo-fill-hover\">\n        <XIcon size={12} weight=\"bold\" />\n      </ComboboxBase.ChipRemove>\n    </ComboboxBase.Chip>\n  );\n}\n\nfunction TriggerMultipleWithInput<ValueType>({\n  placeholder,\n  renderItem,\n  className,\n  inputSide = \"right\",\n  value: controlledValue,\n}: {\n  placeholder?: string;\n  renderItem: (value: ValueType) => React.ReactNode;\n  className?: string;\n  inputSide?: \"right\" | \"top\";\n  /** Optional controlled value for rendering chips (use when pre-selecting values) */\n  value?: ValueType[];\n}) {\n  // Determine which value to use for rendering chips\n  const chipsToRender = controlledValue;\n\n  return (\n    <ComboboxBase.Chips\n      className={cn(\n        inputVariants(),\n        cn(\"flex flex-col\", \"gap-1 p-1\", \"min-h-9\", \"h-auto\"),\n        className,\n      )}\n    >\n      {inputSide === \"top\" && (\n        <ComboboxBase.Input\n          placeholder={placeholder}\n          className=\"w-full px-2 py-1 outline-none\"\n        />\n      )}\n      {/* Chips container */}\n      <div className=\"flex flex-wrap gap-1\">\n        {/* Render chips from controlled value if provided */}\n        {chipsToRender !== undefined &&\n          chipsToRender.length > 0 &&\n          chipsToRender.map((item) => renderItem(item))}\n        {/* Also render from BaseUI's internal value for user selections */}\n        <ComboboxBase.Value>\n          {(internalValue: ValueType[]) => {\n            // Skip rendering if using controlled value (to avoid duplicates)\n            if (chipsToRender !== undefined) return null;\n            return (\n              <Fragment>\n                {internalValue.map((item) => renderItem(item))}\n              </Fragment>\n            );\n          }}\n        </ComboboxBase.Value>\n        {inputSide === \"right\" && (\n          <ComboboxBase.Input\n            placeholder={placeholder}\n            className=\"min-w-[100px] flex-1 px-2 py-1 outline-none\"\n          />\n        )}\n      </div>\n    </ComboboxBase.Chips>\n  );\n}\n\nRoot.displayName = \"Combobox.Root\";\nContent.displayName = \"Combobox.Content\";\nTriggerValue.displayName = \"Combobox.TriggerValue\";\nTriggerInput.displayName = \"Combobox.TriggerInput\";\nItem.displayName = \"Combobox.Item\";\nChip.displayName = \"Combobox.Chip\";\nTriggerMultipleWithInput.displayName = \"Combobox.TriggerMultipleWithInput\";\n\n/**\n * Combobox — autocomplete input with filterable dropdown list.\n *\n * Compound component: `Combobox` (Root), `.TriggerInput`, `.TriggerValue`,\n * `.TriggerMultipleWithInput`, `.Content`, `.Item`, `.Chip`, `.Input`,\n * `.Empty`, `.GroupLabel`, `.Group`, `.List`, `.Collection`.\n *\n * @example\n * ```tsx\n * <Combobox items={fruits} label=\"Fruit\">\n *   <Combobox.TriggerInput placeholder=\"Pick a fruit…\" />\n *   <Combobox.Content>\n *     <Combobox.List>\n *       {(item) => <Combobox.Item value={item}>{item}</Combobox.Item>}\n *     </Combobox.List>\n *   </Combobox.Content>\n * </Combobox>\n * ```\n *\n * @see https://base-ui.com/react/components/combobox\n */\nexport const Combobox = Object.assign(Root, {\n  // Helper components\n  Content,\n  TriggerValue,\n  TriggerInput,\n  TriggerMultipleWithInput,\n\n  // Slightly modified BaseUI\n  Chip,\n  Item,\n\n  // Styled BaseUI\n  Input,\n  Empty,\n  GroupLabel,\n  Group,\n\n  // BaseUI\n  List: ComboboxBase.List,\n  Collection: ComboboxBase.Collection,\n});\n"],"names":["Root","label","required","labelTooltip","description","error","children","props","comboboxControl","jsx","ComboboxBase.Root","Field","Content","className","align","sideOffset","alignOffset","side","ComboboxBase.Portal","ComboboxBase.Positioner","ComboboxBase.Popup","cn","TriggerValue","jsxs","ComboboxBase.Trigger","inputVariants","ComboboxBase.Value","ComboboxBase.Icon","CaretDownIcon","TriggerInput","ComboboxBase.Input","ComboboxBase.Clear","XIcon","Item","ComboboxBase.Item","ComboboxBase.ItemIndicator","CheckIcon","Empty","ComboboxBase.Empty","Input","GroupLabel","ComboboxBase.GroupLabel","Group","ComboboxBase.Group","Chip","ComboboxBase.Chip","ComboboxBase.ChipRemove","TriggerMultipleWithInput","placeholder","renderItem","inputSide","controlledValue","chipsToRender","ComboboxBase.Chips","item","internalValue","Fragment","Combobox","ComboboxBase.List","ComboboxBase.Collection"],"mappings":"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"}

package/dist/command-line/cli.js

@@ -382,40 +382,98 @@ import { dirname as dirname4, join as join5, resolve, relative, isAbsolute } fro
 import { fileURLToPath as fileURLToPath4 } from "node:url";
 
 // src/command-line/utils/transformer.ts
-function transformImports(content) {
-  const importRegex = /import\s+(?:type\s+)?{([^}]+)}\s+from\s+["']([^"']+)["'];?/g;
-  return content.replace(importRegex, (match, imports, path) => {
-    if (!path.startsWith("../")) {
-      return match;
-    }
-    const isComponentOrUtil = path.includes("/components/") || path.includes("/utils/");
-    if (!isComponentOrUtil) {
-      return match;
+function parseImports(content) {
+  const importRegex = /import\s+(type\s+)?{([^}]+)}\s+from\s+["']([^"']+)["'];?/g;
+  const imports = [];
+  let match;
+  while ((match = importRegex.exec(content)) !== null) {
+    imports.push({
+      fullMatch: match[0],
+      imports: match[2],
+      path: match[3],
+      startIndex: match.index,
+      endIndex: match.index + match[0].length,
+      isTypeOnlyImport: match[1] !== void 0
+    });
+  }
+  return imports;
+}
+function shouldTransformToKumo(path) {
+  if (!path.startsWith("../")) {
+    return false;
+  }
+  return path.includes("/components/") || path.includes("/utils/");
+}
+function parseImportItems(imports, isTypeOnlyImport) {
+  const items = imports.split(",").map((item) => item.trim()).filter((item) => item.length > 0);
+  const valueImports = [];
+  const typeImports = [];
+  for (const item of items) {
+    if (isTypeOnlyImport || item.startsWith("type ")) {
+      const typeName = item.startsWith("type ") ? item.slice(5).trim() : item;
+      typeImports.push(typeName);
+    } else {
+      valueImports.push(item);
     }
-    const isTypeOnlyImport = match.trim().startsWith("import type ");
-    const importItems = imports.split(",").map((item) => item.trim()).filter((item) => item.length > 0);
-    const typeImports = [];
-    const valueImports = [];
-    for (const item of importItems) {
-      if (item.startsWith("type ")) {
-        typeImports.push(item.slice(5).trim());
-      } else {
-        valueImports.push(item);
-      }
+  }
+  return { valueImports, typeImports };
+}
+function buildConsolidatedImport(valueImports, typeImports) {
+  const parts = [];
+  for (const item of valueImports) {
+    parts.push(item);
+  }
+  for (const item of typeImports) {
+    parts.push(`type ${item}`);
+  }
+  return `import { ${parts.join(", ")} } from "@cloudflare/kumo";`;
+}
+function transformImports(content) {
+  const parsedImports = parseImports(content);
+  const kumoImports = [];
+  const nonKumoImports = [];
+  for (const imp of parsedImports) {
+    if (shouldTransformToKumo(imp.path)) {
+      kumoImports.push(imp);
+    } else {
+      nonKumoImports.push(imp);
     }
-    if (isTypeOnlyImport) {
-      return `import type { ${importItems.join(", ")} } from "@cloudflare/kumo";`;
-    } else if (typeImports.length > 0 && valueImports.length > 0) {
-      const valueImport = `import { ${valueImports.join(", ")} } from "@cloudflare/kumo";`;
-      const typeImport = `import type { ${typeImports.join(", ")} } from "@cloudflare/kumo";`;
-      return `${valueImport}
-${typeImport}`;
-    } else if (typeImports.length > 0) {
-      return `import type { ${typeImports.join(", ")} } from "@cloudflare/kumo";`;
+  }
+  if (kumoImports.length === 0) {
+    return content;
+  }
+  const allValueImports = [];
+  const allTypeImports = [];
+  for (const imp of kumoImports) {
+    const { valueImports, typeImports } = parseImportItems(
+      imp.imports,
+      imp.isTypeOnlyImport
+    );
+    allValueImports.push(...valueImports);
+    allTypeImports.push(...typeImports);
+  }
+  const consolidatedImport = buildConsolidatedImport(
+    allValueImports,
+    allTypeImports
+  );
+  let result = content;
+  const sortedKumoImports = [...kumoImports].sort(
+    (a, b) => b.startIndex - a.startIndex
+  );
+  for (let i = 0; i < sortedKumoImports.length; i++) {
+    const imp = sortedKumoImports[i];
+    if (i === sortedKumoImports.length - 1) {
+      result = result.slice(0, imp.startIndex) + consolidatedImport + result.slice(imp.endIndex);
     } else {
-      return `import { ${valueImports.join(", ")} } from "@cloudflare/kumo";`;
+      let startIndex = imp.startIndex;
+      let endIndex = imp.endIndex;
+      if (startIndex > 0 && result[startIndex - 1] === "\n") {
+        startIndex--;
+      }
+      result = result.slice(0, startIndex) + result.slice(endIndex);
     }
-  });
+  }
+  return result;
 }
 
 // src/command-line/commands/add.ts

package/dist/command-line/commands/add.js

@@ -33,40 +33,98 @@ function readConfig(projectRoot = process.cwd()) {
 }
 
 // src/command-line/utils/transformer.ts
-function transformImports(content) {
-  const importRegex = /import\s+(?:type\s+)?{([^}]+)}\s+from\s+["']([^"']+)["'];?/g;
-  return content.replace(importRegex, (match, imports, path) => {
-    if (!path.startsWith("../")) {
-      return match;
-    }
-    const isComponentOrUtil = path.includes("/components/") || path.includes("/utils/");
-    if (!isComponentOrUtil) {
-      return match;
+function parseImports(content) {
+  const importRegex = /import\s+(type\s+)?{([^}]+)}\s+from\s+["']([^"']+)["'];?/g;
+  const imports = [];
+  let match;
+  while ((match = importRegex.exec(content)) !== null) {
+    imports.push({
+      fullMatch: match[0],
+      imports: match[2],
+      path: match[3],
+      startIndex: match.index,
+      endIndex: match.index + match[0].length,
+      isTypeOnlyImport: match[1] !== void 0
+    });
+  }
+  return imports;
+}
+function shouldTransformToKumo(path) {
+  if (!path.startsWith("../")) {
+    return false;
+  }
+  return path.includes("/components/") || path.includes("/utils/");
+}
+function parseImportItems(imports, isTypeOnlyImport) {
+  const items = imports.split(",").map((item) => item.trim()).filter((item) => item.length > 0);
+  const valueImports = [];
+  const typeImports = [];
+  for (const item of items) {
+    if (isTypeOnlyImport || item.startsWith("type ")) {
+      const typeName = item.startsWith("type ") ? item.slice(5).trim() : item;
+      typeImports.push(typeName);
+    } else {
+      valueImports.push(item);
     }
-    const isTypeOnlyImport = match.trim().startsWith("import type ");
-    const importItems = imports.split(",").map((item) => item.trim()).filter((item) => item.length > 0);
-    const typeImports = [];
-    const valueImports = [];
-    for (const item of importItems) {
-      if (item.startsWith("type ")) {
-        typeImports.push(item.slice(5).trim());
-      } else {
-        valueImports.push(item);
-      }
+  }
+  return { valueImports, typeImports };
+}
+function buildConsolidatedImport(valueImports, typeImports) {
+  const parts = [];
+  for (const item of valueImports) {
+    parts.push(item);
+  }
+  for (const item of typeImports) {
+    parts.push(`type ${item}`);
+  }
+  return `import { ${parts.join(", ")} } from "@cloudflare/kumo";`;
+}
+function transformImports(content) {
+  const parsedImports = parseImports(content);
+  const kumoImports = [];
+  const nonKumoImports = [];
+  for (const imp of parsedImports) {
+    if (shouldTransformToKumo(imp.path)) {
+      kumoImports.push(imp);
+    } else {
+      nonKumoImports.push(imp);
     }
-    if (isTypeOnlyImport) {
-      return `import type { ${importItems.join(", ")} } from "@cloudflare/kumo";`;
-    } else if (typeImports.length > 0 && valueImports.length > 0) {
-      const valueImport = `import { ${valueImports.join(", ")} } from "@cloudflare/kumo";`;
-      const typeImport = `import type { ${typeImports.join(", ")} } from "@cloudflare/kumo";`;
-      return `${valueImport}
-${typeImport}`;
-    } else if (typeImports.length > 0) {
-      return `import type { ${typeImports.join(", ")} } from "@cloudflare/kumo";`;
+  }
+  if (kumoImports.length === 0) {
+    return content;
+  }
+  const allValueImports = [];
+  const allTypeImports = [];
+  for (const imp of kumoImports) {
+    const { valueImports, typeImports } = parseImportItems(
+      imp.imports,
+      imp.isTypeOnlyImport
+    );
+    allValueImports.push(...valueImports);
+    allTypeImports.push(...typeImports);
+  }
+  const consolidatedImport = buildConsolidatedImport(
+    allValueImports,
+    allTypeImports
+  );
+  let result = content;
+  const sortedKumoImports = [...kumoImports].sort(
+    (a, b) => b.startIndex - a.startIndex
+  );
+  for (let i = 0; i < sortedKumoImports.length; i++) {
+    const imp = sortedKumoImports[i];
+    if (i === sortedKumoImports.length - 1) {
+      result = result.slice(0, imp.startIndex) + consolidatedImport + result.slice(imp.endIndex);
     } else {
-      return `import { ${valueImports.join(", ")} } from "@cloudflare/kumo";`;
+      let startIndex = imp.startIndex;
+      let endIndex = imp.endIndex;
+      if (startIndex > 0 && result[startIndex - 1] === "\n") {
+        startIndex--;
+      }
+      result = result.slice(0, startIndex) + result.slice(endIndex);
     }
-  });
+  }
+  return result;
 }
 
 // src/command-line/commands/add.ts