@kuniversedev/design-tokens 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 K-Universe
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,224 @@
+# @k-universe/design-tokens
+
+K-Universe design tokens — CSS custom properties, TypeScript token objects, Tailwind CSS plugin, and React branding primitives. Install once, apply the K-Universe design system anywhere.
+
+[![npm](https://img.shields.io/npm/v/@k-universe/design-tokens)](https://www.npmjs.com/package/@k-universe/design-tokens)
+[![license](https://img.shields.io/npm/l/@k-universe/design-tokens)](./LICENSE)
+
+---
+
+## Install
+
+```bash
+# pnpm (recommended)
+pnpm add @k-universe/design-tokens
+
+# npm
+npm install @k-universe/design-tokens
+
+# bun
+bun add @k-universe/design-tokens
+```
+
+---
+
+## Token overview
+
+| Category | Description |
+|---|---|
+| Colors | Monochrome foundation + `--ku-primary` (#0066FF) + `--ku-secondary` (#00CC88) |
+| Typography | Power Grotesk scale (hero → tiny), JetBrains Mono for code |
+| Spacing | 8px base grid (`4px` → `128px`), 60px margin principle |
+| Motion | GSAP-aligned durations + cubic-bezier easings |
+| Layout | 60px margins, 1320px max-width, section spacing |
+| Radius | `xs` (2px) → `round` (9999px) |
+| Shadows | Elevation 1–4 + glow variants |
+
+---
+
+## Usage
+
+### Option 1 — Drop-in CSS (no build step)
+
+Import the standalone CSS file and use `--ku-*` variables in your stylesheets.
+
+```html
+<!-- HTML -->
+<link rel="stylesheet" href="node_modules/@k-universe/design-tokens/standalone/css">
+```
+
+```css
+/* CSS/PostCSS */
+@import "@k-universe/design-tokens/standalone/css";
+```
+
+```ts
+// Vite / bundler
+import "@k-universe/design-tokens/standalone/css";
+```
+
+Then use variables anywhere:
+
+```css
+.card {
+  background: var(--ku-surface);
+  border: 1px solid var(--ku-border);
+  color: var(--ku-text);
+  font-family: var(--ku-font-primary);
+  border-radius: var(--ku-radius-lg);
+}
+
+.button-primary {
+  background: var(--ku-primary);
+  color: var(--ku-white);
+  transition: background var(--ku-duration-fast) var(--ku-ease-default);
+}
+
+.button-primary:hover {
+  background: var(--ku-primary-hover);
+}
+```
+
+---
+
+### Option 2 — TypeScript token objects
+
+```ts
+import { tokens } from "@k-universe/design-tokens"
+
+// Colors
+tokens.colors.primary        // '#0066FF'
+tokens.colors.secondary      // '#00CC88'
+tokens.colors.background     // '#0A0A0A'
+tokens.colors.surface        // '#1A1A1A'
+tokens.colors.foreground     // '#FFFFFF'
+
+// Typography
+tokens.typography.fontFamily.sans   // 'Power Grotesk, ...'
+tokens.typography.fontFamily.mono   // 'JetBrains Mono, ...'
+tokens.typography.scale.h1.size     // '3rem'
+
+// Spacing
+tokens.spacing[4]    // '16px'
+tokens.spacing[15]   // '60px'  ← K-Universe 60px margin
+
+// Motion
+tokens.motion.duration.default   // '300ms'
+tokens.motion.easing.default     // 'cubic-bezier(0.4, 0, 0.2, 1)'
+```
+
+---
+
+### Option 3 — CSS variable injection (JavaScript)
+
+```ts
+import { applyCSSVarsToDocument } from "@k-universe/design-tokens/css"
+
+// Inject all --ku-* vars onto :root
+applyCSSVarsToDocument()
+
+// Or generate the object only
+import { generateCSSVars } from "@k-universe/design-tokens/css"
+const vars = generateCSSVars()
+// { '--ku-primary': '#0066FF', '--ku-bg': '#0A0A0A', ... }
+```
+
+---
+
+### Option 4 — Tailwind CSS plugin
+
+```ts
+// tailwind.config.ts
+import kuPlugin from "@k-universe/design-tokens/tailwind"
+
+export default {
+  content: ["./src/**/*.{ts,tsx,html}"],
+  plugins: [kuPlugin],
+}
+```
+
+This maps all tokens into Tailwind utilities:
+
+```html
+<div class="bg-ku-surface text-ku-primary font-ku-sans">
+  <p class="text-ku-body leading-ku-body tracking-ku-normal">
+    K-Universe styled text
+  </p>
+</div>
+```
+
+---
+
+### Option 5 — React branding component
+
+```tsx
+import { KLogoIcon, KLogo } from "@k-universe/design-tokens/branding"
+
+// Icon only (SVG)
+<KLogoIcon size={32} color="var(--ku-primary)" />
+
+// Full wordmark
+<KLogo height={24} />
+```
+
+> **Note on fonts**: Power Grotesk is a commercially licensed typeface. The CSS variable `--ku-font-primary` references it by name with system-ui fallbacks. You need to supply the font files yourself (self-hosted or via a licensed CDN). The package ships variable definitions only — not the font binaries.
+
+---
+
+## CSS variable reference
+
+```css
+/* Surfaces */
+--ku-bg              /* #0A0A0A — page background */
+--ku-surface         /* #111111 — card/panel surface */
+--ku-surface-raised  /* #1A1A1A — raised elements */
+--ku-surface-muted   /* #2A2A2A — muted/disabled */
+
+/* Borders */
+--ku-border          /* rgba(255,255,255,0.08) */
+--ku-border-strong   /* rgba(255,255,255,0.14) */
+
+/* Text */
+--ku-text            /* #FFFFFF */
+--ku-text-secondary  /* rgba(255,255,255,0.6) */
+--ku-text-muted      /* rgba(255,255,255,0.35) */
+
+/* Brand */
+--ku-primary         /* #0066FF */
+--ku-primary-hover   /* #0052CC */
+--ku-primary-subtle  /* rgba(0,102,255,0.08) */
+--ku-secondary       /* #00CC88 */
+--ku-success         /* #00DD77 */
+--ku-warning         /* #FFAA00 */
+--ku-error           /* #FF3333 */
+
+/* Typography */
+--ku-font-primary    /* Power Grotesk, system-ui, sans-serif */
+--ku-font-mono       /* JetBrains Mono, Fira Code, monospace */
+
+/* Spacing (60px margin principle) */
+--ku-spacing-15      /* 60px — primary horizontal landmark */
+
+/* Motion */
+--ku-duration-fast    /* 200ms */
+--ku-duration-default /* 300ms */
+--ku-ease-default     /* cubic-bezier(0.4, 0, 0.2, 1) */
+```
+
+---
+
+## Package exports
+
+| Import path | Contents |
+|---|---|
+| `@k-universe/design-tokens` | TypeScript `tokens` object + all types |
+| `@k-universe/design-tokens/css` | `generateCSSVars`, `applyCSSVarsToDocument` |
+| `@k-universe/design-tokens/tailwind` | Tailwind CSS v3/v4 plugin |
+| `@k-universe/design-tokens/branding` | `KLogoIcon`, `KLogo` React components |
+| `@k-universe/design-tokens/standalone/css` | Standalone CSS file (no build step) |
+
+---
+
+## License
+
+MIT © K-Universe

package/dist/branding.cjs

@@ -0,0 +1,133 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/branding.ts
+var branding_exports = {};
+__export(branding_exports, {
+  KLoadingGrid: () => KLoadingGrid,
+  KLogo: () => KLogo,
+  KLogoIcon: () => KLogoIcon
+});
+module.exports = __toCommonJS(branding_exports);
+var import_react = __toESM(require("react"), 1);
+var KLogoIcon = ({
+  size = 32,
+  width,
+  height,
+  color = "currentColor",
+  className = ""
+}) => import_react.default.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 390.6 450",
+    fill: color,
+    width: width ?? size,
+    height: height ?? size,
+    className,
+    "aria-hidden": true,
+    focusable: false
+  },
+  import_react.default.createElement("path", {
+    d: "M374.2,450c-9,0-16.3-7.2-16.3-16.1c0-8.9,7.3-16.1,16.3-16.1c9,0,16.4,7.2,16.4,16.1\r\n    C390.6,442.8,383.2,450,374.2,450z M374.2,446c-6.8,0-12.3-5.4-12.3-12.1c0-6.7,5.5-12.2,12.3-12.2c6.8,0,12.3,5.4,12.3,12.2\r\n    C386.5,440.6,381,446,374.2,446z M368.4,441.1h3.5v-5h3l2.5,5h3.9l-3-5.8c1.4-0.8,2.4-2.3,2.4-4.3c0-3.2-2.6-4.8-4.8-4.8h-7.5\r\n    L368.4,441.1z M372,433.5v-4.7h2.9c0.9,0,2.1,0.5,2.1,2.3c0,1.6-1.2,2.5-2.2,2.5H372z"
+  }),
+  import_react.default.createElement("path", {
+    d: "M239.1,403.1L111.7,276.4l0,126.8H82.5L0,320.8V82.3L82.4,0h29.2l0,126.8L239,0h151.4L192.4,201.5l198.1,201.6L239.1,403.1\r\n    z M111.7,255.5l51-53.9l-51-53.9l-53,53.9L111.7,255.5z"
+  })
+);
+var KLogo = KLogoIcon;
+var LOADING_GRID_STYLE = `
+@keyframes ku-grid-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.2; }
+}
+.ku-loading-grid path {
+  animation: ku-grid-pulse 1.2s ease-in-out infinite;
+  animation-fill-mode: both;
+}
+.ku-loading-grid path:nth-child(odd)  { animation-delay: 0s; }
+.ku-loading-grid path:nth-child(even) { animation-delay: 0.3s; }
+`;
+var _styleInjected = false;
+function injectStyle() {
+  if (typeof document === "undefined" || _styleInjected) return;
+  const tag = document.createElement("style");
+  tag.setAttribute("data-ku-loading-grid", "1");
+  tag.textContent = LOADING_GRID_STYLE;
+  document.head.appendChild(tag);
+  _styleInjected = true;
+}
+var KLoadingGrid = ({
+  size = 24,
+  color = "currentColor",
+  className = ""
+}) => {
+  injectStyle();
+  const combinedClass = ["ku-loading-grid", className].filter(Boolean).join(" ");
+  return import_react.default.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1986.5 2024.1",
+      fill: color,
+      width: size,
+      height: size,
+      className: combinedClass,
+      "aria-hidden": true,
+      focusable: false
+    },
+    // Row 1
+    import_react.default.createElement("path", { d: "M257.3,433.7L120.2,297.3v136.4H88.7L0,345.3V88.7L88.7,0h31.6v136.4L257.1,0h163.1L207,216.9l213.3,216.9\r\n    L257.3,433.7L257.3,433.7z M120.2,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,274.9z" }),
+    import_react.default.createElement("path", { d: "M787.5,433.7L650.4,297.3v136.4h-31.6l-88.7-88.4V88.7L618.8,0h31.6v136.4L787.2,0h163.1L737.1,216.9\r\n    l213.3,216.9L787.5,433.7L787.5,433.7z M650.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,274.9z" }),
+    import_react.default.createElement("path", { d: "M1293.5,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1124.8,0h31.6v136.4L1293.3,0h163.1l-213.3,216.9\r\n    l213.3,216.9L1293.5,433.7L1293.5,433.7z M1156.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,274.9z" }),
+    import_react.default.createElement("path", { d: "M1823.6,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1654.9,0h31.6v136.4L1823.4,0h163.1l-213.3,216.9\r\n    l213.3,216.9L1823.6,433.7L1823.6,433.7z M1686.5,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,274.9z" }),
+    // Row 2
+    import_react.default.createElement("path", { d: "M257.3,963.9L120.2,827.5v136.4H88.7L0,875.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,747\r\n    l213.3,216.9H257.3z M120.2,805.1l54.9-58.1l-54.9-58.1L63.4,747L120.2,805.1z" }),
+    import_react.default.createElement("path", { d: "M787.5,963.9L650.4,827.5v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L737.1,747\r\n    l213.3,216.9H787.5z M650.4,805.1l54.9-58.1l-54.9-58.1L593.5,747L650.4,805.1z" }),
+    import_react.default.createElement("path", { d: "M1293.5,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1243.1,747\r\n    l213.3,216.9H1293.5z M1156.4,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,805.1z" }),
+    import_react.default.createElement("path", { d: "M1823.6,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1773.3,747\r\n    l213.3,216.9H1823.6z M1686.5,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,805.1z" }),
+    // Row 3
+    import_react.default.createElement("path", { d: "M257.3,1494l-137.1-136.4V1494H88.7L0,1405.5v-256.6l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1277.1\r\n    L420.2,1494H257.3z M120.2,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1335.2z" }),
+    import_react.default.createElement("path", { d: "M787.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    L950.4,1494H787.5z M650.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1335.2z" }),
+    import_react.default.createElement("path", { d: "M1293.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    l213.3,216.9h-162.9V1494z M1156.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1335.2z" }),
+    import_react.default.createElement("path", { d: "M1823.6,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    l213.3,216.9h-162.9V1494z M1686.5,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1335.2z" }),
+    // Row 4
+    import_react.default.createElement("path", { d: "M257.3,2024.1l-137.1-136.4v136.4H88.7L0,1935.7V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1807.2\r\n    l213.3,216.9H257.3z M120.2,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1865.3z" }),
+    import_react.default.createElement("path", { d: "M787.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    l213.3,216.9L787.5,2024.1L787.5,2024.1z M650.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1865.3z" }),
+    import_react.default.createElement("path", { d: "M1293.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\r\n    l-213.3,216.9l213.3,216.9L1293.5,2024.1L1293.5,2024.1z M1156.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1865.3z" }),
+    import_react.default.createElement("path", { d: "M1823.6,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\r\n    l-213.3,216.9l213.3,216.9L1823.6,2024.1L1823.6,2024.1z M1686.5,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1865.3z" })
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  KLoadingGrid,
+  KLogo,
+  KLogoIcon
+});
+//# sourceMappingURL=branding.cjs.map

package/dist/branding.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/branding.ts"],"sourcesContent":["/**\n * @k-universe/design-tokens — branding components\n *\n * @example\n * import { KLogoIcon, KLoadingGrid } from \"@k-universe/design-tokens/branding\";\n */\n\nimport React from \"react\";\n\n// ---------------------------------------------------------------------------\n// Shared prop types\n// ---------------------------------------------------------------------------\n\nexport interface LogoProps {\n  /** Rendered size in px (applied to both width and height). Default: 32 */\n  size?: number;\n  /** Explicit width override (takes precedence over size) */\n  width?: number;\n  /** Explicit height override (takes precedence over size) */\n  height?: number;\n  /** SVG fill color. Default: 'currentColor' */\n  color?: string;\n  /** Optional className forwarded to the <svg> element */\n  className?: string;\n}\n\nexport interface LoadingGridProps {\n  /** Rendered size in px (applied to both width and height). Default: 24 */\n  size?: number;\n  /** SVG fill color. Default: 'currentColor' */\n  color?: string;\n  /** Optional className forwarded to the <svg> element */\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// KLogoIcon\n// ---------------------------------------------------------------------------\n\n/**\n * K-Universe primary logo mark.\n *\n * The SVG contains the K letterform (geometric, stroke-free) plus the\n * registered trademark indicator in the lower-right corner.\n *\n * @example\n * <KLogoIcon size={48} color=\"#0066FF\" />\n */\nexport const KLogoIcon: React.FC<LogoProps> = ({\n  size = 32,\n  width,\n  height,\n  color = \"currentColor\",\n  className = \"\",\n}) =>\n  React.createElement(\n    \"svg\",\n    {\n      xmlns: \"http://www.w3.org/2000/svg\",\n      viewBox: \"0 0 390.6 450\",\n      fill: color,\n      width: width ?? size,\n      height: height ?? size,\n      className,\n      \"aria-hidden\": true,\n      focusable: false,\n    },\n    React.createElement(\"path\", {\n      d: \"M374.2,450c-9,0-16.3-7.2-16.3-16.1c0-8.9,7.3-16.1,16.3-16.1c9,0,16.4,7.2,16.4,16.1\\r\\n    C390.6,442.8,383.2,450,374.2,450z M374.2,446c-6.8,0-12.3-5.4-12.3-12.1c0-6.7,5.5-12.2,12.3-12.2c6.8,0,12.3,5.4,12.3,12.2\\r\\n    C386.5,440.6,381,446,374.2,446z M368.4,441.1h3.5v-5h3l2.5,5h3.9l-3-5.8c1.4-0.8,2.4-2.3,2.4-4.3c0-3.2-2.6-4.8-4.8-4.8h-7.5\\r\\n    L368.4,441.1z M372,433.5v-4.7h2.9c0.9,0,2.1,0.5,2.1,2.3c0,1.6-1.2,2.5-2.2,2.5H372z\",\n    }),\n    React.createElement(\"path\", {\n      d: \"M239.1,403.1L111.7,276.4l0,126.8H82.5L0,320.8V82.3L82.4,0h29.2l0,126.8L239,0h151.4L192.4,201.5l198.1,201.6L239.1,403.1\\r\\n    z M111.7,255.5l51-53.9l-51-53.9l-53,53.9L111.7,255.5z\",\n    })\n  );\n\n// ---------------------------------------------------------------------------\n// KLogo — alias for KLogoIcon\n// ---------------------------------------------------------------------------\n\n/**\n * Alias for {@link KLogoIcon}. Use `KLogoIcon` in new code.\n */\nexport const KLogo = KLogoIcon;\n\n// ---------------------------------------------------------------------------\n// KLoadingGrid\n// ---------------------------------------------------------------------------\n\n/** @internal CSS injected once for the loading grid pulse animation */\nconst LOADING_GRID_STYLE = `\n@keyframes ku-grid-pulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: 0.2; }\n}\n.ku-loading-grid path {\n  animation: ku-grid-pulse 1.2s ease-in-out infinite;\n  animation-fill-mode: both;\n}\n.ku-loading-grid path:nth-child(odd)  { animation-delay: 0s; }\n.ku-loading-grid path:nth-child(even) { animation-delay: 0.3s; }\n`;\n\nlet _styleInjected = false;\n\nfunction injectStyle(): void {\n  if (typeof document === \"undefined\" || _styleInjected) return;\n  const tag = document.createElement(\"style\");\n  tag.setAttribute(\"data-ku-loading-grid\", \"1\");\n  tag.textContent = LOADING_GRID_STYLE;\n  document.head.appendChild(tag);\n  _styleInjected = true;\n}\n\n/**\n * K-Universe loading animation — a 4×4 grid of K glyphs with staggered\n * opacity pulse. Uses CSS animation only (no framer-motion, no GSAP).\n *\n * @example\n * <KLoadingGrid size={48} color=\"#0066FF\" />\n */\nexport const KLoadingGrid: React.FC<LoadingGridProps> = ({\n  size = 24,\n  color = \"currentColor\",\n  className = \"\",\n}) => {\n  injectStyle();\n\n  const combinedClass = [\"ku-loading-grid\", className].filter(Boolean).join(\" \");\n\n  return React.createElement(\n    \"svg\",\n    {\n      xmlns: \"http://www.w3.org/2000/svg\",\n      viewBox: \"0 0 1986.5 2024.1\",\n      fill: color,\n      width: size,\n      height: size,\n      className: combinedClass,\n      \"aria-hidden\": true,\n      focusable: false,\n    },\n    // Row 1\n    React.createElement(\"path\", { d: \"M257.3,433.7L120.2,297.3v136.4H88.7L0,345.3V88.7L88.7,0h31.6v136.4L257.1,0h163.1L207,216.9l213.3,216.9\\r\\n    L257.3,433.7L257.3,433.7z M120.2,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,274.9z\" }),\n    React.createElement(\"path\", { d: \"M787.5,433.7L650.4,297.3v136.4h-31.6l-88.7-88.4V88.7L618.8,0h31.6v136.4L787.2,0h163.1L737.1,216.9\\r\\n    l213.3,216.9L787.5,433.7L787.5,433.7z M650.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,274.9z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1124.8,0h31.6v136.4L1293.3,0h163.1l-213.3,216.9\\r\\n    l213.3,216.9L1293.5,433.7L1293.5,433.7z M1156.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,274.9z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1654.9,0h31.6v136.4L1823.4,0h163.1l-213.3,216.9\\r\\n    l213.3,216.9L1823.6,433.7L1823.6,433.7z M1686.5,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,274.9z\" }),\n    // Row 2\n    React.createElement(\"path\", { d: \"M257.3,963.9L120.2,827.5v136.4H88.7L0,875.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,747\\r\\n    l213.3,216.9H257.3z M120.2,805.1l54.9-58.1l-54.9-58.1L63.4,747L120.2,805.1z\" }),\n    React.createElement(\"path\", { d: \"M787.5,963.9L650.4,827.5v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L737.1,747\\r\\n    l213.3,216.9H787.5z M650.4,805.1l54.9-58.1l-54.9-58.1L593.5,747L650.4,805.1z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1243.1,747\\r\\n    l213.3,216.9H1293.5z M1156.4,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,805.1z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1773.3,747\\r\\n    l213.3,216.9H1823.6z M1686.5,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,805.1z\" }),\n    // Row 3\n    React.createElement(\"path\", { d: \"M257.3,1494l-137.1-136.4V1494H88.7L0,1405.5v-256.6l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1277.1\\r\\n    L420.2,1494H257.3z M120.2,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1335.2z\" }),\n    React.createElement(\"path\", { d: \"M787.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    L950.4,1494H787.5z M650.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1335.2z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    l213.3,216.9h-162.9V1494z M1156.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1335.2z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    l213.3,216.9h-162.9V1494z M1686.5,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1335.2z\" }),\n    // Row 4\n    React.createElement(\"path\", { d: \"M257.3,2024.1l-137.1-136.4v136.4H88.7L0,1935.7V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1807.2\\r\\n    l213.3,216.9H257.3z M120.2,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1865.3z\" }),\n    React.createElement(\"path\", { d: \"M787.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    l213.3,216.9L787.5,2024.1L787.5,2024.1z M650.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1865.3z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\\r\\n    l-213.3,216.9l213.3,216.9L1293.5,2024.1L1293.5,2024.1z M1156.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1865.3z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\\r\\n    l-213.3,216.9l213.3,216.9L1823.6,2024.1L1823.6,2024.1z M1686.5,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1865.3z\" })\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOA,mBAAkB;AAyCX,IAAM,YAAiC,CAAC;AAAA,EAC7C,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AACd,MACE,aAAAA,QAAM;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,SAAS;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,EACb;AAAA,EACA,aAAAA,QAAM,cAAc,QAAQ;AAAA,IAC1B,GAAG;AAAA,EACL,CAAC;AAAA,EACD,aAAAA,QAAM,cAAc,QAAQ;AAAA,IAC1B,GAAG;AAAA,EACL,CAAC;AACH;AASK,IAAM,QAAQ;AAOrB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3B,IAAI,iBAAiB;AAErB,SAAS,cAAoB;AAC3B,MAAI,OAAO,aAAa,eAAe,eAAgB;AACvD,QAAM,MAAM,SAAS,cAAc,OAAO;AAC1C,MAAI,aAAa,wBAAwB,GAAG;AAC5C,MAAI,cAAc;AAClB,WAAS,KAAK,YAAY,GAAG;AAC7B,mBAAiB;AACnB;AASO,IAAM,eAA2C,CAAC;AAAA,EACvD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AACd,MAAM;AACJ,cAAY;AAEZ,QAAM,gBAAgB,CAAC,mBAAmB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE7E,SAAO,aAAAA,QAAM;AAAA,IACX;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,eAAe;AAAA,MACf,WAAW;AAAA,IACb;AAAA;AAAA,IAEA,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,oMAAoM,CAAC;AAAA,IACtO,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,2MAA2M,CAAC;AAAA,IAC7O,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,oNAAoN,CAAC;AAAA,IACtP,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,oNAAoN,CAAC;AAAA;AAAA,IAEtP,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,sLAAsL,CAAC;AAAA,IACxN,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,6LAA6L,CAAC;AAAA,IAC/N,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,oMAAoM,CAAC;AAAA,IACtO,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,oMAAoM,CAAC;AAAA;AAAA,IAEtO,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,6LAA6L,CAAC;AAAA,IAC/N,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,gMAAgM,CAAC;AAAA,IAClO,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,0MAA0M,CAAC;AAAA,IAC5O,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,0MAA0M,CAAC;AAAA;AAAA,IAE5O,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,+LAA+L,CAAC;AAAA,IACjO,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,wNAAwN,CAAC;AAAA,IAC1P,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,6NAA6N,CAAC;AAAA,IAC/P,aAAAA,QAAM,cAAc,QAAQ,EAAE,GAAG,6NAA6N,CAAC;AAAA,EACjQ;AACF;","names":["React"]}

