@dataengineeringformachinelearning/viking-ui 3.0.0-alpha.2 → 4.0.0

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@dataengineeringformachinelearning/viking-ui",
-  "version": "3.0.0-alpha.2",
+  "version": "4.0.0",
   "description": "Universal Viking-UI design system for Astro, Angular, and Django.",
   "license": "Apache-2.0",
   "type": "module",
   "private": false,
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
-  "types": "./dist/index.d.ts",
+  "main": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+  "module": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+  "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
   "style": "./dist/viking-ui.css",
   "browser": "./dist/viking-ui-elements.js",
   "repository": {
@@ -20,16 +20,17 @@
   },
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "import": "./dist/index.js"
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
+      "import": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
+      "default": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs"
     },
-    "./dist/index.js": "./dist/index.js",
+    "./dist/index.js": "./dist/fesm2022/dataengineeringformachinelearning-viking-ui.mjs",
     "./dist/viking-ui.css": "./dist/viking-ui.css",
     "./dist/viking-ui-elements.js": "./dist/viking-ui-elements.js",
     "./dist/web-components.js": "./dist/web-components.js",
     "./dist/widget.js": "./dist/widget.js",
     "./elements": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
       "import": "./dist/web-components.js",
       "default": "./dist/web-components.js"
     },
@@ -37,7 +38,7 @@
     "./viking-ui-elements.js": "./dist/viking-ui-elements.js",
     "./web-components.js": "./dist/web-components.js",
     "./web-components": {
-      "types": "./dist/index.d.ts",
+      "types": "./dist/types/dataengineeringformachinelearning-viking-ui.d.ts",
       "import": "./dist/web-components.js",
       "default": "./dist/web-components.js"
     },
@@ -66,16 +67,23 @@
   ],
   "scripts": {
     "clean": "rm -rf dist",
-    "build": "npm run clean && npm run build:css && npm run build:elements",
+    "build": "npm run clean && npm run build:ng && npm run build:css && npm run build:elements && npm run build:compat",
+    "build:ng": "ng-packagr -p ng-package.json -c tsconfig.lib.prod.json",
     "build:css": "node scripts/build-css.mjs",
     "build:elements": "node scripts/build-elements.mjs",
+    "build:compat": "node scripts/write-compat-entry.mjs",
     "storybook": "npm run build:css && storybook dev --config-dir .storybook --port 6006",
     "build-storybook": "npm run build:css && storybook build --config-dir .storybook --output-dir ./storybook-static",
     "chromatic": "npm run build-storybook && chromatic --project-token=${CHROMATIC_PROJECT_TOKEN} --exit-zero-on-changes",
     "validate": "node ../../scripts/validate_viking_ui_assets.mjs",
     "test": "node --test test/*.test.mjs",
     "pack:check": "npm pack --dry-run",
-    "typecheck": "tsc --project tsconfig.json --noEmit"
+    "typecheck": "tsc --project tsconfig.elements.json --noEmit"
+  },
+  "peerDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0"
   },
   "sideEffects": [
     "./dist/viking-ui-elements.js",
@@ -86,11 +94,17 @@
     "./src/index.ts"
   ],
   "devDependencies": {
+    "@angular/common": "^22.0.0",
+    "@angular/compiler": "^22.0.0",
+    "@angular/compiler-cli": "^22.0.0",
+    "@angular/core": "^22.0.0",
+    "@angular/forms": "^22.0.0",
     "@chromatic-com/storybook": "^3.2.7",
     "@storybook/addon-a11y": "^8.6.12",
     "@storybook/addon-essentials": "^8.6.12",
     "@storybook/html": "^8.6.12",
     "esbuild": "^0.28.1",
+    "ng-packagr": "^22.0.0",
     "sass": "^1.101.0",
     "typescript": "~6.0.3"
   }

package/src/assets/drakkar-favicon.svg

@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Viking-UI">
+  <rect width="32" height="32" rx="6" fill="#111111"/>
+  <g
+    transform="translate(4, 4)"
+    fill="none"
+    stroke="#0d7377"
+    stroke-width="1.75"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+  >
+    <path d="M12 10.189V14"/>
+    <path d="M12 2v3"/>
+    <path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/>
+    <path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/>
+    <path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>
+  </g>
+</svg>

package/src/core/brand/deml-lockup.svg

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="2" y="4" width="20" height="16" rx="2"/>
+  <path d="M7 17V13M11 17V8M15 17V11"/>
+  <path d="M2 20h20"/>
+</svg>

package/src/core/brand/deml-mark-compact.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="4" y="4" width="16" height="16" rx="3"/>
+  <path d="M9 16V12M12 16V9M15 16V13"/>
+</svg>

