@xemahq/ui-kernel 0.11.1 → 0.12.0

package/src/session-kit/primitives/RiskPill.tsx

@@ -1,95 +0,0 @@
-/**
- * Capability risk-tier pill. Reuses the kernel `CapabilityRiskTier`
- * enum (low / medium / high / critical) — it does NOT define a parallel
- * string union. Critical renders an optional caller-supplied alert icon
- * (the kit carries no icon dependency, matching the rest of ui-kernel).
- *
- * Risk → colour:
- *   low      → ink / muted
- *   medium   → --info
- *   high     → --warning
- *   critical → --destructive (always explicit)
- */
-import { CapabilityRiskTier } from '@xemahq/kernel-contracts/capability';
-
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
-
-export { CapabilityRiskTier };
-
-interface RiskStyle {
-  readonly label: string;
-  readonly fg: string;
-  readonly bg: string;
-  readonly bd: string;
-}
-
-const DANGER = 'var(--destructive, var(--danger))';
-
-const RISK: Record<CapabilityRiskTier, RiskStyle> = {
-  [CapabilityRiskTier.Low]: {
-    label: 'Low',
-    fg: 'hsl(var(--ink-3))',
-    bg: 'hsl(var(--muted))',
-    bd: 'hsl(var(--rule))',
-  },
-  [CapabilityRiskTier.Medium]: {
-    label: 'Medium',
-    fg: 'hsl(var(--info))',
-    bg: 'hsl(var(--info) / 0.09)',
-    bd: 'hsl(var(--info) / 0.28)',
-  },
-  [CapabilityRiskTier.High]: {
-    label: 'High',
-    fg: 'hsl(var(--warning))',
-    bg: 'hsl(var(--warning) / 0.1)',
-    bd: 'hsl(var(--warning) / 0.3)',
-  },
-  [CapabilityRiskTier.Critical]: {
-    label: 'Critical',
-    fg: `hsl(${DANGER})`,
-    bg: `hsl(${DANGER} / 0.09)`,
-    bd: `hsl(${DANGER} / 0.32)`,
-  },
-};
-
-export type RiskPillSize = 'xs' | 'sm';
-
-export interface RiskPillProps {
-  readonly tier: CapabilityRiskTier;
-  readonly size?: RiskPillSize;
-  /** Rendered before the label for the `critical` tier (e.g. an alert glyph). */
-  readonly criticalIcon?: ReactNode;
-  readonly style?: CSSProperties;
-}
-
-export function RiskPill({
-  tier,
-  size = 'sm',
-  criticalIcon,
-  style,
-}: RiskPillProps): ReactElement {
-  const r = RISK[tier];
-  return (
-    <span
-      className="mono"
-      style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: 4,
-        padding: size === 'xs' ? '1px 6px' : '2px 8px',
-        fontSize: size === 'xs' ? 9.5 : 10,
-        fontWeight: 600,
-        textTransform: 'uppercase',
-        letterSpacing: '0.06em',
-        color: r.fg,
-        background: r.bg,
-        border: `1px solid ${r.bd}`,
-        borderRadius: 5,
-        ...style,
-      }}
-    >
-      {tier === CapabilityRiskTier.Critical && criticalIcon}
-      {r.label}
-    </span>
-  );
-}

package/src/session-kit/primitives/ScopeDot.tsx

@@ -1,47 +0,0 @@
-/**
- * Biome provenance dot — a tiny colour-coded circle keyed on
- * `BiomeScope` (system / platform / community).
- */
-import { BiomeScope } from '../lib/enums';
-
-import type { CSSProperties, ReactElement } from 'react';
-
-
-interface ScopeStyle {
-  readonly color: string;
-  readonly label: string;
-}
-
-const SCOPE: Record<BiomeScope, ScopeStyle> = {
-  [BiomeScope.System]: { color: 'hsl(var(--ink-4))', label: 'System' },
-  [BiomeScope.Platform]: { color: 'hsl(var(--primary))', label: 'Platform' },
-  [BiomeScope.Community]: { color: 'hsl(var(--p-people))', label: 'Community' },
-};
-
-export interface ScopeDotProps {
-  readonly scope: BiomeScope;
-  readonly size?: number;
-  readonly style?: CSSProperties;
-}
-
-export function ScopeDot({
-  scope,
-  size = 7,
-  style,
-}: ScopeDotProps): ReactElement {
-  const s = SCOPE[scope];
-  return (
-    <span
-      title={s.label}
-      style={{
-        width: size,
-        height: size,
-        borderRadius: '50%',
-        background: s.color,
-        flexShrink: 0,
-        display: 'inline-block',
-        ...style,
-      }}
-    />
-  );
-}

