@hyperpackai/hyperui 0.1.0

package/dist/components/enterprise.js

@@ -0,0 +1,428 @@
+/**
+ * HyperUI Enterprise Components
+ * ApprovalFlow · AuditTrail · PermissionMatrix · RoleManager
+ */
+import { injectCSS, cn, h } from "../theme/index.js";
+import { Button } from "./Button/index.js";
+const ENTERPRISE_CSS = `
+.hu-enterprise {
+  display: flex; flex-direction: column; gap: var(--hu-space-3);
+  padding: var(--hu-space-4); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius-md); background: var(--hu-bg); color: var(--hu-text);
+}
+.hu-enterprise__header {
+  display: flex; align-items: flex-start; justify-content: space-between;
+  gap: var(--hu-space-3); flex-wrap: wrap;
+}
+.hu-enterprise__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-enterprise__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-approval-flow__steps { display: flex; flex-direction: column; gap: var(--hu-space-3); }
+.hu-approval-step {
+  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
+  gap: var(--hu-space-3); align-items: start;
+}
+.hu-approval-step__marker {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--hu-radius-full);
+  background: var(--hu-bg-3); color: var(--hu-text-2); font-size: var(--hu-font-size-xs);
+  font-weight: var(--hu-font-weight-semibold);
+}
+.hu-approval-step--approved .hu-approval-step__marker { background: var(--hu-success-bg); color: var(--hu-success-text); }
+.hu-approval-step--rejected .hu-approval-step__marker { background: var(--hu-error-bg); color: var(--hu-error-text); }
+.hu-approval-step--pending .hu-approval-step__marker { background: var(--hu-warning-bg); color: var(--hu-warning-text); }
+.hu-approval-step__name { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); }
+.hu-approval-step__details { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-approval-step__actions { display: flex; gap: var(--hu-space-2); flex-wrap: wrap; justify-content: flex-end; }
+.hu-audit-trail__list { display: flex; flex-direction: column; gap: var(--hu-space-2); }
+.hu-audit-event {
+  display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr) minmax(0, 1fr);
+  gap: var(--hu-space-3); padding: var(--hu-space-3); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius); background: var(--hu-bg-2);
+}
+.hu-audit-event__action { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); }
+.hu-audit-event__actor,
+.hu-audit-event__time,
+.hu-audit-event__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-permission-matrix { overflow: auto; border: 1px solid var(--hu-border); border-radius: var(--hu-radius); }
+.hu-permission-matrix table { width: 100%; border-collapse: collapse; table-layout: fixed; }
+.hu-permission-matrix th,
+.hu-permission-matrix td {
+  padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
+  border-inline-end: 1px solid var(--hu-border); font-size: var(--hu-font-size-xs); text-align: center;
+}
+.hu-permission-matrix th { background: var(--hu-bg-2); color: var(--hu-text-2); font-weight: var(--hu-font-weight-semibold); }
+.hu-permission-matrix th:first-child { text-align: start; }
+.hu-role-manager__grid {
+  display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr);
+  gap: var(--hu-space-3);
+}
+.hu-role-manager__roles,
+.hu-role-manager__details { border: 1px solid var(--hu-border); border-radius: var(--hu-radius); overflow: hidden; }
+.hu-role-manager__role {
+  width: 100%; display: flex; flex-direction: column; gap: 2px;
+  padding: var(--hu-space-3); border: 0; border-block-end: 1px solid var(--hu-border);
+  background: var(--hu-bg); color: var(--hu-text); text-align: start; cursor: pointer;
+}
+.hu-role-manager__role[aria-selected="true"] { background: var(--hu-primary-bg); color: var(--hu-primary); }
+.hu-role-manager__details { padding: var(--hu-space-4); display: flex; flex-direction: column; gap: var(--hu-space-3); }
+.hu-role-manager__permissions { display: flex; flex-wrap: wrap; gap: var(--hu-space-2); }
+.hu-role-manager__permission {
+  display: inline-flex; padding: 4px 8px; border-radius: var(--hu-radius-full);
+  background: var(--hu-bg-3); color: var(--hu-text-2); font-size: var(--hu-font-size-xs);
+}
+.hu-feature-flags__list,
+.hu-notification-center__list,
+.hu-activity-feed__list { display: flex; flex-direction: column; gap: var(--hu-space-2); }
+.hu-feature-flag,
+.hu-notification,
+.hu-activity-item {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--hu-space-3); align-items: start;
+  padding: var(--hu-space-3); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius); background: var(--hu-bg-2);
+}
+.hu-feature-flag__name,
+.hu-notification__title,
+.hu-activity-item__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-feature-flag__details,
+.hu-notification__meta,
+.hu-activity-item__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-feature-flag__badge,
+.hu-notification__badge {
+  display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--hu-radius-full);
+  background: var(--hu-bg-3); color: var(--hu-text-2); font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-feature-flag__badge--enabled,
+.hu-notification__badge--success { background: var(--hu-success-bg); color: var(--hu-success-text); }
+.hu-feature-flag__badge--disabled,
+.hu-notification__badge--error { background: var(--hu-error-bg); color: var(--hu-error-text); }
+.hu-notification__badge--warning { background: var(--hu-warning-bg); color: var(--hu-warning-text); }
+.hu-notification__badge--info { background: var(--hu-info-bg); color: var(--hu-info-text); }
+.hu-feature-flag__actions,
+.hu-notification__actions { display: flex; gap: var(--hu-space-2); align-items: center; flex-wrap: wrap; justify-content: flex-end; }
+.hu-tenant-selector__control {
+  display: grid; grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--hu-space-2); align-items: end;
+}
+.hu-tenant-selector__select {
+  width: 100%; min-height: 40px; padding: 9px var(--hu-space-3);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius-md);
+  background: linear-gradient(180deg, var(--hu-bg), var(--hu-bg-2)); color: var(--hu-text); font-size: var(--hu-font-size-sm);
+  box-shadow: var(--hu-shadow-xs);
+}
+.hu-tenant-selector__summary {
+  display: flex; flex-wrap: wrap; gap: var(--hu-space-2);
+  font-size: var(--hu-font-size-xs); color: var(--hu-text-2);
+}
+.hu-activity-item { grid-template-columns: 32px minmax(0, 1fr) auto; }
+.hu-activity-item__avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--hu-radius-full);
+  background: var(--hu-primary-bg); color: var(--hu-primary);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-org-chart__tree,
+.hu-org-chart__children { display: flex; flex-direction: column; gap: var(--hu-space-2); }
+.hu-org-node {
+  display: grid; grid-template-columns: 32px minmax(0, 1fr) auto;
+  gap: var(--hu-space-3); align-items: center;
+  padding: var(--hu-space-3); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius); background: var(--hu-bg-2);
+}
+.hu-org-node__avatar {
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px; border-radius: var(--hu-radius-full);
+  background: var(--hu-primary-bg); color: var(--hu-primary);
+  font-size: var(--hu-font-size-xs); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-org-node__name,
+.hu-kanban-card__title { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-org-node__meta,
+.hu-gantt__meta,
+.hu-kanban-card__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-gantt { overflow: auto; border: 1px solid var(--hu-border); border-radius: var(--hu-radius); }
+.hu-gantt table { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 680px; }
+.hu-gantt th,
+.hu-gantt td {
+  padding: var(--hu-space-2) var(--hu-space-3); border-block-end: 1px solid var(--hu-border);
+  border-inline-end: 1px solid var(--hu-border); font-size: var(--hu-font-size-xs);
+}
+.hu-gantt th { background: var(--hu-bg-2); color: var(--hu-text-2); font-weight: var(--hu-font-weight-semibold); text-align: start; }
+.hu-gantt__bar-track { position: relative; height: 18px; border-radius: var(--hu-radius-full); background: var(--hu-bg-3); overflow: hidden; }
+.hu-gantt__bar {
+  position: absolute; inset-block: 3px; border-radius: var(--hu-radius-full);
+  background: var(--hu-primary); min-width: 4px;
+}
+.hu-kanban-board__columns {
+  display: grid; grid-template-columns: repeat(var(--hu-kanban-columns, 3), minmax(220px, 1fr));
+  gap: var(--hu-space-3); overflow: auto;
+}
+.hu-kanban-column {
+  display: flex; flex-direction: column; gap: var(--hu-space-2);
+  min-width: 220px; padding: var(--hu-space-3); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius); background: var(--hu-bg-2);
+}
+.hu-kanban-column__header {
+  display: flex; align-items: center; justify-content: space-between; gap: var(--hu-space-2);
+  font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold);
+}
+.hu-kanban-card {
+  display: flex; flex-direction: column; gap: var(--hu-space-2);
+  padding: var(--hu-space-3); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius); background: var(--hu-bg);
+}
+.hu-kanban-card__actions { display: flex; gap: var(--hu-space-2); flex-wrap: wrap; }
+.hu-workflow-designer__canvas {
+  position: relative; min-height: 280px; overflow: auto;
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius);
+  background: linear-gradient(var(--hu-bg-2), var(--hu-bg-2)) padding-box;
+}
+.hu-workflow-designer__edges {
+  position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none;
+}
+.hu-workflow-node {
+  position: absolute; width: 160px; min-height: 72px;
+  display: flex; flex-direction: column; gap: var(--hu-space-1);
+  padding: var(--hu-space-3); border: 1px solid var(--hu-border);
+  border-radius: var(--hu-radius); background: var(--hu-bg); color: var(--hu-text);
+  box-shadow: var(--hu-shadow-sm); text-align: start; cursor: pointer;
+}
+.hu-workflow-node[aria-selected="true"] { border-color: var(--hu-primary); box-shadow: 0 0 0 3px var(--hu-primary-bg); }
+.hu-workflow-node__label,
+.hu-document-viewer__name { font-size: var(--hu-font-size-sm); font-weight: var(--hu-font-weight-semibold); color: var(--hu-text); }
+.hu-workflow-node__meta,
+.hu-document-viewer__meta { font-size: var(--hu-font-size-xs); color: var(--hu-text-2); }
+.hu-document-viewer__toolbar {
+  display: flex; align-items: center; justify-content: space-between;
+  gap: var(--hu-space-3); flex-wrap: wrap;
+}
+.hu-document-viewer__actions { display: flex; align-items: center; gap: var(--hu-space-2); flex-wrap: wrap; }
+.hu-document-viewer__frame {
+  min-height: 260px; display: flex; flex-direction: column; align-items: center; justify-content: center;
+  gap: var(--hu-space-3); padding: var(--hu-space-6);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius);
+  background: var(--hu-bg-2); text-align: center;
+}
+.hu-document-viewer__preview {
+  width: min(100%, 520px); min-height: 180px; padding: var(--hu-space-4);
+  border: 1px solid var(--hu-border); border-radius: var(--hu-radius);
+  background: var(--hu-bg); color: var(--hu-text); text-align: start;
+  white-space: pre-wrap; overflow-wrap: anywhere;
+}
+@media (max-width: 720px) {
+  .hu-approval-step { grid-template-columns: 32px minmax(0, 1fr); }
+  .hu-approval-step__actions { grid-column: 2; justify-content: flex-start; }
+  .hu-audit-event { grid-template-columns: minmax(0, 1fr); }
+  .hu-role-manager__grid { grid-template-columns: minmax(0, 1fr); }
+  .hu-feature-flag,
+  .hu-notification,
+  .hu-tenant-selector__control { grid-template-columns: minmax(0, 1fr); }
+  .hu-feature-flag__actions,
+  .hu-notification__actions { justify-content: flex-start; }
+  .hu-kanban-board__columns { grid-template-columns: minmax(220px, 1fr); }
+  .hu-workflow-node { position: static; width: auto; margin: var(--hu-space-3); }
+  .hu-workflow-designer__edges { display: none; }
+}
+`;
+export function ApprovalFlow(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const pending = props.steps.filter((step) => (step.status ?? "pending") === "pending").length;
+    return h("section", { class: cn("hu-enterprise hu-approval-flow", props.class), "aria-label": props.title ?? "Approval flow" }, enterpriseHeader(props.title ?? "Approval flow", props.description ?? `${pending} pending`), h("ol", { class: "hu-approval-flow__steps" }, ...props.steps.map((step, index) => {
+        const status = step.status ?? "pending";
+        return h("li", {
+            key: step.id,
+            class: cn("hu-approval-step", `hu-approval-step--${status}`),
+            "aria-current": status === "pending" ? "step" : undefined
+        }, h("span", { class: "hu-approval-step__marker", "aria-hidden": "true" }, index + 1), h("div", {}, h("div", { class: "hu-approval-step__name" }, step.label), h("div", { class: "hu-approval-step__details" }, [step.approver, status, step.timestamp].filter(Boolean).join(" · ")), step.comment && h("div", { class: "hu-approval-step__details" }, step.comment)), status === "pending" && (props.onApprove || props.onReject) && h("div", { class: "hu-approval-step__actions" }, props.onApprove && Button({ type: "button", size: "sm", children: "Approve", onClick: () => props.onApprove?.(step.id) }), props.onReject && Button({ type: "button", size: "sm", variant: "secondary", children: "Reject", onClick: () => props.onReject?.(step.id) })));
+    })));
+}
+export function AuditTrail(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    return h("section", { class: cn("hu-enterprise hu-audit-trail", props.class), "aria-label": props.title ?? "Audit trail" }, enterpriseHeader(props.title ?? "Audit trail", props.description ?? `${props.events.length} events`), h("div", { class: "hu-audit-trail__list", role: "list" }, ...props.events.map((event) => h("article", {
+        key: event.id,
+        class: cn("hu-audit-event", event.severity && `hu-audit-event--${event.severity}`),
+        role: "listitem",
+        tabindex: props.onEventClick ? 0 : undefined,
+        onClick: props.onEventClick ? () => props.onEventClick?.(event) : undefined
+    }, h("div", {}, h("div", { class: "hu-audit-event__action" }, event.action), h("div", { class: "hu-audit-event__time" }, event.timestamp)), h("div", {}, h("div", { class: "hu-audit-event__actor" }, event.actor), event.target && h("div", { class: "hu-audit-event__meta" }, event.target)), h("div", { class: "hu-audit-event__meta" }, formatMetadata(event.metadata))))));
+}
+export function PermissionMatrix(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const value = props.value ?? {};
+    return h("section", { class: cn("hu-enterprise", props.class), "aria-label": props.title ?? "Permission matrix" }, enterpriseHeader(props.title ?? "Permission matrix", props.description ?? `${props.resources.length} resources`), h("div", { class: "hu-permission-matrix" }, h("table", { role: "grid" }, h("thead", {}, h("tr", {}, h("th", { scope: "col" }, "Resource"), ...props.actions.map((action) => h("th", { key: action.key, scope: "col" }, action.label)))), h("tbody", {}, ...props.resources.map((resource) => h("tr", { key: resource.key }, h("th", { scope: "row" }, resource.label), ...props.actions.map((action) => {
+        const checked = value[resource.key]?.includes(action.key) ?? false;
+        return h("td", { key: action.key }, h("input", {
+            type: "checkbox",
+            checked,
+            "aria-label": `${resource.label} ${action.label}`,
+            onChange: (e) => props.onChange?.(resource.key, action.key, e.target.checked)
+        }));
+    })))))));
+}
+export function RoleManager(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const selectedRole = props.roles.find((role) => role.id === props.selectedRole) ?? props.roles[0];
+    return h("section", { class: cn("hu-enterprise hu-role-manager", props.class), "aria-label": props.title ?? "Role manager" }, h("div", { class: "hu-enterprise__header" }, h("div", {}, h("div", { class: "hu-enterprise__title" }, props.title ?? "Role manager"), h("div", { class: "hu-enterprise__meta" }, props.description ?? `${props.roles.length} roles`)), props.onCreateRole && Button({ type: "button", size: "sm", children: "New role", onClick: props.onCreateRole })), h("div", { class: "hu-role-manager__grid" }, h("div", { class: "hu-role-manager__roles", role: "listbox", "aria-label": "Roles" }, ...props.roles.map((role) => h("button", {
+        key: role.id,
+        type: "button",
+        class: "hu-role-manager__role",
+        role: "option",
+        "aria-selected": selectedRole?.id === role.id ? "true" : "false",
+        onClick: () => props.onRoleSelect?.(role.id)
+    }, h("span", {}, role.name), h("span", { class: "hu-enterprise__meta" }, `${role.users ?? 0} users`)))), h("div", { class: "hu-role-manager__details", "aria-label": "Role details" }, selectedRole
+        ? [
+            h("div", { class: "hu-enterprise__title" }, selectedRole.name),
+            selectedRole.description && h("div", { class: "hu-enterprise__meta" }, selectedRole.description),
+            h("div", { class: "hu-role-manager__permissions", "aria-label": "Role permissions" }, ...(selectedRole.permissions ?? []).map((permission) => h("span", { key: permission, class: "hu-role-manager__permission" }, permission)))
+        ]
+        : h("div", { class: "hu-enterprise__meta" }, "No role selected."))));
+}
+export function FeatureFlags(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const enabledCount = props.flags.filter((flag) => flag.enabled).length;
+    return h("section", { class: cn("hu-enterprise hu-feature-flags", props.class), "aria-label": props.title ?? "Feature flags" }, enterpriseHeader(props.title ?? "Feature flags", props.description ?? `${enabledCount} enabled · ${props.flags.length} total`), h("div", { class: "hu-feature-flags__list", role: "list" }, ...props.flags.map((flag) => {
+        const enabled = flag.enabled ?? false;
+        return h("article", { key: flag.key, class: "hu-feature-flag", role: "listitem" }, h("div", {}, h("div", { class: "hu-feature-flag__name" }, flag.name), h("div", { class: "hu-feature-flag__details" }, [flag.description, flag.environment, flag.rollout !== undefined ? `${flag.rollout}% rollout` : undefined].filter(Boolean).join(" · "))), h("div", { class: "hu-feature-flag__actions" }, h("span", { class: cn("hu-feature-flag__badge", enabled ? "hu-feature-flag__badge--enabled" : "hu-feature-flag__badge--disabled") }, enabled ? "Enabled" : "Disabled"), h("input", {
+            type: "checkbox",
+            role: "switch",
+            checked: enabled,
+            "aria-label": `Toggle ${flag.name}`,
+            onChange: (e) => props.onToggle?.(flag.key, e.target.checked)
+        }), props.onEdit && Button({ type: "button", size: "sm", variant: "secondary", children: "Edit", onClick: () => props.onEdit?.(flag.key) })));
+    })));
+}
+export function TenantSelector(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const selected = props.tenants.find((tenant) => tenant.id === props.value) ?? props.tenants[0];
+    return h("section", { class: cn("hu-enterprise hu-tenant-selector", props.class), "aria-label": props.title ?? "Tenant selector" }, enterpriseHeader(props.title ?? "Tenant selector", props.description ?? `${props.tenants.length} tenants`), h("div", { class: "hu-tenant-selector__control" }, h("label", {}, h("span", { class: "hu-enterprise__meta" }, "Tenant"), h("select", {
+        class: "hu-tenant-selector__select",
+        value: selected?.id,
+        onChange: (e) => props.onChange?.(e.target.value)
+    }, ...props.tenants.map((tenant) => h("option", { key: tenant.id, value: tenant.id }, tenant.name)))), selected && props.onManage && Button({ type: "button", size: "sm", children: "Manage", onClick: () => props.onManage?.(selected.id) })), selected && h("div", { class: "hu-tenant-selector__summary", "aria-live": "polite" }, h("span", {}, selected.plan ?? "No plan"), h("span", {}, selected.region ?? "No region"), h("span", {}, selected.status ?? "active")));
+}
+export function NotificationCenter(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const unread = props.notifications.filter((notification) => !notification.read).length;
+    return h("section", { class: cn("hu-enterprise hu-notification-center", props.class), "aria-label": props.title ?? "Notification center" }, enterpriseHeader(props.title ?? "Notification center", props.description ?? `${unread} unread`), h("div", { class: "hu-notification-center__list", role: "list", "aria-live": "polite" }, ...props.notifications.map((notification) => {
+        const kind = notification.kind ?? "info";
+        return h("article", { key: notification.id, class: "hu-notification", role: "listitem" }, h("div", {}, h("div", { class: "hu-notification__title" }, notification.title), notification.message && h("div", { class: "hu-notification__meta" }, notification.message), notification.timestamp && h("div", { class: "hu-notification__meta" }, notification.timestamp)), h("div", { class: "hu-notification__actions" }, h("span", { class: cn("hu-notification__badge", `hu-notification__badge--${kind}`) }, notification.read ? "Read" : "Unread"), !notification.read && props.onMarkRead && Button({ type: "button", size: "sm", variant: "secondary", children: "Mark read", onClick: () => props.onMarkRead?.(notification.id) }), props.onDismiss && Button({ type: "button", size: "sm", variant: "ghost", children: "Dismiss", onClick: () => props.onDismiss?.(notification.id) })));
+    })));
+}
+export function ActivityFeed(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    return h("section", { class: cn("hu-enterprise hu-activity-feed", props.class), "aria-label": props.title ?? "Activity feed" }, enterpriseHeader(props.title ?? "Activity feed", props.description ?? `${props.items.length} activities`), h("div", { class: "hu-activity-feed__list", role: "feed" }, ...props.items.map((item) => h("article", {
+        key: item.id,
+        class: "hu-activity-item",
+        role: "article",
+        tabindex: props.onItemClick ? 0 : undefined,
+        onClick: props.onItemClick ? () => props.onItemClick?.(item) : undefined
+    }, h("span", { class: "hu-activity-item__avatar", "aria-hidden": "true" }, item.avatar ?? initials(item.actor)), h("div", {}, h("div", { class: "hu-activity-item__title" }, `${item.actor} ${item.action}`), item.target && h("div", { class: "hu-activity-item__meta" }, item.target), item.timestamp && h("time", { class: "hu-activity-item__meta" }, item.timestamp)), props.onItemClick && Button({ type: "button", size: "sm", variant: "ghost", children: "Open", onClick: () => props.onItemClick?.(item) })))));
+}
+export function OrgChart(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const total = countOrgNodes(props.nodes);
+    return h("section", { class: cn("hu-enterprise hu-org-chart", props.class), "aria-label": props.title ?? "Org chart" }, enterpriseHeader(props.title ?? "Org chart", props.description ?? `${total} people`), h("div", { class: "hu-org-chart__tree", role: "tree" }, ...props.nodes.map((node) => renderOrgNode(node, props.onNodeSelect, 1))));
+}
+export function GanttChart(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const range = getGanttRange(props.tasks);
+    return h("section", { class: cn("hu-enterprise", props.class), "aria-label": props.title ?? "Gantt chart" }, enterpriseHeader(props.title ?? "Gantt chart", props.description ?? `${props.tasks.length} tasks`), h("div", { class: "hu-gantt", role: "region", "aria-label": "Project timeline" }, h("table", {}, h("thead", {}, h("tr", {}, h("th", { scope: "col" }, "Task"), h("th", { scope: "col" }, "Owner"), h("th", { scope: "col" }, "Timeline"), h("th", { scope: "col" }, "Progress"))), h("tbody", {}, ...props.tasks.map((task) => {
+        const startOffset = range.days === 0 ? 0 : daysBetween(range.start, parseDate(task.start)) / range.days * 100;
+        const duration = range.days === 0 ? 100 : Math.max(1, daysBetween(parseDate(task.start), parseDate(task.end)) / range.days * 100);
+        return h("tr", {
+            key: task.id,
+            onClick: props.onTaskClick ? () => props.onTaskClick?.(task) : undefined
+        }, h("th", { scope: "row" }, task.label), h("td", {}, task.owner ?? ""), h("td", {}, h("div", { class: "hu-gantt__bar-track", "aria-label": `${task.start} to ${task.end}` }, h("span", {
+            class: "hu-gantt__bar",
+            style: `inset-inline-start:${startOffset}%;width:${Math.min(100 - startOffset, duration)}%`
+        }))), h("td", { class: "hu-gantt__meta" }, `${task.progress ?? 0}%`));
+    })))));
+}
+export function KanbanBoard(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    return h("section", {
+        class: cn("hu-enterprise hu-kanban-board", props.class),
+        style: `--hu-kanban-columns:${Math.max(1, props.columns.length)}`,
+        "aria-label": props.title ?? "Kanban board"
+    }, enterpriseHeader(props.title ?? "Kanban board", props.description ?? `${props.cards.length} cards`), h("div", { class: "hu-kanban-board__columns" }, ...props.columns.map((column) => {
+        const cards = props.cards.filter((card) => card.column === column.id);
+        return h("section", { key: column.id, class: "hu-kanban-column", "aria-label": column.title }, h("div", { class: "hu-kanban-column__header" }, h("span", {}, column.title), h("span", { class: "hu-enterprise__meta" }, `${cards.length}${column.limit ? `/${column.limit}` : ""}`)), ...cards.map((card) => h("article", { key: card.id, class: "hu-kanban-card" }, h("div", { class: "hu-kanban-card__title" }, card.title), card.description && h("div", { class: "hu-kanban-card__meta" }, card.description), h("div", { class: "hu-kanban-card__meta" }, [card.assignee, card.priority].filter(Boolean).join(" · ")), h("div", { class: "hu-kanban-card__actions" }, props.onCardSelect && Button({ type: "button", size: "sm", variant: "ghost", children: "Open", onClick: () => props.onCardSelect?.(card) }), props.onCardMove && props.columns.filter((target) => target.id !== column.id).map((target) => Button({ type: "button", size: "sm", variant: "secondary", children: `Move to ${target.title}`, onClick: () => props.onCardMove?.(card.id, target.id) }))))));
+    })));
+}
+export function WorkflowDesigner(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const nodeMap = new Map(props.nodes.map((node, index) => [node.id, resolveWorkflowNodePosition(node, index)]));
+    return h("section", { class: cn("hu-enterprise hu-workflow-designer", props.class), "aria-label": props.title ?? "Workflow designer" }, h("div", { class: "hu-enterprise__header" }, h("div", {}, h("div", { class: "hu-enterprise__title" }, props.title ?? "Workflow designer"), h("div", { class: "hu-enterprise__meta" }, props.description ?? `${props.nodes.length} nodes · ${props.edges?.length ?? 0} edges`)), props.onAddNode && Button({ type: "button", size: "sm", children: "Add node", onClick: props.onAddNode })), h("div", { class: "hu-workflow-designer__canvas", role: "application", "aria-label": "Workflow canvas" }, h("svg", { class: "hu-workflow-designer__edges", viewBox: "0 0 760 320", "aria-hidden": "true" }, ...(props.edges ?? []).map((edge) => {
+        const from = nodeMap.get(edge.from);
+        const to = nodeMap.get(edge.to);
+        if (!from || !to)
+            return false;
+        return h("line", {
+            key: edge.id,
+            x1: from.x + 160,
+            y1: from.y + 36,
+            x2: to.x,
+            y2: to.y + 36,
+            stroke: "var(--hu-border-2)",
+            "stroke-width": 2
+        });
+    })), ...props.nodes.map((node, index) => {
+        const position = resolveWorkflowNodePosition(node, index);
+        return h("button", {
+            key: node.id,
+            type: "button",
+            class: "hu-workflow-node",
+            style: `inset-inline-start:${position.x}px;inset-block-start:${position.y}px`,
+            "aria-selected": props.selectedNode === node.id ? "true" : "false",
+            onClick: () => props.onNodeSelect?.(node)
+        }, h("span", { class: "hu-workflow-node__label" }, node.label), h("span", { class: "hu-workflow-node__meta" }, node.type ?? "task"), node.description && h("span", { class: "hu-workflow-node__meta" }, node.description));
+    })));
+}
+export function DocumentViewer(props) {
+    injectCSS("hu-enterprise", ENTERPRISE_CSS);
+    const page = props.page ?? 1;
+    const pages = Math.max(1, props.document.pages ?? 1);
+    return h("section", { class: cn("hu-enterprise hu-document-viewer", props.class), "aria-label": props.title ?? "Document viewer" }, h("div", { class: "hu-document-viewer__toolbar" }, h("div", {}, h("div", { class: "hu-document-viewer__name" }, props.title ?? props.document.name), h("div", { class: "hu-document-viewer__meta" }, props.description ?? [props.document.kind ?? "unknown", props.document.size, `${page} / ${pages}`].filter(Boolean).join(" · "))), h("div", { class: "hu-document-viewer__actions" }, Button({ type: "button", size: "sm", variant: "secondary", disabled: page <= 1, children: "Previous", onClick: () => props.onPageChange?.(page - 1) }), Button({ type: "button", size: "sm", variant: "secondary", disabled: page >= pages, children: "Next", onClick: () => props.onPageChange?.(page + 1) }), props.onDownload && Button({ type: "button", size: "sm", children: "Download", onClick: () => props.onDownload?.(props.document) }))), h("div", { class: "hu-document-viewer__frame", role: "document", "aria-label": props.document.name }, props.document.kind === "image" && props.document.url
+        ? h("img", { src: props.document.url, alt: props.document.name, loading: "lazy" })
+        : h("div", { class: "hu-document-viewer__preview" }, props.document.content ?? `${props.document.name}\n${props.document.kind ?? "unknown"} preview`)));
+}
+function enterpriseHeader(title, meta) {
+    return h("div", { class: "hu-enterprise__header" }, h("div", {}, h("div", { class: "hu-enterprise__title" }, title), h("div", { class: "hu-enterprise__meta" }, meta)));
+}
+function formatMetadata(metadata) {
+    if (!metadata || Object.keys(metadata).length === 0)
+        return "";
+    return Object.entries(metadata).map(([key, value]) => `${key}: ${String(value)}`).join(" · ");
+}
+function initials(name) {
+    return name.split(" ").slice(0, 2).map((part) => part[0]?.toUpperCase() ?? "").join("") || "?";
+}
+function countOrgNodes(nodes) {
+    return nodes.reduce((total, node) => total + 1 + countOrgNodes(node.reports ?? []), 0);
+}
+function renderOrgNode(node, onNodeSelect, level) {
+    const hasReports = (node.reports?.length ?? 0) > 0;
+    return h("div", { key: node.id, role: "treeitem", "aria-level": level, "aria-expanded": hasReports ? "true" : undefined }, h("article", {
+        class: "hu-org-node",
+        onClick: onNodeSelect ? () => onNodeSelect(node) : undefined
+    }, h("span", { class: "hu-org-node__avatar", "aria-hidden": "true" }, node.avatar ?? initials(node.name)), h("div", {}, h("div", { class: "hu-org-node__name" }, node.name), h("div", { class: "hu-org-node__meta" }, [node.title, node.department].filter(Boolean).join(" · "))), hasReports && h("span", { class: "hu-enterprise__meta" }, `${node.reports.length} reports`)), hasReports && h("div", { class: "hu-org-chart__children", role: "group" }, ...node.reports.map((report) => renderOrgNode(report, onNodeSelect, level + 1))));
+}
+function parseDate(value) {
+    return new Date(`${value}T00:00:00.000Z`);
+}
+function daysBetween(start, end) {
+    return Math.max(0, Math.round((end.getTime() - start.getTime()) / 86400000));
+}
+function getGanttRange(tasks) {
+    const starts = tasks.map((task) => parseDate(task.start).getTime());
+    const ends = tasks.map((task) => parseDate(task.end).getTime());
+    const start = new Date(starts.length ? Math.min(...starts) : Date.now());
+    const end = new Date(ends.length ? Math.max(...ends) : start.getTime());
+    return { start, end, days: Math.max(1, daysBetween(start, end)) };
+}
+function resolveWorkflowNodePosition(node, index) {
+    return {
+        x: node.x ?? 24 + index * 180,
+        y: node.y ?? 32 + index % 2 * 96
+    };
+}