package/src/core/brand/deml-mark-filled.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+  <path d="M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zm2 11h2.5V10H7v5zm4.5-5h2.5v10h-2.5V10zm4.5-3h2.5v13h-2.5V7z"/>
+</svg>

package/src/core/brand/deml-mark-outline.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round" stroke-linejoin="round">
+  <rect x="3" y="3" width="18" height="18" rx="2"/>
+  <path d="M8 17V13M12 17V8M16 17V11"/>
+</svg>

package/src/core/brand-icons.ts

@@ -0,0 +1,62 @@
+/**
+ * DEML branded icon paths — optimized SVG geometry (not sourced from Lucide).
+ * Use via viking-icon name="deml" | "deml-compact" | "deml-lockup".
+ */
+export const VIKING_BRAND_ICON_PATHS = {
+  /** Primary bar-chart mark in rounded frame (outline). */
+  deml: '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/>',
+  /** Compact monogram for favicons and dense Drakkar shell. */
+  "deml-compact":
+    '<rect x="4" y="4" width="16" height="16" rx="3"/><path d="M9 16V12M12 16V9M15 16V13"/>',
+  /** Lockup mark with baseline accent bar. */
+  "deml-lockup":
+    '<rect x="3" y="3" width="18" height="14" rx="2"/><path d="M8 17V13M12 17V8M16 17V11"/><path d="M3 20h18"/>',
+} as const;
+
+/** Drakkar — Viking-UI / site shell brand marks (Lucide ship, build-time inlined). */
+export const VIKING_DRAKKAR_ICON_PATHS = {
+  /** Primary Drakkar longship mark (outline). */
+  drakkar:
+    '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
+  /** Compact tile for favicons and dense navbar chrome. */
+  "drakkar-compact":
+    '<rect x="3" y="3" width="18" height="18" rx="2"/><path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/>',
+  /** Lockup mark with baseline accent bar. */
+  "drakkar-lockup":
+    '<path d="M12 10.189V14"/><path d="M12 2v3"/><path d="M19 13V7a2 2 0 0 0-2-2H7a2 2 0 0 0-2 2v6"/><path d="M19.38 20A11.6 11.6 0 0 0 21 14l-8.188-3.639a2 2 0 0 0-1.624 0L3 14a11.6 11.6 0 0 0 2.81 7.76"/><path d="M2 21c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1s1.2 1 2.5 1c2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"/><path d="M3 21h18"/>',
+} as const;
+
+/** Filled-path overrides for DEML brand marks. */
+export const VIKING_BRAND_ICON_FILLED_PATHS: Partial<
+  Record<keyof typeof VIKING_BRAND_ICON_PATHS, string>
+> = {
+  deml: '<path d="M5 4a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/>',
+  "deml-compact":
+    '<path d="M6 5a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H7a1 1 0 0 1-1-1V5zM9 12h1.5v4H9v-4zM12 9h1.5v7H12V9zM15 11h1.5v5H15v-5z"/>',
+  "deml-lockup":
+    '<path d="M4 4a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4zM8 13h2.5v4H8v-4zM12 8h2.5v9H12V8zM16 11h2.5v6H16v-6z"/><rect x="3" y="19" width="18" height="2" rx="1"/>',
+};
+
+/** Filled-path overrides for Drakkar brand marks. */
+export const VIKING_DRAKKAR_ICON_FILLED_PATHS: Partial<
+  Record<keyof typeof VIKING_DRAKKAR_ICON_PATHS, string>
+> = {
+  drakkar:
+    '<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/>',
+  "drakkar-compact":
+    '<path d="M3 3h18a2 2 0 0 1 2 2v18a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M7.5 12.5 12 9.8l4.5 2.7v2.2c0 .8-.5 1.4-1.2 1.7L12 17.8l-3.3-1.6c-.7-.3-1.2-.9-1.2-1.7v-2.2z"/><rect x="11" y="6" width="2" height="5.5" rx="0.35"/>',
+  "drakkar-lockup":
+    '<path d="M7 5h10a2 2 0 0 1 2 2v3.5L20.8 14.2l-7.8-3.5a1.8 1.8 0 0 0-1.4 0L3.2 14.2a10.5 10.5 0 0 0 2.6 7.2L5.2 13V7a2 2 0 0 0-2-2z"/><rect x="10.85" y="2" width="2.3" height="12" rx="0.4"/><rect x="3" y="20" width="18" height="2" rx="1"/>',
+};
+
+export type VikingBrandIconName = keyof typeof VIKING_BRAND_ICON_PATHS;
+
+export type VikingDrakkarIconName = keyof typeof VIKING_DRAKKAR_ICON_PATHS;
+
+export const VIKING_BRAND_ICON_NAMES_LIST = Object.keys(
+  VIKING_BRAND_ICON_PATHS,
+) as VikingBrandIconName[];
+
+export const VIKING_DRAKKAR_ICON_NAMES_LIST = Object.keys(
+  VIKING_DRAKKAR_ICON_PATHS,
+) as VikingDrakkarIconName[];