package/dist/branding.d.cts

@@ -0,0 +1,53 @@
+import React from 'react';
+
+/**
+ * @k-universe/design-tokens — branding components
+ *
+ * @example
+ * import { KLogoIcon, KLoadingGrid } from "@k-universe/design-tokens/branding";
+ */
+
+interface LogoProps {
+    /** Rendered size in px (applied to both width and height). Default: 32 */
+    size?: number;
+    /** Explicit width override (takes precedence over size) */
+    width?: number;
+    /** Explicit height override (takes precedence over size) */
+    height?: number;
+    /** SVG fill color. Default: 'currentColor' */
+    color?: string;
+    /** Optional className forwarded to the <svg> element */
+    className?: string;
+}
+interface LoadingGridProps {
+    /** Rendered size in px (applied to both width and height). Default: 24 */
+    size?: number;
+    /** SVG fill color. Default: 'currentColor' */
+    color?: string;
+    /** Optional className forwarded to the <svg> element */
+    className?: string;
+}
+/**
+ * K-Universe primary logo mark.
+ *
+ * The SVG contains the K letterform (geometric, stroke-free) plus the
+ * registered trademark indicator in the lower-right corner.
+ *
+ * @example
+ * <KLogoIcon size={48} color="#0066FF" />
+ */
+declare const KLogoIcon: React.FC<LogoProps>;
+/**
+ * Alias for {@link KLogoIcon}. Use `KLogoIcon` in new code.
+ */
+declare const KLogo: React.FC<LogoProps>;
+/**
+ * K-Universe loading animation — a 4×4 grid of K glyphs with staggered
+ * opacity pulse. Uses CSS animation only (no framer-motion, no GSAP).
+ *
+ * @example
+ * <KLoadingGrid size={48} color="#0066FF" />
+ */
+declare const KLoadingGrid: React.FC<LoadingGridProps>;
+
+export { KLoadingGrid, KLogo, KLogoIcon, type LoadingGridProps, type LogoProps };