package/src/session-kit/primitives/Segmented.tsx

@@ -1,71 +0,0 @@
-/**
- * Small segmented control. Generic over the option value type so a
- * caller can drive it with a closed enum directly.
- */
-import type { CSSProperties, ReactElement, ReactNode } from 'react';
-
-export interface SegmentedOption<V extends string> {
-  readonly value: V;
-  readonly label: ReactNode;
-  /** Optional leading icon node (host-supplied). */
-  readonly icon?: ReactNode;
-}
-
-export type SegmentedSize = 'sm' | 'md';
-
-export interface SegmentedProps<V extends string> {
-  readonly options: ReadonlyArray<SegmentedOption<V>>;
-  readonly value: V;
-  readonly onChange: (value: V) => void;
-  readonly size?: SegmentedSize;
-  readonly style?: CSSProperties;
-}
-
-export function Segmented<V extends string>({
-  options,
-  value,
-  onChange,
-  size = 'sm',
-  style,
-}: SegmentedProps<V>): ReactElement {
-  return (
-    <div
-      style={{
-        display: 'inline-flex',
-        padding: 2,
-        gap: 2,
-        background: 'hsl(var(--paper-sunk))',
-        border: '1px solid hsl(var(--rule))',
-        borderRadius: 8,
-        ...style,
-      }}
-    >
-      {options.map((option) => {
-        const on = option.value === value;
-        return (
-          <button
-            key={option.value}
-            type="button"
-            onClick={() => onChange(option.value)}
-            style={{
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: 5,
-              padding: size === 'sm' ? '4px 10px' : '6px 12px',
-              fontSize: size === 'sm' ? 12 : 13,
-              fontWeight: on ? 600 : 450,
-              borderRadius: 6,
-              color: on ? 'hsl(var(--ink))' : 'hsl(var(--ink-3))',
-              background: on ? 'hsl(var(--paper-elev))' : 'transparent',
-              boxShadow: on ? 'var(--shadow-2, var(--shadow-1))' : 'none',
-              transition: 'background 140ms ease, color 140ms ease, box-shadow 140ms ease',
-            }}
-          >
-            {option.icon}
-            {option.label}
-          </button>
-        );
-      })}
-    </div>
-  );
-}

package/src/ui/branding/app-branding-context.ts

@@ -1,20 +0,0 @@
-import * as React from 'react';
-
-export interface AppBrandingContextValue {
-  readonly displayName: string;
-  readonly logoUrl?: string;
-  readonly primaryColor?: string;
-}
-
-export const AppBrandingContext =
-  React.createContext<AppBrandingContextValue | null>(null);
-
-export function useAppBranding(): AppBrandingContextValue {
-  const ctx = React.useContext(AppBrandingContext);
-  if (ctx === null) {
-    throw new Error(
-      'useAppBranding must be used within an <AppBrandingProvider>.',
-    );
-  }
-  return ctx;
-}

package/src/ui/branding/app-branding-provider.tsx