package/src/core/icons.spec.ts

@@ -0,0 +1,52 @@
+import { describe, it, expect } from "vitest";
+import {
+  MATERIAL_ICON_ALIASES,
+  VIKING_ICON_PATHS,
+  resolveVikingIcon,
+  resolveVikingIconColor,
+  resolveVikingIconSize,
+  vikingIconViewBox,
+} from "./icons";
+
+describe("icons registry", () => {
+  it("resolves direct icon names case-insensitively", () => {
+    expect(resolveVikingIcon("search")).toBe("search");
+    expect(resolveVikingIcon("Shield")).toBe("shield");
+  });
+
+  it("maps legacy Material icon ligatures to Viking keys", () => {
+    expect(resolveVikingIcon("trending_up")).toBe("trending-up");
+    expect(resolveVikingIcon("verified_user")).toBe("user-shield");
+    expect(MATERIAL_ICON_ALIASES["rocket_launch"]).toBe("rocket");
+  });
+
+  it("falls back to info for unknown names", () => {
+    expect(resolveVikingIcon("does-not-exist")).toBe("info");
+  });
+
+  it("resolves size presets to pixel dimensions", () => {
+    expect(resolveVikingIconSize(undefined, "sm")).toBe(16);
+    expect(resolveVikingIconSize(undefined, "md")).toBe(20);
+    expect(resolveVikingIconSize(undefined, "lg")).toBe(24);
+    expect(resolveVikingIconSize(28, null)).toBe(28);
+    expect(resolveVikingIconSize(undefined, null)).toBe(24);
+  });
+
+  it("maps semantic color tokens to CSS custom properties", () => {
+    expect(resolveVikingIconColor("accent")).toBe("var(--viking-accent)");
+    expect(resolveVikingIconColor("danger")).toBe("var(--viking-danger)");
+    expect(resolveVikingIconColor("inherit")).toBeUndefined();
+    expect(resolveVikingIconColor("var(--custom)")).toBe("var(--custom)");
+  });
+
+  it("uses a consistent 24×24 viewBox for registry icons", () => {
+    expect(vikingIconViewBox("check")).toBe("0 0 24 24");
+    expect(vikingIconViewBox("drakkar")).toBe("0 0 24 24");
+  });
+
+  it("registers core Lucide and brand icons", () => {
+    expect(VIKING_ICON_PATHS["search"]).toBeTruthy();
+    expect(VIKING_ICON_PATHS["drakkar"]).toBeTruthy();
+    expect(VIKING_ICON_PATHS["deml"]).toBeTruthy();
+  });
+});

package/src/core/icons.ts

