@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/ui/primitives/skeleton.tsx

@@ -1,99 +0,0 @@
-import { cn } from '../cn';
-
-/**
- * Skeleton types for visual variety
- */
-export type SkeletonVariant = "pulse" | "shimmer";
-
-/**
- * Skeleton color presets matching the theme
- */
-export type SkeletonColor = "muted" | "paper" | "paper-elev" | "paper-sunk" | "ink" | "ink-2" | "ink-3";
-
-/**
- * Skeleton border radius options
- */
-export type SkeletonRounded = "sm" | "md" | "lg" | "full" | "none";
-
-export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
-  /** Visual animation variant */
-  variant?: SkeletonVariant;
-  /** Background color */
-  color?: SkeletonColor;
-  /** Border radius */
-  rounded?: SkeletonRounded;
-  /** Height in pixels */
-  height?: number;
-  /** Width (CSS value or percentage) */
-  width?: string | number;
-}
-
-/**
- * Skeleton primitive for loading states.
- *
- * Usage:
- * ```tsx
- * // Basic usage (default: shimmer animation, muted color)
- * <Skeleton />
- *
- * // Customized
- * <Skeleton variant="pulse" color="paper-elev" rounded="lg" height={24} width="80%" />
- *
- * // Inline in a loading branch
- * {isLoading && <Skeleton height={16} className="mb-2" />}
- * ```
- */
-function Skeleton({
-  className,
-  variant = "shimmer",
-  color = "muted",
-  rounded = "md",
-  height,
-  width,
-  ...props
-}: SkeletonProps) {
-  // Color mapping to tailwind classes
-  const colorMap: Record<SkeletonColor, string> = {
-    muted: "bg-muted",
-    paper: "bg-paper",
-    "paper-elev": "bg-paper-elev",
-    "paper-sunk": "bg-paper-sunk",
-    ink: "bg-ink",
-    "ink-2": "bg-ink-2",
-    "ink-3": "bg-ink-3",
-  };
-
-  // Rounded mapping to tailwind classes
-  const roundedMap: Record<SkeletonRounded, string> = {
-    sm: "rounded-sm",
-    md: "rounded-md",
-    lg: "rounded-lg",
-    full: "rounded-full",
-    none: "rounded-none",
-  };
-
-  // Base classes for all skeleton variants
-  const baseClasses = cn(colorMap[color], roundedMap[rounded]);
-
-  // Animation classes
-  const animationClasses =
-    variant === "pulse"
-      ? "animate-pulse"
-      : "shimmer"; // CSS class handled via global styles
-
-  return (
-    <div
-      className={cn(
-        baseClasses,
-        animationClasses,
-        height && `h-[${height}px]`,
-        width && `w-[${width}]`,
-        className,
-      )}
-      style={{ animationDuration: variant === "shimmer" ? "2s" : undefined, ...props.style }}
-      {...props}
-    />
-  );
-}
-
-export { Skeleton };

package/src/ui/primitives/switch.tsx

@@ -1,27 +0,0 @@
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-      className,
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0",
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };

package/src/ui/primitives/table.tsx

@@ -1,72 +0,0 @@
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
-  ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn("w-full caption-bottom text-body-1", className)} {...props} />
-    </div>
-  ),
-);
-Table.displayName = "Table";
-
-const TableHeader = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />,
-);
-TableHeader.displayName = "TableHeader";
-
-const TableBody = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
-  ),
-);
-TableBody.displayName = "TableBody";
-
-const TableFooter = React.forwardRef<HTMLTableSectionElement, React.HTMLAttributes<HTMLTableSectionElement>>(
-  ({ className, ...props }, ref) => (
-    <tfoot ref={ref} className={cn("border-t bg-paper-elev/60 font-medium [&>tr]:last:border-b-0", className)} {...props} />
-  ),
-);
-TableFooter.displayName = "TableFooter";
-
-const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
-  ({ className, ...props }, ref) => (
-    <tr
-      ref={ref}
-      className={cn("border-b transition-colors data-[state=selected]:bg-muted hover:bg-paper-elev", className)}
-      {...props}
-    />
-  ),
-);
-TableRow.displayName = "TableRow";
-
-const TableHead = React.forwardRef<HTMLTableCellElement, React.ThHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <th
-      ref={ref}
-      className={cn(
-        "h-12 px-4 text-left align-middle font-medium text-ink-3 [&:has([role=checkbox])]:pr-0",
-        className,
-      )}
-      {...props}
-    />
-  ),
-);
-TableHead.displayName = "TableHead";
-
-const TableCell = React.forwardRef<HTMLTableCellElement, React.TdHTMLAttributes<HTMLTableCellElement>>(
-  ({ className, ...props }, ref) => (
-    <td ref={ref} className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)} {...props} />
-  ),
-);
-TableCell.displayName = "TableCell";
-
-const TableCaption = React.forwardRef<HTMLTableCaptionElement, React.HTMLAttributes<HTMLTableCaptionElement>>(
-  ({ className, ...props }, ref) => (
-    <caption ref={ref} className={cn("mt-4 text-body-1 text-ink-3", className)} {...props} />
-  ),
-);
-TableCaption.displayName = "TableCaption";
-
-export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };

package/src/ui/primitives/tabs.tsx

@@ -1,53 +0,0 @@
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const Tabs = TabsPrimitive.Root;
-
-const TabsList = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.List>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.List
-    ref={ref}
-    className={cn(
-      "inline-flex h-10 items-center justify-center rounded-md bg-paper-elev/60 p-1 text-ink-3",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsList.displayName = TabsPrimitive.List.displayName;
-
-const TabsTrigger = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Trigger
-    ref={ref}
-    className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-body-1 font-medium text-ink-2 ring-offset-background transition-[background-color,color,border-color,box-shadow] hover:text-ink data-[state=active]:bg-paper-elev data-[state=active]:text-ink data-[state=active]:shadow-[var(--shadow-2)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-
-const TabsContent = React.forwardRef<
-  React.ElementRef<typeof TabsPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
->(({ className, ...props }, ref) => (
-  <TabsPrimitive.Content
-    ref={ref}
-    className={cn(
-      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-      className,
-    )}
-    {...props}
-  />
-));
-TabsContent.displayName = TabsPrimitive.Content.displayName;
-
-export { Tabs, TabsList, TabsTrigger, TabsContent };

package/src/ui/primitives/tag-multi-select.tsx

@@ -1,261 +0,0 @@
-import { Check, ChevronsUpDown, Plus, Search, X } from 'lucide-react';
-import { useMemo, useRef, useState, type KeyboardEvent } from 'react';
-
-import { Badge } from './badge';
-import { Button } from './button';
-import { Input } from './input';
-import { Popover, PopoverContent, PopoverTrigger } from './popover';
-import { ScrollArea } from './scroll-area';
-import { cn } from '../cn';
-
-export interface TagOption {
-  value: string;
-  label: string;
-  hint?: string;
-}
-
-export interface TagMultiSelectProps {
-  value: string[];
-  onChange: (next: string[]) => void;
-  options: TagOption[];
-  placeholder?: string;
-  searchPlaceholder?: string;
-  emptyMessage?: string;
-  /** Allow the user to add values that aren't in the predefined options. */
-  allowCustom?: boolean;
-  /** Badge tone for selected chips. */
-  chipVariant?: 'default' | 'secondary' | 'success' | 'destructive';
-  /** Extra className for the trigger. */
-  triggerClassName?: string;
-  disabled?: boolean;
-}
-
-const CHIP_CLASSES: Record<
-  NonNullable<TagMultiSelectProps['chipVariant']>,
-  string
-> = {
-  default: 'bg-primary/10 text-primary border-primary/20',
-  secondary: 'bg-secondary text-secondary-foreground border-secondary',
-  success: 'bg-success/10 text-success border-success/20',
-  destructive: 'bg-destructive/10 text-destructive border-destructive/20',
-};
-
-export function TagMultiSelect({
-  value,
-  onChange,
-  options,
-  placeholder = 'Select…',
-  searchPlaceholder = 'Search…',
-  emptyMessage = 'No matches',
-  allowCustom = false,
-  chipVariant = 'default',
-  triggerClassName,
-  disabled,
-}: Readonly<TagMultiSelectProps>) {
-  const [open, setOpen] = useState(false);
-  const [search, setSearch] = useState('');
-  const inputRef = useRef<HTMLInputElement>(null);
-
-  const selectedSet = useMemo(() => new Set(value), [value]);
-
-  const optionByValue = useMemo(() => {
-    const map = new Map<string, TagOption>();
-    options.forEach((o) => map.set(o.value, o));
-    return map;
-  }, [options]);
-
-  const filteredOptions = useMemo(() => {
-    const q = search.trim().toLowerCase();
-    if (!q) {
-      return options;
-    }
-    return options.filter(
-      (o) =>
-        o.label.toLowerCase().includes(q) ||
-        o.value.toLowerCase().includes(q) ||
-        (o.hint?.toLowerCase().includes(q) ?? false),
-    );
-  }, [options, search]);
-
-  const normalizedSearch = search.trim();
-  const canAddCustom =
-    allowCustom &&
-    normalizedSearch.length > 0 &&
-    !optionByValue.has(normalizedSearch) &&
-    !selectedSet.has(normalizedSearch);
-
-  const toggle = (val: string) => {
-    if (selectedSet.has(val)) {
-      onChange(value.filter((v) => v !== val));
-    } else {
-      onChange([...value, val]);
-    }
-  };
-
-  const remove = (val: string, e?: React.MouseEvent) => {
-    e?.stopPropagation();
-    onChange(value.filter((v) => v !== val));
-  };
-
-  const addCustom = () => {
-    if (!canAddCustom) {
-      return;
-    }
-    onChange([...value, normalizedSearch]);
-    setSearch('');
-    inputRef.current?.focus();
-  };
-
-  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      e.preventDefault();
-      if (canAddCustom) {
-        addCustom();
-      } else {
-        // Enter with exactly one remaining match selects it.
-        const onlyMatch =
-          filteredOptions.length === 1 ? filteredOptions[0] : undefined;
-        if (onlyMatch !== undefined) {
-          toggle(onlyMatch.value);
-        }
-      }
-    }
-  };
-
-  const chipClass = CHIP_CLASSES[chipVariant];
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          variant="outline"
-          role="combobox"
-          aria-expanded={open}
-          disabled={disabled}
-          className={cn(
-            'w-full min-h-9 h-auto justify-between font-normal py-1.5',
-            triggerClassName,
-          )}
-        >
-          <div className="flex flex-wrap gap-1 flex-1 text-left">
-            {value.length === 0 && (
-              <span className="text-ink-3 text-body-1">{placeholder}</span>
-            )}
-            {value.map((val) => {
-              const opt = optionByValue.get(val);
-              return (
-                <Badge
-                  key={val}
-                  variant="outline"
-                  className={cn('text-body-1 gap-1 pr-1', chipClass)}
-                >
-                  <span className="truncate max-w-[160px]">
-                    {opt?.label ?? val}
-                  </span>
-                  <button
-                    type="button"
-                    onClick={(e) => remove(val, e)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        remove(val);
-                      }
-                    }}
-                    className="rounded-sm hover:bg-paper-elev p-0.5"
-                    aria-label={`Remove ${opt?.label ?? val}`}
-                  >
-                    <X className="h-4 w-4" />
-                  </button>
-                </Badge>
-              );
-            })}
-          </div>
-          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent
-        className="w-[--radix-popover-trigger-width] p-0"
-        align="start"
-        onOpenAutoFocus={(e) => {
-          e.preventDefault();
-          setTimeout(() => inputRef.current?.focus(), 30);
-        }}
-      >
-        <div className="relative border-b">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-ink-3" />
-          <Input
-            ref={inputRef}
-            value={search}
-            onChange={(e) => setSearch(e.target.value)}
-            onKeyDown={onKeyDown}
-            placeholder={searchPlaceholder}
-            className="h-9 text-body-1 pl-8 border-0 rounded-none focus-visible:ring-0 focus-visible:ring-offset-0"
-          />
-        </div>
-
-        <ScrollArea className="max-h-56">
-          <div className="p-1">
-            {filteredOptions.length === 0 && !canAddCustom && (
-              <p className="text-body-1 text-ink-3 text-center py-3">
-                {emptyMessage}
-              </p>
-            )}
-
-            {filteredOptions.map((opt) => {
-              const selected = selectedSet.has(opt.value);
-              return (
-                <button
-                  key={opt.value}
-                  type="button"
-                  onClick={() => toggle(opt.value)}
-                  className={cn(
-                    'w-full text-left text-body-1 px-2 py-1.5 rounded hover:bg-paper-elev transition-colors flex items-start gap-2',
-                    selected && 'bg-paper-elev/60',
-                  )}
-                >
-                  <span
-                    className={cn(
-                      'mt-0.5 h-4 w-4 shrink-0 rounded border flex items-center justify-center',
-                      selected
-                        ? 'bg-primary border-primary text-primary-foreground'
-                        : 'border-muted-foreground/40',
-                    )}
-                  >
-                    {selected && <Check className="h-4 w-4" />}
-                  </span>
-                  <span className="flex-1 min-w-0">
-                    <span className="font-medium block truncate">
-                      {opt.label}
-                    </span>
-                    {opt.hint && (
-                      <span className="text-body-1 text-ink-3 block truncate">
-                        {opt.hint}
-                      </span>
-                    )}
-                  </span>
-                </button>
-              );
-            })}
-
-            {canAddCustom && (
-              <button
-                type="button"
-                onClick={addCustom}
-                className="w-full text-left text-body-1 px-2 py-1.5 rounded hover:bg-paper-elev transition-colors flex items-center gap-2 border-t mt-1 pt-2"
-              >
-                <Plus className="h-4 w-4 text-ink-3" />
-                <span>
-                  Add{' '}
-                  <span className="font-mono font-medium">
-                    {normalizedSearch}
-                  </span>
-                </span>
-              </button>
-            )}
-          </div>
-        </ScrollArea>
-      </PopoverContent>
-    </Popover>
-  );
-}