package/dist/components/form.d.ts

@@ -0,0 +1,132 @@
+import { type VNode } from "../theme/index.js";
+export type ValidationRule<TValues extends Record<string, unknown>, TKey extends keyof TValues = keyof TValues> = {
+    required?: boolean | string;
+    validate?: (value: TValues[TKey], values: TValues) => string | undefined;
+};
+export type ValidationSchema<TValues extends Record<string, unknown>> = {
+    [K in keyof TValues]?: ValidationRule<TValues, K>;
+};
+export interface ValidationEngine<TValues extends Record<string, unknown>> {
+    validate(values: TValues): Partial<Record<keyof TValues, string>>;
+    isValid(values: TValues): boolean;
+}
+export declare function createValidationEngine<TValues extends Record<string, unknown>>(schema: ValidationSchema<TValues>): ValidationEngine<TValues>;
+export interface FormProps<TValues extends Record<string, unknown> = Record<string, unknown>> {
+    values?: TValues;
+    schema?: ValidationSchema<TValues>;
+    actions?: unknown;
+    class?: string;
+    children?: unknown;
+    onSubmit?: (values: TValues) => void;
+}
+export declare function Form<TValues extends Record<string, unknown> = Record<string, unknown>>(props: FormProps<TValues>): VNode;
+export interface FormFieldProps {
+    id: string;
+    name?: string;
+    label?: string;
+    description?: string;
+    error?: string;
+    required?: boolean;
+    class?: string;
+    children?: unknown;
+}
+export declare function FormField(props: FormFieldProps): VNode;
+export interface FormSectionProps {
+    title?: string;
+    description?: string;
+    class?: string;
+    children?: unknown;
+}
+export declare function FormSection(props: FormSectionProps): VNode;
+export interface WizardFormStep {
+    id: string;
+    title: string;
+    fields?: string[];
+    content?: unknown;
+}
+export interface WizardFormProps<TValues extends Record<string, unknown> = Record<string, unknown>> {
+    values?: TValues;
+    schema?: ValidationSchema<TValues>;
+    steps: WizardFormStep[];
+    activeStep?: string;
+    class?: string;
+    onStepChange?: (stepId: string) => void;
+    onSubmit?: (values: TValues) => void;
+}
+export declare function WizardForm<TValues extends Record<string, unknown> = Record<string, unknown>>(props: WizardFormProps<TValues>): VNode;
+export type DynamicFormFieldType = "text" | "email" | "password" | "number" | "select" | "switch" | "textarea";
+export interface DynamicFormField {
+    name: string;
+    label: string;
+    type?: DynamicFormFieldType;
+    required?: boolean;
+    fullWidth?: boolean;
+    options?: Array<{
+        label: string;
+        value: string;
+        disabled?: boolean;
+    }>;
+}
+export interface DynamicFormProps<TValues extends Record<string, unknown> = Record<string, unknown>> {
+    values: TValues;
+    fields: DynamicFormField[];
+    schema?: ValidationSchema<TValues>;
+    columns?: number;
+    class?: string;
+    onChange?: (name: keyof TValues, value: unknown) => void;
+}
+export declare function DynamicForm<TValues extends Record<string, unknown> = Record<string, unknown>>(props: DynamicFormProps<TValues>): VNode;
+export interface FileUploadFile {
+    name: string;
+    size?: number;
+    type?: string;
+}
+export interface FileUploadProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    hint?: string;
+    accept?: string;
+    multiple?: boolean;
+    disabled?: boolean;
+    files?: FileUploadFile[];
+    class?: string;
+    onChange?: (files: FileList | File[]) => void;
+}
+export declare function FileUpload(props?: FileUploadProps): VNode;
+export interface DropzoneProps extends FileUploadProps {
+    active?: boolean;
+    title?: string;
+    minHeight?: string | number;
+    onDropFiles?: (files: FileList | File[]) => void;
+}
+export declare function Dropzone(props?: DropzoneProps): VNode;
+export interface CodeEntryProps {
+    label?: string;
+    value?: string;
+    length?: number;
+    mask?: boolean;
+    disabled?: boolean;
+    inputMode?: "numeric" | "text";
+    autoComplete?: string;
+    class?: string;
+    onChange?: (value: string) => void;
+}
+export interface OTPInputProps extends CodeEntryProps {
+}
+export interface PinInputProps extends CodeEntryProps {
+}
+export declare function OTPInput(props?: OTPInputProps): VNode;
+export declare function PinInput(props?: PinInputProps): VNode;
+export interface ColorPickerProps {
+    id?: string;
+    label?: string;
+    value?: string;
+    defaultValue?: string;
+    disabled?: boolean;
+    hint?: string;
+    class?: string;
+    onChange?: (value: string, event: Event) => void;
+}
+export declare function ColorPicker(props?: ColorPickerProps): VNode;
+//# sourceMappingURL=form.d.ts.map

package/dist/components/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/components/form.ts"],"names":[],"mappings":"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"}