package/dist/branding.d.ts

@@ -0,0 +1,53 @@
+import React from 'react';
+
+/**
+ * @k-universe/design-tokens — branding components
+ *
+ * @example
+ * import { KLogoIcon, KLoadingGrid } from "@k-universe/design-tokens/branding";
+ */
+
+interface LogoProps {
+    /** Rendered size in px (applied to both width and height). Default: 32 */
+    size?: number;
+    /** Explicit width override (takes precedence over size) */
+    width?: number;
+    /** Explicit height override (takes precedence over size) */
+    height?: number;
+    /** SVG fill color. Default: 'currentColor' */
+    color?: string;
+    /** Optional className forwarded to the <svg> element */
+    className?: string;
+}
+interface LoadingGridProps {
+    /** Rendered size in px (applied to both width and height). Default: 24 */
+    size?: number;
+    /** SVG fill color. Default: 'currentColor' */
+    color?: string;
+    /** Optional className forwarded to the <svg> element */
+    className?: string;
+}
+/**
+ * K-Universe primary logo mark.
+ *
+ * The SVG contains the K letterform (geometric, stroke-free) plus the
+ * registered trademark indicator in the lower-right corner.
+ *
+ * @example
+ * <KLogoIcon size={48} color="#0066FF" />
+ */
+declare const KLogoIcon: React.FC<LogoProps>;
+/**
+ * Alias for {@link KLogoIcon}. Use `KLogoIcon` in new code.
+ */
+declare const KLogo: React.FC<LogoProps>;
+/**
+ * K-Universe loading animation — a 4×4 grid of K glyphs with staggered
+ * opacity pulse. Uses CSS animation only (no framer-motion, no GSAP).
+ *
+ * @example
+ * <KLoadingGrid size={48} color="#0066FF" />
+ */
+declare const KLoadingGrid: React.FC<LoadingGridProps>;
+
+export { KLoadingGrid, KLogo, KLogoIcon, type LoadingGridProps, type LogoProps };