@@ -0,0 +1,206 @@
+/**
+ * Zero-dependency inline SVG icon registry (24×24 stroke icons).
+ * Lucide paths are synced at build time; DEML brand marks are custom artwork.
+ */
+import { LUCIDE_ICON_PATHS } from "./lucide-paths.generated";
+import {
+  VIKING_BRAND_ICON_FILLED_PATHS,
+  VIKING_BRAND_ICON_PATHS,
+  VIKING_BRAND_ICON_NAMES_LIST,
+  VIKING_DRAKKAR_ICON_FILLED_PATHS,
+  VIKING_DRAKKAR_ICON_PATHS,
+  VIKING_DRAKKAR_ICON_NAMES_LIST,
+} from "./brand-icons";
+import {
+  VIKING_INTEGRATION_ICON_PATHS,
+  VIKING_INTEGRATION_ICON_NAMES_LIST,
+} from "./integration-brand-icons";
+
+export {
+  VIKING_DRAKKAR_ICON_NAMES_LIST,
+  VIKING_BRAND_ICON_NAMES_LIST,
+} from "./brand-icons";
+export {
+  VIKING_INTEGRATION_ICON_NAMES_LIST,
+  type VikingIntegrationIconName,
+} from "./integration-brand-icons";
+
+export type VikingIconName = keyof typeof VIKING_ICON_PATHS;
+
+export type VikingIconSizePreset = "sm" | "md" | "lg";
+
+export type VikingIconVariant = "outline" | "filled";
+
+/** Semantic color tokens resolved to CSS custom properties. */
+export type VikingIconColorToken =
+  | "inherit"
+  | "accent"
+  | "success"
+  | "warning"
+  | "danger"
+  | "info"
+  | "muted"
+  | "text";
+
+/** Pixel sizes for sm / md / lg presets. */
+export const VIKING_ICON_SIZE_PRESETS: Record<VikingIconSizePreset, number> = {
+  sm: 16,
+  md: 20,
+  lg: 24,
+} as const;
+
+/** Custom icons not covered by Lucide (hub topology, ML model tile, OAuth stubs). */
+const VIKING_CUSTOM_ICON_PATHS = {
+  hub: '<circle cx="12" cy="12" r="3"/><path d="M12 3v3M12 18v3M3 12h3M18 12h3M5.6 5.6l2.1 2.1M16.3 16.3l2.1 2.1M18.4 5.6l-2.1 2.1M7.7 16.3l-2.1 2.1"/>',
+  model:
+    '<rect x="4" y="8" width="16" height="10" rx="2"/><path d="M8 8V6a4 4 0 0 1 8 0v2"/>',
+  google:
+    '<path d="M12 11.2v2.4h6.6c-.3 1.5-1.8 4.4-6.6 4.4-4 0-7.2-3.3-7.2-7.3S8 3.4 12 3.4c2.3 0 3.9 1 4.8 1.8l3.2-3.1C17.5.8 14.9 0 12 0 5.4 0 0 5.4 0 12s5.4 12 12 12c6.9 0 11.5-4.8 11.5-11.6 0-.8-.1-1.4-.2-1.9H12z"/>',
+  apple:
+    '<path d="M16.365 12.14c.02 2.53 2.21 3.38 2.23 3.39-.02.07-.35 1.21-1.16 2.4-.7 1.02-1.43 2.03-2.58 2.05-1.13.02-1.49-.67-2.78-.67-1.29 0-1.69.65-2.75.69-1.11.04-1.95-1.12-2.66-2.13-1.44-2.08-2.54-5.87-1.07-8.43.73-1.27 2.04-2.08 3.46-2.1 1.08-.02 2.1.72 2.78.72.67 0 2.14-.89 3.61-.76.61.03 2.33.25 3.44 1.88-.09.06-2.05 1.2-2.03 3.55M13.75 3.64c.59-.71 1-1.7.89-2.68-.86.03-1.9.57-2.52 1.28-.55.63-1.03 1.65-.9 2.62.95.07 1.92-.49 2.53-1.22"/>',
+} as const;
+
+export const VIKING_ICON_PATHS = {
+  ...LUCIDE_ICON_PATHS,
+  ...VIKING_BRAND_ICON_PATHS,
+  ...VIKING_DRAKKAR_ICON_PATHS,
+  ...VIKING_INTEGRATION_ICON_PATHS,
+  ...VIKING_CUSTOM_ICON_PATHS,
+} as const;
+
+/** Filled-path overrides used when variant="filled" (brand marks, solid shapes). */
+export const VIKING_ICON_FILLED_PATHS: Partial<Record<VikingIconName, string>> =
+  {
+    ...VIKING_BRAND_ICON_FILLED_PATHS,
+    ...VIKING_DRAKKAR_ICON_FILLED_PATHS,
+  };
+
+/** Legacy Material Icons ligature names → Viking icon registry keys. */
+export const MATERIAL_ICON_ALIASES: Record<string, VikingIconName> = {
+  analytics: "deml",
+  security: "shield",
+  link: "link",
+  visibility: "eye",
+  shield: "shield",
+  trending_up: "trending-up",
+  lock: "lock",
+  fingerprint: "fingerprint",
+  gpp_maybe: "shield",
+  verified_user: "user-shield",
+  bolt: "bolt",
+  cloud: "cloud",
+  lan: "network",
+  hub: "hub",
+  speed: "speed",
+  rocket_launch: "rocket",
+  insights: "insights",
+  check: "check",
+  description: "file",
+  vpn_key: "key",
+  policy: "policy",
+  bug_report: "bug",
+  search: "search",
+  chevron_left: "chevron-left",
+  chevron_right: "chevron-right",
+  verified: "check-circle",
+  warning: "alert-triangle",
+  close: "x",
+  account_balance: "building",
+  send: "send",
+  check_circle: "check-circle",
+  play_circle: "play",
+  input: "terminal",
+  model_training: "model",
+  auto_awesome: "sparkle",
+  error_outline: "alert-circle",
+  home: "home",
+  cookie: "cookie",
+  search_off: "search-off",
+  person_add: "user",
+  storage: "aws-redshift",
+  data_object: "aws-redshift",
+  memory: "tensorflow",
+  psychology: "pytorch",
+  dns: "server",
+  login: "log-in",
+};
+
+/** Icons always rendered with fill (play triangle, dot grids). */
+export const VIKING_FILLED_ICON_NAMES = [
+  "play",
+  "dots-horizontal",
+  "dots-vertical",
+  "grip-vertical",
+] as const satisfies readonly VikingIconName[];
+
+/** OAuth / vendor marks rendered with official brand artwork in viking-icon. */
+export const VIKING_BRAND_ICON_NAMES = [
+  "google",
+  "apple",
+  ...VIKING_BRAND_ICON_NAMES_LIST,
+] as const satisfies readonly VikingIconName[];
+
+const VIKING_ICON_COLOR_TOKENS: Record<
+  Exclude<VikingIconColorToken, "inherit">,
+  string
+> = {
+  accent: "var(--viking-accent)",
+  success: "var(--viking-success)",
+  warning: "var(--viking-warning)",
+  danger: "var(--viking-danger)",
+  info: "var(--viking-info)",
+  muted: "var(--viking-text-muted)",
+  text: "var(--viking-text)",
+};
+
+export const vikingIconViewBox = (_name: VikingIconName): string => "0 0 24 24";
+
+/** Resolve pixel size from preset or explicit value. */
+export const resolveVikingIconSize = (
+  size: number | undefined,
+  preset: VikingIconSizePreset | null | undefined,
+): number => {
+  if (preset) {
+    return VIKING_ICON_SIZE_PRESETS[preset];
+  }
+  return size ?? VIKING_ICON_SIZE_PRESETS.lg;
+};
+
+/** Resolve semantic color token or raw CSS value for icon tinting. */
+export const resolveVikingIconColor = (
+  color: VikingIconColorToken | string | undefined,
+): string | undefined => {
+  if (!color || color === "inherit") {
+    return undefined;
+  }
+  if (color in VIKING_ICON_COLOR_TOKENS) {
+    return VIKING_ICON_COLOR_TOKENS[
+      color as Exclude<VikingIconColorToken, "inherit">
+    ];
+  }
+  return color;
+};
+
+const VIKING_ICON_PATH_KEYS = new Set(Object.keys(VIKING_ICON_PATHS));
+
+/** Resolve a Viking or legacy Material icon name to a registry key. */
+export const resolveVikingIcon = (name: string): VikingIconName => {
+  const normalized = name.trim().toLowerCase().replace(/\s+/g, "_");
+  if (VIKING_ICON_PATH_KEYS.has(normalized)) {
+    return normalized as VikingIconName;
+  }
+  const alias = MATERIAL_ICON_ALIASES[normalized];
+  if (alias) {
+    return alias;
+  }
+  return "info";
+};
+
+export const VIKING_ICON_NAMES = Object.keys(
+  VIKING_ICON_PATHS,
+) as VikingIconName[];
+
+/** Lucide-sourced icon names (for docs and showcase grouping). */
+export const VIKING_LUCIDE_ICON_NAMES = Object.keys(
+  LUCIDE_ICON_PATHS,
+) as (keyof typeof LUCIDE_ICON_PATHS)[];

