@hyperpackai/hyperui 0.1.0

package/dist/components/layout.js

@@ -0,0 +1,644 @@
+/**
+ * HyperUI Layout & Navigation Components
+ * Card · Alert · Badge · Avatar · Skeleton · Progress · Accordion
+ * Tabs · Breadcrumb · Pagination · Navbar · Sidebar · DataTable
+ */
+import { signal } from "@hyperpackai/hyperion";
+import { injectCSS, cn, h } from "../theme/index.js";
+// ============================================================
+// CARD
+// ============================================================
+const CARD_CSS = `
+.hu-card {
+  background: var(--hu-bg); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-lg); overflow: hidden;
+  box-shadow: var(--hu-shadow-sm);
+}
+.hu-card--hoverable { transition: box-shadow var(--hu-duration) var(--hu-ease), transform var(--hu-duration) var(--hu-ease); cursor: pointer; }
+.hu-card--hoverable:hover { box-shadow: var(--hu-shadow-md); transform: translateY(-2px); }
+.hu-card--ghost { border: none; box-shadow: none; background: transparent; }
+.hu-card--elevated { box-shadow: var(--hu-shadow-md); border: none; }
+
+.hu-card-header { padding: var(--hu-space-5) var(--hu-space-6) 0; }
+.hu-card-title { font-size: var(--hu-font-size-md); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-card-desc { font-size: var(--hu-font-size-sm); color: var(--hu-text-2); margin-top: var(--hu-space-1); }
+.hu-card-media img, .hu-card-media video { width: 100%; display: block; }
+.hu-card-body { padding: var(--hu-space-5) var(--hu-space-6); }
+.hu-card-footer {
+  padding: var(--hu-space-4) var(--hu-space-6);
+  border-top: 1px solid var(--hu-border);
+  display: flex; align-items: center; gap: var(--hu-space-2);
+}
+`;
+export function Card(props) {
+    injectCSS("hu-card", CARD_CSS);
+    const { title, description, media, footer, hoverable = false, variant = "default", onClick, children } = props;
+    return h("div", {
+        class: cn("hu-card", hoverable && "hu-card--hoverable", variant !== "default" && `hu-card--${variant}`, props.class),
+        onClick
+    }, media && h("div", { class: "hu-card-media" }, media), (title || description) && h("div", { class: "hu-card-header" }, title && h("h3", { class: "hu-card-title" }, title), description && h("p", { class: "hu-card-desc" }, description)), children && h("div", { class: "hu-card-body" }, children), footer && h("div", { class: "hu-card-footer" }, footer));
+}
+// ============================================================
+// ALERT
+// ============================================================
+const ALERT_CSS = `
+.hu-alert {
+  display: flex; align-items: flex-start; gap: var(--hu-space-3);
+  padding: var(--hu-space-4); border-radius: var(--hu-radius-md);
+  border: 1px solid; font-size: var(--hu-font-size-sm);
+}
+.hu-alert--info    { background: var(--hu-info-bg);    border-color: var(--hu-info);    color: var(--hu-info-text); }
+.hu-alert--success { background: var(--hu-success-bg); border-color: var(--hu-success); color: var(--hu-success-text); }
+.hu-alert--warning { background: var(--hu-warning-bg); border-color: var(--hu-warning); color: var(--hu-warning-text); }
+.hu-alert--error   { background: var(--hu-error-bg);   border-color: var(--hu-error);   color: var(--hu-error-text); }
+.hu-alert-icon { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
+.hu-alert-title { font-weight: var(--hu-font-weight-semibold); margin-bottom: 2px; }
+.hu-alert-desc { opacity: .85; line-height: 1.45; }
+`;
+const ALERT_ICONS = {
+    info: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"/></svg>`,
+    success: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"/></svg>`,
+    warning: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M8.485 2.495c.673-1.167 2.357-1.167 3.03 0l6.28 10.875c.673 1.167-.17 2.625-1.516 2.625H3.72c-1.347 0-2.189-1.458-1.515-2.625L8.485 2.495zM10 5a.75.75 0 01.75.75v3.5a.75.75 0 01-1.5 0v-3.5A.75.75 0 0110 5zm0 9a1 1 0 100-2 1 1 0 000 2z"/></svg>`,
+    error: `<svg viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z"/></svg>`
+};
+export function Alert(props) {
+    injectCSS("hu-alert", ALERT_CSS);
+    const { type = "info", title, description, icon, children } = props;
+    const iconContent = icon === false ? null : icon ?? h("span", { innerHTML: ALERT_ICONS[type], "aria-hidden": "true" });
+    return h("div", { class: cn("hu-alert", `hu-alert--${type}`, props.class), role: "alert" }, iconContent && h("span", { class: "hu-alert-icon" }, iconContent), h("div", {}, title && h("div", { class: "hu-alert-title" }, title), (description || children) && h("div", { class: "hu-alert-desc" }, description ?? children)));
+}
+// ============================================================
+// BADGE
+// ============================================================
+const BADGE_CSS = `
+.hu-badge {
+  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
+  border-radius: var(--hu-radius-full); font-size: 11px; font-weight: var(--hu-font-weight-semibold);
+  line-height: 1; white-space: nowrap;
+}
+.hu-badge--xs { padding: 2px 6px; }
+.hu-badge--sm { padding: 3px 8px; font-size: 11px; }
+.hu-badge--md { padding: 4px 10px; font-size: var(--hu-font-size-xs); }
+.hu-badge--lg { padding: 5px 12px; font-size: var(--hu-font-size-sm); }
+
+.hu-badge--default    { background: var(--hu-bg-3); color: var(--hu-text-2); }
+.hu-badge--primary    { background: var(--hu-primary-bg); color: var(--hu-primary); }
+.hu-badge--success    { background: var(--hu-success-bg); color: var(--hu-success-text); }
+.hu-badge--warning    { background: var(--hu-warning-bg); color: var(--hu-warning-text); }
+.hu-badge--error      { background: var(--hu-error-bg); color: var(--hu-error-text); }
+.hu-badge--info       { background: var(--hu-info-bg); color: var(--hu-info-text); }
+.hu-badge--solid-primary { background: var(--hu-primary); color: white; }
+.hu-badge--solid-success { background: var(--hu-success); color: white; }
+.hu-badge--solid-error   { background: var(--hu-error); color: white; }
+.hu-badge--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
+`;
+export function Badge(props) {
+    injectCSS("hu-badge", BADGE_CSS);
+    const { variant = "default", size = "sm", dot = false } = props;
+    return h("span", {
+        class: cn("hu-badge", `hu-badge--${size}`, `hu-badge--${variant}`, dot && "hu-badge--dot", props.class)
+    }, props.children);
+}
+// ============================================================
+// AVATAR
+// ============================================================
+const AVATAR_CSS = `
+.hu-avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  border-radius: var(--hu-radius-full); overflow: hidden; flex-shrink: 0;
+  background: var(--hu-primary-bg); color: var(--hu-primary);
+  font-weight: var(--hu-font-weight-semibold); user-select: none;
+}
+.hu-avatar img { width: 100%; height: 100%; object-fit: cover; }
+.hu-avatar--xs  { width: 24px; height: 24px; font-size: 10px; }
+.hu-avatar--sm  { width: 32px; height: 32px; font-size: 12px; }
+.hu-avatar--md  { width: 40px; height: 40px; font-size: 14px; }
+.hu-avatar--lg  { width: 48px; height: 48px; font-size: 16px; }
+.hu-avatar--xl  { width: 64px; height: 64px; font-size: 22px; }
+.hu-avatar--2xl { width: 80px; height: 80px; font-size: 28px; }
+.hu-avatar--square { border-radius: var(--hu-radius-md); }
+.hu-avatar-group { display: flex; }
+.hu-avatar-group .hu-avatar { border: 2px solid var(--hu-bg); margin-left: -8px; }
+.hu-avatar-group .hu-avatar:first-child { margin-left: 0; }
+`;
+export function Avatar(props) {
+    injectCSS("hu-avatar", AVATAR_CSS);
+    const { src, alt, name, size = "md", shape = "circle" } = props;
+    const initials = name
+        ? name.split(" ").slice(0, 2).map((p) => p[0]?.toUpperCase() ?? "").join("")
+        : "?";
+    return h("span", {
+        class: cn("hu-avatar", `hu-avatar--${size}`, shape === "square" && "hu-avatar--square", props.class),
+        style: props.color ? `background: ${props.color}20; color: ${props.color}` : undefined,
+        "aria-label": alt ?? name
+    }, src ? h("img", { src, alt: alt ?? name ?? "", loading: "lazy" }) : initials);
+}
+// ============================================================
+// SKELETON
+// ============================================================
+const SKELETON_CSS = `
+.hu-skeleton {
+  display: block; border-radius: var(--hu-radius);
+  background: linear-gradient(90deg, var(--hu-bg-3) 25%, var(--hu-bg-4) 50%, var(--hu-bg-3) 75%);
+  background-size: 200% 100%; animation: hu-shimmer 1.5s infinite;
+}
+.hu-skeleton--text { height: 14px; border-radius: var(--hu-radius-sm); }
+.hu-skeleton--circle { border-radius: var(--hu-radius-full); }
+.hu-skeleton--title { height: 24px; border-radius: var(--hu-radius-sm); }
+`;
+export function Skeleton(props) {
+    injectCSS("hu-skeleton", SKELETON_CSS);
+    const { width, height, variant = "rect" } = props;
+    const w = typeof width === "number" ? `${width}px` : width;
+    const h_ = typeof height === "number" ? `${height}px` : height;
+    return h("span", {
+        class: cn("hu-skeleton", variant !== "rect" && `hu-skeleton--${variant}`, props.class),
+        style: [w && `width:${w}`, h_ && `height:${h_}`].filter(Boolean).join(";"),
+        "aria-hidden": "true"
+    });
+}
+// ============================================================
+// PROGRESS
+// ============================================================
+const PROGRESS_CSS = `
+.hu-progress-wrap { display: flex; flex-direction: column; gap: var(--hu-space-1); }
+.hu-progress-header { display: flex; justify-content: space-between; align-items: center; font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-progress-label { font-weight: var(--hu-font-weight-medium); }
+.hu-progress-track {
+  width: 100%; background: var(--hu-bg-3); border-radius: var(--hu-radius-full);
+  overflow: hidden;
+}
+.hu-progress-track--sm  { height: 4px; }
+.hu-progress-track--md  { height: 8px; }
+.hu-progress-track--lg  { height: 12px; }
+.hu-progress-bar {
+  height: 100%; background: var(--hu-primary); border-radius: var(--hu-radius-full);
+  transition: width .4s var(--hu-ease-out);
+}
+.hu-progress-bar--success { background: var(--hu-success); }
+.hu-progress-bar--error   { background: var(--hu-error); }
+.hu-progress-bar--warning { background: var(--hu-warning); }
+.hu-progress-bar--indeterminate {
+  width: 40% !important; animation: hu-progress-indeterminate 1.5s infinite;
+}
+@keyframes hu-progress-indeterminate {
+  0%  { transform: translateX(-100%); }
+  100%{ transform: translateX(350%); }
+}
+`;
+export function Progress(props) {
+    injectCSS("hu-progress", PROGRESS_CSS);
+    const { value = 0, max = 100, label, showValue = false, size = "md", color = "primary", indeterminate = false } = props;
+    const pct = Math.min(100, Math.max(0, (value / max) * 100));
+    return h("div", { class: cn("hu-progress-wrap", props.class) }, (label || showValue) && h("div", { class: "hu-progress-header" }, label && h("span", { class: "hu-progress-label" }, label), showValue && h("span", {}, `${Math.round(pct)}%`)), h("div", {
+        class: cn("hu-progress-track", `hu-progress-track--${size}`),
+        role: "progressbar", "aria-valuenow": indeterminate ? undefined : value,
+        "aria-valuemin": 0, "aria-valuemax": max, "aria-label": label
+    }, h("div", {
+        class: cn("hu-progress-bar", color !== "primary" && `hu-progress-bar--${color}`, indeterminate && "hu-progress-bar--indeterminate"),
+        style: !indeterminate ? `width:${pct}%` : undefined
+    })));
+}
+// ============================================================
+// TABS
+// ============================================================
+const TABS_CSS = `
+.hu-tabs { display: flex; flex-direction: column; gap: 0; }
+.hu-tabs-list {
+  display: flex; border-bottom: 2px solid var(--hu-border); overflow-x: auto;
+  scrollbar-width: none; gap: 0;
+}
+.hu-tabs-list::-webkit-scrollbar { display: none; }
+.hu-tabs-list--pill {
+  background: var(--hu-bg-3); border-radius: var(--hu-radius-md); padding: 3px;
+  border-bottom: none; gap: 2px;
+}
+.hu-tabs-trigger {
+  display: inline-flex; align-items: center; gap: var(--hu-space-2); padding: 9px 16px;
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium);
+  color: var(--hu-text-3); border: none; background: transparent; cursor: pointer;
+  position: relative; white-space: nowrap; border-radius: 0;
+  transition: color var(--hu-duration) var(--hu-ease);
+}
+.hu-tabs-trigger:hover { color: var(--hu-text); }
+.hu-tabs-trigger[aria-selected="true"] { color: var(--hu-primary); }
+.hu-tabs-trigger[aria-selected="true"]::after {
+  content: ""; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: var(--hu-primary);
+}
+.hu-tabs-list--pill .hu-tabs-trigger { border-radius: var(--hu-radius-sm); padding: 7px 14px; }
+.hu-tabs-list--pill .hu-tabs-trigger[aria-selected="true"] {
+  background: var(--hu-bg); color: var(--hu-text); box-shadow: var(--hu-shadow-xs); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-tabs-list--pill .hu-tabs-trigger[aria-selected="true"]::after { display: none; }
+.hu-tabs-trigger:disabled { opacity: .4; cursor: not-allowed; }
+.hu-tabs-badge { background: var(--hu-bg-4); color: var(--hu-text-2); font-size: 10px; padding: 1px 6px; border-radius: var(--hu-radius-full); }
+.hu-tabs-content { padding-top: var(--hu-space-5); }
+.hu-tabs-content[hidden] { display: none; }
+`;
+export function Tabs(props) {
+    injectCSS("hu-tabs", TABS_CSS);
+    const { items, variant = "underline", onChange } = props;
+    const controlled = typeof props.activeTab === "object" && props.activeTab !== null && "peek" in props.activeTab;
+    const active = controlled
+        ? props.activeTab.value
+        : props.activeTab ?? props.defaultTab ?? items[0]?.id ?? "";
+    return h("div", { class: cn("hu-tabs", props.class) }, h("div", { class: cn("hu-tabs-list", variant === "pill" && "hu-tabs-list--pill"), role: "tablist" }, ...items.map((item) => h("button", {
+        key: item.id, id: `tab-${item.id}`, role: "tab",
+        class: "hu-tabs-trigger",
+        "aria-selected": active === item.id ? "true" : "false",
+        "aria-controls": `tabpanel-${item.id}`,
+        disabled: item.disabled,
+        onClick: () => onChange?.(item.id)
+    }, item.icon && h("span", { "aria-hidden": "true" }, item.icon), item.label, item.badge !== undefined && h("span", { class: "hu-tabs-badge" }, item.badge)))), ...items.map((item) => h("div", {
+        key: item.id, id: `tabpanel-${item.id}`,
+        class: "hu-tabs-content", role: "tabpanel",
+        hidden: active !== item.id || undefined,
+        "aria-labelledby": `tab-${item.id}`
+    }, active === item.id ? item.content : null)));
+}
+// ============================================================
+// ACCORDION
+// ============================================================
+const ACCORDION_CSS = `
+.hu-accordion { border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md); overflow: hidden; }
+.hu-accordion-item { border-bottom: 1px solid var(--hu-border); }
+.hu-accordion-item:last-child { border-bottom: none; }
+.hu-accordion-trigger {
+  display: flex; align-items: center; justify-content: space-between; width: 100%;
+  padding: var(--hu-space-4) var(--hu-space-5); background: transparent; border: none;
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-medium); color: var(--hu-text);
+  cursor: pointer; text-align: left; transition: background var(--hu-duration) var(--hu-ease);
+}
+.hu-accordion-trigger:hover { background: var(--hu-bg-2); }
+.hu-accordion-trigger[aria-expanded="true"] { color: var(--hu-primary); }
+.hu-accordion-icon { width: 16px; height: 16px; flex-shrink: 0; color: var(--hu-text-3); transition: transform var(--hu-duration) var(--hu-ease); }
+.hu-accordion-trigger[aria-expanded="true"] .hu-accordion-icon { transform: rotate(180deg); color: var(--hu-primary); }
+.hu-accordion-content { padding: 0 var(--hu-space-5) var(--hu-space-4); font-size: var(--hu-font-size-sm); color: var(--hu-text-2); line-height: 1.6; animation: hu-slide-down var(--hu-duration-fast) var(--hu-ease); }
+.hu-accordion--ghost { border: none; }
+.hu-accordion--ghost .hu-accordion-item { border-bottom: 1px solid var(--hu-border); }
+.hu-accordion--ghost .hu-accordion-item:last-child { border-bottom: none; }
+`;
+export function Accordion(props) {
+    injectCSS("hu-accordion", ACCORDION_CSS);
+    const { items, multiple = false, defaultOpen = [], variant = "default" } = props;
+    const open = signal(defaultOpen);
+    const toggle = (id) => {
+        const current = open.value;
+        if (multiple) {
+            open.value = current.includes(id) ? current.filter((i) => i !== id) : [...current, id];
+        }
+        else {
+            open.value = current.includes(id) ? [] : [id];
+        }
+    };
+    const chevronSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 6l4 4 4-4"/></svg>`;
+    return h("div", { class: cn("hu-accordion", variant !== "default" && `hu-accordion--${variant}`, props.class) }, ...items.map((item) => {
+        const isOpen = open.value.includes(item.id);
+        return h("div", { key: item.id, class: "hu-accordion-item" }, h("button", {
+            class: "hu-accordion-trigger",
+            "aria-expanded": isOpen ? "true" : "false",
+            "aria-controls": `accordion-${item.id}`,
+            disabled: item.disabled,
+            onClick: () => toggle(item.id)
+        }, h("span", { style: "display:flex;align-items:center;gap:8px;" }, item.icon && h("span", {}, item.icon), item.title), h("span", { class: "hu-accordion-icon", innerHTML: chevronSVG, "aria-hidden": "true" })), isOpen && h("div", { id: `accordion-${item.id}`, class: "hu-accordion-content" }, item.content));
+    }));
+}
+// ============================================================
+// BREADCRUMB
+// ============================================================
+const BREADCRUMB_CSS = `
+.hu-breadcrumb { display: flex; align-items: center; gap: var(--hu-space-1); flex-wrap: wrap; }
+.hu-breadcrumb-item { display: flex; align-items: center; gap: var(--hu-space-1); }
+.hu-breadcrumb-link { font-size: var(--hu-font-size-sm); color: var(--hu-text-3); text-decoration: none; transition: color var(--hu-duration) var(--hu-ease); }
+.hu-breadcrumb-link:hover { color: var(--hu-text); }
+.hu-breadcrumb-current { font-size: var(--hu-font-size-sm); color: var(--hu-text); font-weight: var(--hu-font-weight-medium); }
+.hu-breadcrumb-sep { color: var(--hu-text-3); font-size: var(--hu-font-size-sm); user-select: none; }
+`;
+export function Breadcrumb(props) {
+    injectCSS("hu-breadcrumb", BREADCRUMB_CSS);
+    const { items, separator = "/" } = props;
+    return h("nav", { class: cn("hu-breadcrumb", props.class), "aria-label": "Breadcrumb" }, ...items.map((item, i) => h("span", { key: item.label, class: "hu-breadcrumb-item" }, i < items.length - 1
+        ? h(item.href ? "a" : "button", {
+            class: "hu-breadcrumb-link",
+            href: item.href, onClick: item.onClick
+        }, item.label)
+        : h("span", { class: "hu-breadcrumb-current", "aria-current": "page" }, item.label), i < items.length - 1 && h("span", { class: "hu-breadcrumb-sep", "aria-hidden": "true" }, separator))));
+}
+// ============================================================
+// PAGINATION
+// ============================================================
+const PAGINATION_CSS = `
+.hu-pagination { display: flex; align-items: center; gap: var(--hu-space-1); }
+.hu-pagination-btn {
+  display: inline-flex; align-items: center; justify-content: center;
+  min-width: 36px; height: 36px; padding: 0 var(--hu-space-2);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius);
+  background: var(--hu-bg); font-size: var(--hu-font-size-sm); color: var(--hu-text-2);
+  cursor: pointer; transition: all var(--hu-duration) var(--hu-ease);
+}
+.hu-pagination-btn:hover:not(:disabled) { background: var(--hu-bg-3); color: var(--hu-text); border-color: var(--hu-border-2); }
+.hu-pagination-btn--active { background: var(--hu-primary); border-color: var(--hu-primary); color: white; font-weight: var(--hu-font-weight-semibold); }
+.hu-pagination-btn--active:hover { background: var(--hu-primary-dk); }
+.hu-pagination-btn:disabled { opacity: .4; cursor: not-allowed; }
+.hu-pagination-ellipsis { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; color: var(--hu-text-3); font-size: var(--hu-font-size-sm); }
+`;
+export function Pagination(props) {
+    injectCSS("hu-pagination", PAGINATION_CSS);
+    const { page, totalPages, siblingCount = 1, onChange, showFirstLast = true } = props;
+    const pages = [];
+    const delta = siblingCount;
+    const left = page - delta;
+    const right = page + delta + 1;
+    const range = [];
+    const rangeWithDots = [];
+    for (let i = 1; i <= totalPages; i++) {
+        if (i === 1 || i === totalPages || (i >= left && i < right))
+            range.push(i);
+    }
+    let prev;
+    for (const i of range) {
+        if (prev !== undefined) {
+            if (i - prev === 2)
+                rangeWithDots.push(prev + 1);
+            else if (i - prev > 2)
+                rangeWithDots.push("...");
+        }
+        rangeWithDots.push(i);
+        prev = i;
+    }
+    const prevSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M10 4L6 8l4 4"/></svg>`;
+    const nextSVG = `<svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 4l4 4-4 4"/></svg>`;
+    return h("nav", { class: cn("hu-pagination", props.class), "aria-label": "Pagination" }, h("button", { class: "hu-pagination-btn", onClick: () => onChange(page - 1), disabled: page <= 1, "aria-label": "Previous page", innerHTML: prevSVG }), ...rangeWithDots.map((p, i) => p === "..."
+        ? h("span", { key: `ellipsis-${i}`, class: "hu-pagination-ellipsis" }, "…")
+        : h("button", {
+            key: p,
+            class: cn("hu-pagination-btn", p === page && "hu-pagination-btn--active"),
+            onClick: () => onChange(p),
+            "aria-label": `Page ${p}`, "aria-current": p === page ? "page" : undefined
+        }, p)), h("button", { class: "hu-pagination-btn", onClick: () => onChange(page + 1), disabled: page >= totalPages, "aria-label": "Next page", innerHTML: nextSVG }));
+}
+// ============================================================
+// STEPPER
+// ============================================================
+const STEPPER_CSS = `
+.hu-stepper { display: flex; gap: var(--hu-space-4); width: 100%; }
+.hu-stepper--vertical { flex-direction: column; }
+.hu-stepper--horizontal { align-items: flex-start; }
+.hu-stepper-step { display: flex; align-items: flex-start; gap: var(--hu-space-3); min-width: 0; position: relative; flex: 1; }
+.hu-stepper--vertical .hu-stepper-step { flex: none; }
+.hu-stepper-step:not(:last-child)::after {
+  content: ""; position: absolute; background: var(--hu-border);
+}
+.hu-stepper--horizontal .hu-stepper-step:not(:last-child)::after {
+  inset-inline-start: calc(var(--hu-space-8) + var(--hu-space-3)); inset-inline-end: var(--hu-space-3);
+  inset-block-start: 16px; height: 1px;
+}
+.hu-stepper--vertical .hu-stepper-step:not(:last-child)::after {
+  inset-inline-start: 16px; inset-block-start: 36px; inset-block-end: calc(-1 * var(--hu-space-4)); width: 1px;
+}
+.hu-stepper-step--complete:not(:last-child)::after { background: var(--hu-success); }
+.hu-stepper-indicator {
+  width: 32px; height: 32px; border-radius: var(--hu-radius-full);
+  display: inline-flex; align-items: center; justify-content: center; flex: none;
+  border: 1px solid var(--hu-border); background: var(--hu-bg); color: var(--hu-text-2);
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-stepper-step--active .hu-stepper-indicator { border-color: var(--hu-primary); background: var(--hu-primary); color: var(--hu-primary-text); }
+.hu-stepper-step--complete .hu-stepper-indicator { border-color: var(--hu-success); background: var(--hu-success); color: #fff; }
+.hu-stepper-step--error .hu-stepper-indicator { border-color: var(--hu-error); background: var(--hu-error); color: #fff; }
+.hu-stepper-step--disabled { opacity: .5; }
+.hu-stepper-content { min-width: 0; }
+.hu-stepper-label { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-stepper-description { margin-block-start: 2px; font-size: var(--hu-font-size-xs); color: var(--hu-text-2); line-height: 1.5; }
+@media (max-width: 640px) {
+  .hu-stepper--horizontal { flex-direction: column; }
+  .hu-stepper--horizontal .hu-stepper-step:not(:last-child)::after {
+    inset-inline-start: 16px; inset-inline-end: auto; inset-block-start: 36px; inset-block-end: calc(-1 * var(--hu-space-4));
+    width: 1px; height: auto;
+  }
+}
+`;
+export function Stepper(props) {
+    injectCSS("hu-stepper", STEPPER_CSS);
+    const { steps, completed = [], orientation = "horizontal", onStepClick } = props;
+    const activeIndex = typeof props.activeStep === "number"
+        ? props.activeStep
+        : Math.max(0, steps.findIndex((step) => step.id === props.activeStep));
+    return h("ol", {
+        class: cn("hu-stepper", `hu-stepper--${orientation}`, props.class),
+        "aria-label": "Progress"
+    }, ...steps.map((step, index) => {
+        const active = index === activeIndex;
+        const complete = completed.includes(step.id) || index < activeIndex;
+        const state = step.error ? "error" : complete ? "complete" : active ? "active" : "pending";
+        const indicator = step.icon ?? (complete ? "✓" : index + 1);
+        return h("li", {
+            key: step.id,
+            class: cn("hu-stepper-step", `hu-stepper-step--${state}`, step.disabled && "hu-stepper-step--disabled"),
+            "aria-current": active ? "step" : undefined
+        }, h(onStepClick && !step.disabled ? "button" : "span", {
+            class: "hu-stepper-indicator",
+            type: onStepClick && !step.disabled ? "button" : undefined,
+            disabled: step.disabled,
+            onClick: onStepClick && !step.disabled ? () => onStepClick(step.id, index) : undefined,
+            "aria-label": `${step.label}: ${state}`
+        }, indicator), h("div", { class: "hu-stepper-content" }, h("div", { class: "hu-stepper-label" }, step.label, step.optional && " (optional)"), step.description && h("div", { class: "hu-stepper-description" }, step.description)));
+    }));
+}
+// ============================================================
+// TIMELINE
+// ============================================================
+const TIMELINE_CSS = `
+.hu-timeline { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0; }
+.hu-timeline-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--hu-space-3); position: relative; min-width: 0; }
+.hu-timeline-item:not(:last-child) { padding-block-end: var(--hu-space-5); }
+.hu-timeline-marker-wrap { position: relative; display: flex; justify-content: center; min-width: 24px; }
+.hu-timeline-marker {
+  width: 12px; height: 12px; border-radius: var(--hu-radius-full);
+  margin-block-start: 5px; background: var(--hu-border-2); border: 2px solid var(--hu-bg); box-shadow: 0 0 0 1px var(--hu-border);
+}
+.hu-timeline-item:not(:last-child) .hu-timeline-marker-wrap::after {
+  content: ""; position: absolute; inset-block-start: 24px; inset-block-end: 0; width: 1px; background: var(--hu-border);
+}
+.hu-timeline-item--success .hu-timeline-marker { background: var(--hu-success); box-shadow: 0 0 0 1px var(--hu-success); }
+.hu-timeline-item--warning .hu-timeline-marker { background: var(--hu-warning); box-shadow: 0 0 0 1px var(--hu-warning); }
+.hu-timeline-item--error .hu-timeline-marker { background: var(--hu-error); box-shadow: 0 0 0 1px var(--hu-error); }
+.hu-timeline-item--info .hu-timeline-marker { background: var(--hu-info); box-shadow: 0 0 0 1px var(--hu-info); }
+.hu-timeline-content { min-width: 0; }
+.hu-timeline-title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-timeline-time { margin-block-start: 1px; font-size: var(--hu-font-size-xs); color: var(--hu-text-3); }
+.hu-timeline-description { margin-block-start: var(--hu-space-1); font-size: var(--hu-font-size-sm); color: var(--hu-text-2); line-height: 1.55; }
+.hu-timeline-actions { margin-block-start: var(--hu-space-2); }
+`;
+export function Timeline(props) {
+    injectCSS("hu-timeline", TIMELINE_CSS);
+    return h("ol", { class: cn("hu-timeline", props.class), "aria-label": "Timeline" }, ...props.items.map((item) => h("li", {
+        key: item.id,
+        class: cn("hu-timeline-item", item.status && item.status !== "default" && `hu-timeline-item--${item.status}`)
+    }, h("div", { class: "hu-timeline-marker-wrap", "aria-hidden": "true" }, h("span", { class: "hu-timeline-marker" }, item.marker)), h("div", { class: "hu-timeline-content" }, h("div", { class: "hu-timeline-title" }, item.title), item.time && h("time", { class: "hu-timeline-time" }, item.time), item.description && h("div", { class: "hu-timeline-description" }, item.description), item.actions && h("div", { class: "hu-timeline-actions" }, item.actions)))));
+}
+// ============================================================
+// TREE VIEW
+// ============================================================
+const TREE_VIEW_CSS = `
+.hu-tree { list-style: none; margin: 0; padding: 0; font-size: var(--hu-font-size-sm); color: var(--hu-text); }
+.hu-tree-group { list-style: none; margin: 0; padding: 0 0 0 var(--hu-space-5); }
+[dir="rtl"] .hu-tree-group { padding: 0 var(--hu-space-5) 0 0; }
+.hu-tree-item { margin: 1px 0; }
+.hu-tree-row {
+  display: flex; align-items: center; gap: var(--hu-space-2); width: 100%;
+  min-height: 32px; padding: 4px var(--hu-space-2); border-radius: var(--hu-radius);
+  color: var(--hu-text-2); background: transparent; border: none; text-align: start;
+  font: inherit; cursor: pointer;
+}
+.hu-tree-row:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-tree-row[aria-selected="true"] { background: var(--hu-primary-bg); color: var(--hu-primary); font-weight: var(--hu-font-weight-medium); }
+.hu-tree-row:focus-visible { outline: 2px solid var(--hu-primary); outline-offset: 1px; }
+.hu-tree-toggle { width: 16px; display: inline-flex; align-items: center; justify-content: center; color: var(--hu-text-3); flex: none; }
+.hu-tree-toggle--leaf { visibility: hidden; }
+.hu-tree-icon { width: 18px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
+.hu-tree-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.hu-tree-badge { margin-inline-start: auto; }
+`;
+export function TreeView(props) {
+    injectCSS("hu-tree", TREE_VIEW_CSS);
+    const expanded = new Set(props.expanded ?? []);
+    const renderItems = (items, level) => items.map((item) => {
+        const hasChildren = Boolean(item.children?.length);
+        const isExpanded = hasChildren && expanded.has(item.id);
+        const isSelected = props.selected === item.id;
+        return h("li", { key: item.id, class: "hu-tree-item", role: "none" }, h("button", {
+            class: "hu-tree-row",
+            role: "treeitem",
+            type: "button",
+            disabled: item.disabled,
+            "aria-level": level,
+            "aria-expanded": hasChildren ? String(isExpanded) : undefined,
+            "aria-selected": isSelected ? "true" : "false",
+            onClick: () => {
+                if (item.disabled)
+                    return;
+                if (hasChildren)
+                    props.onToggle?.(item.id, !isExpanded);
+                props.onSelect?.(item.id);
+            }
+        }, h("span", {
+            class: cn("hu-tree-toggle", !hasChildren && "hu-tree-toggle--leaf"),
+            "aria-hidden": "true"
+        }, isExpanded ? "▾" : "▸"), item.icon && h("span", { class: "hu-tree-icon", "aria-hidden": "true" }, item.icon), h("span", { class: "hu-tree-label" }, item.label), item.badge && h("span", { class: "hu-tree-badge" }, item.badge)), hasChildren && isExpanded && h("ul", { class: "hu-tree-group", role: "group" }, ...renderItems(item.children, level + 1)));
+    });
+    return h("ul", { class: cn("hu-tree", props.class), role: "tree" }, ...renderItems(props.items, 1));
+}
+// ============================================================
+// NAVBAR
+// ============================================================
+const NAVBAR_CSS = `
+.hu-navbar {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: 0 var(--hu-space-6); height: 60px;
+  background: var(--hu-bg); border-bottom: 1px solid var(--hu-border);
+  position: sticky; top: 0; z-index: var(--hu-z-sticky);
+  backdrop-filter: blur(8px); background: color-mix(in srgb, var(--hu-bg) 90%, transparent);
+}
+.hu-navbar-brand { display: flex; align-items: center; gap: var(--hu-space-3); text-decoration: none; color: var(--hu-text); font-weight: var(--hu-font-weight-bold); font-size: var(--hu-font-size-md); }
+.hu-navbar-nav { display: flex; align-items: center; gap: var(--hu-space-1); }
+.hu-navbar-link { padding: 6px 12px; border-radius: var(--hu-radius); font-size: var(--hu-font-size-sm); color: var(--hu-text-2); text-decoration: none; font-weight: var(--hu-font-weight-medium); transition: all var(--hu-duration) var(--hu-ease); }
+.hu-navbar-link:hover { color: var(--hu-text); background: var(--hu-bg-3); }
+.hu-navbar-link--active { color: var(--hu-primary); background: var(--hu-primary-bg); }
+.hu-navbar-actions { display: flex; align-items: center; gap: var(--hu-space-2); }
+`;
+export function Navbar(props) {
+    injectCSS("hu-navbar", NAVBAR_CSS);
+    const { brand, links = [], actions } = props;
+    return h("header", { class: cn("hu-navbar", props.class) }, brand && h("a", { class: "hu-navbar-brand", href: "/" }, brand), links.length > 0 && h("nav", { class: "hu-navbar-nav", "aria-label": "Main navigation" }, ...links.map((l) => h("a", { key: l.href, href: l.href, class: cn("hu-navbar-link", l.active && "hu-navbar-link--active") }, l.label))), actions && h("div", { class: "hu-navbar-actions" }, actions));
+}
+// ============================================================
+// SIDEBAR
+// ============================================================
+const SIDEBAR_CSS = `
+.hu-sidebar {
+  display: flex; flex-direction: column; height: 100vh; overflow: hidden;
+  background: var(--hu-bg); border-right: 1px solid var(--hu-border);
+  position: sticky; top: 0;
+}
+.hu-sidebar--sm { width: 220px; min-width: 220px; }
+.hu-sidebar--md { width: 260px; min-width: 260px; }
+.hu-sidebar--lg { width: 300px; min-width: 300px; }
+.hu-sidebar-header { padding: var(--hu-space-4) var(--hu-space-4) var(--hu-space-3); border-bottom: 1px solid var(--hu-border); }
+.hu-sidebar-nav { flex: 1; overflow-y: auto; padding: var(--hu-space-2); scrollbar-width: thin; }
+.hu-sidebar-section { margin-bottom: var(--hu-space-4); }
+.hu-sidebar-section-label { padding: var(--hu-space-2) var(--hu-space-3); font-size: 11px; font-weight: var(--hu-font-weight-semibold); color: var(--hu-text-3); text-transform: uppercase; letter-spacing: .06em; }
+.hu-sidebar-item {
+  display: flex; align-items: center; gap: var(--hu-space-3); width: 100%;
+  padding: 8px var(--hu-space-3); border-radius: var(--hu-radius); font-size: var(--hu-font-size-sm);
+  color: var(--hu-text-2); text-decoration: none; border: none; background: transparent;
+  cursor: pointer; font-weight: var(--hu-font-weight-medium); transition: all var(--hu-duration) var(--hu-ease);
+}
+.hu-sidebar-item:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-sidebar-item--active { background: var(--hu-primary-bg); color: var(--hu-primary); }
+.hu-sidebar-item-icon { width: 18px; height: 18px; flex-shrink: 0; }
+.hu-sidebar-item-badge { margin-left: auto; }
+.hu-sidebar-footer { padding: var(--hu-space-3) var(--hu-space-4); border-top: 1px solid var(--hu-border); }
+`;
+export function Sidebar(props) {
+    injectCSS("hu-sidebar", SIDEBAR_CSS);
+    const { header, sections, footer, width = "md" } = props;
+    return h("aside", { class: cn("hu-sidebar", `hu-sidebar--${width}`, props.class) }, header && h("div", { class: "hu-sidebar-header" }, header), h("nav", { class: "hu-sidebar-nav", "aria-label": "Sidebar navigation" }, ...sections.map((section, si) => h("div", { key: si, class: "hu-sidebar-section" }, section.label && h("div", { class: "hu-sidebar-section-label" }, section.label), ...section.items.map((item) => h(item.href ? "a" : "button", {
+        key: item.id, class: cn("hu-sidebar-item", item.active && "hu-sidebar-item--active"),
+        href: item.href, onClick: item.onClick, "aria-current": item.active ? "page" : undefined
+    }, item.icon && h("span", { class: "hu-sidebar-item-icon", "aria-hidden": "true" }, item.icon), item.label, item.badge && h("span", { class: "hu-sidebar-item-badge" }, item.badge)))))), footer && h("div", { class: "hu-sidebar-footer" }, footer));
+}
+// ============================================================
+// DATA TABLE
+// ============================================================
+const TABLE_CSS = `
+.hu-table-wrap { overflow-x: auto; border-radius: var(--hu-radius-md); border: 1px solid var(--hu-border); }
+.hu-table { width: 100%; border-collapse: collapse; font-size: var(--hu-font-size-sm); }
+.hu-table th {
+  padding: 10px 16px; text-align: left; font-size: 11px; font-weight: var(--hu-font-weight-semibold);
+  color: var(--hu-text-3); text-transform: uppercase; letter-spacing: .05em;
+  background: var(--hu-bg-2); border-bottom: 1px solid var(--hu-border);
+  white-space: nowrap;
+}
+.hu-table th.hu-table-sortable { cursor: pointer; user-select: none; }
+.hu-table th.hu-table-sortable:hover { background: var(--hu-bg-3); color: var(--hu-text); }
+.hu-table-sort-icon { display: inline-flex; align-items: center; margin-left: 4px; opacity: .4; }
+.hu-table-sort-icon--asc, .hu-table-sort-icon--desc { opacity: 1; color: var(--hu-primary); }
+.hu-table td { padding: 12px 16px; border-bottom: 1px solid var(--hu-border); color: var(--hu-text); vertical-align: middle; }
+.hu-table tr:last-child td { border-bottom: none; }
+.hu-table tr:hover td { background: var(--hu-bg-2); }
+.hu-table-empty { text-align: center; padding: var(--hu-space-12) var(--hu-space-6); color: var(--hu-text-3); }
+.hu-table-footer { display: flex; align-items: center; justify-content: space-between; padding: var(--hu-space-3) var(--hu-space-4); border-top: 1px solid var(--hu-border); background: var(--hu-bg-2); font-size: var(--hu-font-size-xs); color: var(--hu-text-3); }
+.hu-table-checkbox-col { width: 40px; padding-left: 16px !important; }
+`;
+export function DataTable(props) {
+    injectCSS("hu-table", TABLE_CSS);
+    const { columns, rows, rowKey, sortColumn, sortDir, onSort, onRowClick, emptyMessage = "No data available.", footer, selectable, selectedRows, onSelectRow, onSelectAll } = props;
+    const sortSVG = (dir) => dir === "asc"
+        ? `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 3l4 5H2l4-5z"/></svg>`
+        : dir === "desc"
+            ? `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor"><path d="M6 9L2 4h8L6 9z"/></svg>`
+            : `<svg width="12" height="12" viewBox="0 0 12 12" fill="currentColor" opacity=".4"><path d="M6 3l3 3H3l3-3zM6 9L3 6h6L6 9z"/></svg>`;
+    const allSelected = rows.length > 0 && rows.every((r) => selectedRows?.has(rowKey?.(r) ?? String(r["id"] ?? "")));
+    return h("div", { class: cn("hu-table-wrap", props.class) }, h("table", { class: "hu-table", role: "table" }, h("thead", {}, h("tr", {}, selectable && h("th", { class: "hu-table-checkbox-col" }, h("input", { type: "checkbox", checked: allSelected, onChange: (e) => onSelectAll?.(e.target.checked) })), ...columns.map((col) => h("th", {
+        key: col.key,
+        class: col.sortable ? "hu-table-sortable" : undefined,
+        style: [col.width && `width:${col.width}`, col.align && `text-align:${col.align}`].filter(Boolean).join(";"),
+        onClick: col.sortable ? () => onSort?.(col.key) : undefined
+    }, col.header, col.sortable && h("span", {
+        class: cn("hu-table-sort-icon", sortColumn === col.key && `hu-table-sort-icon--${sortDir}`),
+        innerHTML: sortSVG(sortColumn === col.key ? sortDir ?? "" : ""),
+        "aria-hidden": "true"
+    }))))), h("tbody", {}, rows.length === 0
+        ? h("tr", {}, h("td", { colspan: columns.length + (selectable ? 1 : 0), class: "hu-table-empty" }, emptyMessage))
+        : rows.map((row, i) => {
+            const key = rowKey?.(row) ?? String(row["id"] ?? i);
+            return h("tr", {
+                key, style: onRowClick ? "cursor:pointer" : undefined,
+                onClick: onRowClick ? () => onRowClick(row) : undefined
+            }, selectable && h("td", { class: "hu-table-checkbox-col" }, h("input", {
+                type: "checkbox", checked: selectedRows?.has(key) ?? false,
+                onChange: (e) => { e.stopPropagation(); onSelectRow?.(key, e.target.checked); }
+            })), ...columns.map((col) => h("td", { key: col.key, style: col.align ? `text-align:${col.align}` : undefined }, col.render ? col.render(row, i) : row[col.key])));
+        }))), footer && h("div", { class: "hu-table-footer" }, footer));
+}