@xemahq/ui-kernel 0.10.0 → 0.11.0

package/src/registry/lib/session-selectors.ts

@@ -33,28 +33,33 @@ import {
 } from '../../index';
 
 function sortByWeight<
-  T extends { readonly id: string; readonly weight?: number; readonly order?: number },
+  T extends {
+    readonly id: string;
+    readonly weight?: number;
+    readonly order?: number;
+  },
 >(items: readonly T[]): readonly T[] {
   return [...items].sort((a, b) => {
     const aw = a.weight ?? a.order ?? 100;
     const bw = b.weight ?? b.order ?? 100;
-    if (aw !== bw) return aw - bw;
+    if (aw !== bw) {
+      return aw - bw;
+    }
     return a.id.localeCompare(b.id);
   });
 }
 
-type PredicateOf<T> = T extends { readonly appliesTo?: (...args: infer A) => boolean }
+type PredicateOf<T> = T extends {
+  readonly appliesTo?: (...args: infer A) => boolean;
+}
   ? (...args: A) => boolean
   : never;
 
-function applies<T extends { readonly appliesTo?: (...args: never[]) => boolean }>(
-  item: T,
-  args: Parameters<PredicateOf<T>>,
-): boolean {
+function applies<
+  T extends { readonly appliesTo?: (...args: never[]) => boolean },
+>(item: T, args: Parameters<PredicateOf<T>>): boolean {
   const predicate = item.appliesTo as PredicateOf<T> | undefined;
-  return predicate === null || predicate === undefined
-    ? true
-    : predicate(...args);
+  return predicate === undefined ? true : predicate(...args);
 }
 
 // ── Slash commands ────────────────────────────────────────────────────
@@ -67,7 +72,9 @@ export function useSessionSlashCommands(
     const out: SlashCommandContribution[] = [];
     for (const biome of biomeRegistry.list()) {
       for (const cmd of biome.session?.slashCommands ?? []) {
-        if (!applies(cmd, [session])) continue;
+        if (!applies(cmd, [session])) {
+          continue;
+        }
         out.push(cmd);
       }
     }
@@ -86,7 +93,9 @@ export function useSessionDrawerTabs(
     const out: SecondaryDrawerTabContribution[] = [];
     for (const biome of biomeRegistry.list()) {
       for (const tab of biome.session?.secondaryDrawerTabs ?? []) {
-        if (!applies(tab, [session])) continue;
+        if (!applies(tab, [session])) {
+          continue;
+        }
         out.push(tab);
       }
     }
@@ -116,12 +125,18 @@ export function useActivityRenderer(
     const candidates: ActivityRendererContribution[] = [];
     for (const biome of biomeRegistry.list()) {
       for (const r of biome.session?.activityRenderers ?? []) {
-        if (r.entryKind !== event.kind) continue;
-        if (!applies(r, [{ session, event }])) continue;
+        if (r.entryKind !== event.kind) {
+          continue;
+        }
+        if (!applies(r, [{ session, event }])) {
+          continue;
+        }
         candidates.push(r);
       }
     }
-    if (candidates.length === 0) return null;
+    if (candidates.length === 0) {
+      return null;
+    }
     return sortByWeight(candidates)[0] ?? null;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [revision, session, event]);
@@ -132,24 +147,38 @@ export function useActivityRenderer(
 type ToolMatch = 'exact' | 'glob' | 'none';
 
 function matchToolName(toolName: string, eventName: string): ToolMatch {
-  if (toolName === eventName) return 'exact';
-  if (toolName.endsWith('.*') && eventName.startsWith(toolName.slice(0, -1))) return 'glob';
+  if (toolName === eventName) {
+    return 'exact';
+  }
+  if (toolName.endsWith('.*') && eventName.startsWith(toolName.slice(0, -1))) {
+    return 'glob';
+  }
   return 'none';
 }
 
 function collectToolCallCandidates(
   session: SessionContext,
   event: SessionToolCallEvent,
-): { exact: ToolCallRendererContribution[]; glob: ToolCallRendererContribution[] } {
+): {
+  exact: ToolCallRendererContribution[];
+  glob: ToolCallRendererContribution[];
+} {
   const exact: ToolCallRendererContribution[] = [];
   const glob: ToolCallRendererContribution[] = [];
   for (const biome of biomeRegistry.list()) {
     for (const r of biome.session?.toolCallRenderers ?? []) {
       const match = matchToolName(r.toolName, event.name);
-      if (match === 'none') continue;
-      if (!applies(r, [{ session, event }])) continue;
-      if (match === 'exact') exact.push(r);
-      else glob.push(r);
+      if (match === 'none') {
+        continue;
+      }
+      if (!applies(r, [{ session, event }])) {
+        continue;
+      }
+      if (match === 'exact') {
+        exact.push(r);
+      } else {
+        glob.push(r);
+      }
     }
   }
   return { exact, glob };
@@ -168,8 +197,12 @@ export function useToolCallRenderer(
   const revision = useBiomeRegistryRevision();
   return useMemo(() => {
     const { exact, glob } = collectToolCallCandidates(session, event);
-    if (exact.length > 0) return sortByWeight(exact)[0] ?? null;
-    if (glob.length > 0) return sortByWeight(glob)[0] ?? null;
+    if (exact.length > 0) {
+      return sortByWeight(exact)[0] ?? null;
+    }
+    if (glob.length > 0) {
+      return sortByWeight(glob)[0] ?? null;
+    }
     return null;
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [revision, session, event]);
@@ -185,7 +218,9 @@ export function useSessionMutationBars(
     const out: MutationBarContribution[] = [];
     for (const biome of biomeRegistry.list()) {
       for (const bar of biome.session?.mutationBars ?? []) {
-        if (!applies(bar, [session])) continue;
+        if (!applies(bar, [session])) {
+          continue;
+        }
         out.push(bar);
       }
     }
@@ -204,7 +239,9 @@ export function useSessionHeaderChips(
     const out: HeaderChipContribution[] = [];
     for (const biome of biomeRegistry.list()) {
       for (const chip of biome.session?.headerChips ?? []) {
-        if (!applies(chip, [session])) continue;
+        if (!applies(chip, [session])) {
+          continue;
+        }
         out.push(chip);
       }
     }
@@ -223,7 +260,9 @@ export function useSessionAttachmentClasses(
     const out: AttachmentClassContribution[] = [];
     for (const biome of biomeRegistry.list()) {
       for (const cls of biome.session?.attachmentClasses ?? []) {
-        if (!applies(cls, [session])) continue;
+        if (!applies(cls, [session])) {
+          continue;
+        }
         out.push(cls);
       }
     }

package/src/session/comments/CommentRail.tsx

@@ -1,7 +1,7 @@
-import type { ReactNode } from 'react';
-
 import { cn } from '../lib/cn';
 
+import type { ReactNode } from 'react';
+
 /**
  * Generic, data-layer-agnostic comment shape. Host surfaces map their
  * own DTOs (KB `DocumentCommentResponseDto`, workflow `InquiryReply`,

package/src/session/shell/SessionWorkspaceShell.tsx

@@ -1,7 +1,7 @@
-import type { CSSProperties, ReactNode, MouseEvent, RefObject } from 'react';
-
 import { cn } from '../lib/cn';
 
+import type { CSSProperties, ReactNode, MouseEvent, RefObject } from 'react';
+
 interface SessionWorkspaceShellProps {
   /**
    * Container ref from `useHorizontalSplit`. The shell forwards mouse

package/src/session-kit/approvals/ApprovalCard.tsx

@@ -68,7 +68,9 @@ export function ApprovalCard({
   const approveLabel = resolveApproveLabel(request, quorum, explicit);
 
   function resolve(d: ApprovalDecision): void {
-    if (decision === undefined) setLocalDecision(d);
+    if (decision === undefined) {
+      setLocalDecision(d);
+    }
     onResolve(d, request);
   }
 
@@ -209,7 +211,10 @@ export function ApprovalCard({
 
           {/* SCOPED biome body */}
           <div
-            style={{ padding: '10px 14px', background: 'hsl(var(--paper) / 0.5)' }}
+            style={{
+              padding: '10px 14px',
+              background: 'hsl(var(--paper) / 0.5)',
+            }}
           >
             <div
               style={{

package/src/session-kit/approvals/ApprovalsCenter.tsx

@@ -52,8 +52,11 @@ export function ApprovalsCenter({
   const toggle = useCallback((id: string) => {
     setSelected((prev) => {
       const next = new Set(prev);
-      if (next.has(id)) next.delete(id);
-      else next.add(id);
+      if (next.has(id)) {
+        next.delete(id);
+      } else {
+        next.add(id);
+      }
       return next;
     });
   }, []);
@@ -71,7 +74,9 @@ export function ApprovalsCenter({
   const approveSelected = useCallback(() => {
     for (const id of selected) {
       const it = items.find((x) => x.id === id);
-      if (it) onResolve(ApprovalDecision.Approved, it);
+      if (it) {
+        onResolve(ApprovalDecision.Approved, it);
+      }
     }
     setSelected(new Set());
   }, [selected, items, onResolve]);
@@ -302,7 +307,11 @@ function ApprovalRow({
         }}
       >
         {onOpen && (
-          <ApprovalButton variant="ghost" size="xs" onClick={() => onOpen(item)}>
+          <ApprovalButton
+            variant="ghost"
+            size="xs"
+            onClick={() => onOpen(item)}
+          >
             Open session
           </ApprovalButton>
         )}

package/src/session-kit/combobox/Combobox.tsx

@@ -108,7 +108,9 @@ const POP_STYLE: CSSProperties = {
   overflow: 'hidden',
 };
 
-export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElement {
+export function Combobox<V extends string>(
+  props: ComboboxProps<V>,
+): ReactElement {
   const {
     items,
     trigger,
@@ -134,12 +136,16 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
   // Move focus to the search field when the dropdown opens (replaces the
   // a11y-discouraged `autoFocus` attribute).
   useEffect(() => {
-    if (open && showSearch) searchRef.current?.focus();
+    if (open && showSearch) {
+      searchRef.current?.focus();
+    }
   }, [open, showSearch]);
 
   const filtered = query
     ? items.filter((it) =>
-        `${it.label} ${it.hint ?? ''}`.toLowerCase().includes(query.toLowerCase()),
+        `${it.label} ${it.hint ?? ''}`
+          .toLowerCase()
+          .includes(query.toLowerCase()),
       )
     : items;
 
@@ -181,7 +187,9 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
               }}
             >
               {icons?.search && (
-                <span style={{ display: 'inline-flex', color: 'hsl(var(--ink-3))' }}>
+                <span
+                  style={{ display: 'inline-flex', color: 'hsl(var(--ink-3))' }}
+                >
                   {icons.search}
                 </span>
               )}
@@ -200,7 +208,10 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
                 }}
               />
               {items.length > 0 && (
-                <span className="mono" style={{ fontSize: 10, color: 'hsl(var(--ink-4))' }}>
+                <span
+                  className="mono"
+                  style={{ fontSize: 10, color: 'hsl(var(--ink-4))' }}
+                >
                   {filtered.length}/{items.length}
                 </span>
               )}
@@ -223,12 +234,15 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
                     padding: '7px 9px',
                     borderRadius: 7,
                     textAlign: 'left',
-                    background: singleSelected ? 'hsl(var(--accent) / 0.6)' : 'transparent',
+                    background: singleSelected
+                      ? 'hsl(var(--accent) / 0.6)'
+                      : 'transparent',
                     transition: 'background 140ms ease',
                   }}
                   onMouseEnter={(e) => {
                     if (!singleSelected) {
-                      e.currentTarget.style.background = 'hsl(var(--paper-sunk))';
+                      e.currentTarget.style.background =
+                        'hsl(var(--paper-sunk))';
                     }
                   }}
                   onMouseLeave={(e) => {
@@ -238,7 +252,13 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
                   }}
                 >
                   {it.icon && (
-                    <span style={{ display: 'inline-flex', color: 'hsl(var(--ink-3))', flexShrink: 0 }}>
+                    <span
+                      style={{
+                        display: 'inline-flex',
+                        color: 'hsl(var(--ink-3))',
+                        flexShrink: 0,
+                      }}
+                    >
                       {it.icon}
                     </span>
                   )}
@@ -272,7 +292,10 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
                     )}
                   </span>
                   {it.kind && (
-                    <span className="cap" style={{ fontSize: 8.5, flexShrink: 0 }}>
+                    <span
+                      className="cap"
+                      style={{ fontSize: 8.5, flexShrink: 0 }}
+                    >
                       {it.kind}
                     </span>
                   )}
@@ -294,7 +317,13 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
                     </span>
                   ) : (
                     on && (
-                      <span style={{ display: 'inline-flex', color: 'hsl(var(--primary))', flexShrink: 0 }}>
+                      <span
+                        style={{
+                          display: 'inline-flex',
+                          color: 'hsl(var(--primary))',
+                          flexShrink: 0,
+                        }}
+                      >
                         {icons?.check}
                       </span>
                     )
@@ -316,7 +345,9 @@ export function Combobox<V extends string>(props: ComboboxProps<V>): ReactElemen
             )}
           </div>
           {footer && (
-            <div style={{ borderTop: '1px solid hsl(var(--rule))', padding: 6 }}>
+            <div
+              style={{ borderTop: '1px solid hsl(var(--rule))', padding: 6 }}
+            >
               {footer}
             </div>
           )}

package/src/session-kit/display/MD.tsx

@@ -33,10 +33,15 @@ function renderInline(text: string): ReactNode[] {
   // Split on bold or inline-code tokens, keeping the delimiters.
   const parts = text.split(/(\*\*[^*]+\*\*|`[^`]+`)/g);
   parts.forEach((part, index) => {
-    if (!part) return;
+    if (!part) {
+      return;
+    }
     if (part.startsWith('**') && part.endsWith('**')) {
       nodes.push(
-        <strong key={index} style={{ fontWeight: 600, color: 'hsl(var(--ink))' }}>
+        <strong
+          key={index}
+          style={{ fontWeight: 600, color: 'hsl(var(--ink))' }}
+        >
           {part.slice(2, -2)}
         </strong>,
       );
@@ -53,8 +58,12 @@ function renderInline(text: string): ReactNode[] {
     // Plain text — preserve hard line breaks.
     const lines = part.split('\n');
     lines.forEach((line, lineIndex) => {
-      if (lineIndex > 0) nodes.push(<br key={`${index}-br-${lineIndex}`} />);
-      if (line) nodes.push(<Fragment key={`${index}-t-${lineIndex}`}>{line}</Fragment>);
+      if (lineIndex > 0) {
+        nodes.push(<br key={`${index}-br-${lineIndex}`} />);
+      }
+      if (line) {
+        nodes.push(<Fragment key={`${index}-t-${lineIndex}`}>{line}</Fragment>);
+      }
     });
   });
   return nodes;
@@ -65,7 +74,7 @@ export interface MDProps {
 }
 
 export function MD({ children }: MDProps): ReactElement {
-  const text = String(children ?? '');
+  const text = children;
   const blocks = text.split(/\n\n+/);
   return (
     <div style={{ display: 'flex', flexDirection: 'column', gap: 9 }}>

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

@@ -20,20 +20,19 @@
 // ═══════════════════════════════════════════════════════════════════════════
 import * as React from 'react';
 
-import type { BrandingConfig } from '@xemahq/kernel-contracts/app-platform';
-
 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';
 

package/src/ui/branding/sanitize.ts

@@ -30,7 +30,9 @@ const CSS_CUSTOM_PROPERTY_NAME = /^[a-zA-Z_][a-zA-Z0-9_-]*$/;
 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;
+    if (code < 0x20 || code === 0x7f) {
+      return true;
+    }
   }
   return false;
 }
@@ -41,9 +43,15 @@ function hasControlChar(value: string): boolean {
  */
 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;
+  if (value.length === 0) {
+    return null;
+  }
+  if (CSS_VALUE_UNSAFE.test(value)) {
+    return null;
+  }
+  if (hasControlChar(value)) {
+    return null;
+  }
   return value;
 }
 
@@ -53,7 +61,9 @@ export function sanitizeCssValue(raw: string): string | null {
  */
 export function sanitizeCssCustomPropertyName(rawKey: string): string | null {
   const name = rawKey.trim();
-  if (!CSS_CUSTOM_PROPERTY_NAME.test(name)) return null;
+  if (!CSS_CUSTOM_PROPERTY_NAME.test(name)) {
+    return null;
+  }
   return `--${name}`;
 }
 
@@ -63,7 +73,9 @@ export function sanitizeCssCustomPropertyName(rawKey: string): string | null {
  * is refused (returns `undefined`) so it never reaches `src`.
  */
 export function sanitizeLogoUrl(raw: string | undefined): string | undefined {
-  if (raw === undefined) return undefined;
+  if (raw === undefined) {
+    return undefined;
+  }
   let parsed: URL;
   try {
     parsed = new URL(raw);

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

@@ -9,8 +9,14 @@
 import { type ReactNode } from 'react';
 
 import { cn } from '../cn';
-
-import { CaptureFieldType, type CaptureFieldSpec, type CaptureSchema, type CaptureSection, type CaptureValues, toSections } from './field-spec';
+import {
+  CaptureFieldType,
+  type CaptureFieldSpec,
+  type CaptureSchema,
+  type CaptureSection,
+  type CaptureValues,
+  toSections,
+} from './field-spec';
 import { formatScalar } from './value-format';
 
 export interface DocumentPreviewProps {
@@ -28,18 +34,44 @@ export interface DocumentPreviewProps {
  * @example
  * <DocumentPreview title="Review" sections={sections} values={values} />
  */
-export function DocumentPreview({ fields, sections, schema, values, title, emptyText = '—', className }: DocumentPreviewProps) {
+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}
+    <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}
+            {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} />
+                <FieldRow
+                  key={field.key}
+                  field={field}
+                  value={values[field.key]}
+                  emptyText={emptyText}
+                />
               ))}
             </dl>
           </section>
@@ -49,25 +81,49 @@ export function DocumentPreview({ fields, sections, schema, values, title, empty
   );
 }
 
-function FieldRow({ field, value, emptyText }: { field: CaptureFieldSpec; value: unknown; emptyText: string }) {
+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>
+      <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 {
+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>;
+    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>
+            <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>
@@ -75,19 +131,28 @@ function renderValue(field: CaptureFieldSpec, value: unknown, emptyText: string)
   }
   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>;
+    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">
+          <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>
+                  <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>