package/src/core/integration-brand-icons.ts

@@ -0,0 +1,77 @@
+/** Official platform brand colors — exception for recognizable integration marks (same policy as Google/Apple in viking-icon). */
+export const VIKING_INTEGRATION_BRAND_COLORS = {
+  kubernetes: "#326CE5",
+  tensorflow: "#FF6F00",
+  pytorch: "#EE4C2C",
+  "apache-spark": "#E25A1C",
+  databricks: "#FF3621",
+  "aws-redshift": "#8C4FFF",
+} as const;
+
+export type VikingIntegrationBrandName =
+  keyof typeof VIKING_INTEGRATION_BRAND_COLORS;
+
+export const VIKING_INTEGRATION_BRAND_NAMES = Object.keys(
+  VIKING_INTEGRATION_BRAND_COLORS,
+) as VikingIntegrationBrandName[];
+
+export const isIntegrationBrandIcon = (
+  name: string,
+): name is VikingIntegrationBrandName =>
+  (VIKING_INTEGRATION_BRAND_NAMES as readonly string[]).includes(name);
+
+/**
+ * Official product logo paths (24×24 viewBox) sourced from Simple Icons (CC0).
+ * Inlined at build time — no runtime icon font or CDN.
+ */
+const VIKING_INTEGRATION_BRAND_PATHS: Record<
+  VikingIntegrationBrandName,
+  string
+> = {
+  kubernetes:
+    "M10.204 14.35l.007.01-.999 2.413a5.171 5.171 0 0 1-2.075-2.597l2.578-.437.004.005a.44.44 0 0 1 .484.606zm-.833-2.129a.44.44 0 0 0 .173-.756l.002-.011L7.585 9.7a5.143 5.143 0 0 0-.73 3.255l2.514-.725.002-.009zm1.145-1.98a.44.44 0 0 0 .699-.337l.01-.005.15-2.62a5.144 5.144 0 0 0-3.01 1.442l2.147 1.523.004-.002zm.76 2.75l.723.349.722-.347.18-.78-.5-.623h-.804l-.5.623.179.779zm1.5-3.095a.44.44 0 0 0 .7.336l.008.003 2.134-1.513a5.188 5.188 0 0 0-2.992-1.442l.148 2.615.002.001zm10.876 5.97l-5.773 7.181a1.6 1.6 0 0 1-1.248.594l-9.261.003a1.6 1.6 0 0 1-1.247-.596l-5.776-7.18a1.583 1.583 0 0 1-.307-1.34L2.1 5.573c.108-.47.425-.864.863-1.073L11.305.513a1.606 1.606 0 0 1 1.385 0l8.345 3.985c.438.209.755.604.863 1.073l2.062 8.955c.108.47-.005.963-.308 1.34zm-3.289-2.057c-.042-.01-.103-.026-.145-.034-.174-.033-.315-.025-.479-.038-.35-.037-.638-.067-.895-.148-.105-.04-.18-.165-.216-.216l-.201-.059a6.45 6.45 0 0 0-.105-2.332 6.465 6.465 0 0 0-.936-2.163c.052-.047.15-.133.177-.159.008-.09.001-.183.094-.282.197-.185.444-.338.743-.522.142-.084.273-.137.415-.242.032-.024.076-.062.11-.089.24-.191.295-.52.123-.736-.172-.216-.506-.236-.745-.045-.034.027-.08.062-.111.088-.134.116-.217.23-.33.35-.246.25-.45.458-.673.609-.097.056-.239.037-.303.033l-.19.135a6.545 6.545 0 0 0-4.146-2.003l-.012-.223c-.065-.062-.143-.115-.163-.25-.022-.268.015-.557.057-.905.023-.163.061-.298.068-.475.001-.04-.001-.099-.001-.142 0-.306-.224-.555-.5-.555-.275 0-.499.249-.499.555l.001.014c0 .041-.002.092 0 .128.006.177.044.312.067.475.042.348.078.637.056.906a.545.545 0 0 1-.162.258l-.012.211a6.424 6.424 0 0 0-4.166 2.003 8.373 8.373 0 0 1-.18-.128c-.09.012-.18.04-.297-.029-.223-.15-.427-.358-.673-.608-.113-.12-.195-.234-.329-.349-.03-.026-.077-.062-.111-.088a.594.594 0 0 0-.348-.132.481.481 0 0 0-.398.176c-.172.216-.117.546.123.737l.007.005.104.083c.142.105.272.159.414.242.299.185.546.338.743.522.076.082.09.226.1.288l.16.143a6.462 6.462 0 0 0-1.02 4.506l-.208.06c-.055.072-.133.184-.215.217-.257.081-.546.11-.895.147-.164.014-.305.006-.48.039-.037.007-.09.02-.133.03l-.004.002-.007.002c-.295.071-.484.342-.423.608.061.267.349.429.645.365l.007-.001.01-.003.129-.029c.17-.046.294-.113.448-.172.33-.118.604-.217.87-.256.112-.009.23.069.288.101l.217-.037a6.5 6.5 0 0 0 2.88 3.596l-.09.218c.033.084.069.199.044.282-.097.252-.263.517-.452.813-.091.136-.185.242-.268.399-.02.037-.045.095-.064.134-.128.275-.034.591.213.71.248.12.556-.007.69-.282v-.002c.02-.039.046-.09.062-.127.07-.162.094-.301.144-.458.132-.332.205-.68.387-.897.05-.06.13-.082.215-.105l.113-.205a6.453 6.453 0 0 0 4.609.012l.106.192c.086.028.18.042.256.155.136.232.229.507.342.84.05.156.074.295.145.457.016.037.043.09.062.129.133.276.442.402.69.282.247-.118.341-.435.213-.71-.02-.039-.045-.096-.065-.134-.083-.156-.177-.261-.268-.398-.19-.296-.346-.541-.443-.793-.04-.13.007-.21.038-.294-.018-.022-.059-.144-.083-.202a6.499 6.499 0 0 0 2.88-3.622c.064.01.176.03.213.038.075-.05.144-.114.28-.104.266.039.54.138.87.256.154.06.277.128.448.173.036.01.088.019.13.028l.009.003.007.001c.297.064.584-.098.645-.365.06-.266-.128-.537-.423-.608zM16.4 9.701l-1.95 1.746v.005a.44.44 0 0 0 .173.757l.003.01 2.526.728a5.199 5.199 0 0 0-.108-1.674A5.208 5.208 0 0 0 16.4 9.7zm-4.013 5.325a.437.437 0 0 0-.404-.232.44.44 0 0 0-.372.233h-.002l-1.268 2.292a5.164 5.164 0 0 0 3.326.003l-1.27-2.296h-.01zm1.888-1.293a.44.44 0 0 0-.27.036.44.44 0 0 0-.214.572l-.003.004 1.01 2.438a5.15 5.15 0 0 0 2.081-2.615l-2.6-.44-.004.005z",
+  tensorflow:
+    "M1.292 5.856L11.54 0v24l-4.095-2.378V7.603l-6.168 3.564.015-5.31zm21.43 5.311l-.014-5.31L12.46 0v24l4.095-2.378V14.87l3.092 1.788-.018-4.618-3.074-1.756V7.603l6.168 3.564z",
+  pytorch:
+    "M12.005 0L4.952 7.053a9.865 9.865 0 000 14.022 9.866 9.866 0 0014.022 0c3.984-3.9 3.986-10.205.085-14.023l-1.744 1.743c2.904 2.905 2.904 7.634 0 10.538s-7.634 2.904-10.538 0-2.904-7.634 0-10.538l4.647-4.646.582-.665zm3.568 3.899a1.327 1.327 0 00-1.327 1.327 1.327 1.327 0 001.327 1.328A1.327 1.327 0 0016.9 5.226 1.327 1.327 0 0015.573 3.9z",
+  "apache-spark":
+    "M10.812 0c-.425.013-.845.215-1.196.605a3.593 3.593 0 00-.493.722c-.355.667-.425 1.415-.556 2.143a551.9 551.9 0 00-.726 4.087c-.027.16-.096.227-.244.273C5.83 8.386 4.06 8.94 2.3 9.514c-.387.125-.773.289-1.114.506-1.042.665-1.196 1.753-.415 2.71.346.422.79.715 1.284.936 1.1.49 2.202.976 3.3 1.47.019.01.036.013.053.019h-.004l1.306.535c0 .023.002.045 0 .073-.2 2.03-.39 4.063-.58 6.095-.04.419-.012.831.134 1.23.317.87 1.065 1.148 1.881.701.372-.204.666-.497.937-.818 1.372-1.623 2.746-3.244 4.113-4.872.111-.133.205-.15.363-.098.349.117.697.231 1.045.347h.001c.02.012.045.02.073.03l.142.042c1.248.416 2.68.775 3.929 1.19.4.132.622.164 1.045.098.311-.048.592-.062.828-.236.602-.33.995-.957.988-1.682-.005-.427-.154-.813-.35-1.186-.82-1.556-1.637-3.113-2.461-4.666-.078-.148-.076-.243.037-.375 1.381-1.615 2.756-3.236 4.133-4.855.272-.32.513-.658.653-1.058.308-.878-.09-1.57-1-1.741a2.783 2.783 0 00-1.235.069c-1.974.521-3.947 1.041-5.918 1.57-.175.047-.26.015-.355-.144a353.08 353.08 0 00-2.421-4.018 4.61 4.61 0 00-.652-.849c-.371-.37-.802-.549-1.227-.536zm.172 3.703a.592.592 0 01.189.211c.87 1.446 1.742 2.89 2.609 4.338.07.118.135.16.277.121 1.525-.41 3.052-.813 4.579-1.217.367-.098.735-.193 1.103-.289a.399.399 0 01-.1.2c-1.259 1.48-2.516 2.962-3.779 4.438-.11.13-.12.22-.04.37.937 1.803 1.768 3.309 2.498 4.76l-3.696-1.019c-.538-.18-1.077-.358-1.615-.539-.163-.055-.25-.03-.36.1-1.248 1.488-2.504 2.97-3.759 4.454a.398.398 0 01-.18.132c.035-.378.068-.757.104-1.136.149-1.572.297-3.144.451-4.716-.03-.318.117-.405-.322-.545-1.493-.593-3.346-1.321-4.816-1.905a.595.595 0 01.24-.134c1.797-.57 3.595-1.14 5.394-1.705.127-.04.199-.092.211-.233.013-.148.05-.294.076-.441.241-1.363.483-2.726.726-4.088.068-.386.14-.771.21-1.157z",
+  databricks:
+    "M.95 14.184L12 20.403l9.919-5.55v2.21L12 22.662l-10.484-5.96-.565.308v.77L12 24l11.05-6.218v-4.317l-.515-.309L12 19.118l-9.867-5.653v-2.21L12 16.805l11.05-6.218V6.32l-.515-.308L12 11.974 2.647 6.681 12 1.388l7.76 4.368.668-.411v-.566L12 0 .95 6.27v.72L12 13.207l9.919-5.55v2.26L12 15.52 1.516 9.56l-.565.308Z",
+  "aws-redshift":
+    "M16.639 9.932a.822.822 0 0 1-.822-.82.823.823 0 0 1 1.645 0c0 .452-.37.82-.823.82m-2.086 4.994a.823.823 0 0 1-.822-.822.822.822 0 0 1 1.645 0 .822.822 0 0 1-.823.822m-5.004-.833a.822.822 0 1 1 .002-1.644.822.822 0 0 1-.002 1.644m-2.083 4.578a.823.823 0 0 1-.823-.82.823.823 0 0 1 1.645 0c0 .452-.37.82-.822.82m9.173-11.236a1.68 1.68 0 0 0-1.68 1.676c0 .566.285 1.066.718 1.37l-.782 1.982a1.674 1.674 0 0 0-1.923 1.104l-1.753-.398a1.675 1.675 0 0 0-3.348.103c0 .432.169.823.438 1.12l-.764 1.79c-.028-.001-.053-.008-.08-.008a1.68 1.68 0 0 0-1.68 1.676 1.68 1.68 0 0 0 3.36 0c0-.593-.312-1.112-.778-1.41l.674-1.579c.161.052.33.088.508.088.661 0 1.228-.386 1.502-.94l1.856.42a1.68 1.68 0 0 0 3.327-.325c0-.5-.224-.943-.574-1.25l.822-2.083c.053.005.104.016.157.016a1.68 1.68 0 0 0 1.68-1.676 1.68 1.68 0 0 0-1.68-1.676M12 23.145c-4.17 0-7.286-1.252-7.286-2.37V4.79C6.14 5.938 9.131 6.547 12 6.547c2.869 0 5.86-.609 7.286-1.756v15.983c0 1.12-3.116 2.37-7.286 2.37M12 .856c4.293 0 7.286 1.274 7.286 2.419 0 1.143-2.993 2.418-7.286 2.418-4.293 0-7.286-1.275-7.286-2.418C4.714 2.129 7.707.855 12 .855m8.143 2.419C20.143 1.147 15.947 0 12 0 8.052 0 3.857 1.147 3.857 3.274l.002.01h-.002v17.49C3.857 22.87 8.052 24 12 24c3.947 0 8.143-1.13 8.143-3.226V3.284h-.002l.002-.01",
+};
+
+const integrationBrandSvg = (name: VikingIntegrationBrandName): string => {
+  const fill = VIKING_INTEGRATION_BRAND_COLORS[name];
+  const d = VIKING_INTEGRATION_BRAND_PATHS[name];
+  return `<path fill="${fill}" d="${d}"/>`;
+};
+
+/** Multi-path brand SVG markup (24×24 viewBox) — official product logos at brand hue. */
+export const VIKING_INTEGRATION_BRAND_SVGS: Record<
+  VikingIntegrationBrandName,
+  string
+> = {
+  kubernetes: integrationBrandSvg("kubernetes"),
+  tensorflow: integrationBrandSvg("tensorflow"),
+  pytorch: integrationBrandSvg("pytorch"),
+  "apache-spark": integrationBrandSvg("apache-spark"),
+  databricks: integrationBrandSvg("databricks"),
+  "aws-redshift": integrationBrandSvg("aws-redshift"),
+};
+
+/** Path markup for icon registry / viking-icon-paths.json sync. */
+export const VIKING_INTEGRATION_ICON_PATHS = Object.fromEntries(
+  (
+    Object.entries(VIKING_INTEGRATION_BRAND_PATHS) as [
+      VikingIntegrationBrandName,
+      string,
+    ][]
+  ).map(([name, d]) => [name, `<path d="${d}"/>`]),
+) as Record<VikingIntegrationBrandName, string>;
+
+export type VikingIntegrationIconName = VikingIntegrationBrandName;
+
+export const VIKING_INTEGRATION_ICON_NAMES_LIST =
+  VIKING_INTEGRATION_BRAND_NAMES;