@archie/devtools 0.1.11 → 0.1.12

package/dist/chunk-ZTJ6RQQF.mjs

@@ -0,0 +1,2383 @@
+// node_modules/tsup/assets/esm_shims.js
+import path from "path";
+import { fileURLToPath } from "url";
+var getFilename = () => fileURLToPath(import.meta.url);
+var getDirname = () => path.dirname(getFilename());
+var __dirname = /* @__PURE__ */ getDirname();
+
+// node_modules/@8base-archie/editor-protocol/dist/ids.js
+import { z } from "zod";
+var VID_ATTR = "data-vid";
+var VID_PATTERN = /^[a-z0-9]{6,8}$/;
+var Vid = z.string().regex(VID_PATTERN);
+
+// node_modules/@8base-archie/editor-protocol/dist/node-meta.js
+import { z as z2 } from "zod";
+var LockReasonSchema = z2.enum([
+  "KIT_INTERNAL",
+  "DYNAMIC_ARRAY",
+  "DYNAMIC_CONDITIONAL",
+  "CHROME_STRUCTURAL",
+  "DATA_TABLE",
+  "EXPRESSION_CONTAINER"
+]);
+var DynamicTypeSchema = z2.enum(["STATIC", "ARRAY", "CONDITIONAL"]);
+var ContainerKindSchema = z2.enum(["plain", "expression", "none"]);
+var NodeMetaSchema = z2.object({
+  vid: Vid,
+  file: z2.string().min(1),
+  component: z2.string().min(1).optional(),
+  dynamicType: DynamicTypeSchema,
+  isKitOrigin: z2.boolean(),
+  isChrome: z2.boolean(),
+  containerKind: ContainerKindSchema,
+  lockReason: LockReasonSchema.optional(),
+  usageVid: Vid.optional(),
+  usageFile: z2.string().min(1).optional()
+}).strict();
+
+// node_modules/@8base-archie/editor-protocol/dist/ops.js
+import { z as z3 } from "zod";
+var literalValue = z3.union([z3.string(), z3.number(), z3.boolean(), z3.null()]);
+var opScopeSchema = z3.enum(["instance", "definition"]);
+var setTextHintSchema = z3.object({
+  rowId: z3.string().min(1).optional(),
+  rendered: z3.string().optional()
+}).strict();
+var setTextTargetSchema = z3.enum(["auto", "data", "source"]);
+var setTextOpSchema = z3.object({
+  kind: z3.literal("setText"),
+  vid: Vid,
+  text: z3.string(),
+  hint: setTextHintSchema.optional(),
+  scope: opScopeSchema.optional(),
+  target: setTextTargetSchema.optional()
+}).strict();
+var setClassNameOpSchema = z3.object({
+  kind: z3.literal("setClassName"),
+  vid: Vid,
+  add: z3.array(z3.string()),
+  remove: z3.array(z3.string()),
+  policy: z3.enum(["static", "cn"]),
+  scope: opScopeSchema.optional()
+}).strict();
+var setStyleOpSchema = z3.object({
+  kind: z3.literal("setStyle"),
+  vid: Vid,
+  decls: z3.record(z3.string(), z3.union([z3.string(), z3.null()])),
+  scope: opScopeSchema.optional(),
+  important: z3.boolean().optional()
+}).strict();
+var setAttributeOpSchema = z3.object({
+  kind: z3.literal("setAttribute"),
+  vid: Vid,
+  name: z3.string().min(1),
+  value: z3.union([z3.string(), z3.null()])
+}).strict();
+var setPropOpSchema = z3.object({
+  kind: z3.literal("setProp"),
+  vid: Vid,
+  name: z3.string().min(1),
+  literal: literalValue,
+  scope: opScopeSchema.optional()
+}).strict();
+var removeOpSchema = z3.object({
+  kind: z3.literal("remove"),
+  vid: Vid
+}).strict();
+var detachInstanceOpSchema = z3.object({
+  kind: z3.literal("detachInstance"),
+  vid: Vid
+}).strict();
+var setLocalConstOpSchema = z3.object({
+  kind: z3.literal("setLocalConst"),
+  file: z3.string().min(1),
+  name: z3.string().min(1),
+  literal: z3.string()
+}).strict();
+var screenRootTargetSchema = z3.object({ file: z3.string().min(1) }).strict();
+var EXACTLY_ONE_TARGET_MESSAGE = "exactly one of containerVid or screenRoot is required";
+function hasExactlyOneTarget(v) {
+  return v.containerVid != null !== (v.screenRoot != null);
+}
+var moveOpSchema = z3.object({
+  kind: z3.literal("move"),
+  targetVid: Vid,
+  containerVid: Vid.optional(),
+  screenRoot: screenRootTargetSchema.optional(),
+  index: z3.number().int().nonnegative()
+}).strict();
+var insertSourceSchema = z3.union([
+  z3.object({ paletteId: z3.string().min(1) }).strict(),
+  z3.object({ snippet: z3.string().min(1) }).strict()
+]);
+var insertOpSchema = z3.object({
+  kind: z3.literal("insert"),
+  containerVid: Vid.optional(),
+  screenRoot: screenRootTargetSchema.optional(),
+  index: z3.number().int().nonnegative(),
+  source: insertSourceSchema,
+  proposedVids: z3.array(Vid).optional()
+}).strict();
+var resizeOpSchema = z3.object({
+  kind: z3.literal("resize"),
+  vid: Vid,
+  width: z3.number().optional(),
+  height: z3.number().optional()
+}).strict();
+var shellConfigOpSchema = z3.object({
+  kind: z3.literal("shellConfig"),
+  patch: z3.record(z3.string(), z3.unknown())
+}).strict();
+var sliceCellOpSchema = z3.object({
+  kind: z3.literal("sliceCell"),
+  slug: z3.string().min(1),
+  entity: z3.string().min(1),
+  rowId: z3.string().min(1),
+  field: z3.string().min(1),
+  value: literalValue
+}).strict();
+var LUCIDE_ICON_NAME_RE = /^[A-Z][A-Za-z0-9]*$/;
+var MAX_SVG_ICON_LENGTH = 2e4;
+var SVG_SINGLE_ROOT_RE = /^<svg\b[^>]*(?:\/>|>[\s\S]*<\/svg>)\s*$/i;
+function isSingleSvgRoot(svg) {
+  if (!SVG_SINGLE_ROOT_RE.test(svg))
+    return false;
+  const openCount = (svg.match(/<svg\b/gi) ?? []).length;
+  const closeCount = (svg.match(/<\/svg>/gi) ?? []).length;
+  return openCount === 1 && closeCount <= 1;
+}
+var SVG_FORBIDDEN_CHAR_RE = /[&%]/;
+var SVG_FORBIDDEN_MARKUP_RE = /<!|<\?/;
+var SVG_FORBIDDEN_ATTR_RE = /\b(?:href|xlink:href|src|style)\s*=|\bon[a-zA-Z-]+\s*=/i;
+var SVG_FORBIDDEN_SCHEME_RE = /\b(?:data|javascript):|url\(/i;
+var SVG_FORBIDDEN_TAG_RE = /<\/?\s*(?:script|style|foreignobject|iframe|object|embed|use|image|a|animate\w*|set)\b/i;
+function isForbiddenSvg(svg) {
+  return SVG_FORBIDDEN_CHAR_RE.test(svg) || SVG_FORBIDDEN_MARKUP_RE.test(svg) || SVG_FORBIDDEN_ATTR_RE.test(svg) || SVG_FORBIDDEN_SCHEME_RE.test(svg) || SVG_FORBIDDEN_TAG_RE.test(svg);
+}
+var setIconValueSchema = z3.discriminatedUnion("kind", [
+  z3.object({
+    kind: z3.literal("lucide"),
+    name: z3.string().min(1).max(64).regex(LUCIDE_ICON_NAME_RE, "lucide icon name must be a PascalCase identifier")
+  }).strict(),
+  z3.object({
+    kind: z3.literal("svg"),
+    svg: z3.string().min(1).max(MAX_SVG_ICON_LENGTH).trim().refine((svg) => isSingleSvgRoot(svg), "svg must be a single <svg>\u2026</svg> (or self-closing <svg/>) root element").refine((svg) => !isForbiddenSvg(svg), "svg must not contain &, %, a comment/CDATA/DOCTYPE/processing instruction, an href/xlink:href/src/style attribute, an on* event handler, a data:/javascript: URL, a url(), or a script/style/foreignObject/iframe/object/embed/use/image/a/animate*/set element")
+  }).strict()
+]);
+var setIconOpSchema = z3.object({
+  kind: z3.literal("setIcon"),
+  vid: Vid,
+  icon: setIconValueSchema
+}).strict();
+var OpSchema = z3.discriminatedUnion("kind", [
+  setTextOpSchema,
+  setClassNameOpSchema,
+  setStyleOpSchema,
+  setAttributeOpSchema,
+  setPropOpSchema,
+  removeOpSchema,
+  setLocalConstOpSchema,
+  moveOpSchema,
+  insertOpSchema,
+  resizeOpSchema,
+  shellConfigOpSchema,
+  sliceCellOpSchema,
+  setIconOpSchema,
+  detachInstanceOpSchema
+]).superRefine((op, ctx) => {
+  if ((op.kind === "move" || op.kind === "insert") && !hasExactlyOneTarget(op)) {
+    ctx.addIssue({ code: z3.ZodIssueCode.custom, message: EXACTLY_ONE_TARGET_MESSAGE, path: ["containerVid"] });
+  }
+});
+var OpLogSchema = z3.array(OpSchema).min(1);
+
+// node_modules/@8base-archie/editor-protocol/dist/apply-ops.js
+import { z as z4 } from "zod";
+var RefusalCodeSchema = z4.enum([
+  "VID_NOT_FOUND",
+  "CONTAINER_NOT_PLAIN",
+  "KIT_INTERNAL",
+  "CHROME_STRUCTURAL",
+  "DYNAMIC_CHILD",
+  "STALE_BASE",
+  "GATE_REJECT",
+  "STYLE_UNMAPPABLE",
+  "DIALECT_UNSUPPORTED",
+  "COMPUTED_VALUE",
+  "PROP_BOUND",
+  "STATE_BOUND",
+  "ORIGIN_AMBIGUOUS",
+  "NOT_DETACHABLE"
+]);
+var TextTargetSchema = z4.discriminatedUnion("kind", [
+  z4.object({ kind: z4.literal("source") }).strict(),
+  z4.object({
+    kind: z4.literal("slice"),
+    entity: z4.string().min(1),
+    rowId: z4.string().min(1),
+    field: z4.string().min(1),
+    slugs: z4.array(z4.string().min(1)).min(1)
+  }).strict()
+]);
+var ApplyOpsFileRefSchema = z4.object({
+  path: z4.string().min(1),
+  baseSourceHash: z4.string().min(1)
+}).strict();
+var ApplyOpsRequestSchema = z4.object({
+  projectId: z4.string().min(1),
+  protocolVersion: z4.string().min(1),
+  dialect: z4.enum(["kit-d", "vite-tsx"]),
+  files: z4.array(ApplyOpsFileRefSchema).min(1),
+  baseRevisionId: z4.string().min(1),
+  ops: z4.array(OpSchema).min(1),
+  clientOpLogId: z4.string().min(1)
+}).strict();
+var ApplyOpsFileResultSchema = z4.object({
+  path: z4.string().min(1),
+  newSource: z4.string(),
+  sourceHash: z4.string().min(1)
+}).strict();
+var RefusedOpSchema = z4.object({
+  opIndex: z4.number().int().nonnegative(),
+  code: RefusalCodeSchema,
+  cause: z4.string(),
+  vid: Vid.optional()
+}).strict();
+var AppliedTargetSchema = z4.object({
+  opIndex: z4.number().int().nonnegative(),
+  target: TextTargetSchema
+}).strict();
+var PropagationFailureSchema = z4.object({
+  slug: z4.string().min(1),
+  code: RefusalCodeSchema,
+  cause: z4.string()
+}).strict();
+var DetachedComponentNodeSchema = z4.object({
+  vid: Vid,
+  templateVid: Vid.optional(),
+  slot: z4.string().min(1).optional()
+}).strict();
+var DetachedComponentSchema = z4.object({
+  vid: Vid,
+  component: z4.string().min(1),
+  nodes: z4.array(DetachedComponentNodeSchema)
+}).strict();
+var PropagationStatusSchema = z4.object({
+  jobId: z4.string().min(1),
+  status: z4.enum(["pending", "done", "failed"]),
+  slugs: z4.array(z4.string().min(1)),
+  failed: z4.array(PropagationFailureSchema).optional(),
+  revisionId: z4.string().min(1).optional()
+}).strict();
+var ApplyOpsPropagationSchema = z4.object({
+  status: z4.enum(["pending", "done", "failed"]),
+  jobId: z4.string().min(1),
+  slugs: z4.array(z4.string().min(1)),
+  failed: z4.array(PropagationFailureSchema).optional()
+}).strict();
+var ApplyOpsResponseSchema = z4.object({
+  revisionId: z4.string().min(1),
+  files: z4.array(ApplyOpsFileResultSchema),
+  vidMap: z4.record(z4.string(), z4.string()),
+  applied: z4.array(z4.number().int().nonnegative()),
+  refused: z4.array(RefusedOpSchema),
+  gateFindings: z4.array(z4.unknown()),
+  appliedTargets: z4.array(AppliedTargetSchema).optional(),
+  stylesheetChanged: z4.boolean().optional(),
+  propagation: ApplyOpsPropagationSchema.optional(),
+  detached: z4.array(DetachedComponentSchema).optional()
+}).strict();
+
+// node_modules/@8base-archie/editor-protocol/dist/capabilities.js
+import { z as z5 } from "zod";
+var CapabilitiesSchema = z5.object({
+  inspect: z5.boolean(),
+  dndMove: z5.boolean(),
+  dndResize: z5.boolean(),
+  vidIdentity: z5.boolean(),
+  nodeMeta: z5.boolean(),
+  hostControlledHistory: z5.boolean(),
+  refusals: z5.boolean(),
+  selectByVid: z5.boolean().optional()
+}).strict();
+
+// node_modules/@8base-archie/editor-protocol/dist/runtime-messages.js
+import { z as z6 } from "zod";
+var SourceSchema = z6.enum(["archie-devtools", "archie-app"]);
+var RectSchema = z6.object({
+  x: z6.number(),
+  y: z6.number(),
+  width: z6.number(),
+  height: z6.number()
+}).strict();
+var helloMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("HELLO"),
+  protocolVersion: z6.string().min(1),
+  devtoolsVersion: z6.string().min(1),
+  capabilities: CapabilitiesSchema
+}).strict();
+var elementSelectedMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("ELEMENT_SELECTED"),
+  vid: Vid,
+  nodeMeta: NodeMetaSchema,
+  rect: RectSchema.optional()
+}).strict();
+var dragStartMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("DRAG_START"),
+  targetVid: Vid,
+  droppable: z6.array(Vid)
+}).strict();
+var dropMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("DROP"),
+  targetVid: Vid,
+  containerVid: Vid,
+  screenRootFile: z6.string().min(1).optional(),
+  index: z6.number().int().nonnegative()
+}).strict();
+var refusedMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("REFUSED"),
+  code: z6.union([RefusalCodeSchema, LockReasonSchema]),
+  cause: z6.string(),
+  vid: Vid.optional()
+}).strict();
+var RuntimeMessageSchema = z6.discriminatedUnion("type", [
+  helloMessageSchema,
+  elementSelectedMessageSchema,
+  dragStartMessageSchema,
+  dropMessageSchema,
+  refusedMessageSchema
+]);
+var selectMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("SELECT"),
+  vid: Vid
+}).strict();
+var previewOpMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("PREVIEW_OP"),
+  op: OpSchema
+}).strict();
+var setModeMessageSchema = z6.object({
+  source: SourceSchema,
+  type: z6.literal("SET_MODE"),
+  mode: z6.enum(["inspect", "design", "off"])
+}).strict();
+var HostMessageSchema = z6.discriminatedUnion("type", [
+  selectMessageSchema,
+  previewOpMessageSchema,
+  setModeMessageSchema
+]);
+
+// node_modules/@8base-archie/editor-protocol/dist/style-capabilities.js
+function stripImportant(cls) {
+  if (cls.endsWith("!"))
+    return cls.slice(0, -1);
+  if (cls.startsWith("!"))
+    return cls.slice(1);
+  return cls;
+}
+var SPACING_PX_TO_UNIT = {
+  0: "0",
+  1: "px",
+  2: "0.5",
+  4: "1",
+  6: "1.5",
+  8: "2",
+  10: "2.5",
+  12: "3",
+  14: "3.5",
+  16: "4",
+  20: "5",
+  24: "6",
+  28: "7",
+  32: "8",
+  36: "9",
+  40: "10",
+  44: "11",
+  48: "12",
+  56: "14",
+  64: "16",
+  80: "20",
+  96: "24"
+};
+var FONT_SIZE_PX = {
+  12: "xs",
+  14: "sm",
+  16: "base",
+  18: "lg",
+  20: "xl",
+  24: "2xl",
+  30: "3xl",
+  36: "4xl",
+  48: "5xl"
+};
+var TEXT_SIZE_STEPS = /* @__PURE__ */ new Set(["xs", "sm", "base", "lg", "xl"]);
+function isTextSizeClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  if (!cls.startsWith("text-"))
+    return false;
+  const rest = cls.slice(5);
+  return TEXT_SIZE_STEPS.has(rest) || /^[0-9]+xl$/.test(rest) || /^\[[^\]]+px\]$/.test(rest);
+}
+var TEXT_ALIGN_STEPS = /* @__PURE__ */ new Set([
+  "left",
+  "center",
+  "right",
+  "justify",
+  "start",
+  "end"
+]);
+function isTextAlignClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  return cls.startsWith("text-") && TEXT_ALIGN_STEPS.has(cls.slice(5));
+}
+var TEXT_OVERFLOW_STEPS = /* @__PURE__ */ new Set([
+  "ellipsis",
+  "clip",
+  "wrap",
+  "nowrap",
+  "balance",
+  "pretty"
+]);
+function isTextColorClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  return cls.startsWith("text-") && !isTextSizeClass(cls) && !isTextAlignClass(cls) && !TEXT_OVERFLOW_STEPS.has(cls.slice(5));
+}
+var BG_UTILITY_VALUES = /* @__PURE__ */ new Set([
+  "cover",
+  "contain",
+  "auto",
+  "center",
+  "top",
+  "bottom",
+  "left",
+  "right",
+  "repeat",
+  "no-repeat",
+  "repeat-x",
+  "repeat-y",
+  "fixed",
+  "local",
+  "scroll",
+  "none",
+  "clip-border",
+  "clip-padding",
+  "clip-content",
+  "clip-text",
+  "origin-border",
+  "origin-padding",
+  "origin-content"
+]);
+function isBgUtilityClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  return BG_UTILITY_VALUES.has(cls.slice(3)) || /^bg-\[url\(/.test(cls);
+}
+function isBgColorClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  return cls.startsWith("bg-") && !isBgUtilityClass(cls);
+}
+var BORDER_STYLE_VALUES = /* @__PURE__ */ new Set(["solid", "dashed", "dotted", "double", "hidden", "none"]);
+var BORDER_WIDTH_SIDE = /^([trblxy])(?:-(?:0|2|4|8))?$/;
+function isBorderWidthClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  if (!cls.startsWith("border-"))
+    return false;
+  const rest = cls.slice(7);
+  if (rest === "0" || rest === "2" || rest === "4" || rest === "8")
+    return true;
+  return BORDER_WIDTH_SIDE.test(rest);
+}
+function isBorderStyleClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  return cls.startsWith("border-") && BORDER_STYLE_VALUES.has(cls.slice(7));
+}
+function isBorderColorClass(rawCls) {
+  const cls = stripImportant(rawCls);
+  return cls.startsWith("border-") && !isBorderWidthClass(cls) && !isBorderStyleClass(cls);
+}
+function prefixMatcher(prefix) {
+  return (cls) => stripImportant(cls).startsWith(prefix);
+}
+function exactMatcher(...values) {
+  const set = new Set(values);
+  return (cls) => set.has(stripImportant(cls));
+}
+function anyMatcher(...matchers) {
+  return (cls) => matchers.some((m) => m(cls));
+}
+var PROP_MATCHERS = {
+  color: isTextColorClass,
+  background: isBgColorClass,
+  backgroundColor: isBgColorClass,
+  padding: prefixMatcher("p-"),
+  paddingTop: prefixMatcher("pt-"),
+  paddingRight: prefixMatcher("pr-"),
+  paddingBottom: prefixMatcher("pb-"),
+  paddingLeft: prefixMatcher("pl-"),
+  // negative-margin classes are `-`-PREFIXED (`spacingClass` puts the sign
+  // ahead of the property, e.g. `-mt-4`), not `-`-suffixed on the property —
+  // a plain `prefixMatcher('mt-')` never matches `-mt-4`, so a subsequent
+  // clear left a dangling negative margin. Each margin matcher accepts both
+  // forms.
+  margin: anyMatcher(prefixMatcher("m-"), prefixMatcher("-m-")),
+  marginTop: anyMatcher(prefixMatcher("mt-"), prefixMatcher("-mt-")),
+  marginRight: anyMatcher(prefixMatcher("mr-"), prefixMatcher("-mr-")),
+  marginBottom: anyMatcher(prefixMatcher("mb-"), prefixMatcher("-mb-")),
+  marginLeft: anyMatcher(prefixMatcher("ml-"), prefixMatcher("-ml-")),
+  gap: prefixMatcher("gap-"),
+  width: prefixMatcher("w-"),
+  height: prefixMatcher("h-"),
+  fontSize: isTextSizeClass,
+  // exact, not prefix: `font-sans`/`font-serif`/`font-mono` share the same
+  // `font-` prefix for FAMILY, a property `mapStyleDeclToClass` never
+  // touches — a prefix match would sweep those off on a `fontWeight` clear.
+  fontWeight: exactMatcher("font-thin", "font-extralight", "font-light", "font-normal", "font-medium", "font-semibold", "font-bold", "font-extrabold", "font-black"),
+  borderColor: isBorderColorClass,
+  borderRadius: anyMatcher(exactMatcher("rounded"), prefixMatcher("rounded-")),
+  display: exactMatcher("block", "inline-block", "inline", "flex", "inline-flex", "grid", "hidden"),
+  flexDirection: exactMatcher("flex-col", "flex-row"),
+  alignItems: prefixMatcher("items-"),
+  justifyContent: prefixMatcher("justify-"),
+  textAlign: isTextAlignClass
+};
+var SPACING_PX_STEPS = Object.keys(SPACING_PX_TO_UNIT).map(Number).sort((a, b) => a - b);
+var FONT_SIZE_PX_STEPS = Object.keys(FONT_SIZE_PX).map(Number).sort((a, b) => a - b);
+
+// node_modules/@8base-archie/editor-protocol/dist/component-usages.js
+import { z as z7 } from "zod";
+var ComponentUsageSchema = z7.object({
+  slug: z7.string().min(1),
+  file: z7.string().min(1),
+  vid: Vid
+}).strict();
+var ComponentUsagesSchema = z7.object({
+  file: z7.string().min(1),
+  component: z7.string().min(1),
+  count: z7.number().int().nonnegative(),
+  usages: z7.array(ComponentUsageSchema)
+}).strict();
+
+// node_modules/@8base-archie/editor-protocol/dist/palette-catalog.js
+var PALETTE_CATALOG = [
+  {
+    id: "button",
+    group: "common",
+    snippet: `<button className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors">Button</button>`
+  },
+  {
+    id: "container",
+    group: "common",
+    snippet: `<div className="flex flex-col gap-4 p-4"></div>`
+  },
+  {
+    id: "heading-1",
+    group: "common",
+    snippet: `<h1 className="text-4xl font-bold tracking-tight text-foreground">Heading</h1>`
+  },
+  {
+    id: "heading-2",
+    group: "common",
+    snippet: `<h2 className="text-3xl font-semibold tracking-tight text-foreground">Heading</h2>`
+  },
+  {
+    id: "heading-3",
+    group: "common",
+    snippet: `<h3 className="text-2xl font-semibold text-foreground">Heading</h3>`
+  },
+  {
+    id: "paragraph",
+    group: "common",
+    snippet: `<p className="text-base leading-7 text-foreground">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>`
+  },
+  {
+    id: "typography",
+    group: "common",
+    snippet: `<span className="text-sm leading-6 text-foreground">Text content</span>`
+  },
+  {
+    id: "link",
+    group: "common",
+    snippet: `<a href="#" className="text-primary underline-offset-4 hover:underline">Link text</a>`
+  },
+  {
+    id: "image",
+    group: "common",
+    snippet: `<img src="https://placehold.co/600x400" alt="Placeholder" className="h-auto w-full rounded-lg" />`
+  },
+  {
+    id: "divider",
+    group: "common",
+    snippet: `<hr className="my-6 border-t border-border" />`
+  },
+  {
+    id: "list-unordered",
+    group: "common",
+    snippet: `<ul className="list-disc space-y-2 pl-6 text-foreground"><li>First item</li><li>Second item</li><li>Third item</li></ul>`
+  },
+  {
+    id: "list-ordered",
+    group: "common",
+    snippet: `<ol className="list-decimal space-y-2 pl-6 text-foreground"><li>First item</li><li>Second item</li><li>Third item</li></ol>`
+  },
+  {
+    id: "badge",
+    group: "common",
+    snippet: `<span className="inline-flex items-center rounded-md border border-transparent bg-primary px-2.5 py-0.5 text-xs font-semibold text-primary-foreground shadow">Badge</span>`
+  },
+  {
+    id: "code",
+    group: "common",
+    snippet: `<code className="rounded bg-muted px-1.5 py-0.5 font-mono text-sm text-foreground">code</code>`
+  },
+  {
+    id: "blockquote",
+    group: "common",
+    snippet: `<blockquote className="border-l-4 border-border pl-4 italic text-muted-foreground">Quoted text goes here.</blockquote>`
+  },
+  {
+    id: "header",
+    group: "layout",
+    snippet: `<header className="flex items-center justify-between border-b border-border bg-background px-6 py-4">
+  <span className="text-lg font-bold text-foreground">Logo</span>
+  <nav className="flex gap-6 text-sm text-muted-foreground">
+    <a href="#" className="hover:text-foreground transition-colors">Home</a>
+    <a href="#" className="hover:text-foreground transition-colors">About</a>
+  </nav>
+</header>`
+  },
+  {
+    id: "footer",
+    group: "layout",
+    snippet: `<footer className="border-t border-border bg-background px-6 py-12">
+  <div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
+    <p className="text-sm text-muted-foreground">\xA9 2025 Company Name. All rights reserved.</p>
+    <nav className="flex gap-6">
+      <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Privacy</a>
+      <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Terms</a>
+      <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Contact</a>
+    </nav>
+  </div>
+</footer>`
+  },
+  {
+    id: "card",
+    group: "layout",
+    snippet: `<div className="rounded-xl border border-border bg-card text-card-foreground shadow">
+  <div className="flex flex-col space-y-1.5 p-6">
+    <h3 className="text-lg font-semibold leading-none tracking-tight">Card Title</h3>
+    <p className="text-sm text-muted-foreground">Card description goes here.</p>
+  </div>
+</div>`
+  },
+  {
+    id: "paper",
+    group: "layout",
+    snippet: `<div className="rounded-lg bg-muted/50 p-6 shadow-sm"></div>`
+  },
+  {
+    id: "menu",
+    group: "layout",
+    snippet: `<ul className="flex flex-col rounded-md border border-border bg-popover py-1 text-sm text-popover-foreground shadow-md">
+  <li className="px-3 py-2 hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors">Item one</li>
+  <li className="px-3 py-2 hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors">Item two</li>
+  <li className="px-3 py-2 hover:bg-accent hover:text-accent-foreground cursor-pointer transition-colors">Item three</li>
+</ul>`
+  },
+  {
+    id: "popper",
+    group: "layout",
+    snippet: `<div className="w-64 rounded-md border border-border bg-popover p-4 text-popover-foreground shadow-md">
+  <p className="text-sm font-medium">Popper title</p>
+  <p className="mt-1 text-xs text-muted-foreground">Floating content goes here.</p>
+</div>`
+  },
+  {
+    id: "navbar",
+    group: "layout",
+    snippet: `<nav className="flex items-center justify-between border-b border-border bg-background px-6 py-4">
+  <span className="text-lg font-bold text-foreground">Logo</span>
+  <div className="flex items-center gap-6">
+    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Home</a>
+    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Features</a>
+    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Pricing</a>
+    <button className="inline-flex items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors">Sign Up</button>
+  </div>
+</nav>`
+  },
+  {
+    id: "grid-2",
+    group: "layout",
+    snippet: `<div className="grid grid-cols-1 gap-4 md:grid-cols-2"></div>`
+  },
+  {
+    id: "grid-3",
+    group: "layout",
+    snippet: `<div className="grid grid-cols-1 gap-4 md:grid-cols-3"></div>`
+  },
+  {
+    id: "table",
+    group: "layout",
+    snippet: `<table className="w-full border-collapse text-sm text-foreground">
+  <thead className="border-b border-border bg-muted/50">
+    <tr>
+      <th className="px-3 py-2 text-left font-medium text-muted-foreground">Name</th>
+      <th className="px-3 py-2 text-left font-medium text-muted-foreground">Status</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr className="border-b border-border">
+      <td className="px-3 py-2">Item one</td>
+      <td className="px-3 py-2 text-muted-foreground">Active</td>
+    </tr>
+  </tbody>
+</table>`
+  },
+  {
+    id: "form-block",
+    group: "form",
+    snippet: `<form className="flex flex-col gap-4">
+  <div className="flex flex-col gap-1.5">
+    <label className="text-sm font-medium leading-none text-foreground">Label</label>
+    <input type="text" placeholder="Enter value" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />
+  </div>
+  <button type="submit" className="inline-flex h-9 items-center justify-center self-start rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors">Submit</button>
+</form>`
+  },
+  {
+    id: "form-text-field",
+    group: "form",
+    snippet: `<input type="text" placeholder="Enter text..." className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`
+  },
+  {
+    id: "form-textarea",
+    group: "form",
+    snippet: `<textarea placeholder="Enter text..." rows="4" className="flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"></textarea>`
+  },
+  {
+    id: "form-checkbox",
+    group: "form",
+    snippet: `<label className="inline-flex items-center gap-2 text-sm text-foreground">
+  <span className="peer flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-primary bg-primary text-primary-foreground shadow"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round" className="h-3 w-3"><polyline points="20 6 9 17 4 12"></polyline></svg></span>
+  <span>Accept terms</span>
+</label>`
+  },
+  {
+    id: "form-switch",
+    group: "form",
+    snippet: `<label className="inline-flex items-center gap-2 text-sm text-foreground">
+  <span className="peer inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-primary shadow-sm transition-colors">
+    <span className="pointer-events-none block h-4 w-4 translate-x-4 rounded-full bg-background shadow-lg ring-0 transition-transform"></span>
+  </span>
+  <span>Enable</span>
+</label>`
+  },
+  {
+    id: "form-radio-group",
+    group: "form",
+    snippet: `<div className="flex flex-col gap-2 text-sm text-foreground" role="radiogroup">
+  <label className="inline-flex items-center gap-2">
+    <span className="aspect-square h-4 w-4 rounded-full border border-primary bg-background text-primary shadow flex items-center justify-center"><span className="h-2 w-2 rounded-full bg-primary"></span></span>
+    <span>Option A</span>
+  </label>
+  <label className="inline-flex items-center gap-2">
+    <span className="aspect-square h-4 w-4 rounded-full border border-primary bg-background shadow"></span>
+    <span>Option B</span>
+  </label>
+  <label className="inline-flex items-center gap-2">
+    <span className="aspect-square h-4 w-4 rounded-full border border-primary bg-background shadow"></span>
+    <span>Option C</span>
+  </label>
+</div>`
+  },
+  {
+    id: "form-select",
+    group: "form",
+    snippet: `<button type="button" className="flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm text-foreground shadow-sm focus:outline-none focus:ring-1 focus:ring-ring">
+  <span>Option one</span>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="h-4 w-4 opacity-50"><path d="m6 9 6 6 6-6" /></svg>
+</button>`
+  },
+  {
+    id: "form-slider",
+    group: "form",
+    snippet: `<span className="relative flex w-full touch-none select-none items-center">
+  <span className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
+    <span className="absolute h-full bg-primary" style={{ width: '50%' }}></span>
+  </span>
+  <span className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors" style={{ position: 'absolute', left: '50%', transform: 'translateX(-50%)' }}></span>
+</span>`
+  },
+  {
+    id: "form-date-picker",
+    group: "form",
+    snippet: `<input type="date" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`
+  },
+  {
+    id: "form-time-picker",
+    group: "form",
+    snippet: `<input type="time" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`
+  },
+  {
+    id: "form-search",
+    group: "form",
+    snippet: `<input type="search" placeholder="Search..." className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring" />`
+  },
+  {
+    id: "form-file-upload",
+    group: "form",
+    snippet: `<input type="file" className="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm text-foreground shadow-sm file:mr-3 file:rounded-md file:border-0 file:bg-secondary file:px-3 file:py-1 file:text-sm file:font-medium file:text-secondary-foreground" />`
+  },
+  {
+    id: "kit-hero",
+    group: "archie-kit",
+    snippet: `<section className="relative overflow-hidden rounded-2xl border border-border bg-card px-8 py-16 md:px-12 md:py-20 md:grid md:grid-cols-2 md:items-center md:gap-10">
+  <div>
+    <div className="mb-3 text-xs font-semibold uppercase tracking-[0.2em] text-primary">New Release</div>
+    <h1 className="text-4xl font-extrabold leading-[1.05] tracking-tight text-foreground md:text-6xl">Launch products your team will love</h1>
+    <p className="mt-5 max-w-xl text-lg leading-relaxed text-muted-foreground md:text-xl">A single workspace for planning, building, and shipping \u2014 without the busywork that usually gets in the way.</p>
+    <div className="mt-8 flex flex-wrap gap-3">
+      <button className="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Get started</button>
+      <button className="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors border border-border bg-transparent hover:bg-muted">Book a demo</button>
+    </div>
+  </div>
+  <div className="mt-10 md:mt-0">
+    <figure className="">
+      <div className="relative overflow-hidden bg-muted rounded-lg" style={{ aspectRatio: '16/9', backgroundImage: 'linear-gradient(135deg, hsl(var(--chart-1) / 0.92), hsl(var(--chart-3) / 0.65))' }}></div>
+    </figure>
+  </div>
+</section>`
+  },
+  {
+    id: "kit-page-header",
+    group: "archie-kit",
+    snippet: `<div className="flex items-end justify-between gap-4 mb-6">
+  <div>
+    <div className="text-xs font-medium uppercase tracking-wider text-muted-foreground">Projects</div>
+    <h1 className="text-3xl font-extrabold tracking-tight">Acme Onboarding</h1>
+    <p className="mt-1 text-muted-foreground">Track setup tasks and milestones for the Acme rollout.</p>
+  </div>
+  <div className="flex gap-2">
+    <button className="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors border border-border bg-transparent hover:bg-muted">Export</button>
+    <button className="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">New task</button>
+  </div>
+</div>`
+  },
+  {
+    id: "kit-section",
+    group: "archie-kit",
+    snippet: `<div className="rounded-lg border border-border bg-card text-card-foreground shadow-sm mb-6">
+  <div className="flex flex-row items-center justify-between gap-1 px-5 pt-5 pb-3">
+    <div>
+      <h3 className="text-base font-semibold tracking-tight">Recent activity</h3>
+      <p className="text-sm text-muted-foreground">The latest updates across this project.</p>
+    </div>
+    <button className="inline-flex items-center justify-center gap-2 rounded-md h-7 px-2 text-xs font-medium transition-colors hover:bg-muted">View all</button>
+  </div>
+  <div className="px-5 pb-5">
+    <p className="text-sm text-muted-foreground">No activity has been logged in the last 24 hours.</p>
+  </div>
+</div>`
+  },
+  {
+    id: "kit-card",
+    group: "archie-kit",
+    snippet: `<div className="rounded-lg border border-border bg-card text-card-foreground shadow-sm">
+  <div className="flex flex-col gap-1 px-5 pt-5 pb-3">
+    <h3 className="text-base font-semibold tracking-tight">Storage usage</h3>
+    <p className="text-sm text-muted-foreground">How much of your plan's storage is in use.</p>
+  </div>
+  <div className="px-5 pb-5">
+    <p className="text-sm">42.3 GB of 100 GB used across 3 workspaces.</p>
+  </div>
+</div>`
+  },
+  {
+    id: "kit-status-badge",
+    group: "archie-kit",
+    snippet: `<span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-success/15 text-success">
+  <span className="h-1.5 w-1.5 rounded-full bg-current"></span>
+  Active
+</span>`
+  },
+  {
+    id: "kit-data-table",
+    group: "archie-kit",
+    snippet: `<div>
+  <div className="mb-3 flex items-center justify-between gap-2">
+    <div className="relative">
+      <svg className="pointer-events-none absolute left-2.5 top-2.5 text-muted-foreground" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><circle cx="11" cy="11" r="8"></circle><path d="m21 21-4.3-4.3"></path></svg>
+      <input value="" placeholder="Search\u2026" className="w-64 rounded-md border border-input bg-background py-1.5 pl-8 pr-3 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
+    </div>
+    <button className="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M5 12h14"></path><path d="M12 5v14"></path></svg>
+      New order
+    </button>
+  </div>
+  <div className="overflow-x-auto">
+    <table className="w-full text-sm">
+      <thead>
+        <tr className="border-b border-border text-left text-xs uppercase tracking-wider text-muted-foreground">
+          <th scope="col" className="pb-2 font-medium cursor-pointer select-none">Order</th>
+          <th scope="col" className="pb-2 font-medium cursor-pointer select-none">Customer</th>
+          <th scope="col" className="pb-2 font-medium cursor-pointer select-none">Status</th>
+          <th scope="col" className="pb-2 font-medium cursor-pointer select-none text-right">Amount</th>
+          <th scope="col" className="pb-2 font-medium text-right">Actions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr className="border-b border-border/60 transition-colors hover:bg-muted/40">
+          <td className="py-3 font-mono tabular-nums">ORD-1044</td>
+          <td className="py-3">Acme Corp</td>
+          <td className="py-3"><span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-success/15 text-success"><span className="h-1.5 w-1.5 rounded-full bg-current"></span>Paid</span></td>
+          <td className="py-3 font-mono tabular-nums text-right">$1,240.00</td>
+          <td className="py-3 text-right"><div className="inline-flex gap-1"><button className="inline-flex items-center justify-center gap-2 rounded-md h-7 px-2 text-xs font-medium transition-colors hover:bg-muted">View</button></div></td>
+        </tr>
+        <tr className="border-b border-border/60 transition-colors hover:bg-muted/40">
+          <td className="py-3 font-mono tabular-nums">ORD-1043</td>
+          <td className="py-3">Globex Inc</td>
+          <td className="py-3"><span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-primary/15 text-primary"><span className="h-1.5 w-1.5 rounded-full bg-current"></span>Pending</span></td>
+          <td className="py-3 font-mono tabular-nums text-right">$860.00</td>
+          <td className="py-3 text-right"><div className="inline-flex gap-1"><button className="inline-flex items-center justify-center gap-2 rounded-md h-7 px-2 text-xs font-medium transition-colors hover:bg-muted">View</button></div></td>
+        </tr>
+        <tr className="border-b border-border/60 transition-colors hover:bg-muted/40">
+          <td className="py-3 font-mono tabular-nums">ORD-1042</td>
+          <td className="py-3">Initech</td>
+          <td className="py-3"><span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-destructive/15 text-destructive"><span className="h-1.5 w-1.5 rounded-full bg-current"></span>Overdue</span></td>
+          <td className="py-3 font-mono tabular-nums text-right">$2,150.00</td>
+          <td className="py-3 text-right"><div className="inline-flex gap-1"><button className="inline-flex items-center justify-center gap-2 rounded-md h-7 px-2 text-xs font-medium transition-colors hover:bg-muted">View</button></div></td>
+        </tr>
+        <tr className="border-b border-border/60 transition-colors hover:bg-muted/40">
+          <td className="py-3 font-mono tabular-nums">ORD-1041</td>
+          <td className="py-3">Umbrella LLC</td>
+          <td className="py-3"><span className="inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium bg-success/15 text-success"><span className="h-1.5 w-1.5 rounded-full bg-current"></span>Paid</span></td>
+          <td className="py-3 font-mono tabular-nums text-right">$430.00</td>
+          <td className="py-3 text-right"><div className="inline-flex gap-1"><button className="inline-flex items-center justify-center gap-2 rounded-md h-7 px-2 text-xs font-medium transition-colors hover:bg-muted">View</button></div></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>`
+  },
+  {
+    id: "kit-spec-grid",
+    group: "archie-kit",
+    snippet: `<div className="rounded-lg border border-border bg-card text-card-foreground shadow-sm">
+  <div className="p-5">
+    <dl className="grid grid-cols-1 gap-x-6 gap-y-4 sm:grid-cols-2 lg:grid-cols-3">
+      <div>
+        <dt className="text-xs uppercase tracking-wider text-muted-foreground">Order ID</dt>
+        <dd className="mt-1 font-mono tabular-nums">ORD-1044</dd>
+      </div>
+      <div>
+        <dt className="text-xs uppercase tracking-wider text-muted-foreground">Customer</dt>
+        <dd className="mt-1 font-medium">Acme Corp</dd>
+      </div>
+      <div>
+        <dt className="text-xs uppercase tracking-wider text-muted-foreground">Amount</dt>
+        <dd className="mt-1 font-mono tabular-nums">$1,240.00</dd>
+      </div>
+      <div>
+        <dt className="text-xs uppercase tracking-wider text-muted-foreground">Placed on</dt>
+        <dd className="mt-1 font-medium">Mar 4, 2026</dd>
+      </div>
+    </dl>
+  </div>
+</div>`
+  },
+  {
+    id: "kit-timeline",
+    group: "archie-kit",
+    snippet: `<div className="rounded-lg border border-border bg-card text-card-foreground shadow-sm">
+  <div className="p-5">
+    <ol className="space-y-4">
+      <li className="flex gap-3">
+        <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary"></span>
+        <div>
+          <div className="text-xs text-muted-foreground">Mar 4, 2026 \xB7 Sarah Chen</div>
+          <div className="text-sm">Marked the order as paid.</div>
+        </div>
+      </li>
+      <li className="flex gap-3">
+        <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary"></span>
+        <div>
+          <div className="text-xs text-muted-foreground">Mar 3, 2026 \xB7 System</div>
+          <div className="text-sm">Invoice #4471 sent to customer.</div>
+        </div>
+      </li>
+      <li className="flex gap-3">
+        <span className="mt-1.5 h-2 w-2 shrink-0 rounded-full bg-primary"></span>
+        <div>
+          <div className="text-xs text-muted-foreground">Mar 1, 2026 \xB7 Diego Ramirez</div>
+          <div className="text-sm">Order created from quote Q-2201.</div>
+        </div>
+      </li>
+    </ol>
+  </div>
+</div>`
+  },
+  {
+    id: "kit-form-field",
+    group: "archie-kit",
+    snippet: `<label className="block text-sm">
+  <span className="font-medium">Email address</span>
+  <input type="email" placeholder="you@company.com" className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
+  <span className="mt-1 block text-xs text-muted-foreground">We'll never share your email with anyone else.</span>
+</label>`
+  },
+  {
+    id: "kit-dialog",
+    group: "archie-kit",
+    snippet: `<div className="fixed inset-0 z-[1050] flex items-center justify-center" role="dialog" aria-modal="true">
+  <div className="absolute inset-0 bg-black/50"></div>
+  <div className="relative w-full max-w-md rounded-lg border border-border bg-card shadow-lg p-6">
+    <h2 className="text-lg font-semibold">Create contact</h2>
+    <p className="mt-1 text-sm text-muted-foreground">Add a new contact to this project.</p>
+    <div className="mt-4 space-y-3">
+      <label className="block text-sm">
+        <span className="font-medium">Full name</span>
+        <input className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" value="" />
+      </label>
+      <label className="block text-sm">
+        <span className="font-medium">Email</span>
+        <input className="mt-1 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" value="" />
+      </label>
+    </div>
+    <div className="mt-5 flex justify-end gap-2">
+      <button className="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors border border-border bg-transparent hover:bg-muted">Cancel</button>
+      <button className="inline-flex items-center justify-center gap-2 rounded-md px-4 py-2 text-sm font-medium transition-colors bg-primary text-primary-foreground hover:bg-primary/90">Create</button>
+    </div>
+  </div>
+</div>`
+  },
+  {
+    id: "kit-figure",
+    group: "archie-kit",
+    snippet: `<figure>
+  <div className="relative overflow-hidden bg-muted rounded-lg" style={{ aspectRatio: '16/9', backgroundImage: 'linear-gradient(135deg, hsl(var(--chart-2) / 0.92), hsl(var(--chart-4) / 0.65))' }}></div>
+  <figcaption className="mt-2 text-sm text-muted-foreground">Product screenshot, dashboard overview.</figcaption>
+</figure>`
+  },
+  {
+    id: "kit-article",
+    group: "archie-kit",
+    snippet: `<article className="max-w-[65ch] text-[1.0625rem] leading-[1.75] text-foreground">
+  <div className="mb-2 text-xs font-semibold uppercase tracking-[0.2em] text-primary">Engineering</div>
+  <h1 className="mb-4 text-3xl font-extrabold tracking-tight text-foreground md:text-4xl">Why we rebuilt our onboarding flow</h1>
+  <p className="mb-6 text-xl leading-relaxed text-muted-foreground">A look at the research, the tradeoffs, and what shipped after three months of iteration.</p>
+
+  <p className="mb-5 first-letter:float-left first-letter:mr-3 first-letter:text-[3.4em] first-letter:font-bold first-letter:leading-[0.72] first-letter:text-primary">Onboarding is the first real conversation a new customer has with a product, and for years ours said the wrong things. Teams dropped off before ever seeing the value we'd promised them.</p>
+  <p className="mb-5">We started by mapping every step a customer took in their first week, then cut anything that didn't lead directly to their first success moment.</p>
+
+  <h2 className="mt-8 mb-2 text-2xl font-bold tracking-tight text-foreground">What changed</h2>
+  <p className="mb-5">The new flow leans on progressive disclosure: ask for less up front, and surface advanced options only once a team is ready for them.</p>
+  <ul className="mb-5 list-disc pl-6">
+    <li className="my-1.5">Reduced required setup fields from 12 to 4</li>
+    <li className="my-1.5">Replaced the tour modal with inline, contextual tips</li>
+    <li className="my-1.5">Added a visible progress indicator across every step</li>
+  </ul>
+
+  <blockquote className="my-7 border-l-[3px] border-primary py-1 pl-5 text-[1.375rem] italic leading-normal text-foreground">
+    The best onboarding doesn't feel like onboarding \u2014 it feels like the product already worked.
+    <cite className="mt-2 block text-sm not-italic text-muted-foreground">\u2014 Head of Product</cite>
+  </blockquote>
+</article>`
+  },
+  {
+    id: "kit-empty-state",
+    group: "archie-kit",
+    snippet: `<div className="py-10 text-center">
+  <div className="text-sm font-medium">No records</div>
+  <div className="mt-1 text-sm text-muted-foreground">Nothing here yet \u2014 new items will show up as they're created.</div>
+</div>`
+  },
+  {
+    id: "kit-doc-nav",
+    group: "archie-kit",
+    snippet: `<nav aria-label="Documentation" className="text-sm">
+  <div className="mb-3 px-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Documentation</div>
+  <div className="mb-4">
+    <div className="px-2 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Getting Started</div>
+    <a href="#" aria-current="page" className="block rounded-md px-2 py-1.5 bg-primary/10 font-medium text-primary transition-colors">Introduction</a>
+    <a href="#" className="block rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">Installation</a>
+    <a href="#" className="block rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">Quick Start</a>
+  </div>
+  <div className="mb-4">
+    <div className="px-2 pb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">Guides</div>
+    <a href="#" className="block rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">Authentication</a>
+    <a href="#" className="block rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">Deployment</a>
+    <a href="#" className="block rounded-md px-2 py-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">Webhooks</a>
+  </div>
+</nav>`
+  },
+  {
+    id: "hero-section",
+    group: "templates",
+    snippet: `<section className="flex flex-col items-center justify-center gap-6 bg-background px-6 py-24 text-center">
+  <h1 className="text-5xl font-bold tracking-tight text-foreground">Welcome to Our Platform</h1>
+  <p className="max-w-2xl text-lg text-muted-foreground">A brief description of your product or service that captures attention and drives action.</p>
+  <div className="flex gap-4">
+    <button className="inline-flex h-11 items-center justify-center rounded-md bg-primary px-8 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors">Get Started</button>
+    <button className="inline-flex h-11 items-center justify-center rounded-md border border-input bg-background px-8 text-sm font-medium text-foreground shadow-sm hover:bg-accent hover:text-accent-foreground transition-colors">Learn More</button>
+  </div>
+</section>`
+  },
+  {
+    id: "feature-card",
+    group: "templates",
+    snippet: `<div className="overflow-hidden rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+  <img src="https://placehold.co/400x200" alt="Card image" className="h-48 w-full object-cover" />
+  <div className="p-6">
+    <h3 className="text-lg font-semibold leading-none tracking-tight">Card Title</h3>
+    <p className="mt-2 text-sm text-muted-foreground">A short description that provides context about this card's content.</p>
+  </div>
+</div>`
+  },
+  {
+    id: "feature-grid",
+    group: "templates",
+    snippet: `<section className="bg-background px-6 py-16">
+  <h2 className="mb-12 text-center text-3xl font-bold text-foreground">Features</h2>
+  <div className="grid grid-cols-1 gap-8 md:grid-cols-3">
+    <div className="flex flex-col items-center text-center">
+      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">\u2726</div>
+      <h3 className="text-lg font-semibold text-foreground">Feature One</h3>
+      <p className="mt-2 text-sm text-muted-foreground">Brief description of this feature and its benefits.</p>
+    </div>
+    <div className="flex flex-col items-center text-center">
+      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">\u2726</div>
+      <h3 className="text-lg font-semibold text-foreground">Feature Two</h3>
+      <p className="mt-2 text-sm text-muted-foreground">Brief description of this feature and its benefits.</p>
+    </div>
+    <div className="flex flex-col items-center text-center">
+      <div className="mb-4 flex h-12 w-12 items-center justify-center rounded-full bg-primary/10 text-primary">\u2726</div>
+      <h3 className="text-lg font-semibold text-foreground">Feature Three</h3>
+      <p className="mt-2 text-sm text-muted-foreground">Brief description of this feature and its benefits.</p>
+    </div>
+  </div>
+</section>`
+  },
+  {
+    id: "cta-banner",
+    group: "templates",
+    snippet: `<section className="rounded-2xl bg-primary px-6 py-16 text-center text-primary-foreground">
+  <h2 className="text-3xl font-bold">Ready to Get Started?</h2>
+  <p className="mx-auto mt-4 max-w-xl text-lg opacity-90">Join thousands of users who are already building amazing things.</p>
+  <button className="mt-8 inline-flex h-11 items-center justify-center rounded-md bg-background px-8 text-sm font-medium text-foreground shadow hover:bg-background/90 transition-colors">Start Free Trial</button>
+</section>`
+  },
+  {
+    id: "pricing-card",
+    group: "templates",
+    snippet: `<div className="rounded-xl border border-border bg-card p-8 text-card-foreground shadow-sm">
+  <h3 className="text-lg font-semibold">Pro Plan</h3>
+  <div className="mt-4 flex items-baseline gap-1">
+    <span className="text-4xl font-bold text-foreground">$29</span>
+    <span className="text-muted-foreground">/month</span>
+  </div>
+  <ul className="mt-6 space-y-3 text-sm text-muted-foreground">
+    <li className="flex items-center gap-2"><span className="text-primary">\u2713</span> Unlimited projects</li>
+    <li className="flex items-center gap-2"><span className="text-primary">\u2713</span> Priority support</li>
+    <li className="flex items-center gap-2"><span className="text-primary">\u2713</span> Advanced analytics</li>
+    <li className="flex items-center gap-2"><span className="text-primary">\u2713</span> Custom integrations</li>
+  </ul>
+  <button className="mt-8 inline-flex h-11 w-full items-center justify-center rounded-md bg-primary text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors">Choose Plan</button>
+</div>`
+  },
+  {
+    id: "testimonial",
+    group: "templates",
+    snippet: `<div className="rounded-xl border border-border bg-card p-8 text-card-foreground">
+  <p className="italic text-foreground">"This product has completely transformed how we work. The team is more productive and our clients are happier."</p>
+  <div className="mt-6 flex items-center gap-3">
+    <div className="h-10 w-10 rounded-full bg-muted"></div>
+    <div>
+      <p className="text-sm font-semibold text-foreground">Jane Smith</p>
+      <p className="text-xs text-muted-foreground">CEO, Acme Corp</p>
+    </div>
+  </div>
+</div>`
+  },
+  {
+    id: "footer-template",
+    group: "templates",
+    snippet: `<footer className="border-t border-border bg-background px-6 py-12">
+  <div className="flex flex-col items-center gap-6 md:flex-row md:justify-between">
+    <p className="text-sm text-muted-foreground">\xA9 2025 Company Name. All rights reserved.</p>
+    <nav className="flex gap-6">
+      <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Privacy</a>
+      <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Terms</a>
+      <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Contact</a>
+    </nav>
+  </div>
+</footer>`
+  },
+  {
+    id: "navbar-template",
+    group: "templates",
+    snippet: `<nav className="flex items-center justify-between border-b border-border bg-background px-6 py-4">
+  <span className="text-lg font-bold text-foreground">Logo</span>
+  <div className="flex items-center gap-6">
+    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Home</a>
+    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Features</a>
+    <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">Pricing</a>
+    <button className="inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 text-sm font-medium text-primary-foreground shadow hover:bg-primary/90 transition-colors">Sign Up</button>
+  </div>
+</nav>`
+  },
+  {
+    id: "shadcn-button",
+    group: "shadcn",
+    snippet: "<Button>Button</Button>",
+    importRequirements: [{ module: "@/components/ui/button", named: ["Button"] }]
+  },
+  {
+    id: "shadcn-icon-button-delete",
+    group: "shadcn",
+    snippet: '<Button variant="outline" size="icon"><Trash2 className="h-4 w-4" /></Button>',
+    importRequirements: [
+      { module: "@/components/ui/button", named: ["Button"] },
+      { module: "lucide-react", named: ["Trash2"] }
+    ]
+  },
+  {
+    id: "shadcn-badge",
+    group: "shadcn",
+    snippet: `<Badge>Badge</Badge>`,
+    importRequirements: [
+      { module: "@/components/ui/badge", named: ["Badge"] }
+    ]
+  },
+  {
+    id: "shadcn-card",
+    group: "shadcn",
+    snippet: `<Card>
+  <CardHeader>
+    <CardTitle>Card Title</CardTitle>
+    <CardDescription>Card description goes here.</CardDescription>
+  </CardHeader>
+</Card>`,
+    importRequirements: [
+      { module: "@/components/ui/card", named: ["Card", "CardHeader", "CardTitle", "CardDescription"] }
+    ]
+  },
+  {
+    id: "shadcn-form-text-field",
+    group: "shadcn",
+    snippet: `<Input type="text" placeholder="Enter text..." />`,
+    importRequirements: [
+      { module: "@/components/ui/input", named: ["Input"] }
+    ]
+  },
+  {
+    id: "shadcn-form-textarea",
+    group: "shadcn",
+    snippet: `<Textarea placeholder="Enter text..." rows={4} />`,
+    importRequirements: [
+      { module: "@/components/ui/textarea", named: ["Textarea"] }
+    ]
+  },
+  {
+    id: "shadcn-form-checkbox",
+    group: "shadcn",
+    snippet: `<div className="flex items-center gap-2">
+  <Checkbox id="terms" defaultChecked />
+  <label htmlFor="terms" className="text-sm font-medium leading-none">Accept terms</label>
+</div>`,
+    importRequirements: [
+      { module: "@/components/ui/checkbox", named: ["Checkbox"] }
+    ]
+  },
+  {
+    id: "shadcn-form-switch",
+    group: "shadcn",
+    snippet: `<div className="flex items-center gap-2">
+  <Switch id="enable" defaultChecked />
+  <label htmlFor="enable" className="text-sm font-medium leading-none">Enable</label>
+</div>`,
+    importRequirements: [
+      { module: "@/components/ui/switch", named: ["Switch"] }
+    ]
+  },
+  {
+    id: "shadcn-form-radio-group",
+    group: "shadcn",
+    snippet: `<RadioGroup defaultValue="a" className="flex flex-col gap-2">
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="a" id="opt-a" />
+    <label htmlFor="opt-a" className="text-sm font-medium leading-none">Option A</label>
+  </div>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="b" id="opt-b" />
+    <label htmlFor="opt-b" className="text-sm font-medium leading-none">Option B</label>
+  </div>
+  <div className="flex items-center gap-2">
+    <RadioGroupItem value="c" id="opt-c" />
+    <label htmlFor="opt-c" className="text-sm font-medium leading-none">Option C</label>
+  </div>
+</RadioGroup>`,
+    importRequirements: [
+      { module: "@/components/ui/radio-group", named: ["RadioGroup", "RadioGroupItem"] }
+    ]
+  },
+  {
+    id: "shadcn-form-select",
+    group: "shadcn",
+    snippet: `<Select defaultValue="one">
+  <SelectTrigger className="w-full">
+    <SelectValue placeholder="Select an option" />
+  </SelectTrigger>
+  <SelectContent>
+    <SelectItem value="one">Option one</SelectItem>
+    <SelectItem value="two">Option two</SelectItem>
+    <SelectItem value="three">Option three</SelectItem>
+  </SelectContent>
+</Select>`,
+    importRequirements: [
+      { module: "@/components/ui/select", named: ["Select", "SelectContent", "SelectItem", "SelectTrigger", "SelectValue"] }
+    ]
+  },
+  {
+    id: "shadcn-form-slider",
+    group: "shadcn",
+    snippet: `<Slider defaultValue={[50]} max={100} step={1} />`,
+    importRequirements: [
+      { module: "@/components/ui/slider", named: ["Slider"] }
+    ]
+  },
+  {
+    id: "shadcn-form-search",
+    group: "shadcn",
+    snippet: `<Input type="search" placeholder="Search..." />`,
+    importRequirements: [
+      { module: "@/components/ui/input", named: ["Input"] }
+    ]
+  },
+  {
+    id: "shadcn-form-file-upload",
+    group: "shadcn",
+    snippet: `<Input type="file" />`,
+    importRequirements: [
+      { module: "@/components/ui/input", named: ["Input"] }
+    ]
+  }
+];
+var byId = new Map(PALETTE_CATALOG.map((e) => [e.id, e]));
+
+// src/babel-plugin-editor-meta.ts
+import * as nodePath from "path";
+function meaningfulChildren(t, children) {
+  return children.filter((child) => {
+    if (t.isJSXText(child)) return child.value.trim() !== "";
+    if (t.isJSXExpressionContainer(child)) return !t.isJSXEmptyExpression(child.expression);
+    return true;
+  });
+}
+var KIT_SLOT_ATTR = "data-kit-slot";
+var MAX_SLOT_SEGMENTS = 4;
+var NON_BINDING_ATTRS = /* @__PURE__ */ new Set(["__editorMeta", "key", "ref", KIT_SLOT_ATTR]);
+var STRUCTURAL_ATTRS = /* @__PURE__ */ new Set([
+  "id",
+  "htmlFor",
+  "slot",
+  "name",
+  "type",
+  "role",
+  // The camelCase carrier of the SAME durable key as `data-agent-id`: kit
+  // components take `agentId` and render it as the data attribute. Found on the
+  // real corpus (×4) — blocking only the dashed form would have left the prop
+  // form routable, and a durable key with a string-literal usage value sails
+  // straight through the usage-value law.
+  "agentId"
+]);
+function isNonContentAttribute(name) {
+  if (/^on[A-Z]/.test(name)) return true;
+  if (name.startsWith("data-")) return true;
+  return STRUCTURAL_ATTRS.has(name);
+}
+function normalizeSlot(raw) {
+  const value = raw.trim();
+  if (!value) return null;
+  const segments = value.split("/");
+  if (segments.length > MAX_SLOT_SEGMENTS) return null;
+  if (segments.some((segment) => segment.trim() === "")) return null;
+  return value;
+}
+function isPackageImport(src) {
+  if (src.startsWith(".") || src.startsWith("/")) return false;
+  if (src.startsWith("@")) {
+    const slashIdx = src.indexOf("/");
+    if (slashIdx === 1) return false;
+    if (slashIdx > 1) return true;
+    return true;
+  }
+  if (src.startsWith("~/") || src.startsWith("#/")) return false;
+  return true;
+}
+function babelPluginEditorMeta({ types: t }, opts = {}) {
+  const {
+    fileExclude = /node_modules/,
+    instrumentImported = true,
+    includeHostSourceRef = false,
+    origin = "screen",
+    templateOrigin = false,
+    allowLegacyIds = true,
+    onMissingVid
+  } = opts;
+  let missingVidWarned = false;
+  function getJSXTagName(el) {
+    const { name } = el;
+    if (t.isJSXIdentifier(name)) return name.name;
+    if (t.isJSXMemberExpression(name)) {
+      const parts = [];
+      let current = name;
+      while (t.isJSXMemberExpression(current)) {
+        parts.unshift(current.property.name);
+        current = current.object;
+      }
+      if (t.isJSXIdentifier(current)) parts.unshift(current.name);
+      return parts.join(".");
+    }
+    return "";
+  }
+  function isIntrinsicTagName(name) {
+    return t.isJSXIdentifier(name) && /^[a-z]/.test(name.name);
+  }
+  function isHostLikeMemberExpressionName(name) {
+    if (!t.isJSXMemberExpression(name)) return false;
+    const propertyName = name.property.name;
+    return propertyName[0] === propertyName[0].toLowerCase();
+  }
+  function isStaticNamespaceDestructure(binding) {
+    const bp = binding.path;
+    if (!bp.isVariableDeclarator()) return false;
+    if (!t.isObjectPattern(bp.node.id)) return false;
+    if (!binding.constant) return false;
+    const decl = bp.parentPath;
+    if (decl?.isVariableDeclaration() && decl.node.kind !== "const") return false;
+    let init = bp.node.init;
+    while (init && (t.isTSAsExpression(init) || t.isTSNonNullExpression(init) || t.isTypeCastExpression(init))) {
+      init = init.expression;
+    }
+    while (init && t.isMemberExpression(init) && !init.computed) {
+      init = init.object;
+    }
+    if (!init || !t.isIdentifier(init)) return false;
+    const rootBinding = bp.scope.getBinding(init.name);
+    if (!rootBinding) return true;
+    if (!rootBinding.constant) return false;
+    return rootBinding.scope === rootBinding.scope.getProgramParent();
+  }
+  function computeNodeId(file, line, col, componentName) {
+    return `${file}:${line}:${col}:${componentName}`;
+  }
+  function readVidAttr(attrs) {
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      if (!t.isJSXIdentifier(attr.name, { name: VID_ATTR })) continue;
+      const { value } = attr;
+      let raw = null;
+      if (t.isStringLiteral(value)) {
+        raw = value.value;
+      } else if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
+        raw = value.expression.value;
+      }
+      if (raw !== null && VID_PATTERN.test(raw)) return raw;
+      return null;
+    }
+    return null;
+  }
+  function computeDynamicType(path2) {
+    let current = path2.parentPath;
+    while (current) {
+      if (current.isJSXExpressionContainer()) {
+        const expr = current.node.expression;
+        if (t.isConditionalExpression(expr) || t.isLogicalExpression(expr)) {
+          return "CONDITIONAL";
+        }
+      }
+      if (current.isArrowFunctionExpression() || current.isFunctionExpression()) {
+        const call = current.parentPath;
+        if (call?.isCallExpression()) {
+          const callee = call.node.callee;
+          if (t.isMemberExpression(callee) && !callee.computed && t.isIdentifier(callee.property) && /^(map|flatMap|forEach)$/.test(callee.property.name)) {
+            return "ARRAY";
+          }
+        }
+        break;
+      }
+      if (current.isFunctionDeclaration()) break;
+      current = current.parentPath;
+    }
+    return "STATIC";
+  }
+  const SHELL_FILE_RE = /(^|\/)shell\.(jsx|tsx)$/;
+  const SHELL_DIR_RE = /(^|\/)components\/shell\//;
+  const SHELL_BASENAME_RE = /shell/i;
+  const CHROME_ANCESTOR_TAGS = /* @__PURE__ */ new Set(["nav", "aside", "header"]);
+  function isChromeFilePath(file) {
+    if (SHELL_FILE_RE.test(file) || SHELL_DIR_RE.test(file)) return true;
+    const base = file.split("/").pop() ?? file;
+    return SHELL_BASENAME_RE.test(base);
+  }
+  function computeIsChrome(file, path2) {
+    if (isChromeFilePath(file)) return true;
+    let current = path2.parentPath;
+    while (current) {
+      if (current.isJSXElement()) {
+        const tag = getJSXTagName(current.node.openingElement);
+        if (CHROME_ANCESTOR_TAGS.has(tag)) return true;
+      }
+      current = current.parentPath;
+    }
+    return false;
+  }
+  function computeContainerKind(path2) {
+    const elPath = path2.parentPath;
+    if (!elPath?.isJSXElement()) return "none";
+    if (!elPath.node.closingElement) return "none";
+    const children = elPath.node.children;
+    const allPlain = children.every((c) => {
+      if (t.isJSXElement(c)) return true;
+      if (t.isJSXText(c)) return c.value.trim() === "";
+      if (t.isJSXExpressionContainer(c) && t.isJSXEmptyExpression(c.expression)) return true;
+      return false;
+    });
+    return allPlain ? "plain" : "expression";
+  }
+  const kitBoundNamesCache = /* @__PURE__ */ new WeakMap();
+  function computeKitBoundNames(programPath) {
+    const cached = kitBoundNamesCache.get(programPath.node);
+    if (cached) return cached;
+    const names = /* @__PURE__ */ new Set();
+    for (const stmt of programPath.node.body) {
+      if (!t.isVariableDeclaration(stmt)) continue;
+      for (const decl of stmt.declarations) {
+        if (!t.isObjectPattern(decl.id)) continue;
+        if (!decl.init || !t.isIdentifier(decl.init) || decl.init.name !== "Kit") continue;
+        for (const prop of decl.id.properties) {
+          if (!t.isObjectProperty(prop)) continue;
+          const value = t.isIdentifier(prop.value) ? prop.value : t.isIdentifier(prop.key) ? prop.key : null;
+          if (value) names.add(value.name);
+        }
+      }
+    }
+    kitBoundNamesCache.set(programPath.node, names);
+    return names;
+  }
+  function isKitComponentTagName(path2) {
+    const name = path2.node.name;
+    let head = null;
+    if (t.isJSXIdentifier(name)) {
+      head = name.name;
+    } else if (t.isJSXMemberExpression(name)) {
+      let cur = name;
+      while (t.isJSXMemberExpression(cur)) cur = cur.object;
+      if (t.isJSXIdentifier(cur)) head = cur.name;
+    }
+    if (!head || !/^[A-Z]/.test(head)) return false;
+    if (head === "Kit") return true;
+    const programPath = path2.scope.getProgramParent().path;
+    if (programPath.isProgram() && computeKitBoundNames(programPath).has(head)) return true;
+    const binding = path2.scope.getBinding(head);
+    if (binding) {
+      const bp = binding.path;
+      const isImport = bp.isImportSpecifier() || bp.isImportDefaultSpecifier() || bp.isImportNamespaceSpecifier();
+      if (isImport) {
+        const decl = bp.parentPath;
+        if (decl?.isImportDeclaration() && /kit-runtime/.test(decl.node.source.value)) return true;
+      }
+    }
+    return false;
+  }
+  function computeLockReason(isKitOrigin, isChrome, dynamicType) {
+    if (isKitOrigin) return "KIT_INTERNAL";
+    if (isChrome) return "CHROME_STRUCTURAL";
+    if (dynamicType === "ARRAY") return "DYNAMIC_ARRAY";
+    if (dynamicType === "CONDITIONAL") return "DYNAMIC_CONDITIONAL";
+    return void 0;
+  }
+  function isMovable(path2) {
+    const elPath = path2.parentPath;
+    if (!elPath) return false;
+    const parentEl = elPath.parentPath;
+    if (!parentEl || !parentEl.isJSXElement()) return false;
+    const siblings = parentEl.node.children.filter(
+      (c) => t.isJSXElement(c)
+    );
+    return siblings.length >= 2;
+  }
+  function getParentNodeId(path2, file) {
+    const elPath = path2.parentPath;
+    if (!elPath) return null;
+    let ancestor = elPath.parentPath;
+    while (ancestor) {
+      if (ancestor.isJSXElement()) {
+        const opening = ancestor.node.openingElement;
+        const parentVid = readVidAttr(opening.attributes);
+        if (parentVid) return parentVid;
+        if (!allowLegacyIds) return null;
+        const loc = opening.loc?.start;
+        if (loc) {
+          const tag = getJSXTagName(opening);
+          return computeNodeId(file, loc.line, loc.column + 1, tag);
+        }
+        return null;
+      }
+      ancestor = ancestor.parentPath;
+    }
+    return null;
+  }
+  function extractStaticProps(attrs) {
+    const props = [];
+    let hasAny = false;
+    for (const attr of attrs) {
+      if (t.isJSXSpreadAttribute(attr)) continue;
+      if (!t.isJSXAttribute(attr)) continue;
+      const keyName = t.isJSXIdentifier(attr.name) ? attr.name.name : attr.name.name.name;
+      if (keyName === "__editorMeta") continue;
+      let value;
+      if (attr.value === null || attr.value === void 0) {
+        value = t.booleanLiteral(true);
+      } else if (t.isStringLiteral(attr.value)) {
+        value = attr.value;
+      } else if (t.isJSXExpressionContainer(attr.value)) {
+        const expr = attr.value.expression;
+        if (t.isNumericLiteral(expr)) {
+          value = expr;
+        } else if (t.isBooleanLiteral(expr)) {
+          value = expr;
+        } else if (t.isNullLiteral(expr)) {
+          value = expr;
+        } else if (t.isStringLiteral(expr)) {
+          value = expr;
+        } else {
+          value = t.stringLiteral("__dynamic__");
+        }
+      } else {
+        continue;
+      }
+      props.push(t.objectProperty(t.stringLiteral(keyName), value));
+      hasAny = true;
+    }
+    return hasAny ? t.objectExpression(props) : null;
+  }
+  function describeChildrenText(opening) {
+    const elementPath = opening.parentPath;
+    if (!elementPath || !elementPath.isJSXElement()) return null;
+    const element = elementPath.node;
+    if (!element.closingElement) return null;
+    const children = element.children;
+    if (children.length === 0) return "";
+    if (children.length !== 1) return "__dynamic__";
+    const [only] = children;
+    if (!t.isJSXText(only)) return "__dynamic__";
+    return only.value.trim();
+  }
+  function literalInitText(init) {
+    if (t.isStringLiteral(init)) return init.value;
+    if (t.isTemplateLiteral(init) && init.expressions.length === 0) {
+      const [quasi] = init.quasis;
+      if (!quasi) return null;
+      return quasi.value.cooked ?? quasi.value.raw;
+    }
+    return null;
+  }
+  function describeLocalConstSource(name, binding) {
+    const declarator = binding.path;
+    if (!declarator.isVariableDeclarator()) return null;
+    const declaration = declarator.parentPath;
+    if (!declaration?.isVariableDeclaration()) return null;
+    if (declaration.node.kind !== "const" && declaration.node.kind !== "let") return null;
+    const init = declarator.node.init;
+    if (!init) return null;
+    const literal = literalInitText(init);
+    if (literal === null) return null;
+    const loc = init.loc?.start;
+    if (!loc) return null;
+    return {
+      kind: "local-const",
+      name,
+      // The init lives in the SAME file being transformed by construction —
+      // `scope.getBinding` never crosses a file boundary — so the caller's
+      // own `file` (computed once per visited node) is correct here too.
+      file: currentFile,
+      line: loc.line,
+      col: loc.column + 1,
+      literal,
+      // FE MINOR-5: how many places in the FILE read this const — every
+      // reference, not only the one this call is describing. `refs > 1`
+      // means one initializer feeds more than one rendered element, so a
+      // consumer must warn/refuse rather than treat a rewrite as scoped to
+      // just this usage (see `PropSource`'s docstring for the full contract).
+      refs: binding.referencePaths.length
+    };
+  }
+  function resolvableSameFileBinding(name, scope) {
+    const binding = scope.getBinding(name);
+    if (!binding) return null;
+    if (!binding.constant) return null;
+    const bp = binding.path;
+    if (bp.isImportSpecifier() || bp.isImportDefaultSpecifier() || bp.isImportNamespaceSpecifier()) {
+      return null;
+    }
+    return binding;
+  }
+  function memberChain(expr) {
+    const path2 = [];
+    let current = expr;
+    while (t.isMemberExpression(current)) {
+      if (current.computed) return null;
+      if (!t.isIdentifier(current.property)) return null;
+      path2.unshift(current.property.name);
+      current = current.object;
+    }
+    if (!t.isIdentifier(current)) return null;
+    return { root: current.name, path: path2 };
+  }
+  let currentFile = "";
+  function describeSource(expr, scope) {
+    if (t.isIdentifier(expr)) {
+      const binding = resolvableSameFileBinding(expr.name, scope);
+      if (!binding) return { kind: "other" };
+      const local = describeLocalConstSource(expr.name, binding);
+      if (local) return local;
+      return { kind: "identifier", name: expr.name };
+    }
+    if (t.isMemberExpression(expr) && !expr.computed) {
+      const chain = memberChain(expr);
+      if (chain && resolvableSameFileBinding(chain.root, scope)) {
+        return { kind: "member", root: chain.root, path: chain.path };
+      }
+    }
+    return { kind: "other" };
+  }
+  function isStaticPropsLiteral(expr) {
+    return t.isStringLiteral(expr) || t.isNumericLiteral(expr) || t.isBooleanLiteral(expr) || t.isNullLiteral(expr);
+  }
+  function describeChildrenSource(opening) {
+    const elementPath = opening.parentPath;
+    if (!elementPath || !elementPath.isJSXElement()) return null;
+    const children = elementPath.node.children;
+    if (children.length !== 1) return null;
+    const [only] = children;
+    if (!t.isJSXExpressionContainer(only)) return null;
+    if (t.isJSXEmptyExpression(only.expression)) return null;
+    return describeSource(only.expression, opening.scope);
+  }
+  function collectPropSources(attrs, scope) {
+    const entries = [];
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      const name = t.isJSXIdentifier(attr.name) ? attr.name.name : `${attr.name.namespace.name}:${attr.name.name.name}`;
+      if (NON_BINDING_ATTRS.has(name)) continue;
+      const value = attr.value;
+      if (!t.isJSXExpressionContainer(value)) continue;
+      const expression = value.expression;
+      if (t.isJSXEmptyExpression(expression)) continue;
+      if (isStaticPropsLiteral(expression)) continue;
+      entries.push([name, describeSource(expression, scope)]);
+    }
+    return entries;
+  }
+  function propSourceToAst(source) {
+    switch (source.kind) {
+      case "identifier":
+        return t.objectExpression([
+          t.objectProperty(t.identifier("kind"), t.stringLiteral("identifier")),
+          t.objectProperty(t.identifier("name"), t.stringLiteral(source.name))
+        ]);
+      case "local-const":
+        return t.objectExpression([
+          t.objectProperty(t.identifier("kind"), t.stringLiteral("local-const")),
+          t.objectProperty(t.identifier("name"), t.stringLiteral(source.name)),
+          t.objectProperty(t.identifier("file"), t.stringLiteral(source.file)),
+          t.objectProperty(t.identifier("line"), t.numericLiteral(source.line)),
+          t.objectProperty(t.identifier("col"), t.numericLiteral(source.col)),
+          t.objectProperty(
+            t.identifier("literal"),
+            source.literal === null ? t.nullLiteral() : t.stringLiteral(source.literal)
+          ),
+          t.objectProperty(t.identifier("refs"), t.numericLiteral(source.refs))
+        ]);
+      case "member":
+        return t.objectExpression([
+          t.objectProperty(t.identifier("kind"), t.stringLiteral("member")),
+          t.objectProperty(t.identifier("root"), t.stringLiteral(source.root)),
+          t.objectProperty(
+            t.identifier("path"),
+            t.arrayExpression(source.path.map((segment) => t.stringLiteral(segment)))
+          )
+        ]);
+      case "other":
+      default:
+        return t.objectExpression([t.objectProperty(t.identifier("kind"), t.stringLiteral("other"))]);
+    }
+  }
+  function isMetaStripSpreadExpression(arg) {
+    if (!t.isCallExpression(arg)) return false;
+    if (!t.isArrowFunctionExpression(arg.callee)) return false;
+    const [firstParam] = arg.callee.params;
+    if (!firstParam || !t.isObjectPattern(firstParam)) return false;
+    return firstParam.properties.some((prop) => {
+      if (!t.isObjectProperty(prop)) return false;
+      if (!t.isIdentifier(prop.key)) return false;
+      return prop.key.name === "__editorMeta";
+    });
+  }
+  function hasTruthyAsChildProp(attrs) {
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr) || !t.isJSXIdentifier(attr.name, { name: "asChild" })) {
+        continue;
+      }
+      if (attr.value == null) return true;
+      if (t.isJSXExpressionContainer(attr.value)) {
+        const expr = attr.value.expression;
+        if (t.isBooleanLiteral(expr)) return expr.value;
+      }
+      if (t.isStringLiteral(attr.value)) return attr.value.value !== "false";
+      return true;
+    }
+    return false;
+  }
+  function buildPayloadFilter(payload) {
+    return t.callExpression(
+      t.arrowFunctionExpression(
+        [
+          t.objectPattern([
+            t.objectProperty(
+              t.identifier("__editorMeta"),
+              t.identifier("_$em"),
+              false,
+              false
+            ),
+            t.objectProperty(
+              t.stringLiteral(KIT_SLOT_ATTR),
+              t.identifier("_$ks"),
+              false,
+              false
+            ),
+            t.restElement(t.identifier("_$r"))
+          ])
+        ],
+        t.identifier("_$r")
+      ),
+      [t.objectExpression([t.spreadElement(payload)])]
+    );
+  }
+  function sanitizeSpreadAttributes(attrs) {
+    for (const attr of attrs) {
+      if (!t.isJSXSpreadAttribute(attr)) continue;
+      if (isMetaStripSpreadExpression(attr.argument)) continue;
+      attr.argument = buildPayloadFilter(attr.argument);
+    }
+  }
+  function consumeKitSlot(attrs) {
+    let slot = null;
+    let found = false;
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      if (!t.isJSXIdentifier(attr.name, { name: KIT_SLOT_ATTR })) continue;
+      found = true;
+      if (slot !== null) continue;
+      const { value } = attr;
+      if (t.isStringLiteral(value)) {
+        slot = normalizeSlot(value.value);
+      } else if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
+        slot = normalizeSlot(value.expression.value);
+      }
+    }
+    if (!found) return { slot: null, found: false, attrs };
+    return {
+      slot,
+      found: true,
+      attrs: attrs.filter(
+        (attr) => !(t.isJSXAttribute(attr) && t.isJSXIdentifier(attr.name, { name: KIT_SLOT_ATTR }))
+      )
+    };
+  }
+  function getFunctionName(fn) {
+    const node = fn.node;
+    if (t.isFunctionDeclaration(node) && node.id) return node.id.name;
+    if (t.isFunctionExpression(node) && node.id) return node.id.name;
+    const parent = fn.parentPath;
+    if (parent?.isVariableDeclarator() && t.isIdentifier(parent.node.id)) {
+      return parent.node.id.name;
+    }
+    return null;
+  }
+  function buildPropMap(pattern) {
+    const map = /* @__PURE__ */ new Map();
+    for (const prop of pattern.properties) {
+      if (!t.isObjectProperty(prop) || prop.computed) continue;
+      const key = t.isIdentifier(prop.key) ? prop.key.name : t.isStringLiteral(prop.key) ? prop.key.value : null;
+      if (!key) continue;
+      const value = prop.value;
+      if (t.isIdentifier(value)) {
+        map.set(value.name, key);
+      } else if (t.isAssignmentPattern(value) && t.isIdentifier(value.left)) {
+        map.set(value.left.name, key);
+      }
+    }
+    return map;
+  }
+  function restParamName(pattern) {
+    for (const prop of pattern.properties) {
+      if (!t.isRestElement(prop)) continue;
+      if (t.isIdentifier(prop.argument)) return prop.argument.name;
+      return null;
+    }
+    return null;
+  }
+  function resolvePropContext(path2) {
+    let fn = path2.getFunctionParent();
+    while (fn) {
+      const [first] = fn.node.params;
+      if (first && t.isObjectPattern(first) && fn.scope.parent === fn.scope.getProgramParent()) {
+        return {
+          componentScope: fn.scope,
+          propMap: buildPropMap(first),
+          componentName: getFunctionName(fn),
+          restParam: restParamName(first),
+          componentPath: fn
+        };
+      }
+      fn = fn.getFunctionParent();
+    }
+    return null;
+  }
+  function resolveProp(name, scope, ctx) {
+    const prop = ctx.propMap.get(name);
+    if (!prop) return null;
+    const binding = scope.getBinding(name);
+    if (!binding) return null;
+    if (binding.scope !== ctx.componentScope) return null;
+    if (!binding.constant) return null;
+    return prop;
+  }
+  function isScopeWithinComponent(scope, ctx) {
+    let current = scope;
+    while (current) {
+      if (current === ctx.componentScope) return true;
+      current = current.parent;
+    }
+    return false;
+  }
+  function resolveLocalConstInit(name, scope, ctx) {
+    const binding = scope.getBinding(name);
+    if (!binding) return null;
+    if (!binding.constant) return null;
+    const declarator = binding.path;
+    if (!declarator.isVariableDeclarator()) return null;
+    if (!isScopeWithinComponent(binding.scope, ctx)) return null;
+    const init = declarator.node.init;
+    if (!init || !t.isExpression(init)) return null;
+    return { init, scope: declarator.scope };
+  }
+  function isStaticStringLiteral(node) {
+    if (t.isStringLiteral(node)) return true;
+    return t.isTemplateLiteral(node) && node.expressions.length === 0;
+  }
+  function collectPropIdentifiers(node, scope, ctx, out = []) {
+    if (!node) return out;
+    const visit = (child) => collectPropIdentifiers(child, scope, ctx, out);
+    if (t.isIdentifier(node)) {
+      const prop = resolveProp(node.name, scope, ctx);
+      if (prop && !out.includes(prop)) out.push(prop);
+      return out;
+    }
+    if (t.isMemberExpression(node) || t.isOptionalMemberExpression(node)) {
+      visit(node.object);
+      if (node.computed) visit(node.property);
+      return out;
+    }
+    if (t.isCallExpression(node) || t.isOptionalCallExpression(node)) {
+      visit(node.callee);
+      node.arguments.forEach((arg) => visit(arg));
+      return out;
+    }
+    if (t.isTemplateLiteral(node)) {
+      node.expressions.forEach((expr) => visit(expr));
+      return out;
+    }
+    if (t.isConditionalExpression(node)) {
+      visit(node.test);
+      visit(node.consequent);
+      visit(node.alternate);
+      return out;
+    }
+    if (t.isLogicalExpression(node) || t.isBinaryExpression(node)) {
+      visit(node.left);
+      visit(node.right);
+      return out;
+    }
+    if (t.isUnaryExpression(node) || t.isAwaitExpression(node)) {
+      visit(node.argument);
+      return out;
+    }
+    if (t.isArrayExpression(node)) {
+      node.elements.forEach((el) => visit(el));
+      return out;
+    }
+    if (t.isObjectExpression(node)) {
+      for (const prop of node.properties) {
+        if (t.isObjectProperty(prop)) {
+          if (prop.computed) visit(prop.key);
+          visit(prop.value);
+        } else if (t.isSpreadElement(prop)) {
+          visit(prop.argument);
+        }
+      }
+      return out;
+    }
+    if (t.isSpreadElement(node)) {
+      visit(node.argument);
+      return out;
+    }
+    if (t.isTSAsExpression(node) || t.isTSNonNullExpression(node) || t.isTypeCastExpression(node)) {
+      visit(node.expression);
+      return out;
+    }
+    return out;
+  }
+  function classifyExpression(expr, scope, ctx, hop) {
+    if (t.isIdentifier(expr)) {
+      const prop = resolveProp(expr.name, scope, ctx);
+      if (prop) return { kind: "direct", prop };
+      if (hop > 0) return null;
+      const local = resolveLocalConstInit(expr.name, scope, ctx);
+      if (!local) return null;
+      const inner = classifyExpression(local.init, local.scope, ctx, hop + 1);
+      if (!inner) return null;
+      return { kind: inner.kind === "formatted" ? "formatted" : "derived", prop: inner.prop };
+    }
+    if (t.isLogicalExpression(expr) && (expr.operator === "||" || expr.operator === "??") && isStaticStringLiteral(expr.right)) {
+      const left = classifyExpression(expr.left, scope, ctx, hop);
+      if (!left) return null;
+      return { kind: left.kind === "formatted" ? "formatted" : "derived", prop: left.prop };
+    }
+    const props = collectPropIdentifiers(expr, scope, ctx);
+    return props.length > 0 ? { kind: "formatted", prop: props[0] } : null;
+  }
+  function unwrapSanitizedSpread(arg) {
+    if (!t.isCallExpression(arg)) return arg;
+    if (!isMetaStripSpreadExpression(arg)) return arg;
+    if (arg.arguments.length !== 1) return arg;
+    const [payload] = arg.arguments;
+    if (!t.isObjectExpression(payload) || payload.properties.length !== 1) return arg;
+    const [only] = payload.properties;
+    if (!t.isSpreadElement(only)) return arg;
+    return only.argument;
+  }
+  function forwardsOwnerRestChildren(opening, ctx) {
+    if (ctx.restParam === null) return false;
+    const elementPath = opening.parentPath;
+    if (!elementPath || !elementPath.isJSXElement()) return false;
+    if (meaningfulChildren(t, elementPath.node.children).length > 0) return false;
+    let spreadsRest = 0;
+    for (const attr of opening.node.attributes) {
+      if (t.isJSXAttribute(attr)) {
+        if (t.isJSXIdentifier(attr.name, { name: "children" })) return false;
+        continue;
+      }
+      if (!t.isJSXSpreadAttribute(attr)) continue;
+      const payload = unwrapSanitizedSpread(attr.argument);
+      if (!t.isIdentifier(payload, { name: ctx.restParam })) return false;
+      spreadsRest += 1;
+    }
+    if (spreadsRest !== 1) return false;
+    const binding = opening.scope.getBinding(ctx.restParam);
+    if (!binding) return false;
+    if (binding.scope !== ctx.componentScope) return false;
+    return binding.constant;
+  }
+  const restForwarderCounts = /* @__PURE__ */ new WeakMap();
+  function countRestForwarders(ctx) {
+    const cached = restForwarderCounts.get(ctx.componentPath.node);
+    if (cached !== void 0) return cached;
+    let count = 0;
+    ctx.componentPath.traverse({
+      JSXOpeningElement(inner) {
+        if (forwardsOwnerRestChildren(inner, ctx)) count += 1;
+      }
+    });
+    restForwarderCounts.set(ctx.componentPath.node, count);
+    return count;
+  }
+  function collectPropBindings(path2, attrs) {
+    const ctx = resolvePropContext(path2);
+    if (!ctx || ctx.propMap.size === 0 && ctx.restParam === null) {
+      return { bindings: [], owner: null };
+    }
+    if (ctx.componentName === null) return { bindings: [], owner: null };
+    const scope = path2.scope;
+    const bindings = [];
+    if (forwardsOwnerRestChildren(path2, ctx) && countRestForwarders(ctx) === 1) {
+      bindings.push({ target: "children", prop: "children", kind: "direct" });
+    }
+    const elementPath = path2.parentPath;
+    if (elementPath && elementPath.isJSXElement()) {
+      const children = meaningfulChildren(t, elementPath.node.children);
+      const isSoleChild = children.length === 1;
+      for (const child of children) {
+        if (!t.isJSXExpressionContainer(child)) continue;
+        const expression = child.expression;
+        if (t.isJSXEmptyExpression(expression)) continue;
+        const verdict = classifyExpression(expression, scope, ctx, 0);
+        if (!verdict) continue;
+        bindings.push({
+          target: "children",
+          prop: verdict.prop,
+          kind: isSoleChild ? verdict.kind : "formatted"
+        });
+      }
+    }
+    for (const attr of attrs) {
+      if (!t.isJSXAttribute(attr)) continue;
+      const name = t.isJSXIdentifier(attr.name) ? attr.name.name : `${attr.name.namespace.name}:${attr.name.name.name}`;
+      if (NON_BINDING_ATTRS.has(name)) continue;
+      const value = attr.value;
+      if (!t.isJSXExpressionContainer(value)) continue;
+      const expression = value.expression;
+      if (t.isJSXEmptyExpression(expression)) continue;
+      const verdict = classifyExpression(expression, scope, ctx, 0);
+      if (!verdict) continue;
+      bindings.push({
+        target: `attr:${name}`,
+        prop: verdict.prop,
+        // M2b: machine-contract attributes are reported, never offered.
+        kind: isNonContentAttribute(name) ? "formatted" : verdict.kind
+      });
+    }
+    return { bindings, owner: bindings.length > 0 ? ctx.componentName : null };
+  }
+  function propBindingsToAst(bindings) {
+    return t.arrayExpression(
+      bindings.map(
+        (binding) => t.objectExpression([
+          t.objectProperty(t.identifier("target"), t.stringLiteral(binding.target)),
+          t.objectProperty(t.identifier("prop"), t.stringLiteral(binding.prop)),
+          t.objectProperty(t.identifier("kind"), t.stringLiteral(binding.kind))
+        ])
+      )
+    );
+  }
+  return {
+    name: "babel-plugin-editor-meta",
+    visitor: {
+      CallExpression(path2, state) {
+        const filename = state.filename ?? "";
+        if (fileExclude.test(filename)) return;
+        const callee = path2.node.callee;
+        let isCreateElement = false;
+        let isCloneElement = false;
+        if (t.isIdentifier(callee, { name: "createElement" })) {
+          isCreateElement = true;
+        } else if (t.isMemberExpression(callee) && t.isIdentifier(callee.property, { name: "createElement" })) {
+          isCreateElement = true;
+        } else if (t.isIdentifier(callee, { name: "cloneElement" })) {
+          isCloneElement = true;
+        } else if (t.isMemberExpression(callee) && t.isIdentifier(callee.property, { name: "cloneElement" })) {
+          isCloneElement = true;
+        }
+        if (!isCreateElement && !isCloneElement) return;
+        const args = path2.node.arguments;
+        if (args.length < 2) return;
+        if (isCreateElement && !t.isStringLiteral(args[0])) return;
+        const propsArg = args[1];
+        if (!propsArg || t.isNullLiteral(propsArg)) return;
+        if (!t.isExpression(propsArg)) return;
+        if (isMetaStripSpreadExpression(propsArg)) return;
+        args[1] = buildPayloadFilter(propsArg);
+      },
+      JSXOpeningElement(path2, state) {
+        const consumed = consumeKitSlot(path2.node.attributes);
+        path2.node.attributes = consumed.attrs;
+        const slot = consumed.slot;
+        const hasSlotAttr = consumed.found;
+        const filename = state.filename ?? "";
+        if (fileExclude.test(filename)) return;
+        const existing = path2.node.attributes.find(
+          (a) => t.isJSXAttribute(a) && t.isJSXIdentifier(a.name, { name: "__editorMeta" })
+        );
+        if (existing) return;
+        const loc = path2.node.loc?.start;
+        if (!loc) return;
+        const root = state.file.opts.root ?? "";
+        const file = root ? nodePath.relative(root, filename) : filename;
+        currentFile = file;
+        const line = loc.line;
+        const col = loc.column + 1;
+        const componentName = getJSXTagName(path2.node);
+        if (!componentName) return;
+        const isHostLikeMemberExpression = isHostLikeMemberExpressionName(path2.node.name);
+        const isHostElement = componentName[0] === componentName[0].toLowerCase();
+        sanitizeSpreadAttributes(path2.node.attributes);
+        if (hasTruthyAsChildProp(path2.node.attributes)) {
+          return;
+        }
+        let rootName = null;
+        if (isIntrinsicTagName(path2.node.name)) {
+          rootName = null;
+        } else if (t.isJSXIdentifier(path2.node.name)) {
+          rootName = path2.node.name.name;
+        } else if (t.isJSXMemberExpression(path2.node.name)) {
+          let cur = path2.node.name;
+          while (t.isJSXMemberExpression(cur)) cur = cur.object;
+          if (t.isJSXIdentifier(cur)) rootName = cur.name;
+        }
+        if (rootName) {
+          const binding = path2.scope.getBinding(rootName);
+          if (binding) {
+            const bp = binding.path;
+            if (bp.isImportSpecifier() || bp.isImportDefaultSpecifier() || bp.isImportNamespaceSpecifier()) {
+              if (!instrumentImported) return;
+              const decl = bp.parentPath;
+              if (decl?.isImportDeclaration()) {
+                const src = decl.node.source.value;
+                if (isPackageImport(src) && !isHostLikeMemberExpression) return;
+              }
+            }
+            const programScope = path2.scope.getProgramParent();
+            if (binding.scope !== programScope && !isStaticNamespaceDestructure(binding))
+              return;
+          }
+        }
+        const vid = readVidAttr(path2.node.attributes);
+        if (!vid && onMissingVid && !missingVidWarned) {
+          missingVidWarned = true;
+          onMissingVid({ file, line, col, componentName, instrumented: allowLegacyIds });
+        }
+        if (!vid && !allowLegacyIds) return;
+        const nodeId = vid ?? computeNodeId(file, line, col, componentName);
+        const isKitOrigin = origin === "kit" || hasSlotAttr;
+        const movable = isKitOrigin ? false : isMovable(path2);
+        const parentNodeId = getParentNodeId(path2, file);
+        const staticPropsObj = extractStaticProps(path2.node.attributes);
+        const { bindings, owner } = collectPropBindings(path2, path2.node.attributes);
+        const metaObj = t.objectExpression([
+          t.objectProperty(t.identifier("nodeId"), t.stringLiteral(nodeId)),
+          t.objectProperty(t.identifier("file"), t.stringLiteral(file)),
+          t.objectProperty(t.identifier("line"), t.numericLiteral(line)),
+          t.objectProperty(t.identifier("col"), t.numericLiteral(col)),
+          t.objectProperty(t.identifier("componentName"), t.stringLiteral(componentName)),
+          t.objectProperty(
+            t.identifier("staticProps"),
+            staticPropsObj ?? t.nullLiteral()
+          ),
+          t.objectProperty(t.identifier("movable"), t.booleanLiteral(movable)),
+          t.objectProperty(
+            t.identifier("parentNodeId"),
+            parentNodeId ? t.stringLiteral(parentNodeId) : t.nullLiteral()
+          )
+        ]);
+        if (vid) {
+          const dynamicType = computeDynamicType(path2);
+          const isChrome = computeIsChrome(file, path2);
+          const containerKind = computeContainerKind(path2);
+          const isKitComponentContainer = isKitComponentTagName(path2);
+          const lockReason = computeLockReason(isKitOrigin, isChrome, dynamicType);
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("vid"), t.stringLiteral(vid)),
+            t.objectProperty(t.identifier("isKitOrigin"), t.booleanLiteral(isKitOrigin)),
+            t.objectProperty(t.identifier("dynamicType"), t.stringLiteral(dynamicType)),
+            t.objectProperty(t.identifier("isChrome"), t.booleanLiteral(isChrome)),
+            t.objectProperty(t.identifier("containerKind"), t.stringLiteral(containerKind))
+          );
+          if (isKitComponentContainer) {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("isKitContainer"), t.booleanLiteral(true))
+            );
+          }
+          if (lockReason) {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("lockReason"), t.stringLiteral(lockReason))
+            );
+          }
+        }
+        if (isKitOrigin) {
+          if (templateOrigin) {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("template"), t.booleanLiteral(true))
+            );
+          } else {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("origin"), t.stringLiteral("kit"))
+            );
+          }
+        }
+        if (slot !== null) {
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("slot"), t.stringLiteral(slot))
+          );
+        }
+        if (!isHostElement) {
+          const childrenText = describeChildrenText(path2);
+          metaObj.properties.push(
+            t.objectProperty(
+              t.identifier("childrenText"),
+              childrenText === null ? t.nullLiteral() : t.stringLiteral(childrenText)
+            )
+          );
+          const childrenSource = describeChildrenSource(path2);
+          if (childrenSource) {
+            metaObj.properties.push(
+              t.objectProperty(t.identifier("childrenSource"), propSourceToAst(childrenSource))
+            );
+          }
+        }
+        if (bindings.length > 0) {
+          metaObj.properties.push(
+            t.objectProperty(t.identifier("propBindings"), propBindingsToAst(bindings))
+          );
+          metaObj.properties.push(
+            t.objectProperty(
+              t.identifier("propOwner"),
+              owner ? t.stringLiteral(owner) : t.nullLiteral()
+            )
+          );
+        }
+        const propSourceEntries = collectPropSources(path2.node.attributes, path2.scope);
+        if (propSourceEntries.length > 0) {
+          metaObj.properties.push(
+            t.objectProperty(
+              t.identifier("propSources"),
+              t.objectExpression(
+                propSourceEntries.map(
+                  ([name, source]) => t.objectProperty(t.stringLiteral(name), propSourceToAst(source))
+                )
+              )
+            )
+          );
+        }
+        if (isHostElement && includeHostSourceRef) {
+          path2.node.attributes.push(
+            t.jsxAttribute(
+              t.jsxIdentifier("data-archie-source-ref"),
+              t.stringLiteral(`${file}::${line}::${col}`)
+            )
+          );
+        }
+        const metaThunk = t.arrowFunctionExpression([], metaObj);
+        path2.node.attributes.push(
+          t.jsxAttribute(
+            t.jsxIdentifier("__editorMeta"),
+            t.jsxExpressionContainer(metaThunk)
+          )
+        );
+      }
+    }
+  };
+}
+
+export {
+  __dirname,
+  VID_ATTR,
+  meaningfulChildren,
+  babelPluginEditorMeta
+};