@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/ui/chrome/page-shell.tsx

@@ -1,221 +0,0 @@
-import { FileQuestion, type LucideIcon } from 'lucide-react';
-import { type ReactNode } from 'react';
-
-import EmptyState from './EmptyState';
-import { useHostBridge, type PageBackTarget } from '../../lib/biome-host';
-import { Tabs, TabsList, TabsTrigger } from '../primitives/tabs';
-
-interface TabDef {
-  value: string;
-  label: string | ReactNode;
-  count?: number;
-  indicator?: boolean;
-}
-
-interface PageShellProps {
-  icon: LucideIcon;
-  title: string;
-  description?: string;
-  children?: ReactNode;
-  actions?: ReactNode;
-  tabs?: TabDef[];
-  activeTab?: string;
-  onTabChange?: (value: string) => void;
-  maxWidth?: string;
-  embedded?: boolean;
-  /** Mono caption rendered before the title in the topbar (parent context). */
-  eyebrow?: string;
-  /**
-   * Leftmost icon-only back affordance on the topbar. Pages with a parent
-   * context MUST set this and MUST NOT render their own in-body back button.
-   */
-  backTo?: PageBackTarget;
-  /**
-   * Optional right-aligned topbar action cluster. Use for primary CTAs
-   * (1-3 small buttons). Heavier in-page chrome (filter rows, search
-   * inputs) should keep using the `actions` slot which renders inside the
-   * page body.
-   */
-  topbarActions?: ReactNode;
-}
-
-/**
- * Full-page shell — registers the topbar page-meta (via the HostBridge
- * page-meta store) and renders an optional tab strip + action row above the
- * scrollable content canvas. Host-framework-agnostic: reaches the page-meta
- * store through the kernel `HostBridge` singleton, never a host import.
- *
- * ── WHY THIS DISPATCHES INSTEAD OF BRANCHING ──────────────────────────────
- *
- * `embedded` means "the host page already owns the topbar — render only my
- * body". But `usePageMeta` used to be called UNCONDITIONALLY, above the
- * `embedded` check, and the page-meta store is a STACK ("nested pages can push
- * their own meta; on unmount the outer meta is restored"). So an embedded shell
- * pushed its own title, description, eyebrow, backTo and topbarActions OVER its
- * host's — the precise opposite of what embedding means. The host's back button
- * and title silently became the child's for as long as the child was mounted.
- *
- * A hook cannot be called conditionally, so the fix is structural: this
- * component calls NO hooks and only chooses. The embedded variant never reaches
- * the page-meta hook because it is a different component, not a later branch.
- */
-export default function PageShell(props: Readonly<PageShellProps>) {
-  return props.embedded ? (
-    <EmbeddedPageShell {...props} />
-  ) : (
-    <FullPageShell {...props} />
-  );
-}
-
-/**
- * Embedded body. Registers NO page meta — the host page owns the topbar.
- * Renders only the child content plus an optional sub-tab strip + actions.
- */
-function EmbeddedPageShell({
-  children,
-  actions,
-  tabs,
-  activeTab,
-  onTabChange,
-}: Readonly<PageShellProps>) {
-  {
-    return (
-      <div className="flex h-full min-h-0 flex-col bg-paper">
-        {(tabs && tabs.length > 0) || actions ? (
-          <div className="shrink-0 border-b border-rule bg-paper-elev/40">
-            <div className="flex items-center gap-3 px-4 py-2 lg:px-6">
-              {tabs && tabs.length > 0 && (
-                <Tabs
-                  value={activeTab}
-                  onValueChange={onTabChange}
-                  className="flex-1 min-w-0"
-                >
-                  <div className="overflow-x-auto">
-                    <TabsList className="h-7 bg-transparent p-0 gap-0">
-                      {tabs.map((tab) => (
-                        <TabsTrigger
-                          key={tab.value}
-                          value={tab.value}
-                          className="rounded-none border-b-2 border-transparent px-2 py-1 text-body-2 font-medium text-ink-3 transition-colors data-[state=active]:border-primary data-[state=active]:text-ink data-[state=active]:bg-transparent data-[state=active]:shadow-none"
-                        >
-                          {tab.label}
-                          {tab.count !== undefined && (
-                            <span className="ml-1.5 text-caption tabular-nums opacity-70">
-                              {tab.count}
-                            </span>
-                          )}
-                          {tab.indicator && (
-                            <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-warning" />
-                          )}
-                        </TabsTrigger>
-                      ))}
-                    </TabsList>
-                  </div>
-                </Tabs>
-              )}
-              {!tabs && <div className="flex-1" />}
-              {actions && (
-                <div className="flex items-center gap-2 shrink-0">
-                  {actions}
-                </div>
-              )}
-            </div>
-          </div>
-        ) : null}
-        <div className="flex-1 overflow-auto min-h-0">
-          <div className="flex h-full min-h-0 flex-col px-4 pb-4 pt-3 lg:px-6">
-            {children}
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-/**
- * Full page. Owns the topbar meta for the route it renders.
- */
-function FullPageShell({
-  title,
-  description,
-  children,
-  actions,
-  tabs,
-  activeTab,
-  onTabChange,
-  maxWidth,
-  eyebrow,
-  backTo,
-  topbarActions,
-}: Readonly<PageShellProps>) {
-  // Single source of truth for the topbar title. Pages that bypass
-  // PageShell call the page-meta hook directly; PageShell wraps the same
-  // hook so consumers don't need to register meta twice.
-  useHostBridge().pageMeta.usePageMeta({
-    title,
-    description,
-    eyebrow,
-    backTo,
-    topbarActions,
-  });
-
-  return (
-    <div className={`flex h-full min-h-0 flex-col ${maxWidth ?? ''}`}>
-      {/* Compact toolbar: tabs + actions on the same row */}
-      {(tabs || actions) && (
-        <div className="shrink-0 border-b border-border/50 px-4 sm:px-5 lg:px-8">
-          <div className="flex min-h-[34px] flex-col gap-2 py-1.5 sm:flex-row sm:items-center sm:gap-3 sm:py-0">
-            {tabs && tabs.length > 0 && (
-              <Tabs
-                value={activeTab}
-                onValueChange={onTabChange}
-                className="flex-1 min-w-0"
-              >
-                <div className="overflow-x-auto">
-                  <TabsList className="h-7 bg-transparent p-0 gap-0">
-                    {tabs.map((tab) => (
-                      <TabsTrigger
-                        key={tab.value}
-                        value={tab.value}
-                        className="whitespace-nowrap rounded-none border-b-2 border-transparent px-2.5 py-1.5 text-caption font-medium text-ink-3/90 transition-colors data-[state=active]:border-primary data-[state=active]:bg-transparent data-[state=active]:text-ink data-[state=active]:shadow-none hover:text-ink"
-                      >
-                        {tab.label}
-                        {tab.count !== undefined && (
-                          <span className="ml-1.5 text-caption tabular-nums opacity-60">
-                            {tab.count}
-                          </span>
-                        )}
-                        {tab.indicator && (
-                          <span className="ml-1.5 inline-block h-1.5 w-1.5 rounded-full bg-warning" />
-                        )}
-                      </TabsTrigger>
-                    ))}
-                  </TabsList>
-                </div>
-              </Tabs>
-            )}
-            {!tabs && <div className="flex-1" />}
-            {actions && (
-              <div className="flex w-full flex-wrap items-center gap-2 sm:w-auto sm:shrink-0 sm:justify-end">
-                {actions}
-              </div>
-            )}
-          </div>
-        </div>
-      )}
-
-      {/* Content area — full height. Padding sized to match other editorial
-          surfaces (PageHeader-rooted pages use the same `px-4 sm:px-6 py-5`
-          rhythm). */}
-      <div className="flex min-h-0 flex-1 flex-col overflow-auto px-4 pb-5 pt-4 sm:px-6 sm:pb-6 sm:pt-5">
-        {children || (
-          <EmptyState
-            icon={FileQuestion}
-            title="Nothing to show yet"
-            description="This page has no content to display. Check back once the workspace has data."
-          />
-        )}
-      </div>
-    </div>
-  );
-}

package/src/ui/chrome/scope-badge.tsx

@@ -1,40 +0,0 @@
-import { cn } from '../cn';
-import { TONE_STYLES, type Tone } from '../design-tokens';
-
-export interface ScopeBadgeProps {
-  /** Short label shown inside the chip. e.g. "system", "org", "override". */
-  label: string;
-  /** Visual tone — drives bg/text/border via design tokens. */
-  tone?: Tone;
-  /** Optional tooltip text. */
-  hint?: string;
-  className?: string;
-}
-
-/**
- * Compact uppercase chip for closed-enum scope/source pills (workflow
- * source, trigger scope, etc.). Distinct from `<StatusBadge>` which
- * carries process-state semantics (running/succeeded/failed/…).
- *
- * Always renders at the smallest size (`text-[10px]`) because it sits
- * inline next to other content on dense list rows.
- */
-export default function ScopeBadge({
-  label,
-  tone = 'neutral',
-  hint,
-  className,
-}: ScopeBadgeProps) {
-  return (
-    <span
-      className={cn(
-        'inline-flex shrink-0 items-center rounded-sm border px-1.5 py-0 text-[10px] font-medium uppercase tracking-wide',
-        TONE_STYLES[tone],
-        className,
-      )}
-      title={hint}
-    >
-      {label}
-    </span>
-  );
-}

package/src/ui/chrome/status-badge.tsx

@@ -1,79 +0,0 @@
-import { cn } from '../cn';
-import { getStatusStyle } from '../design-tokens';
-import { Badge } from '../primitives/badge';
-
-import type { ReactNode } from 'react';
-
-export type StatusBadgeSize = 'xs' | 'sm' | 'md';
-
-export interface StatusBadgeProps {
-  status: string;
-  className?: string;
-  dot?: boolean;
-  size?: StatusBadgeSize;
-  /** Override the rendered label. Falls back to a capitalized version of `status`. */
-  children?: ReactNode;
-}
-
-interface SizeTokens {
-  badge: string;
-  dot: string;
-  gap: string;
-}
-
-const SIZE_TOKENS: Record<StatusBadgeSize, SizeTokens> = {
-  xs: {
-    badge: 'h-[18px] px-1.5 py-0 text-[10px] font-medium',
-    dot: 'h-1 w-1',
-    gap: 'gap-1',
-  },
-  sm: {
-    badge: 'h-5 px-2 py-0 text-caption font-medium',
-    dot: 'h-1.5 w-1.5',
-    gap: 'gap-1.5',
-  },
-  md: {
-    badge: 'px-2.5 py-0.5 text-body-1',
-    dot: 'h-1.5 w-1.5',
-    gap: 'gap-1.5',
-  },
-};
-
-/**
- * Semantic status badge that reads from the design token system.
- * Use across all pages for consistent status display.
- *
- * Size guidance:
- *   - `xs` — dense list rows (Sessions, Brainstorming)
- *   - `sm` — default list rows (Workflow Runs, Schedules, Triggers, dashboards)
- *   - `md` — detail-page headers + hero surfaces
- */
-export default function StatusBadge({
-  status,
-  className,
-  dot,
-  size = 'sm',
-  children,
-}: StatusBadgeProps) {
-  const style = getStatusStyle(status);
-  const sz = SIZE_TOKENS[size];
-  return (
-    <Badge
-      variant="outline"
-      className={cn(
-        'inline-flex items-center rounded-full',
-        sz.badge,
-        sz.gap,
-        style.badge,
-        className,
-      )}
-    >
-      {dot && (
-        <span className={cn('shrink-0 rounded-full', sz.dot, style.dot)} />
-      )}
-      {children ?? (
-        <span className="capitalize">{status.replace(/_/g, ' ')}</span>
-      )}
-    </Badge>
-  );
-}

package/src/ui/cn.ts

@@ -1,32 +0,0 @@
-import { clsx, type ClassValue } from 'clsx';
-import { extendTailwindMerge } from 'tailwind-merge';
-
-// The Xema design system defines a custom typography scale in the host
-// Tailwind config (`fontSize` keys: caption / body-1 / body-2 / subtitle /
-// title / display). tailwind-merge doesn't know these keys, so it
-// misclassifies `text-body-1`, `text-caption`, … as text-*color* utilities
-// and silently strips a real `text-*` colour when both land on one element
-// via cn(). Registering them in the `font-size` group keeps conflict
-// resolution correct.
-//
-// This is the SAME config the host shell ships in `@/lib/utils`. The shared
-// primitives moved into this package MUST merge classes identically, so the
-// config is duplicated here (one trivial block) rather than imported from the
-// host — this package stays host-framework-agnostic.
-const twMerge = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      'font-size': [
-        { text: ['caption', 'body-1', 'body-2', 'subtitle', 'title', 'display'] },
-      ],
-    },
-  },
-});
-
-/**
- * Tailwind-aware class merge used by every shared UI primitive. Identical in
- * behaviour to the host shell's `cn` (including the custom typography scale).
- */
-export function cn(...inputs: ClassValue[]): string {
-  return twMerge(clsx(inputs));
-}