package/dist/branding.js

@@ -0,0 +1,96 @@
+// src/branding.ts
+import React from "react";
+var KLogoIcon = ({
+  size = 32,
+  width,
+  height,
+  color = "currentColor",
+  className = ""
+}) => React.createElement(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 390.6 450",
+    fill: color,
+    width: width ?? size,
+    height: height ?? size,
+    className,
+    "aria-hidden": true,
+    focusable: false
+  },
+  React.createElement("path", {
+    d: "M374.2,450c-9,0-16.3-7.2-16.3-16.1c0-8.9,7.3-16.1,16.3-16.1c9,0,16.4,7.2,16.4,16.1\r\n    C390.6,442.8,383.2,450,374.2,450z M374.2,446c-6.8,0-12.3-5.4-12.3-12.1c0-6.7,5.5-12.2,12.3-12.2c6.8,0,12.3,5.4,12.3,12.2\r\n    C386.5,440.6,381,446,374.2,446z M368.4,441.1h3.5v-5h3l2.5,5h3.9l-3-5.8c1.4-0.8,2.4-2.3,2.4-4.3c0-3.2-2.6-4.8-4.8-4.8h-7.5\r\n    L368.4,441.1z M372,433.5v-4.7h2.9c0.9,0,2.1,0.5,2.1,2.3c0,1.6-1.2,2.5-2.2,2.5H372z"
+  }),
+  React.createElement("path", {
+    d: "M239.1,403.1L111.7,276.4l0,126.8H82.5L0,320.8V82.3L82.4,0h29.2l0,126.8L239,0h151.4L192.4,201.5l198.1,201.6L239.1,403.1\r\n    z M111.7,255.5l51-53.9l-51-53.9l-53,53.9L111.7,255.5z"
+  })
+);
+var KLogo = KLogoIcon;
+var LOADING_GRID_STYLE = `
+@keyframes ku-grid-pulse {
+  0%, 100% { opacity: 1; }
+  50%       { opacity: 0.2; }
+}
+.ku-loading-grid path {
+  animation: ku-grid-pulse 1.2s ease-in-out infinite;
+  animation-fill-mode: both;
+}
+.ku-loading-grid path:nth-child(odd)  { animation-delay: 0s; }
+.ku-loading-grid path:nth-child(even) { animation-delay: 0.3s; }
+`;
+var _styleInjected = false;
+function injectStyle() {
+  if (typeof document === "undefined" || _styleInjected) return;
+  const tag = document.createElement("style");
+  tag.setAttribute("data-ku-loading-grid", "1");
+  tag.textContent = LOADING_GRID_STYLE;
+  document.head.appendChild(tag);
+  _styleInjected = true;
+}
+var KLoadingGrid = ({
+  size = 24,
+  color = "currentColor",
+  className = ""
+}) => {
+  injectStyle();
+  const combinedClass = ["ku-loading-grid", className].filter(Boolean).join(" ");
+  return React.createElement(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 1986.5 2024.1",
+      fill: color,
+      width: size,
+      height: size,
+      className: combinedClass,
+      "aria-hidden": true,
+      focusable: false
+    },
+    // Row 1
+    React.createElement("path", { d: "M257.3,433.7L120.2,297.3v136.4H88.7L0,345.3V88.7L88.7,0h31.6v136.4L257.1,0h163.1L207,216.9l213.3,216.9\r\n    L257.3,433.7L257.3,433.7z M120.2,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,274.9z" }),
+    React.createElement("path", { d: "M787.5,433.7L650.4,297.3v136.4h-31.6l-88.7-88.4V88.7L618.8,0h31.6v136.4L787.2,0h163.1L737.1,216.9\r\n    l213.3,216.9L787.5,433.7L787.5,433.7z M650.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,274.9z" }),
+    React.createElement("path", { d: "M1293.5,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1124.8,0h31.6v136.4L1293.3,0h163.1l-213.3,216.9\r\n    l213.3,216.9L1293.5,433.7L1293.5,433.7z M1156.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,274.9z" }),
+    React.createElement("path", { d: "M1823.6,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1654.9,0h31.6v136.4L1823.4,0h163.1l-213.3,216.9\r\n    l213.3,216.9L1823.6,433.7L1823.6,433.7z M1686.5,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,274.9z" }),
+    // Row 2
+    React.createElement("path", { d: "M257.3,963.9L120.2,827.5v136.4H88.7L0,875.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,747\r\n    l213.3,216.9H257.3z M120.2,805.1l54.9-58.1l-54.9-58.1L63.4,747L120.2,805.1z" }),
+    React.createElement("path", { d: "M787.5,963.9L650.4,827.5v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L737.1,747\r\n    l213.3,216.9H787.5z M650.4,805.1l54.9-58.1l-54.9-58.1L593.5,747L650.4,805.1z" }),
+    React.createElement("path", { d: "M1293.5,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1243.1,747\r\n    l213.3,216.9H1293.5z M1156.4,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,805.1z" }),
+    React.createElement("path", { d: "M1823.6,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1773.3,747\r\n    l213.3,216.9H1823.6z M1686.5,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,805.1z" }),
+    // Row 3
+    React.createElement("path", { d: "M257.3,1494l-137.1-136.4V1494H88.7L0,1405.5v-256.6l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1277.1\r\n    L420.2,1494H257.3z M120.2,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1335.2z" }),
+    React.createElement("path", { d: "M787.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    L950.4,1494H787.5z M650.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1335.2z" }),
+    React.createElement("path", { d: "M1293.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    l213.3,216.9h-162.9V1494z M1156.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1335.2z" }),
+    React.createElement("path", { d: "M1823.6,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    l213.3,216.9h-162.9V1494z M1686.5,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1335.2z" }),
+    // Row 4
+    React.createElement("path", { d: "M257.3,2024.1l-137.1-136.4v136.4H88.7L0,1935.7V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1807.2\r\n    l213.3,216.9H257.3z M120.2,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1865.3z" }),
+    React.createElement("path", { d: "M787.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\r\n    l213.3,216.9L787.5,2024.1L787.5,2024.1z M650.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1865.3z" }),
+    React.createElement("path", { d: "M1293.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\r\n    l-213.3,216.9l213.3,216.9L1293.5,2024.1L1293.5,2024.1z M1156.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1865.3z" }),
+    React.createElement("path", { d: "M1823.6,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\r\n    l-213.3,216.9l213.3,216.9L1823.6,2024.1L1823.6,2024.1z M1686.5,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1865.3z" })
+  );
+};
+export {
+  KLoadingGrid,
+  KLogo,
+  KLogoIcon
+};
+//# sourceMappingURL=branding.js.map

