wensity 0.1.4 → 0.1.6

package/dist/index.js

@@ -1,12 +1,809 @@
 #!/usr/bin/env node
 
 // src/commands.ts
-import { mkdir as mkdir4, writeFile as writeFile4 } from "fs/promises";
-import { dirname as dirname5, join as join6 } from "path";
+import { mkdir as mkdir5, readFile as readFile5, writeFile as writeFile5 } from "fs/promises";
+import { dirname as dirname6, join as join6 } from "path";
+
+// ../wensity-preset/src/constants.ts
+var ICON_LIBRARIES = ["tabler", "lucide"];
+var RADIUS_PRESETS = ["none", "small", "medium", "large"];
+var BUILTIN_FONT_IDS = ["site", "system-sans", "system-mono"];
+var RADIUS_PRESET_CSS = {
+  none: "0px",
+  small: "0.5rem",
+  medium: "0.875rem",
+  large: "1.25rem"
+};
+var FONT_ID_EXPANSIONS = {
+  "site:sans": "var(--font-sans)",
+  "site:display": "var(--font-display)",
+  "site:mono": "var(--font-mono)",
+  "system-sans": "ui-sans-serif, system-ui, sans-serif",
+  "system-mono": "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace"
+};
+var CONTROL_SOLID_COLOR_KEYS = [
+  "controlSolid",
+  "controlSolidHover",
+  "controlSolidActive",
+  "controlSolidForeground"
+];
+var CONTROL_SOLID_CSS_VARS = {
+  controlSolid: "--primitive-control-solid",
+  controlSolidHover: "--primitive-control-solid-hover",
+  controlSolidActive: "--primitive-control-solid-active",
+  controlSolidForeground: "--primitive-control-solid-foreground"
+};
+var STYLE_OBJECT_KEYS = [
+  "iconLibrary",
+  "radius",
+  "fonts",
+  "colors",
+  "presetCode"
+];
+var FONT_ROLE_KEYS = ["sans", "display", "mono"];
+var COLOR_MODE_KEYS = ["light", "dark"];
+var HEX_COLOR_PATTERN = /^#(?:[0-9a-fA-F]{3}|[0-9a-fA-F]{6}|[0-9a-fA-F]{8})$/;
+var CUSTOM_FONT_PREFIX = "custom:";
+var CUSTOM_FONT_STACK_MAX_LENGTH = 120;
+var PRESET_CODEC_PREFIX = "wsty1";
+var PRESET_CODEC_MAX_DECODED_JSON_BYTES = 4 * 1024;
+var PRESET_CODEC_MAX_CODE_LENGTH = 6 * 1024;
+var CONFIG_SCHEMA_VERSION = 1;
+function isBuiltinFontId(value) {
+  return BUILTIN_FONT_IDS.includes(value);
+}
+function isIconLibrary(value) {
+  return ICON_LIBRARIES.includes(value);
+}
+function isRadiusPreset(value) {
+  return RADIUS_PRESETS.includes(value);
+}
+function isFontRoleValue(value) {
+  if (isBuiltinFontId(value)) return true;
+  return value.startsWith(CUSTOM_FONT_PREFIX) && value.length > CUSTOM_FONT_PREFIX.length;
+}
+
+// ../wensity-preset/src/defaults.ts
+var DEFAULT_STYLE_FONTS = {
+  sans: "site",
+  display: "site",
+  mono: "system-mono"
+};
+var DEFAULT_CONTROL_SOLID_LIGHT = {
+  controlSolid: "#24292d",
+  controlSolidHover: "#2c3237",
+  controlSolidActive: "#1e2326",
+  controlSolidForeground: "#ffffff"
+};
+var DEFAULT_CONTROL_SOLID_DARK = {
+  controlSolid: "#f5f3ee",
+  controlSolidHover: "#ffffff",
+  controlSolidActive: "#e8e4da",
+  controlSolidForeground: "#151719"
+};
+var DEFAULT_STYLE_CONFIG = {
+  iconLibrary: "tabler",
+  radius: "medium",
+  fonts: { ...DEFAULT_STYLE_FONTS },
+  colors: {
+    light: { ...DEFAULT_CONTROL_SOLID_LIGHT },
+    dark: { ...DEFAULT_CONTROL_SOLID_DARK }
+  }
+};
+function createDefaultStyleConfig() {
+  return {
+    iconLibrary: DEFAULT_STYLE_CONFIG.iconLibrary,
+    radius: DEFAULT_STYLE_CONFIG.radius,
+    fonts: { ...DEFAULT_STYLE_CONFIG.fonts },
+    colors: {
+      light: { ...DEFAULT_CONTROL_SOLID_LIGHT },
+      dark: { ...DEFAULT_CONTROL_SOLID_DARK }
+    }
+  };
+}
+
+// ../wensity-preset/src/schema.ts
+var fontRoleSchema = {
+  oneOf: [
+    { type: "string", enum: [...BUILTIN_FONT_IDS] },
+    {
+      type: "string",
+      pattern: `^${CUSTOM_FONT_PREFIX}.+`,
+      minLength: CUSTOM_FONT_PREFIX.length + 1
+    }
+  ]
+};
+var controlSolidColorsSchema = {
+  type: "object",
+  additionalProperties: false,
+  properties: Object.fromEntries(
+    CONTROL_SOLID_COLOR_KEYS.map((key) => [
+      key,
+      { type: "string", pattern: HEX_COLOR_PATTERN.source }
+    ])
+  )
+};
+var WENSITY_CONFIG_SCHEMA = {
+  $schema: "https://json-schema.org/draft/2020-12/schema",
+  $id: "https://ui.wensity.com/schema/wensity.json",
+  title: "Wensity CLI configuration",
+  type: "object",
+  additionalProperties: false,
+  properties: {
+    $schema: { type: "string" },
+    version: { type: "integer", const: 1 },
+    registry: { type: "string", format: "uri" },
+    components: { type: "string", minLength: 1 },
+    utils: { type: "string", minLength: 1 },
+    tailwind: {
+      type: "object",
+      additionalProperties: false,
+      properties: {
+        config: { type: "string" },
+        css: { type: "string" }
+      }
+    },
+    aliases: {
+      type: "object",
+      additionalProperties: false,
+      properties: {
+        components: { type: "string", minLength: 1 },
+        utils: { type: "string", minLength: 1 }
+      }
+    },
+    style: {
+      type: "object",
+      additionalProperties: false,
+      properties: {
+        iconLibrary: { type: "string", enum: [...ICON_LIBRARIES] },
+        radius: { type: "string", enum: [...RADIUS_PRESETS] },
+        fonts: {
+          type: "object",
+          additionalProperties: false,
+          properties: {
+            sans: fontRoleSchema,
+            display: fontRoleSchema,
+            mono: fontRoleSchema
+          }
+        },
+        colors: {
+          type: "object",
+          additionalProperties: false,
+          properties: {
+            light: controlSolidColorsSchema,
+            dark: controlSolidColorsSchema
+          }
+        },
+        presetCode: {
+          type: "string",
+          minLength: 1,
+          maxLength: PRESET_CODEC_MAX_CODE_LENGTH
+        }
+      }
+    }
+  },
+  required: ["registry", "components", "utils", "aliases"]
+};
+
+// ../wensity-preset/src/fonts.ts
+var ALLOWED_UNQUOTED_FONT_TOKENS = [
+  "ui-sans-serif",
+  "system-ui",
+  "sans-serif",
+  "monospace",
+  "ui-monospace",
+  "SFMono-Regular",
+  "Menlo",
+  "Monaco",
+  "Consolas",
+  "var(--font-sans)",
+  "var(--font-display)",
+  "var(--font-mono)"
+];
+var ALLOWED_UNQUOTED_SET = new Set(ALLOWED_UNQUOTED_FONT_TOKENS);
+var QUOTED_FAMILY_PATTERN = /^(["'])([A-Za-z0-9 -]+)\1$/;
+var CONTROL_OR_BREAKOUT_PATTERN = /[\u0000-\u001f\u007f;{}\\\n\r<>]|url\s*\(|@import|expression\s*\(|<\//i;
+function validateCustomFontStack(value, path) {
+  if (!value.startsWith(CUSTOM_FONT_PREFIX)) {
+    throw new PresetValidationError(`Expected custom font stack at ${path}.`, path);
+  }
+  const stack = value.slice(CUSTOM_FONT_PREFIX.length);
+  if (stack.length === 0) {
+    throw new PresetValidationError(`Empty custom font stack at ${path}.`, path);
+  }
+  if (stack.length > CUSTOM_FONT_STACK_MAX_LENGTH) {
+    throw new PresetValidationError(
+      `Custom font stack at ${path} exceeds ${CUSTOM_FONT_STACK_MAX_LENGTH} characters.`,
+      path
+    );
+  }
+  if (CONTROL_OR_BREAKOUT_PATTERN.test(stack)) {
+    throw new PresetValidationError(
+      `Custom font stack at ${path} contains forbidden characters or CSS breakout syntax.`,
+      path
+    );
+  }
+  const tokens = splitFontStackTokens(stack);
+  if (tokens.length === 0) {
+    throw new PresetValidationError(`Custom font stack at ${path} has no tokens.`, path);
+  }
+  for (const token of tokens) {
+    validateFontStackToken(token, path);
+  }
+  return value;
+}
+function splitFontStackTokens(stack) {
+  const tokens = [];
+  let current = "";
+  let quote = null;
+  for (let i = 0; i < stack.length; i += 1) {
+    const ch = stack[i];
+    if (quote) {
+      current += ch;
+      if (ch === quote) quote = null;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      current += ch;
+      continue;
+    }
+    if (ch === ",") {
+      const trimmed2 = current.trim();
+      if (trimmed2) tokens.push(trimmed2);
+      current = "";
+      continue;
+    }
+    current += ch;
+  }
+  if (quote) {
+    throw new PresetValidationError("Unterminated quoted font family in custom stack.", "fonts");
+  }
+  const trimmed = current.trim();
+  if (trimmed) tokens.push(trimmed);
+  return tokens;
+}
+function validateFontStackToken(token, path) {
+  if (QUOTED_FAMILY_PATTERN.test(token)) return;
+  if (ALLOWED_UNQUOTED_SET.has(token)) return;
+  throw new PresetValidationError(
+    `Invalid font token "${token}" at ${path}. Use a quoted family or an allowlisted keyword.`,
+    path
+  );
+}
+function expandFontRole(value, role) {
+  if (value.startsWith(CUSTOM_FONT_PREFIX)) {
+    validateCustomFontStack(value, `fonts.${role}`);
+    return value.slice(CUSTOM_FONT_PREFIX.length);
+  }
+  if (value === "site") {
+    if (role === "sans") return FONT_ID_EXPANSIONS["site:sans"];
+    if (role === "display") return FONT_ID_EXPANSIONS["site:display"];
+    return FONT_ID_EXPANSIONS["site:mono"];
+  }
+  if (value === "system-sans") return FONT_ID_EXPANSIONS["system-sans"];
+  if (value === "system-mono") return FONT_ID_EXPANSIONS["system-mono"];
+  if (isBuiltinFontId(value)) {
+    throw new PresetValidationError(`Unhandled built-in font id "${value}".`, `fonts.${role}`);
+  }
+  throw new PresetValidationError(`Invalid font role value at fonts.${role}.`, `fonts.${role}`);
+}
+
+// ../wensity-preset/src/validate.ts
+var FORBIDDEN_OBJECT_KEYS = ["__proto__", "constructor", "prototype"];
+var PresetValidationError = class extends Error {
+  path;
+  constructor(message, path = "style") {
+    super(message);
+    this.name = "PresetValidationError";
+    this.path = path;
+  }
+};
+function assertNoForbiddenObjectKeys(value, path) {
+  for (const key of FORBIDDEN_OBJECT_KEYS) {
+    if (Object.prototype.hasOwnProperty.call(value, key)) {
+      throw new PresetValidationError(`Forbidden key at ${path}.`, path);
+    }
+  }
+}
+function assertPlainObject(value, path) {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    throw new PresetValidationError(`Expected an object at ${path}.`, path);
+  }
+  assertNoForbiddenObjectKeys(value, path);
+}
+function assertAllowedKeys(value, allowed, path) {
+  const allowedSet = new Set(allowed);
+  for (const key of Object.keys(value)) {
+    if (!allowedSet.has(key)) {
+      throw new PresetValidationError(`Unknown key "${key}" at ${path}.`, `${path}.${key}`);
+    }
+  }
+}
+function validateHexColor(value, path) {
+  if (typeof value !== "string" || !HEX_COLOR_PATTERN.test(value)) {
+    throw new PresetValidationError(
+      `Invalid color at ${path}. Expected #RGB, #RRGGBB, or #RRGGBBAA.`,
+      path
+    );
+  }
+  return value;
+}
+function validateFontRole(value, path) {
+  if (typeof value !== "string" || !isFontRoleValue(value)) {
+    throw new PresetValidationError(
+      `Invalid font at ${path}. Expected site | system-sans | system-mono | custom:<stack>.`,
+      path
+    );
+  }
+  if (value.startsWith(CUSTOM_FONT_PREFIX)) {
+    validateCustomFontStack(value, path);
+  }
+  return value;
+}
+function validateControlSolidPartial(value, path) {
+  assertPlainObject(value, path);
+  assertAllowedKeys(value, CONTROL_SOLID_COLOR_KEYS, path);
+  const result = {};
+  for (const key of CONTROL_SOLID_COLOR_KEYS) {
+    if (key in value) {
+      result[key] = validateHexColor(value[key], `${path}.${key}`);
+    }
+  }
+  return result;
+}
+function validateFontsPartial(value, path) {
+  assertPlainObject(value, path);
+  assertAllowedKeys(value, FONT_ROLE_KEYS, path);
+  const result = {};
+  for (const key of FONT_ROLE_KEYS) {
+    if (key in value) {
+      result[key] = validateFontRole(value[key], `${path}.${key}`);
+    }
+  }
+  return result;
+}
+function validateColorsPartial(value, path) {
+  assertPlainObject(value, path);
+  assertAllowedKeys(value, COLOR_MODE_KEYS, path);
+  const result = {};
+  for (const mode of COLOR_MODE_KEYS) {
+    if (mode in value) {
+      result[mode] = validateControlSolidPartial(value[mode], `${path}.${mode}`);
+    }
+  }
+  return result;
+}
+function validateStyleConfigPartial(value) {
+  if (value === void 0 || value === null) return {};
+  assertPlainObject(value, "style");
+  assertAllowedKeys(value, STYLE_OBJECT_KEYS, "style");
+  const result = {};
+  if ("iconLibrary" in value) {
+    if (typeof value.iconLibrary !== "string" || !isIconLibrary(value.iconLibrary)) {
+      throw new PresetValidationError(
+        "Invalid style.iconLibrary. Expected tabler | lucide.",
+        "style.iconLibrary"
+      );
+    }
+    result.iconLibrary = value.iconLibrary;
+  }
+  if ("radius" in value) {
+    if (typeof value.radius !== "string" || !isRadiusPreset(value.radius)) {
+      throw new PresetValidationError(
+        "Invalid style.radius. Expected none | small | medium | large.",
+        "style.radius"
+      );
+    }
+    result.radius = value.radius;
+  }
+  if ("fonts" in value) {
+    result.fonts = validateFontsPartial(value.fonts, "style.fonts");
+  }
+  if ("colors" in value) {
+    result.colors = validateColorsPartial(value.colors, "style.colors");
+  }
+  if ("presetCode" in value) {
+    if (typeof value.presetCode !== "string" || value.presetCode.length === 0) {
+      throw new PresetValidationError(
+        "Invalid style.presetCode. Expected a non-empty string.",
+        "style.presetCode"
+      );
+    }
+    if (value.presetCode.length > PRESET_CODEC_MAX_CODE_LENGTH) {
+      throw new PresetValidationError(
+        `Invalid style.presetCode. Exceeds ${PRESET_CODEC_MAX_CODE_LENGTH} characters.`,
+        "style.presetCode"
+      );
+    }
+    result.presetCode = value.presetCode;
+  }
+  return result;
+}
+
+// ../wensity-preset/src/normalize.ts
+function mergeControlSolid(base, partial) {
+  if (!partial) return { ...base };
+  const merged = { ...base };
+  for (const key of CONTROL_SOLID_COLOR_KEYS) {
+    const value = partial[key];
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+}
+function mergeFonts(base, partial) {
+  if (!partial) return { ...base };
+  const merged = { ...base };
+  for (const key of FONT_ROLE_KEYS) {
+    const value = partial[key];
+    if (value !== void 0) merged[key] = value;
+  }
+  return merged;
+}
+function mergeColors(base, partial) {
+  return {
+    light: mergeControlSolid(base.light, partial?.light),
+    dark: mergeControlSolid(base.dark, partial?.dark)
+  };
+}
+function normalizeStyleConfig(partial) {
+  const validated = validateStyleConfigPartial(partial ?? void 0);
+  const defaults = createDefaultStyleConfig();
+  const normalized = {
+    iconLibrary: validated.iconLibrary ?? defaults.iconLibrary,
+    radius: validated.radius ?? defaults.radius,
+    fonts: mergeFonts(defaults.fonts, validated.fonts),
+    colors: mergeColors(defaults.colors, validated.colors)
+  };
+  if (validated.presetCode !== void 0) {
+    normalized.presetCode = validated.presetCode;
+  }
+  return normalized;
+}
+
+// ../wensity-preset/src/codec.ts
+var CODEC_PAYLOAD_KEYS = ["v", "iconLibrary", "radius", "fonts", "colors"];
+function assertPlainObject2(value, path) {
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    throw new PresetValidationError(`Expected an object at ${path}.`, path);
+  }
+  assertNoForbiddenObjectKeys(value, path);
+}
+function assertAllowedKeys2(value, allowed, path) {
+  const allowedSet = new Set(allowed);
+  for (const key of Object.keys(value)) {
+    if (!allowedSet.has(key)) {
+      throw new PresetValidationError(`Unknown key "${key}" at ${path}.`, `${path}.${key}`);
+    }
+  }
+}
+function utf8ByteLength(text) {
+  return new TextEncoder().encode(text).byteLength;
+}
+var BASE64URL_ALPHABET = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
+function toBase64Url(bytes) {
+  let out = "";
+  for (let i = 0; i < bytes.length; i += 3) {
+    const a = bytes[i];
+    const b = i + 1 < bytes.length ? bytes[i + 1] : 0;
+    const c = i + 2 < bytes.length ? bytes[i + 2] : 0;
+    const triple = a << 16 | b << 8 | c;
+    out += BASE64URL_ALPHABET[triple >> 18 & 63];
+    out += BASE64URL_ALPHABET[triple >> 12 & 63];
+    if (i + 1 < bytes.length) out += BASE64URL_ALPHABET[triple >> 6 & 63];
+    if (i + 2 < bytes.length) out += BASE64URL_ALPHABET[triple & 63];
+  }
+  return out;
+}
+function fromBase64Url(code) {
+  if (code.length === 0 || /[^A-Za-z0-9_-]/.test(code)) {
+    throw new PresetValidationError("Preset code is not valid base64url.", "preset");
+  }
+  const lookup = /* @__PURE__ */ new Map();
+  for (let i = 0; i < BASE64URL_ALPHABET.length; i++) {
+    lookup.set(BASE64URL_ALPHABET[i], i);
+  }
+  const out = new Uint8Array(Math.floor(code.length * 3 / 4));
+  let outIndex = 0;
+  for (let i = 0; i < code.length; i += 4) {
+    const c0 = lookup.get(code[i]);
+    const c1 = lookup.get(code[i + 1]);
+    const c2 = i + 2 < code.length ? lookup.get(code[i + 2]) : 0;
+    const c3 = i + 3 < code.length ? lookup.get(code[i + 3]) : 0;
+    if (c0 === void 0 || c1 === void 0 || c2 === void 0 || c3 === void 0) {
+      throw new PresetValidationError("Preset code is not valid base64url.", "preset");
+    }
+    const triple = c0 << 18 | c1 << 12 | c2 << 6 | c3;
+    if (outIndex < out.length) out[outIndex++] = triple >> 16 & 255;
+    if (i + 2 < code.length && outIndex < out.length) out[outIndex++] = triple >> 8 & 255;
+    if (i + 3 < code.length && outIndex < out.length) out[outIndex++] = triple & 255;
+  }
+  return outIndex === out.length ? out : out.subarray(0, outIndex);
+}
+function stableStringifyCodecPayload(payload) {
+  const parts = [
+    `"v":${payload.v}`,
+    `"iconLibrary":${JSON.stringify(payload.iconLibrary)}`,
+    `"radius":${JSON.stringify(payload.radius)}`,
+    `"fonts":${stableStringifyFonts(payload.fonts)}`
+  ];
+  if (payload.colors !== void 0) {
+    parts.push(`"colors":${stableStringifyColors(payload.colors)}`);
+  }
+  return `{${parts.join(",")}}`;
+}
+function stableStringifyFonts(fonts) {
+  return `{"sans":${JSON.stringify(fonts.sans)},"display":${JSON.stringify(fonts.display)},"mono":${JSON.stringify(fonts.mono)}}`;
+}
+function stableStringifyColors(colors) {
+  const modeParts = [];
+  for (const mode of COLOR_MODE_KEYS) {
+    const partial = colors[mode];
+    if (!partial) continue;
+    const keyParts = [];
+    for (const key of CONTROL_SOLID_COLOR_KEYS) {
+      const value = partial[key];
+      if (value !== void 0) {
+        keyParts.push(`${JSON.stringify(key)}:${JSON.stringify(value)}`);
+      }
+    }
+    if (keyParts.length > 0) {
+      modeParts.push(`${JSON.stringify(mode)}:{${keyParts.join(",")}}`);
+    }
+  }
+  return `{${modeParts.join(",")}}`;
+}
+function validateCodecFonts(value, path) {
+  assertPlainObject2(value, path);
+  assertAllowedKeys2(value, FONT_ROLE_KEYS, path);
+  for (const key of FONT_ROLE_KEYS) {
+    if (!(key in value)) {
+      throw new PresetValidationError(`Missing required font role "${key}" at ${path}.`, `${path}.${key}`);
+    }
+  }
+  const fonts = {};
+  for (const key of FONT_ROLE_KEYS) {
+    const raw = value[key];
+    if (typeof raw !== "string" || !isFontRoleValue(raw)) {
+      throw new PresetValidationError(
+        `Invalid font at ${path}.${key}. Expected site | system-sans | system-mono | custom:<stack>.`,
+        `${path}.${key}`
+      );
+    }
+    if (raw.startsWith(CUSTOM_FONT_PREFIX)) {
+      validateCustomFontStack(raw, `${path}.${key}`);
+    }
+    fonts[key] = raw;
+  }
+  return fonts;
+}
+function validateCodecColors(value, path) {
+  const partial = validateStyleConfigPartial({ colors: value });
+  if (!partial.colors) {
+    throw new PresetValidationError(`Invalid colors at ${path}.`, path);
+  }
+  return partial.colors;
+}
+function validateCodecPayload(value) {
+  assertPlainObject2(value, "preset");
+  assertAllowedKeys2(value, CODEC_PAYLOAD_KEYS, "preset");
+  if (value.v !== 1) {
+    throw new PresetValidationError(
+      typeof value.v === "number" ? `Unsupported preset codec version ${value.v}. Expected v: 1.` : "Preset payload missing v: 1.",
+      "preset.v"
+    );
+  }
+  if (typeof value.iconLibrary !== "string" || !isIconLibrary(value.iconLibrary)) {
+    throw new PresetValidationError(
+      "Invalid preset.iconLibrary. Expected tabler | lucide.",
+      "preset.iconLibrary"
+    );
+  }
+  if (typeof value.radius !== "string" || !isRadiusPreset(value.radius)) {
+    throw new PresetValidationError(
+      "Invalid preset.radius. Expected none | small | medium | large.",
+      "preset.radius"
+    );
+  }
+  if (!("fonts" in value)) {
+    throw new PresetValidationError("Preset payload missing fonts.", "preset.fonts");
+  }
+  const payload = {
+    v: 1,
+    iconLibrary: value.iconLibrary,
+    radius: value.radius,
+    fonts: validateCodecFonts(value.fonts, "preset.fonts")
+  };
+  if ("colors" in value) {
+    payload.colors = validateCodecColors(value.colors, "preset.colors");
+  }
+  return payload;
+}
+function codecPayloadToStyleInput(payload) {
+  const input = {
+    iconLibrary: payload.iconLibrary,
+    radius: payload.radius,
+    fonts: payload.fonts
+  };
+  if (payload.colors) {
+    input.colors = payload.colors;
+  }
+  return input;
+}
+function encodePreset(style) {
+  const normalized = normalizeStyleConfig(style);
+  for (const role of FONT_ROLE_KEYS) {
+    const value = normalized.fonts[role];
+    if (value.startsWith(CUSTOM_FONT_PREFIX)) {
+      validateCustomFontStack(value, `style.fonts.${role}`);
+    }
+  }
+  const colors = normalized.colors ? {
+    light: pickDefinedColors(normalized.colors.light),
+    dark: pickDefinedColors(normalized.colors.dark)
+  } : void 0;
+  const hasColors = colors && (colors.light && Object.keys(colors.light).length > 0 || colors.dark && Object.keys(colors.dark).length > 0);
+  const payload = {
+    v: 1,
+    iconLibrary: normalized.iconLibrary,
+    radius: normalized.radius,
+    fonts: { ...normalized.fonts },
+    ...hasColors ? { colors } : {}
+  };
+  const json = stableStringifyCodecPayload(payload);
+  const bytes = new TextEncoder().encode(json);
+  if (bytes.byteLength > PRESET_CODEC_MAX_DECODED_JSON_BYTES) {
+    throw new PresetValidationError(
+      `Preset JSON exceeds ${PRESET_CODEC_MAX_DECODED_JSON_BYTES} bytes.`,
+      "preset"
+    );
+  }
+  const code = `${PRESET_CODEC_PREFIX}.${toBase64Url(bytes)}`;
+  if (code.length > PRESET_CODEC_MAX_CODE_LENGTH) {
+    throw new PresetValidationError(
+      `Preset code exceeds ${PRESET_CODEC_MAX_CODE_LENGTH} characters.`,
+      "preset"
+    );
+  }
+  return code;
+}
+function pickDefinedColors(partial) {
+  if (!partial) return void 0;
+  const out = {};
+  for (const key of CONTROL_SOLID_COLOR_KEYS) {
+    if (partial[key] !== void 0) out[key] = partial[key];
+  }
+  return Object.keys(out).length > 0 ? out : void 0;
+}
+function decodePreset(code) {
+  if (typeof code !== "string" || code.length === 0) {
+    throw new PresetValidationError("Preset code is required.", "preset");
+  }
+  if (code.length > PRESET_CODEC_MAX_CODE_LENGTH) {
+    throw new PresetValidationError(
+      `Preset code exceeds ${PRESET_CODEC_MAX_CODE_LENGTH} characters.`,
+      "preset"
+    );
+  }
+  const prefix = `${PRESET_CODEC_PREFIX}.`;
+  if (!code.startsWith(prefix)) {
+    throw new PresetValidationError(
+      `Unsupported or missing preset prefix. Expected codes starting with "${PRESET_CODEC_PREFIX}".`,
+      "preset"
+    );
+  }
+  const encoded = code.slice(prefix.length);
+  if (!encoded) {
+    throw new PresetValidationError("Preset code payload is empty.", "preset");
+  }
+  if (encoded.includes("=") || /[^A-Za-z0-9_-]/.test(encoded)) {
+    throw new PresetValidationError("Preset code payload is not valid unpadded base64url.", "preset");
+  }
+  const bytes = fromBase64Url(encoded);
+  if (bytes.byteLength === 0) {
+    throw new PresetValidationError("Preset code decodes to empty payload.", "preset");
+  }
+  if (bytes.byteLength > PRESET_CODEC_MAX_DECODED_JSON_BYTES) {
+    throw new PresetValidationError(
+      `Decoded preset JSON exceeds ${PRESET_CODEC_MAX_DECODED_JSON_BYTES} bytes.`,
+      "preset"
+    );
+  }
+  let jsonText;
+  try {
+    jsonText = new TextDecoder("utf-8", { fatal: true }).decode(bytes);
+  } catch {
+    throw new PresetValidationError("Preset payload is not valid UTF-8.", "preset");
+  }
+  if (utf8ByteLength(jsonText) > PRESET_CODEC_MAX_DECODED_JSON_BYTES) {
+    throw new PresetValidationError(
+      `Decoded preset JSON exceeds ${PRESET_CODEC_MAX_DECODED_JSON_BYTES} bytes.`,
+      "preset"
+    );
+  }
+  let parsed;
+  try {
+    parsed = JSON.parse(jsonText);
+  } catch {
+    throw new PresetValidationError("Preset payload is not valid JSON.", "preset");
+  }
+  return validateCodecPayload(parsed);
+}
+
+// ../wensity-preset/src/icon-map.ts
+var ICON_TRANSFORM_EXCLUSIONS = [
+  "IconFileTypeCsv",
+  "IconFileTypeDoc",
+  "IconFileTypePdf",
+  "IconFileTypePpt",
+  "IconFileTypeXls",
+  "IconPointFilled",
+  "IconLoader2"
+];
+var TABLER_TO_LUCIDE = {
+  IconAlertTriangle: "AlertTriangle",
+  IconArrowDownRight: "ArrowDownRight",
+  IconArrowLeft: "ArrowLeft",
+  IconArrowUpRight: "ArrowUpRight",
+  IconCalendar: "Calendar",
+  IconCamera: "Camera",
+  IconCheck: "Check",
+  IconChevronDown: "ChevronDown",
+  IconChevronLeft: "ChevronLeft",
+  IconChevronRight: "ChevronRight",
+  IconChevronUp: "ChevronUp",
+  IconChevronsLeft: "ChevronsLeft",
+  IconChevronsRight: "ChevronsRight",
+  IconCircleX: "CircleX",
+  IconClock: "Clock",
+  IconCornerDownLeft: "CornerDownLeft",
+  IconDots: "Ellipsis",
+  IconDownload: "Download",
+  IconFile: "File",
+  IconFileMusic: "FileAudio",
+  IconFileText: "FileText",
+  IconFileZip: "FileArchive",
+  IconInfoCircle: "Info",
+  IconLayoutSidebarLeftCollapse: "PanelLeftClose",
+  IconLayoutSidebarLeftExpand: "PanelLeftOpen",
+  IconMinus: "Minus",
+  IconPhoto: "Image",
+  IconPlus: "Plus",
+  IconRefresh: "RefreshCw",
+  IconSearch: "Search",
+  IconSelector: "ChevronsUpDown",
+  IconSlash: "Slash",
+  IconUser: "User",
+  IconVideo: "Video",
+  IconX: "X"
+};
+var EXCLUSION_SET = new Set(ICON_TRANSFORM_EXCLUSIONS);
+function isIconTransformExclusion(name) {
+  return EXCLUSION_SET.has(name);
+}
+function isMappedTablerIcon(name) {
+  return Object.prototype.hasOwnProperty.call(TABLER_TO_LUCIDE, name);
+}
+function resolveLucideExport(tablerName) {
+  if (isIconTransformExclusion(tablerName)) {
+    throw new Error(
+      `Icon "${tablerName}" is a Phase 0 exclusion and must not be transformed. Use internal SVG/CSS geometry instead.`
+    );
+  }
+  if (!isMappedTablerIcon(tablerName)) {
+    throw new Error(
+      `No approved Lucide mapping for Tabler icon "${tablerName}". Add an audited map entry or convert it to internal geometry.`
+    );
+  }
+  return TABLER_TO_LUCIDE[tablerName];
+}
+var LUCIDE_TO_TABLER = Object.fromEntries(
+  Object.entries(TABLER_TO_LUCIDE).map(([tabler, lucide]) => [lucide, tabler])
+);
 
 // src/constants.ts
 var CLI_NAME = "wensity";
-var CLI_VERSION = "0.1.4";
+var CLI_VERSION = "0.1.6";
 var CONFIG_FILE_NAME = "wensity.json";
 var DEFAULT_API_ORIGIN = "https://ui.wensity.com";
 var DEFAULT_REGISTRY_PATH = "/api/registry";
@@ -14,10 +811,11 @@ var DEFAULT_COMPONENTS_DIR = "src/components/wensity";
 var DEFAULT_UTILS_PATH = "src/lib/utils";
 var DEFAULT_COMPONENTS_ALIAS = "@/components/wensity";
 var DEFAULT_UTILS_ALIAS = "@/lib/utils";
+var INIT_PRIMITIVE_CSS_SLUG = "button";
 var HELP_TEXT = `Wensity CLI ${CLI_VERSION}
 
 Usage:
-  wensity init [options]
+  wensity init [--preset <code>] [--preset-file <path>] [options]
   wensity login [options]
   wensity logout
   wensity whoami [--json]
@@ -27,7 +825,7 @@ Usage:
   wensity version
 
 Commands:
-  init       Create wensity.json and local helper files
+  init       Create wensity.json and local helper files (optional --preset applies style + CSS)
   login      Save a Wensity API token for premium component access
   logout     Remove saved CLI credentials
   whoami     Verify the saved token and print the authenticated account
@@ -41,12 +839,21 @@ Options:
   --registry <url>     Override the registry endpoint
   --type <type>        Select component or block, defaults to component
   --token <token>      Provide a token non-interactively for login
+  --preset <code>      Apply a shareable Wensity style preset (wsty1.\u2026); merges style when config exists
+  --preset-file <path> Read a preset code or JSON payload from a file
   --force              Overwrite generated files when adding or initializing
   --no-install         Write files without running the package manager
   --dry-run            Print planned writes and installs without changing files
   --json               Print machine-readable output where supported
   --help               Show help
   --version            Print the CLI version
+
+Preset notes:
+  Generate codes at ${DEFAULT_API_ORIGIN}/docs/primitives/setup
+  Plain init refuses an existing wensity.json unless --force
+  init --preset merges style + primitive CSS; does not rewrite installed source
+  add/update read style.iconLibrary for UI primitives only (Tabler|Lucide)
+  Invalid/expired/unsupported codes exit non-zero with an actionable message
 `;
 
 // src/errors.ts
@@ -108,7 +915,7 @@ function hasFlag(args, name) {
   return args.options.get(name) === true;
 }
 function expectsValue(name) {
-  return ["api-url", "registry", "token", "type"].includes(name);
+  return ["api-url", "registry", "token", "type", "preset", "preset-file"].includes(name);
 }
 function normalizeOptionName(name) {
   if (name === "dry") return "dry-run";
@@ -205,7 +1012,20 @@ async function loadConfig(cwd, overrides = {}) {
   try {
     const parsed = JSON.parse(await readFile(foundPath, "utf8"));
     return {
-      config: normalizeConfig({ ...defaults, ...parsed }, overrides),
+      config: normalizeConfig(
+        {
+          ...defaults,
+          ...parsed,
+          aliases: {
+            ...defaults.aliases,
+            ...parsed.aliases
+          },
+          tailwind: parsed.tailwind ? { ...defaults.tailwind, ...parsed.tailwind } : defaults.tailwind,
+          style: parsed.style,
+          version: parsed.version ?? defaults.version
+        },
+        overrides
+      ),
       configPath,
       projectRoot,
       exists: true
@@ -214,6 +1034,9 @@ async function loadConfig(cwd, overrides = {}) {
     if (error instanceof SyntaxError) {
       throw new CliError(`${CONFIG_FILE_NAME} contains invalid JSON.`);
     }
+    if (error instanceof PresetValidationError) {
+      throw new CliError(`${CONFIG_FILE_NAME}: ${error.message}`);
+    }
     throw error;
   }
 }
@@ -221,6 +1044,7 @@ function createDefaultConfig(projectRoot, apiUrl = DEFAULT_API_ORIGIN) {
   const apiOrigin = normalizeUrlOrigin(apiUrl);
   return {
     $schema: joinUrl(apiOrigin, "/schema/wensity.json"),
+    version: CONFIG_SCHEMA_VERSION,
     registry: joinUrl(apiOrigin, DEFAULT_REGISTRY_PATH),
     components: DEFAULT_COMPONENTS_DIR,
     utils: DEFAULT_UTILS_PATH,
@@ -231,7 +1055,8 @@ function createDefaultConfig(projectRoot, apiUrl = DEFAULT_API_ORIGIN) {
     aliases: {
       components: DEFAULT_COMPONENTS_ALIAS,
       utils: DEFAULT_UTILS_ALIAS
-    }
+    },
+    style: createDefaultStyleConfig()
   };
 }
 async function writeConfigFile(path, config, force) {
@@ -242,6 +1067,26 @@ async function writeConfigFile(path, config, force) {
   await writeFile(path, `${JSON.stringify(config, null, 2)}
 `, "utf8");
 }
+async function mergeStyleIntoConfigFile(configPath, style) {
+  const raw = JSON.parse(await readFile(configPath, "utf8"));
+  const merged = {
+    ...raw,
+    version: raw.version ?? CONFIG_SCHEMA_VERSION,
+    registry: raw.registry ?? "",
+    components: raw.components ?? DEFAULT_COMPONENTS_DIR,
+    utils: raw.utils ?? DEFAULT_UTILS_PATH,
+    aliases: {
+      components: raw.aliases?.components ?? DEFAULT_COMPONENTS_ALIAS,
+      utils: raw.aliases?.utils ?? DEFAULT_UTILS_ALIAS
+    },
+    style
+  };
+  if (raw.$schema) merged.$schema = raw.$schema;
+  if (raw.tailwind) merged.tailwind = raw.tailwind;
+  await writeFile(configPath, `${JSON.stringify(merged, null, 2)}
+`, "utf8");
+  return normalizeConfig(merged, {});
+}
 function resolveConfiguredFilePath(projectRoot, relativePath, extension = "ts") {
   try {
     return resolveInside(projectRoot, withExtension(relativePath, extension));
@@ -271,23 +1116,39 @@ async function findUp(start, fileName) {
 }
 function normalizeConfig(config, overrides) {
   const apiOrigin = overrides.apiUrl ? normalizeUrlOrigin(overrides.apiUrl) : void 0;
-  return {
-    ...config,
-    registry: overrides.registry ?? (apiOrigin ? joinUrl(apiOrigin, DEFAULT_REGISTRY_PATH) : config.registry),
-    components: config.components || DEFAULT_COMPONENTS_DIR,
-    utils: config.utils || DEFAULT_UTILS_PATH,
-    aliases: {
-      components: config.aliases?.components || DEFAULT_COMPONENTS_ALIAS,
-      utils: config.aliases?.utils || DEFAULT_UTILS_ALIAS
+  try {
+    return {
+      ...config,
+      version: config.version ?? CONFIG_SCHEMA_VERSION,
+      registry: overrides.registry ?? (apiOrigin ? joinUrl(apiOrigin, DEFAULT_REGISTRY_PATH) : config.registry),
+      components: config.components || DEFAULT_COMPONENTS_DIR,
+      utils: config.utils || DEFAULT_UTILS_PATH,
+      aliases: {
+        components: config.aliases?.components || DEFAULT_COMPONENTS_ALIAS,
+        utils: config.aliases?.utils || DEFAULT_UTILS_ALIAS
+      },
+      // In-memory only: missing style fields resolve to defaults without rewriting disk.
+      style: normalizeStyleConfig(config.style)
+    };
+  } catch (error) {
+    if (error instanceof PresetValidationError) {
+      throw new CliError(`${CONFIG_FILE_NAME}: ${error.message}`);
     }
-  };
+    throw error;
+  }
 }
 function detectTailwindConfig(projectRoot) {
   const candidates = ["tailwind.config.ts", "tailwind.config.js", "tailwind.config.mjs"];
   return candidates.find((candidate) => existsSync(join2(projectRoot, candidate))) ?? "tailwind.config.ts";
 }
 function detectGlobalCss(projectRoot) {
-  const candidates = ["src/app/globals.css", "src/styles/globals.css", "app/globals.css"];
+  const candidates = [
+    "src/app/globals.css",
+    "src/styles/globals.css",
+    "app/globals.css",
+    "src/index.css",
+    "styles/globals.css"
+  ];
   return candidates.find((candidate) => existsSync(join2(projectRoot, candidate))) ?? "src/app/globals.css";
 }
 function withExtension(path, extension) {
@@ -396,63 +1257,13 @@ function requiredHome(env) {
   throw new CliError("HOME is not set, so the CLI cannot locate ~/.config/wensity.");
 }
 
-// src/http.ts
-async function requestJson(url, options = {}) {
-  const headers = new Headers(options.headers);
-  headers.set("accept", "application/json");
-  headers.set("user-agent", `${CLI_NAME}/${CLI_VERSION}`);
-  if (options.body && !headers.has("content-type")) {
-    headers.set("content-type", "application/json");
-  }
-  if (options.token) {
-    headers.set("authorization", `Bearer ${options.token}`);
-  }
-  let response;
-  try {
-    response = await fetch(url, { ...options, headers });
-  } catch (error) {
-    const message = error instanceof Error ? error.message : "Unknown network error";
-    throw new CliError(`Could not reach ${url}: ${message}`);
-  }
-  const text = await response.text();
-  const payload = parseJson(text);
-  if (!response.ok) {
-    const message = formatErrorMessage(payload) ?? response.statusText;
-    throw new CliError(`${response.status} ${message}`);
-  }
-  return payload;
-}
-function parseJson(text) {
-  if (!text.trim()) return null;
-  try {
-    return JSON.parse(text);
-  } catch {
-    throw new CliError("Registry returned invalid JSON.");
-  }
-}
-function formatErrorMessage(payload) {
-  if (!payload || typeof payload !== "object") return void 0;
-  const record = payload;
-  const code = typeof record.error === "string" ? record.error : void 0;
-  const message = typeof record.message === "string" ? record.message : code;
-  if (code === "pro_license_required") {
-    const base = message ?? "This component requires Wensity Pro.";
-    return `${base}
-Upgrade here: https://ui.wensity.com/pricing`;
-  }
-  return message;
-}
-
-// src/package-manager.ts
-import { existsSync as existsSync2, readFileSync } from "fs";
-import { spawnSync } from "child_process";
-import { join as join4 } from "path";
-
 // src/output.ts
 import boxen from "boxen";
 import Table from "cli-table3";
 import ora from "ora";
 import pc from "picocolors";
+var BRAND_RED = "#cd1c18";
+var PRICING_BLUE = "#2563eb";
 var LOGO = [
   "\u2588\u2588\u2557    \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2588\u2557   \u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2588\u2557\u2588\u2588\u2557   \u2588\u2588\u2557",
   "\u2588\u2588\u2551    \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2588\u2588\u2557  \u2588\u2588\u2551\u2588\u2588\u2554\u2550\u2550\u2550\u2550\u255D\u2588\u2588\u2551\u255A\u2550\u2550\u2588\u2588\u2554\u2550\u2550\u255D\u255A\u2588\u2588\u2557 \u2588\u2588\u2554\u255D",
@@ -475,33 +1286,46 @@ function printJson(value) {
 function formatList(items) {
   return items.map((item) => `  ${pc.dim("\u2022")} ${item}`).join("\n");
 }
+function brandRed(message) {
+  return color(message, BRAND_RED);
+}
+function pricingBlue(message) {
+  return color(message, PRICING_BLUE);
+}
 function brandBanner(subtitle) {
-  const lines = [pc.red(LOGO.join("\n")), pc.bold("Wensity CLI")];
-  if (subtitle) lines.push(pc.dim(subtitle));
+  const lines = [
+    "",
+    ...LOGO.map((line) => brandRed(centerLine(line))),
+    pc.bold(centerLine("Wensity CLI"))
+  ];
+  if (subtitle) lines.push(pc.dim(centerLine(subtitle)));
   return lines.join("\n");
 }
 function printBrand(subtitle) {
   print(brandBanner(subtitle));
 }
+function printTitle(title, subtitle) {
+  print(`${brandRed("\u25C6")} ${pc.bold(title)}${subtitle ? ` ${pc.dim(subtitle)}` : ""}`);
+}
 function success(message) {
   return `${pc.green("\u2713")} ${message}`;
 }
 function failure(message) {
-  return `${pc.red("\u2715")} ${message}`;
+  return `${brandRed("\u2715")} ${message}`;
 }
 function action(message) {
-  return `${pc.red("\u25C6")} ${message}`;
+  return `${brandRed("\u25C6")} ${message}`;
 }
 function badge(label, tone = "muted") {
   const text = ` ${label.toUpperCase()} `;
-  if (tone === "pro") return pc.bgRed(pc.white(pc.bold(text)));
+  if (tone === "pro") return bgBrandRed(pc.white(pc.bold(text)));
   if (tone === "free") return pc.bgGreen(pc.black(pc.bold(text)));
   return pc.inverse(text);
 }
 function panel(title, body) {
   const content = Array.isArray(body) ? body.join("\n") : body;
   return boxen(content, {
-    title: pc.red(pc.bold(title)),
+    title: brandRed(pc.bold(title)),
     titleAlignment: "left",
     borderColor: "red",
     borderStyle: "round",
@@ -512,12 +1336,12 @@ function panel(title, body) {
 function nextSteps(steps) {
   return panel(
     "Next steps",
-    steps.map((step) => `${pc.red("\u203A")} ${pc.bold(step)}`)
+    steps.map((step) => `${brandRed("\u203A")} ${pc.bold(step)}`)
   );
 }
 function table(head, rows) {
   const output = new Table({
-    head: head.map((item) => pc.red(pc.bold(item))),
+    head: head.map((item) => brandRed(pc.bold(item))),
     chars: {
       top: "\u2500",
       "top-mid": "\u252C",
@@ -566,10 +1390,351 @@ async function withSpinner(text, task, successText = text) {
 function formatCliError(message) {
   return `${failure(message)}
 
-${pc.dim("Need help?")} ${pc.red("https://ui.wensity.com/docs")}`;
+${pc.dim("Need help?")} ${pricingBlue("https://ui.wensity.com/docs")}`;
+}
+function formatProRequiredError(resourceName, resourceType) {
+  return [
+    `${resourceName} is a Pro ${resourceType}.`,
+    brandRed("Create an API token from the Wensity dashboard, then run:"),
+    `  ${brandRed("npx wensity login --token <token>")}`,
+    `Pricing: ${pricingBlue("https://ui.wensity.com/pricing")}`
+  ].join("\n");
+}
+function color(message, hex) {
+  if (!shouldColor()) return message;
+  const [red, green, blue] = hexToRgb(hex);
+  return `\x1B[38;2;${red};${green};${blue}m${message}\x1B[39m`;
+}
+function bgBrandRed(message) {
+  if (!shouldColor()) return message;
+  const [red, green, blue] = hexToRgb(BRAND_RED);
+  return `\x1B[48;2;${red};${green};${blue}m${message}\x1B[49m`;
+}
+function shouldColor() {
+  if (process.env.FORCE_COLOR && process.env.FORCE_COLOR !== "0") return true;
+  return process.env.NO_COLOR === void 0 && process.env.FORCE_COLOR !== "0";
+}
+function hexToRgb(hex) {
+  const value = hex.replace("#", "");
+  return [
+    Number.parseInt(value.slice(0, 2), 16),
+    Number.parseInt(value.slice(2, 4), 16),
+    Number.parseInt(value.slice(4, 6), 16)
+  ];
+}
+function centerLine(line) {
+  const columns = Math.min(process.stdout.columns || 80, 100);
+  const padding = Math.max(0, Math.floor((columns - line.length) / 2));
+  return `${" ".repeat(padding)}${line}`;
+}
+
+// src/http.ts
+async function requestJson(url, options = {}) {
+  const headers = new Headers(options.headers);
+  headers.set("accept", "application/json");
+  headers.set("user-agent", `${CLI_NAME}/${CLI_VERSION}`);
+  if (options.body && !headers.has("content-type")) {
+    headers.set("content-type", "application/json");
+  }
+  if (options.token) {
+    headers.set("authorization", `Bearer ${options.token}`);
+  }
+  let response;
+  try {
+    response = await fetch(url, { ...options, headers });
+  } catch (error) {
+    const message = error instanceof Error ? error.message : "Unknown network error";
+    throw new CliError(`Could not reach ${url}: ${message}`);
+  }
+  const text = await response.text();
+  const payload = parseJson(text);
+  if (!response.ok) {
+    const message = formatErrorMessage(payload) ?? response.statusText;
+    throw new CliError(`${response.status} ${message}`);
+  }
+  return payload;
+}
+function parseJson(text) {
+  if (!text.trim()) return null;
+  try {
+    return JSON.parse(text);
+  } catch {
+    throw new CliError("Registry returned invalid JSON.");
+  }
+}
+function formatErrorMessage(payload) {
+  if (!payload || typeof payload !== "object") return void 0;
+  const record = payload;
+  const code = typeof record.error === "string" ? record.error : void 0;
+  const message = typeof record.message === "string" ? record.message : code;
+  if (code === "pro_license_required") {
+    const base = message ?? "This component requires Wensity Pro.";
+    return `${base}
+Upgrade here: ${pricingBlue("https://ui.wensity.com/pricing")}`;
+  }
+  return message;
+}
+
+// src/icon-transform.ts
+var UI_PRIMITIVES_CATEGORY = "UI Primitives";
+var TABLER_ICONS_PACKAGE = "@tabler/icons-react";
+var LUCIDE_ICONS_PACKAGE = "lucide-react";
+var EMPTY_SWAP = { remove: [], add: [] };
+var NATIVE_SVG_TAGS = /* @__PURE__ */ new Set([
+  "svg",
+  "path",
+  "circle",
+  "rect",
+  "line",
+  "polyline",
+  "polygon",
+  "g",
+  "defs",
+  "use",
+  "symbol",
+  "clipPath",
+  "mask",
+  "linearGradient",
+  "radialGradient",
+  "stop",
+  "text",
+  "tspan",
+  "foreignObject"
+]);
+function createTablerAdapter() {
+  return {
+    id: "tabler",
+    packageName: TABLER_ICONS_PACKAGE,
+    oppositePackageName: LUCIDE_ICONS_PACKAGE,
+    resolveExportFromTabler: (tablerName) => tablerName
+  };
+}
+function createLucideAdapter() {
+  return {
+    id: "lucide",
+    packageName: LUCIDE_ICONS_PACKAGE,
+    oppositePackageName: TABLER_ICONS_PACKAGE,
+    resolveExportFromTabler: (tablerName, context) => {
+      try {
+        return resolveLucideExport(tablerName);
+      } catch (error) {
+        const message = error instanceof Error ? error.message : String(error);
+        throw new CliError(`${context}: ${message}`);
+      }
+    },
+    strokePropTo: "strokeWidth"
+  };
+}
+var ICON_LIBRARY_ADAPTERS = {
+  tabler: createTablerAdapter,
+  lucide: createLucideAdapter
+};
+function getIconLibraryAdapter(library) {
+  return ICON_LIBRARY_ADAPTERS[library]();
+}
+function isPrimitivePayloadCategory(category) {
+  return category === UI_PRIMITIVES_CATEGORY;
+}
+function transformIconLibrary(content, options) {
+  if (!options.isPrimitiveCategory) {
+    return { content, dependencySwap: EMPTY_SWAP };
+  }
+  const adapter = getIconLibraryAdapter(options.iconLibrary);
+  const context = options.slug ? `primitive "${options.slug}"` : "primitive source";
+  const hasTabler = hasPackageImport(content, TABLER_ICONS_PACKAGE);
+  const hasLucide = hasPackageImport(content, LUCIDE_ICONS_PACKAGE);
+  if (adapter.id === "lucide") {
+    if (hasTabler) {
+      const transformed = rewriteTablerImportsToTarget(content, adapter, context);
+      return {
+        content: rewriteStrokeProps(transformed.content, transformed.localBindings),
+        dependencySwap: {
+          remove: [TABLER_ICONS_PACKAGE],
+          add: [LUCIDE_ICONS_PACKAGE]
+        }
+      };
+    }
+    if (hasLucide) {
+      return {
+        content,
+        dependencySwap: {
+          remove: [TABLER_ICONS_PACKAGE],
+          add: [LUCIDE_ICONS_PACKAGE]
+        }
+      };
+    }
+    return { content, dependencySwap: EMPTY_SWAP };
+  }
+  if (hasLucide && !hasTabler) {
+    return {
+      content,
+      dependencySwap: {
+        remove: [LUCIDE_ICONS_PACKAGE],
+        add: [TABLER_ICONS_PACKAGE]
+      }
+    };
+  }
+  if (hasTabler) {
+    assertNoUnmappedTablerImports(content, context);
+    return {
+      content,
+      dependencySwap: {
+        remove: [LUCIDE_ICONS_PACKAGE],
+        add: [TABLER_ICONS_PACKAGE]
+      }
+    };
+  }
+  return { content, dependencySwap: EMPTY_SWAP };
+}
+function aggregateIconDependencySwaps(swaps) {
+  const remove = /* @__PURE__ */ new Set();
+  const add = /* @__PURE__ */ new Set();
+  for (const swap of swaps) {
+    for (const pkg of swap.remove) remove.add(pkg);
+    for (const pkg of swap.add) add.add(pkg);
+  }
+  return {
+    remove: [...remove],
+    add: [...add]
+  };
+}
+function applyIconDependencySwap(declared, swap) {
+  const remove = new Set(swap.remove);
+  const next = declared.filter((dep) => !remove.has(dep));
+  for (const pkg of swap.add) {
+    if (!next.includes(pkg)) next.push(pkg);
+  }
+  return next;
+}
+function warnOppositeIconPackageMessage(iconLibrary, installedPackages) {
+  const selected = iconLibrary === "lucide" ? LUCIDE_ICONS_PACKAGE : TABLER_ICONS_PACKAGE;
+  const opposite = iconLibrary === "lucide" ? TABLER_ICONS_PACKAGE : LUCIDE_ICONS_PACKAGE;
+  if (installedPackages.has(opposite) && !installedPackages.has(selected)) {
+    return `Project package.json still lists ${opposite} while style.iconLibrary is "${iconLibrary}". Wensity will install ${selected} for new primitive installs but will not uninstall ${opposite} (it may be used outside Wensity).`;
+  }
+  if (installedPackages.has(opposite) && installedPackages.has(selected)) {
+    return `Project package.json lists both ${selected} and ${opposite}. Wensity primitives use only ${selected} (style.iconLibrary="${iconLibrary}"); consider removing ${opposite} if unused.`;
+  }
+  return void 0;
+}
+function hasPackageImport(source, packageName) {
+  const escaped = packageName.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp(`from\\s+["']${escaped}["']`).test(source);
+}
+function rewriteTablerImportsToTarget(content, adapter, context) {
+  const localBindings = /* @__PURE__ */ new Set();
+  const importPattern = /^(?<indent>[ \t]*)(?<typeOnly>import\s+type\s+|import\s+)\{(?<clause>[^}]*)\}\s*from\s+(?<quote>["'])@tabler\/icons-react\k<quote>;?[ \t]*$/gm;
+  const next = content.replace(
+    importPattern,
+    (full, indent, typePrefix, clause, quote) => {
+      const specs = parseNamedImportClause(clause);
+      if (specs.length === 0) return full;
+      const rewritten = [];
+      for (const spec of specs) {
+        if (spec.isTypeOnly || typePrefix.includes("type")) {
+          if (spec.imported === "Icon" || isIconTransformExclusion(spec.imported)) {
+            throw new CliError(
+              `${context}: unexpected type-only icon import "${spec.imported}" from ${TABLER_ICONS_PACKAGE}.`
+            );
+          }
+        }
+        if (isIconTransformExclusion(spec.imported)) {
+          throw new CliError(
+            `${context}: "${spec.imported}" is excluded from the icon map (Phase 0 internal geometry). It must not appear as a library import.`
+          );
+        }
+        const targetExport = adapter.resolveExportFromTabler(spec.imported, context);
+        localBindings.add(spec.local);
+        if (adapter.id === "lucide") {
+          if (targetExport === spec.local) {
+            rewritten.push(targetExport);
+          } else {
+            rewritten.push(`${targetExport} as ${spec.local}`);
+          }
+        } else {
+          rewritten.push(
+            spec.imported === spec.local ? spec.imported : `${spec.imported} as ${spec.local}`
+          );
+        }
+      }
+      const prefix = typePrefix.startsWith("import type") ? "import type " : "import ";
+      return `${indent}${prefix}{ ${rewritten.join(", ")} } from ${quote}${adapter.packageName}${quote};`;
+    }
+  );
+  if (hasPackageImport(next, TABLER_ICONS_PACKAGE)) {
+    throw new CliError(
+      `${context}: failed to rewrite all ${TABLER_ICONS_PACKAGE} imports for ${adapter.id}.`
+    );
+  }
+  if (/(?:import|export)\s+\*\s+as\s+\w+\s+from\s+["']@tabler\/icons-react["']/.test(content)) {
+    throw new CliError(
+      `${context}: namespace imports from ${TABLER_ICONS_PACKAGE} are not supported. Use named imports.`
+    );
+  }
+  return { content: next, localBindings };
+}
+function assertNoUnmappedTablerImports(content, context) {
+  const importPattern = /\{([^}]*)\}\s*from\s+["']@tabler\/icons-react["']/g;
+  for (const match of content.matchAll(importPattern)) {
+    const specs = parseNamedImportClause(match[1] ?? "");
+    for (const spec of specs) {
+      if (isIconTransformExclusion(spec.imported)) {
+        throw new CliError(
+          `${context}: "${spec.imported}" must not appear as a library import (Phase 0 exclusion).`
+        );
+      }
+      if (spec.imported.startsWith("Icon")) {
+        resolveLucideExport(spec.imported);
+      }
+    }
+  }
+}
+function parseNamedImportClause(clause) {
+  const specs = [];
+  for (const raw of clause.split(",")) {
+    const part = raw.trim();
+    if (!part) continue;
+    const typeOnly = /^type\s+/.test(part);
+    const body = typeOnly ? part.replace(/^type\s+/, "").trim() : part;
+    const asMatch = body.match(/^(\w+)\s+as\s+(\w+)$/);
+    if (asMatch) {
+      specs.push({
+        imported: asMatch[1],
+        local: asMatch[2],
+        isTypeOnly: typeOnly
+      });
+      continue;
+    }
+    if (/^\w+$/.test(body)) {
+      specs.push({ imported: body, local: body, isTypeOnly: typeOnly });
+    }
+  }
+  return specs;
+}
+function rewriteStrokeProps(content, localBindings) {
+  if (localBindings.size === 0) return content;
+  const tags = new Set(localBindings);
+  if (localBindings.size > 0 && /\bFileIcon\b/.test(content) && /\bpackIconMap\b/.test(content)) {
+    tags.add("FileIcon");
+  }
+  const tagAlternation = [...tags].map((tag) => tag.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")).join("|");
+  if (!tagAlternation) return content;
+  const openTagPattern = new RegExp(`<(${tagAlternation})(\\s[\\s\\S]*?)(/?)>`, "g");
+  return content.replace(openTagPattern, (full, tagName, attrs, selfClose) => {
+    if (NATIVE_SVG_TAGS.has(tagName)) return full;
+    if (!attrs) return full;
+    const nextAttrs = attrs.replace(
+      /(^|[\s])stroke(\s*=\s*(?:\{[^}]*\}|"[^"]*"|'[^']*'))/g,
+      "$1strokeWidth$2"
+    );
+    return `<${tagName}${nextAttrs}${selfClose}>`;
+  });
 }
 
 // src/package-manager.ts
+import { existsSync as existsSync2, readFileSync } from "fs";
+import { spawnSync } from "child_process";
+import { join as join4 } from "path";
 function detectPackageManager(projectRoot) {
   if (existsSync2(join4(projectRoot, "pnpm-lock.yaml"))) return "pnpm";
   if (existsSync2(join4(projectRoot, "bun.lockb")) || existsSync2(join4(projectRoot, "bun.lock"))) return "bun";
@@ -578,16 +1743,22 @@ function detectPackageManager(projectRoot) {
   return "npm";
 }
 function missingDependencies(projectRoot, dependencies) {
+  const installed = readInstalledPackageNames(projectRoot);
+  if (!installed) return dependencies;
+  return dependencies.filter((dependency) => !installed.has(dependency));
+}
+function readInstalledPackageNames(projectRoot) {
   const packageJsonPath = join4(projectRoot, "package.json");
-  if (!existsSync2(packageJsonPath)) return dependencies;
+  if (!existsSync2(packageJsonPath)) return void 0;
   const packageJson = JSON.parse(readFileSync(packageJsonPath, "utf8"));
-  const installed = {
-    ...packageJson.dependencies,
-    ...packageJson.devDependencies,
-    ...packageJson.peerDependencies,
-    ...packageJson.optionalDependencies
-  };
-  return dependencies.filter((dependency) => !installed[dependency]);
+  return new Set(
+    Object.keys({
+      ...packageJson.dependencies,
+      ...packageJson.devDependencies,
+      ...packageJson.peerDependencies,
+      ...packageJson.optionalDependencies
+    })
+  );
 }
 function runInstall(projectRoot, dependencies) {
   if (dependencies.length === 0) return;
@@ -623,9 +1794,179 @@ function installArgs(packageManager, dependencies) {
   }
 }
 
-// src/component-install.ts
+// src/preset.ts
+import { readFile as readFile3 } from "fs/promises";
+async function resolvePresetStyle(input) {
+  if (input.presetCode && input.presetFile) {
+    throw new CliError("Use either --preset or --preset-file, not both.");
+  }
+  let code = input.presetCode;
+  if (input.presetFile) {
+    try {
+      const raw = await readFile3(input.presetFile, "utf8");
+      const trimmed = raw.trim();
+      if (trimmed.startsWith("{")) {
+        const parsed = JSON.parse(trimmed);
+        if (parsed && typeof parsed === "object" && "v" in parsed) {
+          const payload = validateCodecPayload(parsed);
+          const json = stableStringifyCodecPayload(payload);
+          code = `${PRESET_CODEC_PREFIX}.${Buffer.from(json, "utf8").toString("base64url")}`;
+        } else {
+          code = encodePreset(parsed);
+        }
+      } else {
+        code = trimmed;
+      }
+    } catch (error) {
+      if (error instanceof PresetValidationError) {
+        throw new CliError(`Invalid preset file: ${error.message}`);
+      }
+      if (error instanceof SyntaxError) {
+        throw new CliError(`Preset file contains invalid JSON: ${error.message}`);
+      }
+      if (error instanceof CliError) throw error;
+      const message = error instanceof Error ? error.message : String(error);
+      throw new CliError(`Failed to read preset file: ${message}`);
+    }
+  }
+  if (!code) {
+    throw new CliError("Missing preset. Pass --preset <code> or --preset-file <path>.");
+  }
+  try {
+    const trimmed = code.trim();
+    const payload = decodePreset(trimmed);
+    const style = normalizeStyleConfig({
+      ...codecPayloadToStyleInput(payload),
+      presetCode: trimmed
+    });
+    return { style, presetCode: trimmed };
+  } catch (error) {
+    if (error instanceof PresetValidationError) {
+      throw new CliError(`Invalid preset: ${error.message}`);
+    }
+    throw error;
+  }
+}
+
+// src/preset-init-writes.ts
 import { mkdir as mkdir3, writeFile as writeFile3 } from "fs/promises";
-import { dirname as dirname4, join as join5, relative as relative3 } from "path";
+import { dirname as dirname4 } from "path";
+async function commitPresetInitWrites(input) {
+  let cssWritten = false;
+  try {
+    if (input.cssChanged) {
+      await mkdir3(dirname4(input.cssAbsolute), { recursive: true });
+      await writeFile3(input.cssAbsolute, input.nextCss, "utf8");
+      cssWritten = true;
+    }
+    if (input.writeUtility) {
+      await mkdir3(dirname4(input.utilityAbsolutePath), { recursive: true });
+      await writeFile3(input.utilityAbsolutePath, input.utilityContent, "utf8");
+    }
+    await input.commitConfig();
+  } catch (error) {
+    if (cssWritten) {
+      try {
+        await writeFile3(input.cssAbsolute, input.existingCss, "utf8");
+      } catch {
+      }
+    }
+    throw error;
+  }
+}
+
+// src/style-css.ts
+var ROOT_SELECTOR = ":root";
+var DARK_SELECTOR = ".dark";
+function applyStyleToPrimitiveCss(block, styleInput) {
+  const style = normalizeStyleConfig(styleInput);
+  let next = block;
+  const radiusValue = RADIUS_PRESET_CSS[style.radius];
+  next = replaceDeclInSelector(next, ROOT_SELECTOR, "--primitive-radius", radiusValue);
+  next = replaceDeclInSelector(next, DARK_SELECTOR, "--primitive-radius", radiusValue);
+  for (const role of FONT_ROLE_KEYS) {
+    const cssVar = `--primitive-font-${role}`;
+    const cssValue = expandFontRole(style.fonts[role], role);
+    next = replaceDeclInSelector(next, ROOT_SELECTOR, cssVar, cssValue);
+    next = replaceDeclInSelector(next, DARK_SELECTOR, cssVar, cssValue);
+  }
+  if (style.colors?.light) {
+    for (const key of CONTROL_SOLID_COLOR_KEYS) {
+      const value = style.colors.light[key];
+      if (value === void 0) continue;
+      next = replaceDeclInSelector(next, ROOT_SELECTOR, CONTROL_SOLID_CSS_VARS[key], value);
+    }
+  }
+  if (style.colors?.dark) {
+    for (const key of CONTROL_SOLID_COLOR_KEYS) {
+      const value = style.colors.dark[key];
+      if (value === void 0) continue;
+      next = replaceDeclInSelector(next, DARK_SELECTOR, CONTROL_SOLID_CSS_VARS[key], value);
+    }
+  }
+  return next;
+}
+function replaceDeclInSelector(css, selector, property, value) {
+  const block = findTopLevelRule(css, selector);
+  if (!block) return css;
+  const declPattern = new RegExp(
+    `(${escapeRegExp(property)}\\s*:\\s*)([^;]+)(;)`
+  );
+  if (!declPattern.test(block.body)) {
+    return css;
+  }
+  const updatedBody = block.body.replace(declPattern, `$1${value}$3`);
+  if (updatedBody === block.body) return css;
+  return `${css.slice(0, block.bodyStart)}${updatedBody}${css.slice(block.bodyEnd)}`;
+}
+function findTopLevelRule(css, selector) {
+  const needle = `${selector} {`;
+  let searchFrom = 0;
+  while (searchFrom < css.length) {
+    const start = css.indexOf(needle, searchFrom);
+    if (start === -1) return void 0;
+    const bodyStart = start + needle.length;
+    const bodyEnd = findMatchingBrace(css, bodyStart - 1);
+    if (bodyEnd === -1) return void 0;
+    if (isLikelyTopLevel(css, start)) {
+      return {
+        bodyStart,
+        bodyEnd,
+        body: css.slice(bodyStart, bodyEnd)
+      };
+    }
+    searchFrom = bodyEnd + 1;
+  }
+  return void 0;
+}
+function isLikelyTopLevel(css, index) {
+  let depth = 0;
+  for (let i = 0; i < index; i += 1) {
+    const ch = css[i];
+    if (ch === "{") depth += 1;
+    else if (ch === "}") depth -= 1;
+  }
+  return depth === 0;
+}
+function findMatchingBrace(css, openIndex) {
+  let depth = 0;
+  for (let i = openIndex; i < css.length; i += 1) {
+    const ch = css[i];
+    if (ch === "{") depth += 1;
+    else if (ch === "}") {
+      depth -= 1;
+      if (depth === 0) return i;
+    }
+  }
+  return -1;
+}
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+
+// src/component-install.ts
+import { mkdir as mkdir4, readFile as readFile4, writeFile as writeFile4 } from "fs/promises";
+import { dirname as dirname5, join as join5, relative as relative3 } from "path";
 
 // src/templates.ts
 function cnUtilityTemplate() {
@@ -782,27 +2123,46 @@ export function WensitySecondaryButton({
 
 // src/component-install.ts
 var ALWAYS_PRESENT_PACKAGES = /* @__PURE__ */ new Set(["react", "react-dom", "next"]);
-async function prepareInstall(projectRoot, config, payload) {
+var OVERLAY_HELPER_PATH = "components/wensity/overlay.tsx";
+var PRIMITIVE_CSS_START_MARKER = "/* \u2500\u2500 Wensity Primitive Tokens";
+var PRIMITIVE_CSS_END_MARKER = "/* \u2500\u2500 End Wensity Primitive Tokens \u2500\u2500 */";
+async function prepareInstall(projectRoot, config, payload, options = {}) {
   const fallbackFileName = componentFileName(payload.slug);
   const files = [];
   const componentContents = [];
-  let needsUtility = false;
-  let needsPrimitives = false;
-  for (const payloadFile of payload.files) {
-    const safePayloadPath = sanitizePayloadPath(payloadFile.path, fallbackFileName);
-    const relativeOutputPath = toPosixPath(join5(config.components, safePayloadPath));
-    const transformed = transformComponentSource(payloadFile.content, config);
-    needsUtility ||= transformed.needsUtility || transformed.needsPrimitives;
-    needsPrimitives ||= transformed.needsPrimitives;
-    componentContents.push(transformed.content);
-    files.push({
-      absolutePath: resolveInside(projectRoot, relativeOutputPath),
-      relativePath: relativeOutputPath,
-      content: transformed.content,
-      kind: "component"
+  const iconSwaps = [];
+  const style = normalizeStyleConfig(config.style);
+  const isPrimitiveCategory = isPrimitivePayloadCategory(payload.category);
+  const payloadHelperNeeds = normalizePayloadHelperNeeds(
+    "helperNeeds" in payload ? payload.helperNeeds : void 0
+  );
+  const inferredHelperNeeds = { utils: false, primitives: false, overlay: false };
+  const hasGraphHelperFiles = payload.files.some((file) => isGraphHelperFile(file));
+  for (const [index, payloadFile] of payload.files.entries()) {
+    const payloadFileKind = getPayloadFileKind(payloadFile);
+    const relativeOutputPath = getPayloadOutputPath(payloadFile, fallbackFileName, config);
+    const absoluteOutputPath = resolveInside(projectRoot, relativeOutputPath);
+    if (!payloadHelperNeeds) mergeHelperNeeds(inferredHelperNeeds, inferHelperNeeds(payloadFile.content));
+    const transformed = transformComponentSource(payloadFile.content, config, {
+      isPrimitiveCategory,
+      iconLibrary: style.iconLibrary,
+      slug: payload.slug
     });
+    componentContents.push(transformed.content);
+    iconSwaps.push(transformed.dependencySwap);
+    const isPrimaryFile = index === 0 && payloadFileKind === "component";
+    const shouldWriteFile = isPrimaryFile || options.overwriteExistingDependencyFiles || !await fileExists(absoluteOutputPath);
+    if (shouldWriteFile) {
+      files.push({
+        absolutePath: absoluteOutputPath,
+        relativePath: relativeOutputPath,
+        content: transformed.content,
+        kind: payloadFileKind
+      });
+    }
   }
-  if (needsUtility) {
+  const helperNeeds = payloadHelperNeeds ?? inferredHelperNeeds;
+  if (!hasGraphHelperFiles && helperNeeds.utils) {
     const utilityPath = withSourceExtension(config.utils, "ts");
     if (!await fileExists(resolveInside(projectRoot, utilityPath))) {
       files.push({
@@ -813,7 +2173,7 @@ async function prepareInstall(projectRoot, config, payload) {
       });
     }
   }
-  if (needsPrimitives) {
+  if (!hasGraphHelperFiles && helperNeeds.primitives) {
     const primitivesPath = toPosixPath(join5(config.components, "primitives.tsx"));
     if (!await fileExists(resolveInside(projectRoot, primitivesPath))) {
       const primitives = primitivesTemplate(config.aliases.utils);
@@ -826,17 +2186,69 @@ async function prepareInstall(projectRoot, config, payload) {
       componentContents.push(primitives);
     }
   }
+  const iconDependencySwap = aggregateIconDependencySwaps(iconSwaps);
+  const declaredAfterSwap = applyIconDependencySwap(payload.dependencies ?? [], iconDependencySwap);
   const dependencies = collectDependencies({
-    declared: payload.dependencies ?? [],
+    declared: declaredAfterSwap,
     source: componentContents.join("\n"),
-    needsUtility
+    needsUtility: helperNeeds.utils
   });
-  return { files, dependencies };
+  const cssFile = await planPrimitiveCssFile(projectRoot, config, payload);
+  return {
+    files,
+    dependencies,
+    ...cssFile ? { cssFile } : {},
+    ...isPrimitiveCategory ? { iconDependencySwap } : {}
+  };
+}
+async function planPrimitiveCssFile(projectRoot, config, payload) {
+  if (!("primitiveCss" in payload) || typeof payload.primitiveCss !== "string") {
+    return void 0;
+  }
+  let primitiveCss = payload.primitiveCss.trim();
+  if (!primitiveCss) return void 0;
+  const style = normalizeStyleConfig(config.style);
+  primitiveCss = applyStyleToPrimitiveCss(primitiveCss, style).trim();
+  const cssRelative = config.tailwind?.css;
+  if (!cssRelative) return void 0;
+  const absolutePath = resolveInside(projectRoot, cssRelative);
+  const existing = await fileExists(absolutePath) ? await readFile4(absolutePath, "utf8") : "";
+  const next = upsertPrimitiveCssBlock(existing, primitiveCss);
+  if (next === existing) return void 0;
+  return {
+    absolutePath,
+    relativePath: toPosixPath(cssRelative),
+    content: next,
+    kind: "config"
+  };
+}
+function upsertPrimitiveCssBlock(existingCss, block) {
+  const normalizedBlock = block.trim();
+  const start = existingCss.indexOf(PRIMITIVE_CSS_START_MARKER);
+  const end = existingCss.indexOf(PRIMITIVE_CSS_END_MARKER);
+  if (start !== -1 && end !== -1 && end > start) {
+    const before = existingCss.slice(0, start).replace(/\s*$/, "\n\n");
+    const after = existingCss.slice(end + PRIMITIVE_CSS_END_MARKER.length).replace(/^\s*/, "\n");
+    return `${before}${normalizedBlock}${after}`.replace(/\n{3,}/g, "\n\n");
+  }
+  if (start !== -1 || end !== -1) {
+    throw new CliError(
+      "Configured Tailwind CSS has a partial Wensity Primitive Tokens block. Remove the broken markers and re-run install."
+    );
+  }
+  const trimmed = existingCss.replace(/\s*$/, "");
+  if (!trimmed) return `${normalizedBlock}
+`;
+  return `${trimmed}
+
+${normalizedBlock}
+`;
 }
 async function assertNoConflicts(files, force) {
   if (force) return;
   const conflicts = [];
   for (const file of files) {
+    if (file.kind === "config") continue;
     if (await fileExists(file.absolutePath)) conflicts.push(file.relativePath);
   }
   if (conflicts.length > 0) {
@@ -846,27 +2258,93 @@ ${conflicts.map((path) => `  - ${path}`).join("\n")}`);
 }
 async function writePlannedFiles(files) {
   for (const file of files) {
-    await mkdir3(dirname4(file.absolutePath), { recursive: true });
-    await writeFile3(file.absolutePath, file.content, "utf8");
+    await mkdir4(dirname5(file.absolutePath), { recursive: true });
+    await writeFile4(file.absolutePath, file.content, "utf8");
   }
 }
 function summarizeFiles(projectRoot, files) {
   return files.map((file) => toPosixPath(relative3(projectRoot, file.absolutePath)));
 }
-function transformComponentSource(content, config) {
-  const needsUtility = content.includes("@wensity/ui/lib") || importsFrom(content, "@/lib/utils");
-  const needsPrimitives = content.includes("@wensity/ui/components") || importsFrom(content, "@/components/wensity/primitives");
+function transformComponentSource(content, config, iconOptions) {
   let transformed = content;
   transformed = transformed.replace(/from\s+["']@wensity\/ui\/lib["']/g, `from "${config.aliases.utils}"`);
   transformed = transformed.replace(/from\s+["']@\/lib\/utils["']/g, `from "${config.aliases.utils}"`);
-  transformed = transformed.replace(/from\s+["']@wensity\/ui\/components["']/g, `from "${config.aliases.components}/primitives"`);
-  transformed = transformed.replace(/from\s+["']@\/components\/wensity\/primitives["']/g, `from "${config.aliases.components}/primitives"`);
-  return { content: transformed, needsUtility, needsPrimitives };
+  transformed = transformed.replace(/from\s+["']@wensity\/ui\/components["']/g, `from "@/components/wensity/primitives"`);
+  transformed = rewriteWensityComponentAlias(transformed, config.aliases.components);
+  const iconResult = transformIconLibrary(transformed, {
+    isPrimitiveCategory: iconOptions.isPrimitiveCategory,
+    iconLibrary: iconOptions.iconLibrary,
+    slug: iconOptions.slug
+  });
+  return { content: iconResult.content, dependencySwap: iconResult.dependencySwap };
+}
+function getPayloadFileKind(payloadFile) {
+  if ("kind" in payloadFile && payloadFile.kind === "helper") return "helper";
+  return isGraphHelperFile(payloadFile) ? "helper" : "component";
+}
+function getPayloadOutputPath(payloadFile, fallbackFileName, config) {
+  if (isUtilsHelperFile(payloadFile)) return withSourceExtension(config.utils, "ts");
+  if (isOverlayHelperFile(payloadFile)) return toPosixPath(join5(config.components, "overlay.tsx"));
+  if (isPrimitivesHelperFile(payloadFile)) return toPosixPath(join5(config.components, "primitives.tsx"));
+  if (payloadFile.kind === "helper") {
+    throw new CliError(`Unsupported registry helper file path: ${payloadFile.path}`);
+  }
+  const safePayloadPath = sanitizePayloadPath(payloadFile.path, fallbackFileName);
+  return toPosixPath(join5(config.components, safePayloadPath));
+}
+function isGraphHelperFile(payloadFile) {
+  return isUtilsHelperFile(payloadFile) || isOverlayHelperFile(payloadFile) || isPrimitivesHelperFile(payloadFile);
+}
+function isUtilsHelperFile(payloadFile) {
+  const normalized = payloadFile.path.replace(/\\/g, "/").replace(/^\/+/, "");
+  return payloadFile.kind === "helper" && (normalized === "lib/utils.ts" || normalized === "src/lib/utils.ts");
+}
+function isOverlayHelperFile(payloadFile) {
+  const normalized = payloadFile.path.replace(/\\/g, "/").replace(/^\/+/, "");
+  return payloadFile.kind === "helper" && (normalized === OVERLAY_HELPER_PATH || normalized === `src/${OVERLAY_HELPER_PATH}`);
+}
+function isPrimitivesHelperFile(payloadFile) {
+  const normalized = payloadFile.path.replace(/\\/g, "/").replace(/^\/+/, "");
+  return payloadFile.kind === "helper" && (normalized === "components/wensity/primitives.tsx" || normalized === "src/components/wensity/primitives.tsx");
+}
+function rewriteWensityComponentAlias(source, componentsAlias) {
+  const replacement = componentsAlias.replace(/\/$/, "");
+  return source.replace(
+    /(from\s+["'])@\/components\/wensity(\/[^"']*)?(["'])/g,
+    (_match, prefix, suffix, quote) => `${prefix}${replacement}${suffix ?? ""}${quote}`
+  ).replace(
+    /(import\(\s*["'])@\/components\/wensity(\/[^"']*)?(["']\s*\))/g,
+    (_match, prefix, suffix, suffixQuote) => `${prefix}${replacement}${suffix ?? ""}${suffixQuote}`
+  );
 }
 function importsFrom(source, specifier) {
   const escaped = specifier.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   return new RegExp(`from\\s+["']${escaped}["']`).test(source);
 }
+function normalizePayloadHelperNeeds(value) {
+  if (!value || typeof value !== "object") return void 0;
+  const helperNeeds = value;
+  if (typeof helperNeeds.utils !== "boolean" || typeof helperNeeds.primitives !== "boolean") {
+    return void 0;
+  }
+  const overlay = helperNeeds.overlay === true;
+  return {
+    utils: helperNeeds.primitives || overlay || helperNeeds.utils,
+    primitives: helperNeeds.primitives,
+    overlay
+  };
+}
+function inferHelperNeeds(source) {
+  const overlay = importsFrom(source, "@/components/wensity/overlay");
+  const primitives = source.includes("@wensity/ui/components") || importsFrom(source, "@/components/wensity/primitives");
+  const utils = overlay || primitives || source.includes("@wensity/ui/lib") || importsFrom(source, "@/lib/utils");
+  return { utils, primitives, overlay };
+}
+function mergeHelperNeeds(target, source) {
+  target.overlay ||= source.overlay === true;
+  target.primitives ||= source.primitives;
+  target.utils ||= source.utils || source.primitives || source.overlay === true;
+}
 function collectDependencies(input) {
   const dependencies = /* @__PURE__ */ new Set();
   for (const dependency of input.declared) {
@@ -960,13 +2438,28 @@ async function initCommand(context, parsed) {
   const force = hasFlag(parsed, "force");
   const install = !hasFlag(parsed, "no-install");
   const apiUrl = getStringOption(parsed, "api-url") ?? context.env.WENSITY_API_URL ?? DEFAULT_API_ORIGIN;
+  const presetCode = getStringOption(parsed, "preset");
+  const presetFile = getStringOption(parsed, "preset-file");
+  const hasPreset = Boolean(presetCode || presetFile);
+  const dependencies = ["clsx", "tailwind-merge"];
+  if (hasPreset) {
+    await initWithPreset(context, {
+      dryRun,
+      force,
+      install,
+      apiUrl,
+      presetCode,
+      presetFile,
+      dependencies
+    });
+    return;
+  }
   const config = createDefaultConfig(context.cwd, apiUrl);
   const configPath = join6(context.cwd, CONFIG_FILE_NAME);
   const utilityPath = resolveConfiguredFilePath(context.cwd, config.utils);
   const utilityRelativePath = toPosixPath(config.utils.endsWith(".ts") ? config.utils : `${config.utils}.ts`);
-  const dependencies = ["clsx", "tailwind-merge"];
   if (dryRun) {
-    printBrand("Project initialization preview");
+    printTitle("Project initialization preview");
     print(action("Would write:"));
     print(formatList([CONFIG_FILE_NAME, utilityRelativePath]));
     if (install) print(action(`Would install: ${dependencies.join(" ")}`));
@@ -979,16 +2472,114 @@ async function initCommand(context, parsed) {
   if (install) {
     runInstall(context.cwd, missingDependencies(context.cwd, dependencies));
   }
-  printBrand("Project initialized");
+  printTitle("Project initialized");
   print(panel("Created", [
     success(CONFIG_FILE_NAME),
     success(utilityRelativePath),
     success(`registry: ${apiUrl}`)
   ]));
   print(nextSteps([
-    "npx wensity list",
-    "npx wensity add liquid-multimodal-input",
-    "npx wensity login --token <token>"
+    "Browse available components: npx wensity list",
+    "Browse premium blocks: npx wensity list --type block",
+    "Install your chosen slug: npx wensity add <component-slug>"
+  ]));
+}
+async function initWithPreset(context, options) {
+  const { style, presetCode } = await resolvePresetStyle({
+    presetCode: options.presetCode,
+    presetFile: options.presetFile
+  });
+  const configPath = join6(context.cwd, CONFIG_FILE_NAME);
+  const configExists = await fileExists(configPath);
+  let config;
+  if (configExists && !options.force) {
+    const loaded = await loadConfig(context.cwd, { apiUrl: options.apiUrl });
+    config = {
+      ...loaded.config,
+      style
+    };
+  } else {
+    config = {
+      ...createDefaultConfig(context.cwd, options.apiUrl),
+      style
+    };
+  }
+  const utilityPath = resolveConfiguredFilePath(context.cwd, config.utils);
+  const utilityRelativePath = toPosixPath(config.utils.endsWith(".ts") ? config.utils : `${config.utils}.ts`);
+  const registry = config.registry;
+  let primitiveCss;
+  try {
+    const payload = await withSpinner(
+      `Fetching primitive tokens (${INIT_PRIMITIVE_CSS_SLUG})`,
+      () => fetchComponentPayload({ slug: INIT_PRIMITIVE_CSS_SLUG, registry }),
+      "Fetched primitive tokens"
+    );
+    if (typeof payload.primitiveCss !== "string" || !payload.primitiveCss.trim()) {
+      throw new CliError(
+        `Pinned slug "${INIT_PRIMITIVE_CSS_SLUG}" did not return primitiveCss. Cannot apply preset styles.`
+      );
+    }
+    primitiveCss = applyStyleToPrimitiveCss(payload.primitiveCss, style).trim();
+  } catch (error) {
+    if (error instanceof CliError) throw error;
+    const message = error instanceof Error ? error.message : String(error);
+    throw new CliError(`Failed to fetch primitive CSS for preset init: ${message}`);
+  }
+  const cssRelative = config.tailwind?.css;
+  if (!cssRelative) {
+    throw new CliError("No Tailwind CSS path configured. Set tailwind.css in wensity.json.");
+  }
+  const cssAbsolute = resolveInside(context.cwd, cssRelative);
+  const existingCss = await fileExists(cssAbsolute) ? await readFile5(cssAbsolute, "utf8") : "";
+  const nextCss = upsertPrimitiveCssBlock(existingCss, primitiveCss);
+  const cssChanged = nextCss !== existingCss;
+  if (options.dryRun) {
+    printTitle("Project initialization preview (preset)");
+    print(action("Would write:"));
+    const planned = [CONFIG_FILE_NAME, utilityRelativePath];
+    if (cssChanged) planned.push(toPosixPath(cssRelative));
+    print(formatList(planned));
+    print(action(`Preset: ${presetCode.slice(0, 24)}\u2026`));
+    print(action(`Style: icon=${style.iconLibrary} radius=${style.radius}`));
+    if (options.install) print(action(`Would install: ${options.dependencies.join(" ")}`));
+    return;
+  }
+  const shouldWriteUtility = options.force || !await fileExists(utilityPath);
+  await commitPresetInitWrites({
+    cssAbsolute,
+    existingCss,
+    nextCss,
+    cssChanged,
+    writeUtility: shouldWriteUtility,
+    utilityAbsolutePath: utilityPath,
+    utilityContent: cnUtilityTemplate(),
+    commitConfig: async () => {
+      if (configExists && !options.force) {
+        await mergeStyleIntoConfigFile(configPath, style);
+      } else {
+        await writeConfigFile(configPath, config, options.force);
+      }
+    }
+  });
+  if (options.install) {
+    runInstall(context.cwd, missingDependencies(context.cwd, options.dependencies));
+  }
+  printTitle("Project initialized");
+  const created = [
+    success(CONFIG_FILE_NAME),
+    success(utilityRelativePath),
+    success(`registry: ${options.apiUrl}`),
+    success(`preset applied (${style.iconLibrary}, radius=${style.radius})`)
+  ];
+  if (cssChanged) {
+    created.push(success(`CSS tokens: ${toPosixPath(cssRelative)}`));
+  } else {
+    created.push(action(`CSS tokens unchanged: ${toPosixPath(cssRelative)}`));
+  }
+  print(panel("Created", created));
+  print(nextSteps([
+    "Browse available components: npx wensity list",
+    "Install a primitive: npx wensity add button"
   ]));
 }
 async function loginCommand(context, parsed) {
@@ -1011,17 +2602,19 @@ async function loginCommand(context, parsed) {
   printBrand("API token verified");
   print(formatAccountPanel(whoami, path));
   print(nextSteps(whoami.plan?.tier === "pro" ? [
-    "npx wensity add gooey-navigation-menu",
-    "npx wensity add monolith-hero --type block",
-    "npx wensity whoami"
+    "Browse Pro components: npx wensity list",
+    "Browse Pro blocks: npx wensity list --type block",
+    "Install a component: npx wensity add <component-slug>",
+    "Install a block: npx wensity add <block-slug> --type block"
   ] : [
-    "npx wensity add liquid-multimodal-input",
-    "Upgrade to unlock Pro components and blocks: https://ui.wensity.com/pricing"
+    "Browse free components: npx wensity list",
+    "Install any Free slug from the table: npx wensity add <slug>",
+    `Upgrade to unlock Pro components and blocks: ${pricingBlue("https://ui.wensity.com/pricing")}`
   ]));
 }
 async function logoutCommand(context) {
   const removed = await deleteCredentials(context.env);
-  printBrand("Session");
+  printTitle("Session");
   print(removed ? success("Logged out of Wensity.") : action("No Wensity credentials were stored."));
 }
 async function whoamiCommand(context, parsed) {
@@ -1056,8 +2649,9 @@ async function listCommand(context, parsed) {
     printBrand("Premium blocks");
     print(formatBlockGroup(response2.blocks));
     print(nextSteps([
-      "npx wensity login --token <pro-token>",
-      `npx wensity add ${response2.blocks[0]?.slug ?? "<block-slug>"} --type block`
+      brandRed("Create an API token in the dashboard if you have Pro"),
+      brandRed("Save the token: npx wensity login --token <token>"),
+      "Install your chosen block: npx wensity add <block-slug> --type block"
     ]));
     return;
   }
@@ -1075,9 +2669,9 @@ async function listCommand(context, parsed) {
   print(formatComponentGroup("Free", response.components.filter((component) => component.access !== "pro")));
   print(formatComponentGroup("Pro", response.components.filter((component) => component.access === "pro")));
   print(nextSteps([
-    "npx wensity add liquid-multimodal-input",
-    "npx wensity login --token <pro-token>",
-    "npx wensity list --type block"
+    "Choose any Free slug above: npx wensity add <component-slug>",
+    brandRed("For Pro slugs, save an API token: npx wensity login --token <token>"),
+    "Browse layout blocks: npx wensity list --type block"
   ]));
 }
 function formatComponentGroup(label, components) {
@@ -1116,37 +2710,51 @@ Usage: wensity ${updateMode ? "update" : "add"} <slug>${resourceType === "block"
   const loaded = await loadConfig(context.cwd, { registry: registryOverride, apiUrl });
   const credentials = await readCredentials(context.env);
   const registry = registryUrlForType(loaded.config.registry, resourceType, registryOverride);
-  const payload = resourceType === "block" ? await fetchBlockPayload({ slug, registry, credentials }) : await fetchComponentPayload({ slug, registry, credentials });
-  const prepared = await prepareInstall(loaded.projectRoot, loaded.config, payload);
   const force = updateMode || hasFlag(parsed, "force");
+  const payload = resourceType === "block" ? await fetchBlockPayload({ slug, registry, credentials }) : await fetchComponentPayload({ slug, registry, credentials });
+  const prepared = await prepareInstall(loaded.projectRoot, loaded.config, payload, {
+    overwriteExistingDependencyFiles: force
+  });
   const dryRun = hasFlag(parsed, "dry-run");
   const install = !hasFlag(parsed, "no-install");
-  await assertNoConflicts(prepared.files, force || dryRun);
-  const plannedFiles = summarizeFiles(loaded.projectRoot, prepared.files);
+  const plannedInstallFiles = prepared.cssFile ? [...prepared.files, prepared.cssFile] : prepared.files;
+  await assertNoConflicts(plannedInstallFiles, force || dryRun);
+  const plannedFiles = summarizeFiles(loaded.projectRoot, plannedInstallFiles);
   const missing = missingDependencies(loaded.projectRoot, prepared.dependencies);
+  const style = normalizeStyleConfig(loaded.config.style);
+  const installedPackages = readInstalledPackageNames(loaded.projectRoot);
+  const oppositeIconWarning = installedPackages && prepared.iconDependencySwap ? warnOppositeIconPackageMessage(style.iconLibrary, installedPackages) : void 0;
   if (dryRun) {
-    printBrand(updateMode ? "Update preview" : "Install preview");
+    printTitle(updateMode ? "Update preview" : "Install preview");
     print(action("Would write:"));
     print(formatList(plannedFiles));
+    if (prepared.cssFile) {
+      print(action(`Would update CSS tokens in: ${prepared.cssFile.relativePath}`));
+    }
     if (install && missing.length > 0) print(action(`Would install: ${missing.join(" ")}`));
+    if (oppositeIconWarning) warn(oppositeIconWarning);
     return;
   }
-  await writePlannedFiles(prepared.files);
+  await writePlannedFiles(plannedInstallFiles);
   if (install) {
     runInstall(loaded.projectRoot, missing);
   }
-  printBrand(updateMode ? "Component updated" : "Component installed");
+  printTitle(updateMode ? "Component updated" : "Component installed");
   print(panel(payload.name, [
     success(`${updateMode ? "Updated" : "Added"} ${payload.slug}`),
     ...plannedFiles.map((file) => success(file))
   ]));
+  if (oppositeIconWarning) warn(oppositeIconWarning);
   if (!install && missing.length > 0) {
     warn(`Dependencies were not installed: ${missing.join(" ")}`);
-    print(nextSteps([`Install dependencies: ${missing.join(" ")}`]));
+    print(nextSteps([
+      `Install skipped dependencies: npm install ${missing.join(" ")}`,
+      "Run without --no-install next time to let Wensity install them automatically"
+    ]));
     return;
   }
   print(nextSteps([
-    "Import the component from your Wensity components folder",
+    "Import the installed file from your Wensity components folder",
     resourceType === "block" ? "Customize the block copy, colors, and sections" : "Customize props and styling for your app"
   ]));
 }
@@ -1172,12 +2780,7 @@ async function fetchComponentPayload(input) {
     }
   }
   if (metadata.access === "pro") {
-    throw new CliError([
-      `${metadata.name} is a Pro component.`,
-      `Create an API token from the Wensity dashboard, then run:`,
-      `  npx wensity login --token <token>`,
-      `Upgrade: https://ui.wensity.com/pricing`
-    ].join("\n"));
+    throw new CliError(formatProRequiredError(metadata.name, "component"));
   }
   const publicSourceEndpoint = metadata.endpoints?.registry ?? registrySlugUrl(input.registry, input.slug);
   const endpoint = publicSourceEndpoint.startsWith("http") ? publicSourceEndpoint : joinUrl(registryOrigin(input.registry), publicSourceEndpoint);
@@ -1197,12 +2800,7 @@ async function fetchBlockPayload(input) {
     `Found ${input.slug}`
   );
   if (!input.credentials) {
-    throw new CliError([
-      `${metadata.name} is a Pro block.`,
-      `Create an API token from the Wensity dashboard, then run:`,
-      `  npx wensity login --token <token>`,
-      `Upgrade: https://ui.wensity.com/pricing`
-    ].join("\n"));
+    throw new CliError(formatProRequiredError(metadata.name, "block"));
   }
   const credentials = input.credentials;
   const cliEndpoint = metadata.endpoints?.cli ?? `/api/cli/blocks/${input.slug}`;
@@ -1226,7 +2824,7 @@ function registryUrlForType(componentRegistry, resourceType, registryOverride) {
 async function requireCredentials(env) {
   const credentials = await readCredentials(env);
   if (!credentials) {
-    throw new CliError("Not logged in. Run wensity login with an API token from the Wensity dashboard.");
+    throw new CliError(`Not logged in. ${brandRed("Run wensity login with an API token from the Wensity dashboard.")}`);
   }
   return credentials;
 }
@@ -1251,7 +2849,7 @@ function formatHelp() {
     nextSteps([
       "npx wensity init",
       "npx wensity list",
-      "npx wensity add liquid-multimodal-input"
+      "npx wensity add <component-slug>"
     ])
   ].join("\n");
 }
@@ -1269,8 +2867,8 @@ function formatAccountPanel(whoami, savedPath) {
   return panel(isPro ? "Wensity Pro" : "Wensity Free", lines);
 }
 async function writeTextFile(path, content) {
-  await mkdir4(dirname5(path), { recursive: true });
-  await writeFile4(path, content, "utf8");
+  await mkdir5(dirname6(path), { recursive: true });
+  await writeFile5(path, content, "utf8");
 }
 
 // src/index.ts