@brika/ui-kit 0.3.0 → 0.3.1

package/src/descriptors.ts

@@ -6,14 +6,6 @@ export interface ActionNode {
   icon?: string;
 }
 
-export const MUT = { CREATE: 0, REPLACE: 1, UPDATE: 2, REMOVE: 3 } as const;
-
-export type Mutation =
-  | [op: 0, path: string, node: ComponentNode]
-  | [op: 1, path: string, node: ComponentNode]
-  | [op: 2, path: string, changes: Record<string, unknown>, removed?: string[]]
-  | [op: 3, path: string];
-
 export interface BrickDescriptor {
   id: string;
   title: string;

package/src/index.ts

@@ -64,7 +64,7 @@ export type {
 } from './nodes';
 
 // ─────────────────────────────────────────────────────────────────────────────
-// Component Builders (PascalCase — used with custom jsx-runtime)
+// Component Builders (PascalCase)
 // ─────────────────────────────────────────────────────────────────────────────
 
 export {
@@ -109,29 +109,7 @@ export {
 // Descriptors
 // ─────────────────────────────────────────────────────────────────────────────
 
-export type { ActionNode, BrickDescriptor, Mutation } from './descriptors';
-export { MUT } from './descriptors';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// defineBrick
-// ─────────────────────────────────────────────────────────────────────────────
-
-export type {
-  BrickActionHandler,
-  BrickComponent,
-  BrickFamily,
-  BrickInstanceContext,
-  BrickTypeSpec,
-  CompiledBrickType,
-} from './define-brick';
-
-export { defineBrick } from './define-brick';
-
-// ─────────────────────────────────────────────────────────────────────────────
-// Mutation Applicator (shared between Hub and UI)
-// ─────────────────────────────────────────────────────────────────────────────
-
-export { applyMutations } from './mutations';
+export type { ActionNode, BrickDescriptor } from './descriptors';
 
 // ─────────────────────────────────────────────────────────────────────────────
 // Theme-aware color tokens

package/src/nodes/_shared.ts

@@ -7,7 +7,7 @@ export interface BaseNode {
 
 function isMarker<T>(brand: string) {
   return (v: unknown): v is T =>
-    v != null && typeof v === 'object' && (v as Record<string, unknown>)[brand] === true;
+    v !== null && typeof v === 'object' && (v as Record<string, unknown>)[brand] === true;
 }
 
 // ── I18n Reference ───────────────────────────────────────────────────────────
@@ -57,18 +57,25 @@ export type IntlRef = {
 export const isIntlRef = isMarker<IntlRef>('__intl');
 
 export function resolveIntlRef(ref: IntlRef, locale?: string): string {
-  if (!locale) return ref.type === 'list' ? ref.value.join(', ') : String(ref.value);
+  if (!locale) {
+    return ref.type === 'list' ? ref.value.join(', ') : String(ref.value);
+  }
   switch (ref.type) {
     case 'dateTime':
       return new Intl.DateTimeFormat(locale, ref.options).format(ref.value);
     case 'number':
       return new Intl.NumberFormat(locale, ref.options).format(ref.value);
     case 'relativeTime':
-      return new Intl.RelativeTimeFormat(locale, { numeric: 'auto' }).format(ref.value, ref.unit);
+      return new Intl.RelativeTimeFormat(locale, {
+        numeric: 'auto',
+      }).format(ref.value, ref.unit);
     case 'list':
       return new Intl.ListFormat(
         locale,
-        ref.options ?? { style: 'long', type: 'conjunction' }
+        ref.options ?? {
+          style: 'long',
+          type: 'conjunction',
+        }
       ).format(ref.value);
   }
 }
@@ -87,7 +94,9 @@ export function _setActionRegistrar(fn: ((handler: ActionHandler) => string) | n
 }
 
 export function resolveAction(handler: ActionHandler): string {
-  if (_registrar) return _registrar(handler);
+  if (_registrar) {
+    return _registrar(handler);
+  }
   return `__action_${_fallbackIdx++}`;
 }
 
@@ -108,19 +117,31 @@ export type ComponentNode = NodeTypeMap[keyof NodeTypeMap];
 export type Child = ComponentNode | I18nRef | IntlRef | ComponentNode[] | false | null | undefined;
 
 export function normalizeChildren(children: Child | Child[]): ComponentNode[] {
-  if (!children) return [];
+  if (!children) {
+    return [];
+  }
   const items = Array.isArray(children) ? children.flat() : [children];
   const result: ComponentNode[] = [];
   for (const c of items) {
-    if (c == null || c === false) continue;
+    if (c === null || c === false || c === undefined) {
+      continue;
+    }
     if (isI18nRef(c)) {
       result.push({
         type: 'text',
         content: c.key,
-        i18n: { ns: c.ns, key: c.key, params: c.params },
+        i18n: {
+          ns: c.ns,
+          key: c.key,
+          params: c.params,
+        },
       } as ComponentNode);
     } else if (isIntlRef(c)) {
-      result.push({ type: 'text', content: resolveIntlRef(c), intl: c } as ComponentNode);
+      result.push({
+        type: 'text',
+        content: resolveIntlRef(c),
+        intl: c,
+      } as ComponentNode);
     } else {
       result.push(c);
     }

package/src/nodes/avatar.ts

@@ -23,10 +23,16 @@ export interface AvatarNode extends BaseNode {
 }
 
 export function Avatar(
-  props: Omit<AvatarNode, 'type' | 'onPress'> & { onPress?: ActionHandler }
+  props: Omit<AvatarNode, 'type' | 'onPress'> & {
+    onPress?: ActionHandler;
+  }
 ): AvatarNode {
   const { onPress, ...rest } = props;
-  return { type: 'avatar', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+  return {
+    type: 'avatar',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/badge.ts

@@ -16,10 +16,16 @@ export interface BadgeNode extends BaseNode {
 }
 
 export function Badge(
-  props: Omit<BadgeNode, 'type' | 'onPress'> & { onPress?: ActionHandler }
+  props: Omit<BadgeNode, 'type' | 'onPress'> & {
+    onPress?: ActionHandler;
+  }
 ): BadgeNode {
   const { onPress, ...rest } = props;
-  return { type: 'badge', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+  return {
+    type: 'badge',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/button.ts

@@ -34,7 +34,11 @@ export function Button(props: {
   fullWidth?: boolean;
 }): ButtonNode {
   const { onPress, ...rest } = props;
-  return { type: 'button', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+  return {
+    type: 'button',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/callout.ts

@@ -13,7 +13,10 @@ export interface CalloutNode extends BaseNode {
 }
 
 export function Callout(props: Omit<CalloutNode, 'type'>): CalloutNode {
-  return { type: 'callout', ...props };
+  return {
+    type: 'callout',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/chart.ts

@@ -33,7 +33,10 @@ export interface ChartNode extends BaseNode {
 }
 
 export function Chart(props: Omit<ChartNode, 'type'>): ChartNode {
-  return { type: 'chart', ...props };
+  return {
+    type: 'chart',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/checkbox.ts

@@ -14,10 +14,16 @@ export interface CheckboxNode extends BaseNode {
 }
 
 export function Checkbox(
-  props: Omit<CheckboxNode, 'type' | 'onToggle'> & { onToggle: ActionHandler }
+  props: Omit<CheckboxNode, 'type' | 'onToggle'> & {
+    onToggle: ActionHandler;
+  }
 ): CheckboxNode {
   const { onToggle, ...rest } = props;
-  return { type: 'checkbox', ...rest, onToggle: resolveAction(onToggle) };
+  return {
+    type: 'checkbox',
+    ...rest,
+    onToggle: resolveAction(onToggle),
+  };
 }
 
 declare module './_shared' {

package/src/nodes/code-block.ts

@@ -17,7 +17,10 @@ export interface CodeBlockNode extends BaseNode {
 }
 
 export function CodeBlock(props: Omit<CodeBlockNode, 'type'>): CodeBlockNode {
-  return { type: 'code-block', ...props };
+  return {
+    type: 'code-block',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/divider.ts

@@ -15,7 +15,10 @@ export function Divider(props?: {
   color?: string;
   label?: string;
 }): DividerNode {
-  return { type: 'divider', ...props };
+  return {
+    type: 'divider',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/icon.ts

@@ -15,10 +15,16 @@ export interface IconNode extends BaseNode {
 }
 
 export function Icon(
-  props: Omit<IconNode, 'type' | 'onPress'> & { onPress?: ActionHandler }
+  props: Omit<IconNode, 'type' | 'onPress'> & {
+    onPress?: ActionHandler;
+  }
 ): IconNode {
   const { onPress, ...rest } = props;
-  return { type: 'icon', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+  return {
+    type: 'icon',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/image.ts

@@ -16,10 +16,16 @@ export interface ImageNode extends BaseNode {
 }
 
 export function Image(
-  props: Omit<ImageNode, 'type' | 'onPress'> & { onPress?: ActionHandler }
+  props: Omit<ImageNode, 'type' | 'onPress'> & {
+    onPress?: ActionHandler;
+  }
 ): ImageNode {
   const { onPress, ...rest } = props;
-  return { type: 'image', ...rest, onPress: onPress ? resolveAction(onPress) : undefined };
+  return {
+    type: 'image',
+    ...rest,
+    onPress: onPress ? resolveAction(onPress) : undefined,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/key-value.ts

@@ -21,7 +21,10 @@ export interface KeyValueNode extends BaseNode {
 }
 
 export function KeyValue(props: Omit<KeyValueNode, 'type'>): KeyValueNode {
-  return { type: 'key-value', ...props };
+  return {
+    type: 'key-value',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/link.ts

@@ -15,7 +15,10 @@ export interface LinkNode extends BaseNode {
 }
 
 export function Link(props: Omit<LinkNode, 'type'>): LinkNode {
-  return { type: 'link', ...props };
+  return {
+    type: 'link',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/markdown.ts

@@ -6,7 +6,10 @@ export interface MarkdownNode extends BaseNode {
 }
 
 export function Markdown(props: Omit<MarkdownNode, 'type'>): MarkdownNode {
-  return { type: 'markdown', ...props };
+  return {
+    type: 'markdown',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/progress.ts

@@ -18,7 +18,10 @@ export interface ProgressNode extends BaseNode {
 }
 
 export function Progress(props: Omit<ProgressNode, 'type'>): ProgressNode {
-  return { type: 'progress', ...props };
+  return {
+    type: 'progress',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/select.ts

@@ -34,7 +34,11 @@ export function Select(props: {
   icon?: string;
 }): SelectNode {
   const { onChange, ...rest } = props;
-  return { type: 'select', ...rest, onChange: resolveAction(onChange) };
+  return {
+    type: 'select',
+    ...rest,
+    onChange: resolveAction(onChange),
+  };
 }
 
 declare module './_shared' {

package/src/nodes/skeleton.ts

@@ -13,7 +13,10 @@ export interface SkeletonNode extends BaseNode {
 }
 
 export function Skeleton(props: Omit<SkeletonNode, 'type'>): SkeletonNode {
-  return { type: 'skeleton', ...props };
+  return {
+    type: 'skeleton',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/slider.ts

@@ -30,7 +30,11 @@ export function Slider(props: {
   disabled?: boolean;
 }): SliderNode {
   const { onChange, ...rest } = props;
-  return { type: 'slider', ...rest, onChange: resolveAction(onChange) };
+  return {
+    type: 'slider',
+    ...rest,
+    onChange: resolveAction(onChange),
+  };
 }
 
 declare module './_shared' {

package/src/nodes/spacer.ts

@@ -7,7 +7,10 @@ export interface SpacerNode extends BaseNode {
 }
 
 export function Spacer(props?: { size?: 'sm' | 'md' | 'lg' }): SpacerNode {
-  return { type: 'spacer', ...props };
+  return {
+    type: 'spacer',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/stat-value.ts

@@ -16,7 +16,10 @@ export interface StatValueNode extends BaseNode {
 }
 
 export function Stat(props: Omit<StatValueNode, 'type'>): StatValueNode {
-  return { type: 'stat-value', ...props };
+  return {
+    type: 'stat-value',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/status.ts

@@ -10,7 +10,10 @@ export interface StatusNode extends BaseNode {
 }
 
 export function Status(props: Omit<StatusNode, 'type'>): StatusNode {
-  return { type: 'status', ...props };
+  return {
+    type: 'status',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/table.ts

@@ -22,10 +22,16 @@ export interface TableNode extends BaseNode {
 }
 
 export function Table(
-  props: Omit<TableNode, 'type' | 'onRowPress'> & { onRowPress?: ActionHandler }
+  props: Omit<TableNode, 'type' | 'onRowPress'> & {
+    onRowPress?: ActionHandler;
+  }
 ): TableNode {
   const { onRowPress, ...rest } = props;
-  return { type: 'table', ...rest, onRowPress: onRowPress ? resolveAction(onRowPress) : undefined };
+  return {
+    type: 'table',
+    ...rest,
+    onRowPress: onRowPress ? resolveAction(onRowPress) : undefined,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/tabs.ts

@@ -27,7 +27,12 @@ export interface TabsNode extends BaseNode {
 
 export function Tabs(props: {
   value: string;
-  tabs: { key: string; label: string; icon?: string; children?: Child | Child[] }[];
+  tabs: {
+    key: string;
+    label: string;
+    icon?: string;
+    children?: Child | Child[];
+  }[];
   onChange: ActionHandler;
   variant?: 'default' | 'pills';
 }): TabsNode {

package/src/nodes/text.ts

@@ -7,7 +7,11 @@ export interface TextNode extends BaseNode {
   type: 'text';
   content: string;
   /** When set, the UI renderer resolves this via i18next instead of using content. */
-  i18n?: { ns: string; key: string; params?: Record<string, string | number> };
+  i18n?: {
+    ns: string;
+    key: string;
+    params?: Record<string, string | number>;
+  };
   /** When set, the UI renderer formats this value via Intl APIs with the user's locale. */
   intl?: IntlRef;
   variant?: 'body' | 'caption' | 'heading';
@@ -43,7 +47,11 @@ export function Text(props: TextProps): TextNode {
       type: 'text',
       ...rest,
       content: content.key,
-      i18n: { ns: content.ns, key: content.key, params: content.params },
+      i18n: {
+        ns: content.ns,
+        key: content.key,
+        params: content.params,
+      },
       onPress: press,
     };
   }
@@ -56,7 +64,12 @@ export function Text(props: TextProps): TextNode {
       onPress: press,
     };
   }
-  return { type: 'text', ...rest, content, onPress: press };
+  return {
+    type: 'text',
+    ...rest,
+    content,
+    onPress: press,
+  };
 }
 
 declare module './_shared' {

package/src/nodes/toggle.ts

@@ -22,7 +22,11 @@ export function Toggle(props: {
   disabled?: boolean;
 }): ToggleNode {
   const { onToggle, ...rest } = props;
-  return { type: 'toggle', ...rest, onToggle: resolveAction(onToggle) };
+  return {
+    type: 'toggle',
+    ...rest,
+    onToggle: resolveAction(onToggle),
+  };
 }
 
 declare module './_shared' {

package/src/nodes/video.ts

@@ -14,7 +14,10 @@ export interface VideoNode extends BaseNode {
 }
 
 export function Video(props: Omit<VideoNode, 'type'>): VideoNode {
-  return { type: 'video', ...props };
+  return {
+    type: 'video',
+    ...props,
+  };
 }
 
 declare module './_shared' {

package/tailwind-theme.css

@@ -0,0 +1,115 @@
+/* Shared Tailwind v4 theme tokens — imported by both the Vite frontend build
+   and the hub's ModuleCompiler (plugin page CSS).  Single source of truth. */
+
+@custom-variant dark (&:is(.dark *));
+
+/* ─────────────────────────────────────────────────────────────
+   BASE TOKENS (theme-independent)
+   ───────────────────────────────────────────────────────────── */
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace;
+
+  --radius-sm: 0.375rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+}
+
+/* ─────────────────────────────────────────────────────────────
+   SEMANTIC VARIABLES → TAILWIND UTILITIES
+   Makes them available as utilities: bg-primary, text-success, etc.
+   ───────────────────────────────────────────────────────────── */
+@theme inline {
+  /* Core semantic colors */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  /* Semantic feedback colors */
+  --color-success: var(--success);
+  --color-success-foreground: var(--success-foreground);
+  --color-warning: var(--warning);
+  --color-warning-foreground: var(--warning-foreground);
+  --color-info: var(--info);
+  --color-info-foreground: var(--info-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+
+  /* Status colors for workflows */
+  --color-status-idle: var(--status-idle);
+  --color-status-running: var(--status-running);
+  --color-status-completed: var(--status-completed);
+  --color-status-error: var(--status-error);
+
+  /* Data visualization colors */
+  --color-data-1: var(--data-1);
+  --color-data-2: var(--data-2);
+  --color-data-3: var(--data-3);
+  --color-data-4: var(--data-4);
+  --color-data-5: var(--data-5);
+  --color-data-6: var(--data-6);
+  --color-data-7: var(--data-7);
+  --color-data-8: var(--data-8);
+
+  /* Sidebar colors */
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* ─────────────────────────────────────────────────────────────
+   CORNER SHAPE UTILITIES
+   CSS corner-shape property for squircle and other corner styles
+   Requires border-radius to have effect
+   https://developer.mozilla.org/en-US/docs/Web/CSS/corner-shape
+   ───────────────────────────────────────────────────────────── */
+
+/* Static keyword utilities */
+@utility corner-round {
+  corner-shape: round;
+}
+
+@utility corner-square {
+  corner-shape: square;
+}
+
+@utility corner-bevel {
+  corner-shape: bevel;
+}
+
+@utility corner-scoop {
+  corner-shape: scoop;
+}
+
+@utility corner-notch {
+  corner-shape: notch;
+}
+
+@utility corner-squircle {
+  corner-shape: squircle;
+}
+
+/* Functional utility for superellipse with custom values */
+@utility corner-superellipse-* {
+  corner-shape: superellipse(--value(number));
+}