@archie/devtools 0.1.10 → 0.1.12

package/dist/index.js

@@ -204,8 +204,1371 @@ function babelPluginDndAuto({ types: t }, opts = {}) {
   };
 }
 
+// node_modules/@8base-archie/editor-protocol/dist/ids.js
+var import_zod = require("zod");
+var VID_ATTR = "data-vid";
+var VID_PATTERN = /^[a-z0-9]{6,8}$/;
+var Vid = import_zod.z.string().regex(VID_PATTERN);
+
+// node_modules/@8base-archie/editor-protocol/dist/node-meta.js
+var import_zod2 = require("zod");
+var LockReasonSchema = import_zod2.z.enum([
+  "KIT_INTERNAL",
+  "DYNAMIC_ARRAY",
+  "DYNAMIC_CONDITIONAL",
+  "CHROME_STRUCTURAL",
+  "DATA_TABLE",
+  "EXPRESSION_CONTAINER"
+]);
+var DynamicTypeSchema = import_zod2.z.enum(["STATIC", "ARRAY", "CONDITIONAL"]);
+var ContainerKindSchema = import_zod2.z.enum(["plain", "expression", "none"]);
+var NodeMetaSchema = import_zod2.z.object({
+  vid: Vid,
+  file: import_zod2.z.string().min(1),
+  component: import_zod2.z.string().min(1).optional(),
+  dynamicType: DynamicTypeSchema,
+  isKitOrigin: import_zod2.z.boolean(),
+  isChrome: import_zod2.z.boolean(),
+  containerKind: ContainerKindSchema,
+  lockReason: LockReasonSchema.optional(),
+  usageVid: Vid.optional(),
+  usageFile: import_zod2.z.string().min(1).optional()
+}).strict();
+
+// node_modules/@8base-archie/editor-protocol/dist/ops.js
+var import_zod3 = require("zod");
+var literalValue = import_zod3.z.union([import_zod3.z.string(), import_zod3.z.number(), import_zod3.z.boolean(), import_zod3.z.null()]);
+var opScopeSchema = import_zod3.z.enum(["instance", "definition"]);
+var setTextHintSchema = import_zod3.z.object({
+  rowId: import_zod3.z.string().min(1).optional(),
+  rendered: import_zod3.z.string().optional()
+}).strict();
+var setTextTargetSchema = import_zod3.z.enum(["auto", "data", "source"]);
+var setTextOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("setText"),
+  vid: Vid,
+  text: import_zod3.z.string(),
+  hint: setTextHintSchema.optional(),
+  scope: opScopeSchema.optional(),
+  target: setTextTargetSchema.optional()
+}).strict();
+var setClassNameOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("setClassName"),
+  vid: Vid,
+  add: import_zod3.z.array(import_zod3.z.string()),
+  remove: import_zod3.z.array(import_zod3.z.string()),
+  policy: import_zod3.z.enum(["static", "cn"]),
+  scope: opScopeSchema.optional()
+}).strict();
+var setStyleOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("setStyle"),
+  vid: Vid,
+  decls: import_zod3.z.record(import_zod3.z.string(), import_zod3.z.union([import_zod3.z.string(), import_zod3.z.null()])),
+  scope: opScopeSchema.optional(),
+  important: import_zod3.z.boolean().optional()
+}).strict();
+var setAttributeOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("setAttribute"),
+  vid: Vid,
+  name: import_zod3.z.string().min(1),
+  value: import_zod3.z.union([import_zod3.z.string(), import_zod3.z.null()])
+}).strict();
+var setPropOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("setProp"),
+  vid: Vid,
+  name: import_zod3.z.string().min(1),
+  literal: literalValue,
+  scope: opScopeSchema.optional()
+}).strict();
+var removeOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("remove"),
+  vid: Vid
+}).strict();
+var detachInstanceOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("detachInstance"),
+  vid: Vid
+}).strict();
+var setLocalConstOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("setLocalConst"),
+  file: import_zod3.z.string().min(1),
+  name: import_zod3.z.string().min(1),
+  literal: import_zod3.z.string()
+}).strict();
+var screenRootTargetSchema = import_zod3.z.object({ file: import_zod3.z.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 = import_zod3.z.object({
+  kind: import_zod3.z.literal("move"),
+  targetVid: Vid,
+  containerVid: Vid.optional(),
+  screenRoot: screenRootTargetSchema.optional(),
+  index: import_zod3.z.number().int().nonnegative()
+}).strict();
+var insertSourceSchema = import_zod3.z.union([
+  import_zod3.z.object({ paletteId: import_zod3.z.string().min(1) }).strict(),
+  import_zod3.z.object({ snippet: import_zod3.z.string().min(1) }).strict()
+]);
+var insertOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("insert"),
+  containerVid: Vid.optional(),
+  screenRoot: screenRootTargetSchema.optional(),
+  index: import_zod3.z.number().int().nonnegative(),
+  source: insertSourceSchema,
+  proposedVids: import_zod3.z.array(Vid).optional()
+}).strict();
+var resizeOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("resize"),
+  vid: Vid,
+  width: import_zod3.z.number().optional(),
+  height: import_zod3.z.number().optional()
+}).strict();
+var shellConfigOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("shellConfig"),
+  patch: import_zod3.z.record(import_zod3.z.string(), import_zod3.z.unknown())
+}).strict();
+var sliceCellOpSchema = import_zod3.z.object({
+  kind: import_zod3.z.literal("sliceCell"),
+  slug: import_zod3.z.string().min(1),
+  entity: import_zod3.z.string().min(1),
+  rowId: import_zod3.z.string().min(1),
+  field: import_zod3.z.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 = import_zod3.z.discriminatedUnion("kind", [
+  import_zod3.z.object({
+    kind: import_zod3.z.literal("lucide"),
+    name: import_zod3.z.string().min(1).max(64).regex(LUCIDE_ICON_NAME_RE, "lucide icon name must be a PascalCase identifier")
+  }).strict(),
+  import_zod3.z.object({
+    kind: import_zod3.z.literal("svg"),
+    svg: import_zod3.z.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 = import_zod3.z.object({
+  kind: import_zod3.z.literal("setIcon"),
+  vid: Vid,
+  icon: setIconValueSchema
+}).strict();
+var OpSchema = import_zod3.z.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: import_zod3.z.ZodIssueCode.custom, message: EXACTLY_ONE_TARGET_MESSAGE, path: ["containerVid"] });
+  }
+});
+var OpLogSchema = import_zod3.z.array(OpSchema).min(1);
+
+// node_modules/@8base-archie/editor-protocol/dist/apply-ops.js
+var import_zod4 = require("zod");
+var RefusalCodeSchema = import_zod4.z.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 = import_zod4.z.discriminatedUnion("kind", [
+  import_zod4.z.object({ kind: import_zod4.z.literal("source") }).strict(),
+  import_zod4.z.object({
+    kind: import_zod4.z.literal("slice"),
+    entity: import_zod4.z.string().min(1),
+    rowId: import_zod4.z.string().min(1),
+    field: import_zod4.z.string().min(1),
+    slugs: import_zod4.z.array(import_zod4.z.string().min(1)).min(1)
+  }).strict()
+]);
+var ApplyOpsFileRefSchema = import_zod4.z.object({
+  path: import_zod4.z.string().min(1),
+  baseSourceHash: import_zod4.z.string().min(1)
+}).strict();
+var ApplyOpsRequestSchema = import_zod4.z.object({
+  projectId: import_zod4.z.string().min(1),
+  protocolVersion: import_zod4.z.string().min(1),
+  dialect: import_zod4.z.enum(["kit-d", "vite-tsx"]),
+  files: import_zod4.z.array(ApplyOpsFileRefSchema).min(1),
+  baseRevisionId: import_zod4.z.string().min(1),
+  ops: import_zod4.z.array(OpSchema).min(1),
+  clientOpLogId: import_zod4.z.string().min(1)
+}).strict();
+var ApplyOpsFileResultSchema = import_zod4.z.object({
+  path: import_zod4.z.string().min(1),
+  newSource: import_zod4.z.string(),
+  sourceHash: import_zod4.z.string().min(1)
+}).strict();
+var RefusedOpSchema = import_zod4.z.object({
+  opIndex: import_zod4.z.number().int().nonnegative(),
+  code: RefusalCodeSchema,
+  cause: import_zod4.z.string(),
+  vid: Vid.optional()
+}).strict();
+var AppliedTargetSchema = import_zod4.z.object({
+  opIndex: import_zod4.z.number().int().nonnegative(),
+  target: TextTargetSchema
+}).strict();
+var PropagationFailureSchema = import_zod4.z.object({
+  slug: import_zod4.z.string().min(1),
+  code: RefusalCodeSchema,
+  cause: import_zod4.z.string()
+}).strict();
+var DetachedComponentNodeSchema = import_zod4.z.object({
+  vid: Vid,
+  templateVid: Vid.optional(),
+  slot: import_zod4.z.string().min(1).optional()
+}).strict();
+var DetachedComponentSchema = import_zod4.z.object({
+  vid: Vid,
+  component: import_zod4.z.string().min(1),
+  nodes: import_zod4.z.array(DetachedComponentNodeSchema)
+}).strict();
+var PropagationStatusSchema = import_zod4.z.object({
+  jobId: import_zod4.z.string().min(1),
+  status: import_zod4.z.enum(["pending", "done", "failed"]),
+  slugs: import_zod4.z.array(import_zod4.z.string().min(1)),
+  failed: import_zod4.z.array(PropagationFailureSchema).optional(),
+  revisionId: import_zod4.z.string().min(1).optional()
+}).strict();
+var ApplyOpsPropagationSchema = import_zod4.z.object({
+  status: import_zod4.z.enum(["pending", "done", "failed"]),
+  jobId: import_zod4.z.string().min(1),
+  slugs: import_zod4.z.array(import_zod4.z.string().min(1)),
+  failed: import_zod4.z.array(PropagationFailureSchema).optional()
+}).strict();
+var ApplyOpsResponseSchema = import_zod4.z.object({
+  revisionId: import_zod4.z.string().min(1),
+  files: import_zod4.z.array(ApplyOpsFileResultSchema),
+  vidMap: import_zod4.z.record(import_zod4.z.string(), import_zod4.z.string()),
+  applied: import_zod4.z.array(import_zod4.z.number().int().nonnegative()),
+  refused: import_zod4.z.array(RefusedOpSchema),
+  gateFindings: import_zod4.z.array(import_zod4.z.unknown()),
+  appliedTargets: import_zod4.z.array(AppliedTargetSchema).optional(),
+  stylesheetChanged: import_zod4.z.boolean().optional(),
+  propagation: ApplyOpsPropagationSchema.optional(),
+  detached: import_zod4.z.array(DetachedComponentSchema).optional()
+}).strict();
+
+// node_modules/@8base-archie/editor-protocol/dist/capabilities.js
+var import_zod5 = require("zod");
+var CapabilitiesSchema = import_zod5.z.object({
+  inspect: import_zod5.z.boolean(),
+  dndMove: import_zod5.z.boolean(),
+  dndResize: import_zod5.z.boolean(),
+  vidIdentity: import_zod5.z.boolean(),
+  nodeMeta: import_zod5.z.boolean(),
+  hostControlledHistory: import_zod5.z.boolean(),
+  refusals: import_zod5.z.boolean(),
+  selectByVid: import_zod5.z.boolean().optional()
+}).strict();
+
+// node_modules/@8base-archie/editor-protocol/dist/runtime-messages.js
+var import_zod6 = require("zod");
+var SourceSchema = import_zod6.z.enum(["archie-devtools", "archie-app"]);
+var RectSchema = import_zod6.z.object({
+  x: import_zod6.z.number(),
+  y: import_zod6.z.number(),
+  width: import_zod6.z.number(),
+  height: import_zod6.z.number()
+}).strict();
+var helloMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("HELLO"),
+  protocolVersion: import_zod6.z.string().min(1),
+  devtoolsVersion: import_zod6.z.string().min(1),
+  capabilities: CapabilitiesSchema
+}).strict();
+var elementSelectedMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("ELEMENT_SELECTED"),
+  vid: Vid,
+  nodeMeta: NodeMetaSchema,
+  rect: RectSchema.optional()
+}).strict();
+var dragStartMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("DRAG_START"),
+  targetVid: Vid,
+  droppable: import_zod6.z.array(Vid)
+}).strict();
+var dropMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("DROP"),
+  targetVid: Vid,
+  containerVid: Vid,
+  screenRootFile: import_zod6.z.string().min(1).optional(),
+  index: import_zod6.z.number().int().nonnegative()
+}).strict();
+var refusedMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("REFUSED"),
+  code: import_zod6.z.union([RefusalCodeSchema, LockReasonSchema]),
+  cause: import_zod6.z.string(),
+  vid: Vid.optional()
+}).strict();
+var RuntimeMessageSchema = import_zod6.z.discriminatedUnion("type", [
+  helloMessageSchema,
+  elementSelectedMessageSchema,
+  dragStartMessageSchema,
+  dropMessageSchema,
+  refusedMessageSchema
+]);
+var selectMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("SELECT"),
+  vid: Vid
+}).strict();
+var previewOpMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("PREVIEW_OP"),
+  op: OpSchema
+}).strict();
+var setModeMessageSchema = import_zod6.z.object({
+  source: SourceSchema,
+  type: import_zod6.z.literal("SET_MODE"),
+  mode: import_zod6.z.enum(["inspect", "design", "off"])
+}).strict();
+var HostMessageSchema = import_zod6.z.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
+var import_zod7 = require("zod");
+var ComponentUsageSchema = import_zod7.z.object({
+  slug: import_zod7.z.string().min(1),
+  file: import_zod7.z.string().min(1),
+  vid: Vid
+}).strict();
+var ComponentUsagesSchema = import_zod7.z.object({
+  file: import_zod7.z.string().min(1),
+  component: import_zod7.z.string().min(1),
+  count: import_zod7.z.number().int().nonnegative(),
+  usages: import_zod7.z.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
-var import_editor_protocol = require("@8base-archie/editor-protocol");
 var nodePath = __toESM(require("path"));
 function meaningfulChildren(t, children) {
   return children.filter((child) => {
@@ -315,7 +1678,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
   function readVidAttr(attrs) {
     for (const attr of attrs) {
       if (!t.isJSXAttribute(attr)) continue;
-      if (!t.isJSXIdentifier(attr.name, { name: import_editor_protocol.VID_ATTR })) continue;
+      if (!t.isJSXIdentifier(attr.name, { name: VID_ATTR })) continue;
       const { value } = attr;
       let raw = null;
       if (t.isStringLiteral(value)) {
@@ -323,7 +1686,7 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
       } else if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) {
         raw = value.expression.value;
       }
-      if (raw !== null && import_editor_protocol.VID_PATTERN.test(raw)) return raw;
+      if (raw !== null && VID_PATTERN.test(raw)) return raw;
       return null;
     }
     return null;
@@ -1212,10 +2575,9 @@ function babelPluginEditorMeta({ types: t }, opts = {}) {
 }
 
 // src/babel-plugin-strip-data-vid.ts
-var import_editor_protocol2 = require("@8base-archie/editor-protocol");
 function isStaticDataVidAttribute(t, attr) {
   if (!t.isJSXAttribute(attr)) return false;
-  if (!t.isJSXIdentifier(attr.name, { name: import_editor_protocol2.VID_ATTR })) return false;
+  if (!t.isJSXIdentifier(attr.name, { name: VID_ATTR })) return false;
   const { value } = attr;
   if (t.isStringLiteral(value)) return true;
   if (t.isJSXExpressionContainer(value) && t.isStringLiteral(value.expression)) return true;