@@ -1,123 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// AppBrandingProvider — the runtime branding applier
-//
-// Takes a kernel `BrandingConfig` (plus an optional per-sub-tenant override)
-// and APPLIES it at runtime:
-//
-//   • writes `primaryColor` → `--app-primary-color` and every `cssTokens`
-//     entry → `--<key>` as CSS custom properties on its OWN wrapper element,
-//     so they cascade ONLY to the app subtree — never onto
-//     `document.documentElement`, so an app's branding cannot leak into the
-//     host chrome;
-//   • exposes `displayName` / `logoUrl` / `primaryColor` to children through
-//     context (`useAppBranding`) for a branded header to render.
-//
-// Every value crosses `sanitize.ts` first: an unsafe CSS value or a
-// non-`http(s)` logo URL is dropped, never written raw.
-//
-// This is the reusable half of Wave 8.4 — a biome imports it from
-// `@xemahq/ui-kernel/ui`, like `useIsMobile` / `Sheet`.
-// ═══════════════════════════════════════════════════════════════════════════
-import * as React from 'react';
-
-import { cn } from '../cn';
-import {
-  AppBrandingContext,
-  type AppBrandingContextValue,
-} from './app-branding-context';
-import {
-  sanitizeCssCustomPropertyName,
-  sanitizeCssValue,
-  sanitizeLogoUrl,
-} from './sanitize';
-
-import type { BrandingConfig } from '@xemahq/kernel-contracts/app-platform';
-
-/** CSS custom property carrying the app's resolved primary brand color. */
-export const APP_PRIMARY_COLOR_VAR = '--app-primary-color';
-
-export interface AppBrandingProviderProps {
-  /** The app's base branding (from the App definition / release). */
-  readonly branding: BrandingConfig;
-  /**
-   * Per-sub-tenant override, resolved from `AppRoleBinding.tenantId`. Each
-   * present field shadows the base; absent fields fall through to `branding`.
-   * Optional — apps with no sub-tenant branding pass nothing.
-   */
-  readonly tenantBranding?: Partial<BrandingConfig>;
-  /** Extra classes for the wrapper element. */
-  readonly className?: string;
-  readonly children: React.ReactNode;
-}
-
-/**
- * Merge base branding with an optional per-sub-tenant override (override wins
- * per field), then sanitize every applied value.
- */
-function resolveBranding(
-  branding: BrandingConfig,
-  tenantBranding: Partial<BrandingConfig> | undefined,
-): {
-  readonly context: AppBrandingContextValue;
-  readonly cssVars: Record<string, string>;
-} {
-  const displayName = tenantBranding?.displayName ?? branding.displayName;
-  const rawPrimary = tenantBranding?.primaryColor ?? branding.primaryColor;
-  const rawLogo = tenantBranding?.logoUrl ?? branding.logoUrl;
-  const cssTokens = { ...branding.cssTokens, ...tenantBranding?.cssTokens };
-
-  const primaryColor =
-    rawPrimary !== undefined
-      ? (sanitizeCssValue(rawPrimary) ?? undefined)
-      : undefined;
-  const logoUrl = sanitizeLogoUrl(rawLogo);
-
-  const cssVars: Record<string, string> = {};
-  if (primaryColor !== undefined) {
-    cssVars[APP_PRIMARY_COLOR_VAR] = primaryColor;
-  }
-  for (const [rawKey, rawValue] of Object.entries(cssTokens)) {
-    const name = sanitizeCssCustomPropertyName(rawKey);
-    const value = sanitizeCssValue(rawValue);
-    if (name !== null && value !== null) {
-      cssVars[name] = value;
-    }
-  }
-
-  return {
-    context: { displayName, logoUrl, primaryColor },
-    cssVars,
-  };
-}
-
-/**
- * Scopes an app's branding to its subtree. Renders a wrapper element carrying
- * the CSS custom properties inline, so they cascade to the app content and
- * nowhere else. On unmount the element (and its properties) simply disappear —
- * no cleanup, no global mutation.
- */
-export function AppBrandingProvider({
-  branding,
-  tenantBranding,
-  className,
-  children,
-}: AppBrandingProviderProps): React.ReactElement {
-  const { context, cssVars } = React.useMemo(
-    () => resolveBranding(branding, tenantBranding),
-    [branding, tenantBranding],
-  );
-
-  return (
-    <AppBrandingContext.Provider value={context}>
-      <div
-        data-app-branding=""
-        className={cn(className)}
-        // Custom properties are not part of `React.CSSProperties`; the cast is
-        // the standard way to set `--*` vars inline.
-        style={cssVars}
-      >
-        {children}
-      </div>
-    </AppBrandingContext.Provider>
-  );
-}

package/src/ui/branding/sanitize.ts