package/src/ui/primitives/textarea.tsx

@@ -1,21 +0,0 @@
-import * as React from "react";
-
-import { cn } from '../cn';
-
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(({ className, ...props }, ref) => {
-  return (
-    <textarea
-      className={cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-body-1 ring-offset-background placeholder:text-ink-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
-Textarea.displayName = "Textarea";
-
-export { Textarea };

package/src/ui/primitives/tooltip.tsx

@@ -1,30 +0,0 @@
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React from "react";
-
-import { cn } from '../cn';
-
-const TooltipProvider = TooltipPrimitive.Provider;
-
-const Tooltip = TooltipPrimitive.Root;
-
-const TooltipTrigger = TooltipPrimitive.Trigger;
-
-const TooltipContent = React.forwardRef<
-  React.ElementRef<typeof TooltipPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
->(({ className, sideOffset = 4, ...props }, ref) => (
-  <TooltipPrimitive.Portal>
-    <TooltipPrimitive.Content
-      ref={ref}
-      sideOffset={sideOffset}
-      className={cn(
-        "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-body-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className,
-      )}
-      {...props}
-    />
-  </TooltipPrimitive.Portal>
-));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
-
-export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/ui/primitives/url-preview-chrome.tsx

@@ -1,103 +0,0 @@
-/**
- * Mock browser chrome for a URL preview.
- *
- * Renders the traffic-light dots + an address bar + a refresh affordance, then
- * the caller-supplied live content (the real iframe) below.
- *
- * Owned by the UI kernel so the Vista `url` surface, the thin session
- * workspace, and any biome preview reuse ONE chrome — there is no second
- * implementation.
- */
-import { RotateCw } from 'lucide-react';
-
-import type { ReactElement, ReactNode } from 'react';
-
-const TRAFFIC_LIGHTS = ['#e5645a', '#e8b13d', '#5bb35b'] as const;
-
-export interface UrlPreviewChromeProps {
-  /** Address shown in the mock address bar. */
-  readonly url: string;
-  /** Live preview content (the real iframe). */
-  readonly children: ReactNode;
-  /** Optional reload handler wired to the refresh glyph. */
-  readonly onReload?: () => void;
-}
-
-export function UrlPreviewChrome({
-  url,
-  children,
-  onReload,
-}: UrlPreviewChromeProps): ReactElement {
-  return (
-    <div style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
-      <div
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          gap: 8,
-          padding: '8px 12px',
-          borderBottom: '1px solid hsl(var(--rule))',
-          background: 'hsl(var(--paper) / 0.5)',
-          flexShrink: 0,
-        }}
-      >
-        <span style={{ display: 'flex', gap: 5 }}>
-          {TRAFFIC_LIGHTS.map((color) => (
-            <span
-              key={color}
-              style={{
-                width: 9,
-                height: 9,
-                borderRadius: '50%',
-                background: color,
-              }}
-            />
-          ))}
-        </span>
-        <span
-          className="mono"
-          style={{
-            fontSize: 11,
-            color: 'hsl(var(--ink-4))',
-            marginLeft: 6,
-            padding: '3px 10px',
-            background: 'hsl(var(--paper-sunk))',
-            borderRadius: 6,
-            flex: 1,
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {url}
-        </span>
-        {onReload ? (
-          <button
-            type="button"
-            onClick={onReload}
-            aria-label="Reload preview"
-            style={{
-              display: 'inline-flex',
-              color: 'hsl(var(--ink-4))',
-              padding: 2,
-              borderRadius: 5,
-            }}
-          >
-            <RotateCw size={13} />
-          </button>
-        ) : (
-          <RotateCw size={13} style={{ color: 'hsl(var(--ink-4))' }} />
-        )}
-      </div>
-      <div
-        style={{
-          flex: 1,
-          minHeight: 0,
-          background: 'hsl(var(--paper-elev))',
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}