package/dist/branding.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/branding.ts"],"sourcesContent":["/**\n * @k-universe/design-tokens — branding components\n *\n * @example\n * import { KLogoIcon, KLoadingGrid } from \"@k-universe/design-tokens/branding\";\n */\n\nimport React from \"react\";\n\n// ---------------------------------------------------------------------------\n// Shared prop types\n// ---------------------------------------------------------------------------\n\nexport interface LogoProps {\n  /** Rendered size in px (applied to both width and height). Default: 32 */\n  size?: number;\n  /** Explicit width override (takes precedence over size) */\n  width?: number;\n  /** Explicit height override (takes precedence over size) */\n  height?: number;\n  /** SVG fill color. Default: 'currentColor' */\n  color?: string;\n  /** Optional className forwarded to the <svg> element */\n  className?: string;\n}\n\nexport interface LoadingGridProps {\n  /** Rendered size in px (applied to both width and height). Default: 24 */\n  size?: number;\n  /** SVG fill color. Default: 'currentColor' */\n  color?: string;\n  /** Optional className forwarded to the <svg> element */\n  className?: string;\n}\n\n// ---------------------------------------------------------------------------\n// KLogoIcon\n// ---------------------------------------------------------------------------\n\n/**\n * K-Universe primary logo mark.\n *\n * The SVG contains the K letterform (geometric, stroke-free) plus the\n * registered trademark indicator in the lower-right corner.\n *\n * @example\n * <KLogoIcon size={48} color=\"#0066FF\" />\n */\nexport const KLogoIcon: React.FC<LogoProps> = ({\n  size = 32,\n  width,\n  height,\n  color = \"currentColor\",\n  className = \"\",\n}) =>\n  React.createElement(\n    \"svg\",\n    {\n      xmlns: \"http://www.w3.org/2000/svg\",\n      viewBox: \"0 0 390.6 450\",\n      fill: color,\n      width: width ?? size,\n      height: height ?? size,\n      className,\n      \"aria-hidden\": true,\n      focusable: false,\n    },\n    React.createElement(\"path\", {\n      d: \"M374.2,450c-9,0-16.3-7.2-16.3-16.1c0-8.9,7.3-16.1,16.3-16.1c9,0,16.4,7.2,16.4,16.1\\r\\n    C390.6,442.8,383.2,450,374.2,450z M374.2,446c-6.8,0-12.3-5.4-12.3-12.1c0-6.7,5.5-12.2,12.3-12.2c6.8,0,12.3,5.4,12.3,12.2\\r\\n    C386.5,440.6,381,446,374.2,446z M368.4,441.1h3.5v-5h3l2.5,5h3.9l-3-5.8c1.4-0.8,2.4-2.3,2.4-4.3c0-3.2-2.6-4.8-4.8-4.8h-7.5\\r\\n    L368.4,441.1z M372,433.5v-4.7h2.9c0.9,0,2.1,0.5,2.1,2.3c0,1.6-1.2,2.5-2.2,2.5H372z\",\n    }),\n    React.createElement(\"path\", {\n      d: \"M239.1,403.1L111.7,276.4l0,126.8H82.5L0,320.8V82.3L82.4,0h29.2l0,126.8L239,0h151.4L192.4,201.5l198.1,201.6L239.1,403.1\\r\\n    z M111.7,255.5l51-53.9l-51-53.9l-53,53.9L111.7,255.5z\",\n    })\n  );\n\n// ---------------------------------------------------------------------------\n// KLogo — alias for KLogoIcon\n// ---------------------------------------------------------------------------\n\n/**\n * Alias for {@link KLogoIcon}. Use `KLogoIcon` in new code.\n */\nexport const KLogo = KLogoIcon;\n\n// ---------------------------------------------------------------------------\n// KLoadingGrid\n// ---------------------------------------------------------------------------\n\n/** @internal CSS injected once for the loading grid pulse animation */\nconst LOADING_GRID_STYLE = `\n@keyframes ku-grid-pulse {\n  0%, 100% { opacity: 1; }\n  50%       { opacity: 0.2; }\n}\n.ku-loading-grid path {\n  animation: ku-grid-pulse 1.2s ease-in-out infinite;\n  animation-fill-mode: both;\n}\n.ku-loading-grid path:nth-child(odd)  { animation-delay: 0s; }\n.ku-loading-grid path:nth-child(even) { animation-delay: 0.3s; }\n`;\n\nlet _styleInjected = false;\n\nfunction injectStyle(): void {\n  if (typeof document === \"undefined\" || _styleInjected) return;\n  const tag = document.createElement(\"style\");\n  tag.setAttribute(\"data-ku-loading-grid\", \"1\");\n  tag.textContent = LOADING_GRID_STYLE;\n  document.head.appendChild(tag);\n  _styleInjected = true;\n}\n\n/**\n * K-Universe loading animation — a 4×4 grid of K glyphs with staggered\n * opacity pulse. Uses CSS animation only (no framer-motion, no GSAP).\n *\n * @example\n * <KLoadingGrid size={48} color=\"#0066FF\" />\n */\nexport const KLoadingGrid: React.FC<LoadingGridProps> = ({\n  size = 24,\n  color = \"currentColor\",\n  className = \"\",\n}) => {\n  injectStyle();\n\n  const combinedClass = [\"ku-loading-grid\", className].filter(Boolean).join(\" \");\n\n  return React.createElement(\n    \"svg\",\n    {\n      xmlns: \"http://www.w3.org/2000/svg\",\n      viewBox: \"0 0 1986.5 2024.1\",\n      fill: color,\n      width: size,\n      height: size,\n      className: combinedClass,\n      \"aria-hidden\": true,\n      focusable: false,\n    },\n    // Row 1\n    React.createElement(\"path\", { d: \"M257.3,433.7L120.2,297.3v136.4H88.7L0,345.3V88.7L88.7,0h31.6v136.4L257.1,0h163.1L207,216.9l213.3,216.9\\r\\n    L257.3,433.7L257.3,433.7z M120.2,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,274.9z\" }),\n    React.createElement(\"path\", { d: \"M787.5,433.7L650.4,297.3v136.4h-31.6l-88.7-88.4V88.7L618.8,0h31.6v136.4L787.2,0h163.1L737.1,216.9\\r\\n    l213.3,216.9L787.5,433.7L787.5,433.7z M650.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,274.9z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1124.8,0h31.6v136.4L1293.3,0h163.1l-213.3,216.9\\r\\n    l213.3,216.9L1293.5,433.7L1293.5,433.7z M1156.4,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,274.9z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,433.7l-137.1-136.4v136.4h-31.6l-88.7-88.4V88.7L1654.9,0h31.6v136.4L1823.4,0h163.1l-213.3,216.9\\r\\n    l213.3,216.9L1823.6,433.7L1823.6,433.7z M1686.5,274.9l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,274.9z\" }),\n    // Row 2\n    React.createElement(\"path\", { d: \"M257.3,963.9L120.2,827.5v136.4H88.7L0,875.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,747\\r\\n    l213.3,216.9H257.3z M120.2,805.1l54.9-58.1l-54.9-58.1L63.4,747L120.2,805.1z\" }),\n    React.createElement(\"path\", { d: \"M787.5,963.9L650.4,827.5v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L737.1,747\\r\\n    l213.3,216.9H787.5z M650.4,805.1l54.9-58.1l-54.9-58.1L593.5,747L650.4,805.1z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1243.1,747\\r\\n    l213.3,216.9H1293.5z M1156.4,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,805.1z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,963.9l-137.1-136.4v136.4h-31.6l-88.7-88.4V618.8l88.7-88.7h31.6v136.4l136.9-136.4h163.1L1773.3,747\\r\\n    l213.3,216.9H1823.6z M1686.5,805.1l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,805.1z\" }),\n    // Row 3\n    React.createElement(\"path\", { d: \"M257.3,1494l-137.1-136.4V1494H88.7L0,1405.5v-256.6l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1277.1\\r\\n    L420.2,1494H257.3z M120.2,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1335.2z\" }),\n    React.createElement(\"path\", { d: \"M787.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    L950.4,1494H787.5z M650.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1335.2z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    l213.3,216.9h-162.9V1494z M1156.4,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1335.2z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,1494l-137.1-136.4V1494h-31.6l-88.7-88.4V1149l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    l213.3,216.9h-162.9V1494z M1686.5,1335.2l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1335.2z\" }),\n    // Row 4\n    React.createElement(\"path\", { d: \"M257.3,2024.1l-137.1-136.4v136.4H88.7L0,1935.7V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1L207,1807.2\\r\\n    l213.3,216.9H257.3z M120.2,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L120.2,1865.3z\" }),\n    React.createElement(\"path\", { d: \"M787.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1l-213.3,216.9\\r\\n    l213.3,216.9L787.5,2024.1L787.5,2024.1z M650.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L650.4,1865.3z\" }),\n    React.createElement(\"path\", { d: \"M1293.5,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\\r\\n    l-213.3,216.9l213.3,216.9L1293.5,2024.1L1293.5,2024.1z M1156.4,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1156.4,1865.3z\" }),\n    React.createElement(\"path\", { d: \"M1823.6,2024.1l-137.1-136.4v136.4h-31.6l-88.7-88.4V1679l88.7-88.7h31.6v136.4l136.9-136.4h163.1\\r\\n    l-213.3,216.9l213.3,216.9L1823.6,2024.1L1823.6,2024.1z M1686.5,1865.3l54.9-58.1l-54.9-58.1l-56.9,58.1L1686.5,1865.3z\" })\n  );\n};\n"],"mappings":";AAOA,OAAO,WAAW;AAyCX,IAAM,YAAiC,CAAC;AAAA,EAC7C,OAAO;AAAA,EACP;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR,YAAY;AACd,MACE,MAAM;AAAA,EACJ;AAAA,EACA;AAAA,IACE,OAAO;AAAA,IACP,SAAS;AAAA,IACT,MAAM;AAAA,IACN,OAAO,SAAS;AAAA,IAChB,QAAQ,UAAU;AAAA,IAClB;AAAA,IACA,eAAe;AAAA,IACf,WAAW;AAAA,EACb;AAAA,EACA,MAAM,cAAc,QAAQ;AAAA,IAC1B,GAAG;AAAA,EACL,CAAC;AAAA,EACD,MAAM,cAAc,QAAQ;AAAA,IAC1B,GAAG;AAAA,EACL,CAAC;AACH;AASK,IAAM,QAAQ;AAOrB,IAAM,qBAAqB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa3B,IAAI,iBAAiB;AAErB,SAAS,cAAoB;AAC3B,MAAI,OAAO,aAAa,eAAe,eAAgB;AACvD,QAAM,MAAM,SAAS,cAAc,OAAO;AAC1C,MAAI,aAAa,wBAAwB,GAAG;AAC5C,MAAI,cAAc;AAClB,WAAS,KAAK,YAAY,GAAG;AAC7B,mBAAiB;AACnB;AASO,IAAM,eAA2C,CAAC;AAAA,EACvD,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,YAAY;AACd,MAAM;AACJ,cAAY;AAEZ,QAAM,gBAAgB,CAAC,mBAAmB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAE7E,SAAO,MAAM;AAAA,IACX;AAAA,IACA;AAAA,MACE,OAAO;AAAA,MACP,SAAS;AAAA,MACT,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,WAAW;AAAA,MACX,eAAe;AAAA,MACf,WAAW;AAAA,IACb;AAAA;AAAA,IAEA,MAAM,cAAc,QAAQ,EAAE,GAAG,oMAAoM,CAAC;AAAA,IACtO,MAAM,cAAc,QAAQ,EAAE,GAAG,2MAA2M,CAAC;AAAA,IAC7O,MAAM,cAAc,QAAQ,EAAE,GAAG,oNAAoN,CAAC;AAAA,IACtP,MAAM,cAAc,QAAQ,EAAE,GAAG,oNAAoN,CAAC;AAAA;AAAA,IAEtP,MAAM,cAAc,QAAQ,EAAE,GAAG,sLAAsL,CAAC;AAAA,IACxN,MAAM,cAAc,QAAQ,EAAE,GAAG,6LAA6L,CAAC;AAAA,IAC/N,MAAM,cAAc,QAAQ,EAAE,GAAG,oMAAoM,CAAC;AAAA,IACtO,MAAM,cAAc,QAAQ,EAAE,GAAG,oMAAoM,CAAC;AAAA;AAAA,IAEtO,MAAM,cAAc,QAAQ,EAAE,GAAG,6LAA6L,CAAC;AAAA,IAC/N,MAAM,cAAc,QAAQ,EAAE,GAAG,gMAAgM,CAAC;AAAA,IAClO,MAAM,cAAc,QAAQ,EAAE,GAAG,0MAA0M,CAAC;AAAA,IAC5O,MAAM,cAAc,QAAQ,EAAE,GAAG,0MAA0M,CAAC;AAAA;AAAA,IAE5O,MAAM,cAAc,QAAQ,EAAE,GAAG,+LAA+L,CAAC;AAAA,IACjO,MAAM,cAAc,QAAQ,EAAE,GAAG,wNAAwN,CAAC;AAAA,IAC1P,MAAM,cAAc,QAAQ,EAAE,GAAG,6NAA6N,CAAC;AAAA,IAC/P,MAAM,cAAc,QAAQ,EAAE,GAAG,6NAA6N,CAAC;AAAA,EACjQ;AACF;","names":[]}