@@ -1,89 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// Branding DOM-boundary sanitizers
-//
-// A `BrandingConfig` is validated server-side (hex/rgb(a) `primaryColor`, a
-// URL `logoUrl`), but the runtime applier writes those values into the live
-// DOM — a CSS custom-property value and an `<img src>`. This module is the
-// fail-closed boundary: a value that could break out of the property it is
-// written into, or a URL scheme that could execute, is DROPPED (returns
-// `null` / `undefined`), never written raw. Pure functions, no React — unit
-// tested directly.
-// ═══════════════════════════════════════════════════════════════════════════
-
-/**
- * Characters that could terminate a CSS declaration/value and inject a new
- * declaration or rule (`;`, `{`, `}`), close a surrounding context (`<`, `>`),
- * escape (`\`), or open/close a CSS comment. React writes custom properties
- * through the CSSOM, which already treats the string as a single value — this
- * is defence in depth so a crafted value is refused at the seam.
- */
-const CSS_VALUE_UNSAFE = /[;{}<>\\]|\/\*|\*\//;
-
-/**
- * A CSS custom-property name (without the leading `--`): a CSS identifier. A
- * `cssTokens` key becomes `--<key>`, so a key with breakout characters would be
- * a foothold; anything that is not a plain ident is refused.
- */
-const CSS_CUSTOM_PROPERTY_NAME = /^[a-zA-Z_][a-zA-Z0-9_-]*$/;
-
-/** True when the string contains any ASCII control character (0x00–0x1f, 0x7f). */
-function hasControlChar(value: string): boolean {
-  for (let i = 0; i < value.length; i += 1) {
-    const code = value.charCodeAt(i);
-    if (code < 0x20 || code === 0x7f) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Sanitize a value destined for a CSS custom property (`--app-primary-color`
- * or a `cssTokens` value). Returns the trimmed value, or `null` to DROP it.
- */
-export function sanitizeCssValue(raw: string): string | null {
-  const value = raw.trim();
-  if (value.length === 0) {
-    return null;
-  }
-  if (CSS_VALUE_UNSAFE.test(value)) {
-    return null;
-  }
-  if (hasControlChar(value)) {
-    return null;
-  }
-  return value;
-}
-
-/**
- * Sanitize a `cssTokens` KEY into a `--<name>` custom-property name. Returns
- * the full property name (`--<name>`), or `null` to DROP the token.
- */
-export function sanitizeCssCustomPropertyName(rawKey: string): string | null {
-  const name = rawKey.trim();
-  if (!CSS_CUSTOM_PROPERTY_NAME.test(name)) {
-    return null;
-  }
-  return `--${name}`;
-}
-
-/**
- * Sanitize a logo URL destined for an `<img src>`. Only absolute `http(s)`
- * URLs pass; a `javascript:`, `data:`, or otherwise-schemed / unparseable value
- * is refused (returns `undefined`) so it never reaches `src`.
- */
-export function sanitizeLogoUrl(raw: string | undefined): string | undefined {
-  if (raw === undefined) {
-    return undefined;
-  }
-  let parsed: URL;
-  try {
-    parsed = new URL(raw);
-  } catch {
-    return undefined;
-  }
-  if (parsed.protocol !== 'http:' && parsed.protocol !== 'https:') {
-    return undefined;
-  }
-  return parsed.href;
-}

package/src/ui/breakpoints.ts

@@ -1,14 +0,0 @@
-/**
- * Responsive breakpoint token — the single source of truth shared by the
- * JS side (`useIsMobile`) and Tailwind's `md` utility.
- *
- * Tailwind's default `md` breakpoint is `min-width: 768px`. Anything narrower
- * than that is "mobile". Binding the JS constant to that exact value is what
- * lets a component decide table-vs-cards in JS and stay in lockstep with the
- * `md:` classes the same component (or its siblings) use — there is exactly
- * ONE breakpoint system, not two.
- *
- * If the Tailwind `md` screen is ever re-tuned, change it HERE and in the
- * Tailwind theme in the same commit — they are two faces of one token.
- */
-export const MOBILE_BREAKPOINT = 768;

package/src/ui/capture/document-preview.tsx

@@ -1,166 +0,0 @@
-// ═══════════════════════════════════════════════════════════════════════════
-// <DocumentPreview> — read-only "final document" view for the review step
-//
-// Renders a structured record as the document it will become — grouped by
-// section, one labelled row per field, nested objects/lists expanded inline.
-// Presentational + theme-aware (semantic tokens, light/dark) + responsive.
-// Feed it the SAME schema you gave `<SchemaForm>` so the review mirrors input.
-// ═══════════════════════════════════════════════════════════════════════════
-import { type ReactNode } from 'react';
-
-import { cn } from '../cn';
-import {
-  CaptureFieldType,
-  type CaptureFieldSpec,
-  type CaptureSchema,
-  type CaptureSection,
-  type CaptureValues,
-  toSections,
-} from './field-spec';
-import { formatScalar } from './value-format';
-
-export interface DocumentPreviewProps {
-  readonly fields?: readonly CaptureFieldSpec[];
-  readonly sections?: readonly CaptureSection[];
-  readonly schema?: CaptureSchema;
-  readonly values: CaptureValues;
-  readonly title?: string;
-  /** Text shown for an unset field (default "—"). */
-  readonly emptyText?: string;
-  readonly className?: string;
-}
-
-/**
- * @example
- * <DocumentPreview title="Review" sections={sections} values={values} />
- */
-export function DocumentPreview({
-  fields,
-  sections,
-  schema,
-  values,
-  title,
-  emptyText = '—',
-  className,
-}: DocumentPreviewProps) {
-  const resolved = toSections(sections ?? (fields ? fields : schema) ?? []);
-  return (
-    <article
-      className={cn(
-        'rounded-xl border border-border bg-card p-5 text-card-foreground shadow-sm sm:p-6',
-        className,
-      )}
-    >
-      {title ? (
-        <h2 className="mb-4 text-title font-semibold tracking-tight text-ink">
-          {title}
-        </h2>
-      ) : null}
-      <div className="space-y-6">
-        {resolved.map((section) => (
-          <section key={section.key}>
-            {section.title ? (
-              <h3 className="mb-2 border-b border-rule pb-1 text-caption font-semibold uppercase tracking-wider text-ink-3">
-                {section.title}
-              </h3>
-            ) : null}
-            <dl className="grid grid-cols-1 gap-x-6 gap-y-3 sm:grid-cols-[minmax(8rem,12rem)_1fr]">
-              {section.fields.map((field) => (
-                <FieldRow
-                  key={field.key}
-                  field={field}
-                  value={values[field.key]}
-                  emptyText={emptyText}
-                />
-              ))}
-            </dl>
-          </section>
-        ))}
-      </div>
-    </article>
-  );
-}
-
-function FieldRow({
-  field,
-  value,
-  emptyText,
-}: {
-  field: CaptureFieldSpec;
-  value: unknown;
-  emptyText: string;
-}) {
-  return (
-    <>
-      <dt className="text-body-1 font-medium text-ink-3 sm:text-right">
-        {field.label}
-      </dt>
-      <dd className="min-w-0 text-body-1 text-ink">
-        {renderValue(field, value, emptyText)}
-      </dd>
-    </>
-  );
-}
-
-function renderValue(
-  field: CaptureFieldSpec,
-  value: unknown,
-  emptyText: string,
-): ReactNode {
-  if (field.type === CaptureFieldType.Object) {
-    const record = (
-      value && typeof value === 'object' && !Array.isArray(value) ? value : null
-    ) as CaptureValues | null;
-    if (!record) {
-      return <span className="text-ink-3">{emptyText}</span>;
-    }
-    return (
-      <dl className="space-y-1 rounded-md border border-rule bg-paper-elev/40 p-2">
-        {(field.fields ?? []).map((child) => (
-          <div key={child.key} className="flex flex-wrap gap-2">
-            <dt className="text-caption font-medium text-ink-3">
-              {child.label}:
-            </dt>
-            <dd className="text-caption text-ink">
-              {renderValue(child, record[child.key], emptyText)}
-            </dd>
-          </div>
-        ))}
-      </dl>
-    );
-  }
-  if (field.type === CaptureFieldType.List) {
-    const items = (Array.isArray(value) ? value : []) as CaptureValues[];
-    if (items.length === 0) {
-      return <span className="text-ink-3">{emptyText}</span>;
-    }
-    return (
-      <ol className="space-y-2">
-        {items.map((item, index) => (
-          <li
-            key={index}
-            className="rounded-md border border-rule bg-paper-elev/40 p-2"
-          >
-            <p className="mb-1 text-caption font-medium text-ink-3">
-              {field.label} #{index + 1}
-            </p>
-            <dl className="space-y-1">
-              {(field.fields ?? []).map((child) => (
-                <div key={child.key} className="flex flex-wrap gap-2">
-                  <dt className="text-caption font-medium text-ink-3">
-                    {child.label}:
-                  </dt>
-                  <dd className="text-caption text-ink">
-                    {renderValue(child, item[child.key], emptyText)}
-                  </dd>
-                </div>
-              ))}
-            </dl>
-          </li>
-        ))}
-      </ol>
-    );
-  }
-  const text = formatScalar(field, value, emptyText);
-  return <span className={cn(text === emptyText && 'text-ink-3')}>{text}</span>;
-}