@hyperpackai/hyperui 0.1.0 → 0.3.0

package/dist/theme/index.d.ts

@@ -7,9 +7,11 @@
  *   document.documentElement.style.setProperty("--hu-primary", "#7c3aed");
  */
 export declare function injectCSS(id: string, css: string): void;
-export declare const BASE_CSS = "\n/* ------------------------------------------------------------------ */\n/* HyperUI Design Tokens                                               */\n/* ------------------------------------------------------------------ */\n:root {\n  /* Radius */\n  --hu-radius-xs:   3px;\n  --hu-radius-sm:   5px;\n  --hu-radius:      8px;\n  --hu-radius-md:   10px;\n  --hu-radius-lg:   14px;\n  --hu-radius-xl:   20px;\n  --hu-radius-full: 9999px;\n\n  /* Spacing (4-pt grid) */\n  --hu-space-1:  4px;\n  --hu-space-2:  8px;\n  --hu-space-3:  12px;\n  --hu-space-4:  16px;\n  --hu-space-5:  20px;\n  --hu-space-6:  24px;\n  --hu-space-8:  32px;\n  --hu-space-10: 40px;\n  --hu-space-12: 48px;\n  --hu-space-16: 64px;\n\n  /* Typography */\n  --hu-font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --hu-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\n  --hu-font-size-xs:   11px;\n  --hu-font-size-sm:   13px;\n  --hu-font-size-base: 14px;\n  --hu-font-size-md:   15px;\n  --hu-font-size-lg:   18px;\n  --hu-font-size-xl:   22px;\n  --hu-font-size-2xl:  28px;\n  --hu-font-size-3xl:  36px;\n  --hu-line-height: 1.5;\n  --hu-font-weight-normal:   400;\n  --hu-font-weight-medium:   500;\n  --hu-font-weight-semibold: 600;\n  --hu-font-weight-bold:     700;\n\n  /* Colours \u2014 Light */\n  --hu-bg:          #ffffff;\n  --hu-bg-2:        #f8fafc;\n  --hu-bg-3:        #f1f5f9;\n  --hu-bg-4:        #e8edf5;\n  --hu-border:      #e2e8f0;\n  --hu-border-2:    #cbd5e1;\n  --hu-text:        #0f172a;\n  --hu-text-2:      #475569;\n  --hu-text-3:      #94a3b8;\n  --hu-text-inv:    #ffffff;\n\n  /* Primary \u2014 Indigo */\n  --hu-primary:       #6366f1;\n  --hu-primary-dk:    #4f46e5;\n  --hu-primary-lt:    #818cf8;\n  --hu-primary-bg:    #eef2ff;\n  --hu-primary-text:  #ffffff;\n\n  /* Semantic */\n  --hu-success:     #22c55e;\n  --hu-success-bg:  #f0fdf4;\n  --hu-success-text:#15803d;\n  --hu-warning:     #f59e0b;\n  --hu-warning-bg:  #fffbeb;\n  --hu-warning-text:#92400e;\n  --hu-error:       #ef4444;\n  --hu-error-bg:    #fef2f2;\n  --hu-error-text:  #b91c1c;\n  --hu-info:        #3b82f6;\n  --hu-info-bg:     #eff6ff;\n  --hu-info-text:   #1d4ed8;\n\n  /* Shadows */\n  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/6%);\n  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/8%), 0 1px 2px rgb(0 0 0/4%);\n  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/8%), 0 2px 4px -2px rgb(0 0 0/4%);\n  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/8%), 0 4px 6px -4px rgb(0 0 0/4%);\n  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/8%), 0 8px 10px -6px rgb(0 0 0/4%);\n  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/20%);\n\n  /* Overlays */\n  --hu-overlay:     rgb(0 0 0/50%);\n\n  /* Transitions */\n  --hu-duration-fast:   100ms;\n  --hu-duration:        150ms;\n  --hu-duration-slow:   250ms;\n  --hu-ease:            cubic-bezier(0.4, 0, 0.2, 1);\n  --hu-ease-in:         cubic-bezier(0.4, 0, 1, 1);\n  --hu-ease-out:        cubic-bezier(0, 0, 0.2, 1);\n  --hu-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);\n\n  /* Z-index */\n  --hu-z-dropdown:  1000;\n  --hu-z-sticky:    1020;\n  --hu-z-fixed:     1030;\n  --hu-z-backdrop:  1040;\n  --hu-z-modal:     1050;\n  --hu-z-popover:   1060;\n  --hu-z-tooltip:   1070;\n  --hu-z-toast:     1080;\n}\n\n/* Dark mode */\n[data-theme=\"dark\"], .hu-dark {\n  --hu-bg:          #0a0a0f;\n  --hu-bg-2:        #111118;\n  --hu-bg-3:        #1a1a24;\n  --hu-bg-4:        #22222f;\n  --hu-border:      #2a2a38;\n  --hu-border-2:    #3a3a4a;\n  --hu-text:        #f0f0ff;\n  --hu-text-2:      #a0a0c0;\n  --hu-text-3:      #606080;\n  --hu-text-inv:    #0a0a0f;\n\n  --hu-primary:       #818cf8;\n  --hu-primary-dk:    #6366f1;\n  --hu-primary-lt:    #a5b4fc;\n  --hu-primary-bg:    #1e1b4b30;\n  --hu-primary-text:  #ffffff;\n\n  --hu-success:     #4ade80;\n  --hu-success-bg:  #052e16;\n  --hu-success-text:#86efac;\n  --hu-warning:     #fbbf24;\n  --hu-warning-bg:  #1c1500;\n  --hu-warning-text:#fde68a;\n  --hu-error:       #f87171;\n  --hu-error-bg:    #1f0505;\n  --hu-error-text:  #fca5a5;\n  --hu-info:        #60a5fa;\n  --hu-info-bg:     #030d1a;\n  --hu-info-text:   #93c5fd;\n\n  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/30%);\n  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/40%), 0 1px 2px rgb(0 0 0/24%);\n  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/40%), 0 2px 4px -2px rgb(0 0 0/24%);\n  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/40%), 0 4px 6px -4px rgb(0 0 0/24%);\n  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/40%), 0 8px 10px -6px rgb(0 0 0/24%);\n  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/60%);\n\n  --hu-overlay: rgb(0 0 0/70%);\n}\n\n/* Base reset */\n*, *::before, *::after { box-sizing: border-box; }\n[data-hu-root] {\n  font-family: var(--hu-font-sans);\n  font-size: var(--hu-font-size-base);\n  line-height: var(--hu-line-height);\n  color: var(--hu-text);\n  background: var(--hu-bg);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Focus ring */\n.hu-focus:focus-visible {\n  outline: 2px solid var(--hu-primary);\n  outline-offset: 2px;\n}\n\n/* Screen-reader only */\n.hu-sr-only {\n  position: absolute; width: 1px; height: 1px; padding: 0;\n  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);\n  white-space: nowrap; border: 0;\n}\n\n/* Animations */\n@keyframes hu-spin { to { transform: rotate(360deg); } }\n@keyframes hu-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }\n@keyframes hu-ping { 75%,100%{transform:scale(2);opacity:0} }\n@keyframes hu-bounce { 0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)} 50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)} }\n@keyframes hu-fade-in { from{opacity:0} to{opacity:1} }\n@keyframes hu-fade-out { from{opacity:1} to{opacity:0} }\n@keyframes hu-slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }\n@keyframes hu-slide-down { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }\n@keyframes hu-slide-in-right { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }\n@keyframes hu-slide-in-left { from{opacity:0;transform:translateX(-100%)} to{opacity:1;transform:translateX(0)} }\n@keyframes hu-scale-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }\n@keyframes hu-shimmer { from{background-position:-200% 0} to{background-position:200% 0} }\n";
+export declare const BASE_CSS = "\n/* ------------------------------------------------------------------ */\n/* HyperUI Design Tokens                                               */\n/* ------------------------------------------------------------------ */\n:root {\n  /* Radius */\n  --hu-radius-xs:   3px;\n  --hu-radius-sm:   5px;\n  --hu-radius:      8px;\n  --hu-radius-md:   10px;\n  --hu-radius-lg:   14px;\n  --hu-radius-xl:   20px;\n  --hu-radius-full: 9999px;\n\n  /* Spacing (4-pt grid) */\n  --hu-space-1:  4px;\n  --hu-space-2:  8px;\n  --hu-space-3:  12px;\n  --hu-space-4:  16px;\n  --hu-space-5:  20px;\n  --hu-space-6:  24px;\n  --hu-space-8:  32px;\n  --hu-space-10: 40px;\n  --hu-space-12: 48px;\n  --hu-space-16: 64px;\n  --hu-density-scale: 1;\n\n  /* Typography */\n  --hu-font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n  --hu-font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, \"Liberation Mono\", monospace;\n  --hu-font-size-xs:   11px;\n  --hu-font-size-sm:   13px;\n  --hu-font-size-base: 14px;\n  --hu-font-size-md:   15px;\n  --hu-font-size-lg:   18px;\n  --hu-font-size-xl:   22px;\n  --hu-font-size-2xl:  28px;\n  --hu-font-size-3xl:  36px;\n  --hu-line-height: 1.5;\n  --hu-font-weight-normal:   400;\n  --hu-font-weight-medium:   500;\n  --hu-font-weight-semibold: 600;\n  --hu-font-weight-bold:     700;\n\n  /* Colours \u2014 Light */\n  --hu-bg:          #ffffff;\n  --hu-bg-2:        #f8fafc;\n  --hu-bg-3:        #f1f5f9;\n  --hu-bg-4:        #e8edf5;\n  --hu-border:      #e2e8f0;\n  --hu-border-2:    #cbd5e1;\n  --hu-text:        #0f172a;\n  --hu-text-2:      #475569;\n  --hu-text-3:      #94a3b8;\n  --hu-text-inv:    #ffffff;\n\n  /* Primary \u2014 Indigo */\n  --hu-primary:       #6366f1;\n  --hu-primary-dk:    #4f46e5;\n  --hu-primary-lt:    #818cf8;\n  --hu-primary-bg:    #eef2ff;\n  --hu-primary-text:  #ffffff;\n\n  /* Semantic */\n  --hu-success:     #22c55e;\n  --hu-success-bg:  #f0fdf4;\n  --hu-success-text:#15803d;\n  --hu-warning:     #f59e0b;\n  --hu-warning-bg:  #fffbeb;\n  --hu-warning-text:#92400e;\n  --hu-error:       #ef4444;\n  --hu-error-bg:    #fef2f2;\n  --hu-error-text:  #b91c1c;\n  --hu-info:        #3b82f6;\n  --hu-info-bg:     #eff6ff;\n  --hu-info-text:   #1d4ed8;\n\n  /* Shadows */\n  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/6%);\n  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/8%), 0 1px 2px rgb(0 0 0/4%);\n  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/8%), 0 2px 4px -2px rgb(0 0 0/4%);\n  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/8%), 0 4px 6px -4px rgb(0 0 0/4%);\n  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/8%), 0 8px 10px -6px rgb(0 0 0/4%);\n  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/20%);\n\n  /* Overlays */\n  --hu-overlay:     rgb(0 0 0/50%);\n\n  /* Transitions */\n  --hu-duration-fast:   100ms;\n  --hu-duration:        150ms;\n  --hu-duration-slow:   250ms;\n  --hu-ease:            cubic-bezier(0.4, 0, 0.2, 1);\n  --hu-ease-in:         cubic-bezier(0.4, 0, 1, 1);\n  --hu-ease-out:        cubic-bezier(0, 0, 0.2, 1);\n  --hu-ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);\n\n  /* Z-index */\n  --hu-z-dropdown:  1000;\n  --hu-z-sticky:    1020;\n  --hu-z-fixed:     1030;\n  --hu-z-backdrop:  1040;\n  --hu-z-modal:     1050;\n  --hu-z-popover:   1060;\n  --hu-z-tooltip:   1070;\n  --hu-z-toast:     1080;\n}\n\n/* Dark mode */\n[data-theme=\"dark\"], .hu-dark {\n  --hu-bg:          #0a0a0f;\n  --hu-bg-2:        #111118;\n  --hu-bg-3:        #1a1a24;\n  --hu-bg-4:        #22222f;\n  --hu-border:      #2a2a38;\n  --hu-border-2:    #3a3a4a;\n  --hu-text:        #f0f0ff;\n  --hu-text-2:      #a0a0c0;\n  --hu-text-3:      #606080;\n  --hu-text-inv:    #0a0a0f;\n\n  --hu-primary:       #818cf8;\n  --hu-primary-dk:    #6366f1;\n  --hu-primary-lt:    #a5b4fc;\n  --hu-primary-bg:    #1e1b4b30;\n  --hu-primary-text:  #ffffff;\n\n  --hu-success:     #4ade80;\n  --hu-success-bg:  #052e16;\n  --hu-success-text:#86efac;\n  --hu-warning:     #fbbf24;\n  --hu-warning-bg:  #1c1500;\n  --hu-warning-text:#fde68a;\n  --hu-error:       #f87171;\n  --hu-error-bg:    #1f0505;\n  --hu-error-text:  #fca5a5;\n  --hu-info:        #60a5fa;\n  --hu-info-bg:     #030d1a;\n  --hu-info-text:   #93c5fd;\n\n  --hu-shadow-xs: 0 1px 2px rgb(0 0 0/30%);\n  --hu-shadow-sm: 0 1px 3px rgb(0 0 0/40%), 0 1px 2px rgb(0 0 0/24%);\n  --hu-shadow:    0 4px 6px -1px rgb(0 0 0/40%), 0 2px 4px -2px rgb(0 0 0/24%);\n  --hu-shadow-md: 0 10px 15px -3px rgb(0 0 0/40%), 0 4px 6px -4px rgb(0 0 0/24%);\n  --hu-shadow-lg: 0 20px 25px -5px rgb(0 0 0/40%), 0 8px 10px -6px rgb(0 0 0/24%);\n  --hu-shadow-xl: 0 25px 50px -12px rgb(0 0 0/60%);\n\n  --hu-overlay: rgb(0 0 0/70%);\n}\n\n/* Base reset */\n*, *::before, *::after { box-sizing: border-box; }\n[data-hu-root] {\n  font-family: var(--hu-font-sans);\n  font-size: var(--hu-font-size-base);\n  line-height: var(--hu-line-height);\n  color: var(--hu-text);\n  background: var(--hu-bg);\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Focus ring */\n.hu-focus:focus-visible {\n  outline: 2px solid var(--hu-primary);\n  outline-offset: 2px;\n}\n\n/* Screen-reader only */\n.hu-sr-only {\n  position: absolute; width: 1px; height: 1px; padding: 0;\n  margin: -1px; overflow: hidden; clip: rect(0,0,0,0);\n  white-space: nowrap; border: 0;\n}\n\n/* Animations */\n@keyframes hu-spin { to { transform: rotate(360deg); } }\n@keyframes hu-pulse { 0%,100%{opacity:1} 50%{opacity:.5} }\n@keyframes hu-ping { 75%,100%{transform:scale(2);opacity:0} }\n@keyframes hu-bounce { 0%,100%{transform:translateY(-25%);animation-timing-function:cubic-bezier(.8,0,1,1)} 50%{transform:none;animation-timing-function:cubic-bezier(0,0,.2,1)} }\n@keyframes hu-fade-in { from{opacity:0} to{opacity:1} }\n@keyframes hu-fade-out { from{opacity:1} to{opacity:0} }\n@keyframes hu-slide-up { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }\n@keyframes hu-slide-down { from{opacity:0;transform:translateY(-8px)} to{opacity:1;transform:translateY(0)} }\n@keyframes hu-slide-in-right { from{opacity:0;transform:translateX(100%)} to{opacity:1;transform:translateX(0)} }\n@keyframes hu-slide-in-left { from{opacity:0;transform:translateX(-100%)} to{opacity:1;transform:translateX(0)} }\n@keyframes hu-scale-in { from{opacity:0;transform:scale(.95)} to{opacity:1;transform:scale(1)} }\n@keyframes hu-shimmer { from{background-position:-200% 0} to{background-position:200% 0} }\n";
 export interface HyperUIConfig {
     theme?: "light" | "dark" | "system";
+    density?: "compact" | "default" | "comfortable";
+    direction?: "ltr" | "rtl";
     primaryColor?: string;
     radius?: string;
     fontFamily?: string;
@@ -22,10 +24,7 @@ export interface HyperUIConfig {
  */
 export declare function initHyperUI(config?: HyperUIConfig): void;
 export declare function cn(...classes: (string | false | null | undefined)[]): string;
-export interface VNode {
-    type: string | symbol | ((...args: unknown[]) => unknown);
-    props: Record<string, unknown>;
-    children: unknown[];
-}
+import type { VNode } from "@hyperpackai/hyperion";
+export type { VNode };
 export declare function h(type: VNode["type"], props: Record<string, unknown> | null, ...children: unknown[]): VNode;
 //# sourceMappingURL=index.d.ts.map

package/dist/theme/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAOvD;AAMD,eAAO,MAAM,QAAQ,i1MA2LpB,CAAC;AAMF,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,aAAkB,GAAG,IAAI,CA8B5D;AAMD,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE5E;AAMD,MAAM,WAAW,KAAK;IACpB,IAAI,EAAE,MAAM,GAAG,MAAM,GAAG,CAAC,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,OAAO,CAAC,CAAC;IAC1D,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAC/B,QAAQ,EAAE,OAAO,EAAE,CAAC;CACrB;AAED,wBAAgB,CAAC,CACf,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,EACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,EACrC,GAAG,QAAQ,EAAE,OAAO,EAAE,GACrB,KAAK,CAIP"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/theme/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,wBAAgB,SAAS,CAAC,EAAE,EAAE,MAAM,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI,CAQvD;AAMD,eAAO,MAAM,QAAQ,22MA4LpB,CAAC;AAMF,MAAM,WAAW,aAAa;IAC5B,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;IACpC,OAAO,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;IAChD,SAAS,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,MAAM,GAAE,aAAkB,GAAG,IAAI,CAiC5D;AAiCD,wBAAgB,EAAE,CAAC,GAAG,OAAO,EAAE,CAAC,MAAM,GAAG,KAAK,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,MAAM,CAE5E;AAMD,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,YAAY,EAAE,KAAK,EAAE,CAAC;AAEtB,wBAAgB,CAAC,CACf,IAAI,EAAE,KAAK,CAAC,MAAM,CAAC,EACnB,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,IAAI,EACrC,GAAG,QAAQ,EAAE,OAAO,EAAE,GACrB,KAAK,CAIP"}

package/dist/theme/index.js

@@ -14,6 +14,8 @@ export function injectCSS(id, css) {
     if (typeof document === "undefined" || _injected.has(id))
         return;
     const el = document.createElement("style");
+    if (!el || typeof el.setAttribute !== "function" || !document.head?.appendChild)
+        return;
     el.setAttribute("data-hu", id);
     el.textContent = css;
     document.head.appendChild(el);
@@ -47,6 +49,7 @@ export const BASE_CSS = `
   --hu-space-10: 40px;
   --hu-space-12: 48px;
   --hu-space-16: 64px;
+  --hu-density-scale: 1;
 
   /* Typography */
   --hu-font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
@@ -222,6 +225,8 @@ export function initHyperUI(config = {}) {
     if (!root)
         return;
     root.setAttribute("data-hu-root", "");
+    root.setAttribute("data-hu-density", config.density ?? "default");
+    root.setAttribute("dir", config.direction ?? "ltr");
     // Apply custom overrides
     if (config.primaryColor) {
         root.style.setProperty("--hu-primary", config.primaryColor);
@@ -232,6 +237,7 @@ export function initHyperUI(config = {}) {
     if (config.fontFamily) {
         root.style.setProperty("--hu-font-sans", config.fontFamily);
     }
+    applyDensity(config.density ?? "default", root);
     // Theme
     const theme = config.theme ?? "system";
     if (theme === "system") {
@@ -245,6 +251,30 @@ export function initHyperUI(config = {}) {
         root.setAttribute("data-theme", theme);
     }
 }
+function applyDensity(density, root) {
+    const scale = density === "compact" ? 0.85 : density === "comfortable" ? 1.15 : 1;
+    root.style.setProperty("--hu-density-scale", String(scale));
+    if (scale === 1)
+        return;
+    const space = (px) => `${Math.round(px * scale)}px`;
+    root.style.setProperty("--hu-space-1", space(4));
+    root.style.setProperty("--hu-space-2", space(8));
+    root.style.setProperty("--hu-space-3", space(12));
+    root.style.setProperty("--hu-space-4", space(16));
+    root.style.setProperty("--hu-space-5", space(20));
+    root.style.setProperty("--hu-space-6", space(24));
+    root.style.setProperty("--hu-space-8", space(32));
+    root.style.setProperty("--hu-space-10", space(40));
+    root.style.setProperty("--hu-space-12", space(48));
+    root.style.setProperty("--hu-space-16", space(64));
+    const fontScale = Math.min(Math.max(scale, 0.9), 1.1);
+    const font = (px) => `${Math.max(10, Math.round(px * fontScale))}px`;
+    root.style.setProperty("--hu-font-size-xs", font(11));
+    root.style.setProperty("--hu-font-size-sm", font(13));
+    root.style.setProperty("--hu-font-size-base", font(14));
+    root.style.setProperty("--hu-font-size-md", font(15));
+    root.style.setProperty("--hu-font-size-lg", font(18));
+}
 // ---------------------------------------------------------------------------
 // Utility — merge class names (handles undefined/false gracefully)
 // ---------------------------------------------------------------------------

package/dist/tokens/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,EAAkB,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACpE,OAAO,EAAK,KAAK,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EAGL,KAAK,cAAc,EAEpB,MAAM,eAAe,CAAC;AACvB,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAC9E,OAAO,EAA0B,KAAK,cAAc,EAAE,KAAK,YAAY,EAAE,MAAM,aAAa,CAAC;AAG7F,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,OAAO,EACL,mBAAmB,EAAE,kBAAkB,EACvC,WAAW,EAAE,UAAU,EACvB,eAAe,EAAE,kBAAkB,EAAE,cAAc,EAAE,cAAc,EACnE,cAAc,EAAE,cAAc,EAC/B,MAAM,eAAe,CAAC;AACvB,YAAY,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,eAAe,CAAC;AACpE,OAAO,EAAE,sBAAsB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,eAAe,EAAE,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC7F,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACrD,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAMhE,MAAM,WAAW,UAAU;IACzB,+EAA+E;IAC/E,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,iDAAiD;IACjD,QAAQ,EAAE,cAAc,CAAC;IACzB,2BAA2B;IAC3B,SAAS,EAAE,eAAe,CAAC;CAC5B;AAaD,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAa,CAAC;AAyDjC,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,cAAc,CAAC;AAEjD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,UAAU,EACjB,OAAO,GAAE;IAAE,IAAI,CAAC,EAAE,OAAO,CAAC;IAAC,MAAM,CAAC,EAAE,WAAW,CAAC;IAAC,SAAS,CAAC,EAAE,cAAc,CAAA;CAAO,GACjF,IAAI,CAyBN;AAMD;;;;;;;;;;GAUG;AACH,wBAAgB,WAAW,CACzB,eAAe,EAAE,MAAM,GAAG,cAAc,EACxC,SAAS,GAAE,cAAmB,GAC7B,cAAc,CAUhB;AAMD,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AACpD,MAAM,MAAM,cAAc,GAAG,KAAK,GAAG,KAAK,CAAC;AAC3C,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,SAAS,GAAG,aAAa,CAAC;AAOjE;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAqBlD;AAMD,MAAM,WAAW,kBAAkB;IACjC,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,SAAS,CAAC,EAAE,cAAc,CAAC;IAC3B,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,KAAK,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACpC,SAAS,EAAE,MAAM,CAAC,cAAc,CAAC,CAAC;IAClC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;IACxB,QAAQ,CAAC,KAAK,EAAE,UAAU,EAAE,OAAO,CAAC,EAAE;QAAE,SAAS,CAAC,EAAE,SAAS,CAAC;QAAC,SAAS,CAAC,EAAE,cAAc,CAAA;KAAE,GAAG,IAAI,CAAC;IACnG,YAAY,CAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC;IACpC,YAAY,CAAC,SAAS,EAAE,cAAc,GAAG,IAAI,CAAC;CAC/C;AAgDD;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,GAAG,KAAK,CAyB9D;AAED,wBAAgB,QAAQ,IAAI,UAAU,CAErC;AAMD;;;;;;GAMG;AACH,wBAAgB,SAAS,IAAI;IAC3B,MAAM,EAAE,MAAM,CAAC,UAAU,CAAC,CAAC;IAC3B,SAAS,EAAE,MAAM,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IACpC,MAAM,EAAE,MAAM,CAAC,OAAO,CAAC,CAAC;CACzB,CASA;AAMD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,CAIrE;AAMD;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,SAAS,EAAE,cAAc,EAAE,IAAI,UAAQ,EAAE,QAAQ,SAAU,GAAG,MAAM,CAM9F;AAMD,MAAM,WAAW,WAAW;IAC1B,OAAO,EAAM,MAAM,CAAC;IACpB,SAAS,EAAI,MAAM,CAAC;IACpB,UAAU,EAAG,OAAO,UAAU,CAAC;IAC/B,QAAQ,EAAE;QACR,KAAK,EAAE,cAAc,CAAC;QACtB,IAAI,EAAG,cAAc,CAAC;KACvB,CAAC;IACF,UAAU,EAAG,eAAe,CAAC;IAC7B,MAAM,EAAO,MAAM,CAAC,MAAM,EAAE,YAAY,CAAC,CAAC;CAC3C;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,IAAI,WAAW,CAY1C;AAMD;;;;;GAKG;AACH,wBAAgB,aAAa,IAAI,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAUtD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/tokens/index.ts"],"names":[],"mappings":"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"}

package/dist/tokens/index.js

@@ -66,6 +66,17 @@ function buildCSSVars(overrides, dark) {
         base["--hu-space-4"] = scale(16);
         base["--hu-space-5"] = scale(20);
         base["--hu-space-6"] = scale(24);
+        base["--hu-space-8"] = scale(32);
+        base["--hu-space-10"] = scale(40);
+        base["--hu-space-12"] = scale(48);
+        base["--hu-space-16"] = scale(64);
+        const fontScale = (px) => `${Math.max(10, Math.round(px * Math.min(Math.max(d, 0.9), 1.1)))}px`;
+        base["--hu-font-size-xs"] = fontScale(11);
+        base["--hu-font-size-sm"] = fontScale(13);
+        base["--hu-font-size-base"] = fontScale(14);
+        base["--hu-font-size-md"] = fontScale(15);
+        base["--hu-font-size-lg"] = fontScale(18);
+        base["--hu-density-scale"] = String(d);
     }
     // Dark mode overrides
     if (dark) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hyperpackai/hyperui",
-  "version": "0.1.0",
-  "description": "HyperUI \u2014 rich, accessible, enterprise-grade component library for Hyperion with full design token system.",
+  "version": "0.3.0",
+  "description": "HyperUI — rich, accessible, enterprise-grade component library for Hyperion with full design token system.",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -53,10 +53,15 @@
   ],
   "scripts": {
     "build": "tsc -b",
+    "publish:check": "npm run build && node scripts/publish-readiness.mjs",
+    "bench": "npm run build && node scripts/benchmark.mjs",
+    "bench:check": "npm run build && node scripts/benchmark.mjs --enforce",
+    "bench:browser": "npm --prefix ../hyperion run build && npm run build && node scripts/benchmark-browser.mjs",
+    "bench:browser:check": "npm --prefix ../hyperion run build && npm run build && node scripts/benchmark-browser.mjs --enforce",
     "dev": "tsc -b --watch"
   },
   "peerDependencies": {
-    "@hyperpackai/hyperion": "^0.1.0"
+    "@hyperpackai/hyperion": ">=0.1.0"
   },
   "publishConfig": {
     "access": "public",