@xemahq/ui-kernel 0.9.1 → 0.10.0

package/src/ui/index.ts

@@ -24,7 +24,9 @@ export { useIsMobile } from './hooks/use-is-mobile';
 
 // ── shadcn primitives ──
 export * from './primitives/button';
+export * from './primitives/button-variants';
 export * from './primitives/badge';
+export * from './primitives/badge-variants';
 export * from './primitives/input';
 export * from './primitives/label';
 export * from './primitives/select';
@@ -49,6 +51,7 @@ export * from './primitives/overflow-tabs';
 export * from './primitives/tag-multi-select';
 export * from './primitives/sheet';
 export * from './primitives/form-stepper';
+export * from './primitives/form-stepper.types';
 export * from './primitives/async-combobox';
 export {
   PreviewDeviceFrame,
@@ -65,11 +68,13 @@ export * from './charts';
 // ── runtime branding applier (Wave 8.4) ──
 export {
   AppBrandingProvider,
-  useAppBranding,
   APP_PRIMARY_COLOR_VAR,
   type AppBrandingProviderProps,
-  type AppBrandingContextValue,
 } from './branding/app-branding-provider';
+export {
+  useAppBranding,
+  type AppBrandingContextValue,
+} from './branding/app-branding-context';
 
 // ── Xema chrome ──
 export { default as ErrorCard, type ErrorMessageFormatter } from './chrome/ErrorCard';

package/src/ui/primitives/alert-dialog.tsx

@@ -1,7 +1,7 @@
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import * as React from "react";
 
-import { buttonVariants } from './button';
+import { buttonVariants } from './button-variants';
 import { cn } from '../cn';
 
 const AlertDialog = AlertDialogPrimitive.Root;

package/src/ui/primitives/badge-variants.ts

@@ -0,0 +1,21 @@
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-body-1 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
+        outline: 'border-rule bg-paper text-ink',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);

package/src/ui/primitives/badge.tsx

@@ -1,24 +1,8 @@
-import { cva, type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from '../cn';
-
-const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-body-1 font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
-  {
-    variants: {
-      variant: {
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
-        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
-        outline: "border-rule bg-paper text-ink",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-    },
-  },
-);
+import { badgeVariants } from './badge-variants';
 
 export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
 
@@ -29,4 +13,4 @@ const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
 );
 Badge.displayName = "Badge";
 
-export { Badge, badgeVariants };
+export { Badge };

package/src/ui/primitives/button-variants.ts

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-1 font-medium ring-offset-background transition-[background-color,color,border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        default:
+          'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'text-ink-2 hover:bg-paper-elev hover:text-ink',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);

package/src/ui/primitives/button.tsx

@@ -1,34 +1,9 @@
 import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
+import type { VariantProps } from "class-variance-authority";
 import * as React from "react";
 
 import { cn } from '../cn';
-
-const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-body-1 font-medium ring-offset-background transition-[background-color,color,border-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
-        outline: "border border-input bg-background text-foreground hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
-        ghost: "text-ink-2 hover:bg-paper-elev hover:text-ink",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-10 px-4 py-2",
-        sm: "h-9 rounded-md px-3",
-        lg: "h-11 rounded-md px-8",
-        icon: "h-10 w-10",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+import { buttonVariants } from './button-variants';
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -44,4 +19,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button };

package/src/ui/primitives/form-stepper.tsx

@@ -1,22 +1,7 @@
 import { Check } from 'lucide-react';
 
-import type { ReactNode } from 'react';
-
 import { cn } from '../cn';
-
-export enum FormStepStatus {
-  PENDING = 'pending',
-  ACTIVE = 'active',
-  DONE = 'done',
-}
-
-export interface FormStep {
-  readonly key: string;
-  readonly label: string;
-  readonly hint?: string;
-  readonly status: FormStepStatus;
-  readonly children: ReactNode;
-}
+import { FormStepStatus, type FormStep } from './form-stepper.types';
 
 interface FormStepperProps {
   readonly steps: readonly FormStep[];

package/src/ui/primitives/form-stepper.types.ts

@@ -0,0 +1,15 @@
+import type { ReactNode } from 'react';
+
+export enum FormStepStatus {
+  PENDING = 'pending',
+  ACTIVE = 'active',
+  DONE = 'done',
+}
+
+export interface FormStep {
+  readonly key: string;
+  readonly label: string;
+  readonly hint?: string;
+  readonly status: FormStepStatus;
+  readonly children: ReactNode;
+}

package/src/ui/primitives/preview-device-frame.tsx

@@ -181,7 +181,7 @@ function ResponsiveViewport({
     const observer = new ResizeObserver(compute);
     observer.observe(el);
     return () => observer.disconnect();
-  }, [bezel.width, bezel.height]);
+  }, [aspectRatio, bezel.width, bezel.height]);
 
   return (
     <div

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

@@ -138,9 +138,8 @@ export function TagMultiSelect({
                   className={cn('text-body-1 gap-1 pr-1', chipClass)}
                 >
                   <span className="truncate max-w-[160px]">{opt?.label ?? val}</span>
-                  <span
-                    role="button"
-                    tabIndex={-1}
+                  <button
+                    type="button"
                     onClick={(e) => remove(val, e)}
                     onKeyDown={(e) => {
                       if (e.key === 'Enter' || e.key === ' ') {
@@ -153,7 +152,7 @@ export function TagMultiSelect({
                     aria-label={`Remove ${opt?.label ?? val}`}
                   >
                     <X className="h-4 w-4" />
-                  </span>
+                  </button>
                 </Badge>
               );
             })}

package/src/vista/form-payload.spec.ts

@@ -2,22 +2,17 @@
  * Guards `validateFormPayload` — the structural half of "the value never
  * reaches the agent".
  *
- * The validator is what makes the submit target un-aimable at the host's own
- * origin (where the BFF / chat transport lives): only an ABSOLUTE `http(s)`
- * URL is accepted, and a rejected payload draws the typed fallback card rather
- * than a form.
+ * The payload has no network authority: it carries only a base64url opaque ref,
+ * while the trusted service base URL comes from `VistaFormHost`.
  */
 import { describe, expect, it } from 'vitest';
 
-import { CaptureFieldType } from '../ui/capture/field-spec';
-
 import { validateFormPayload } from './vista-payloads';
+import { CaptureFieldType } from '../ui/capture/field-spec';
 
 const BASE = {
   ref: 'ref-1',
   purpose: 'Connect Acme so I can read your tickets.',
-  submitUrl: 'https://connector-gateway.example.test/credential-elicitations/ref-1/submit',
-  statusUrl: 'https://connector-gateway.example.test/credential-elicitations/ref-1',
   fields: [
     {
       key: 'apiKey',
@@ -27,7 +22,13 @@ const BASE = {
       isSecret: true,
       transform: 'trim',
     },
-    { key: 'baseUrl', label: 'Base URL', type: CaptureFieldType.Url, required: true, isSecret: false },
+    {
+      key: 'baseUrl',
+      label: 'Base URL',
+      type: CaptureFieldType.Url,
+      required: true,
+      isSecret: false,
+    },
   ],
 };
 
@@ -41,11 +42,17 @@ describe('validateFormPayload', () => {
     expect(payload?.fields[0]?.transform).toBe('trim');
   });
 
-  it('REJECTS a host-relative submit URL — it could only hit the app itself', () => {
-    expect(validateFormPayload({ ...BASE, submitUrl: '/credential-elicitations/ref-1/submit' })).toBeNull();
-    expect(validateFormPayload({ ...BASE, submitUrl: '//evil.example/x' })).toBeNull();
-    expect(validateFormPayload({ ...BASE, submitUrl: 'javascript:alert(1)' })).toBeNull();
-    expect(validateFormPayload({ ...BASE, statusUrl: '/credential-elicitations/ref-1' })).toBeNull();
+  it('rejects old or malicious payload-selected submit/status authorities', () => {
+    for (const target of [
+      'https://evil.example/steal',
+      'https://trusted.example@evil.example/steal',
+      '//evil.example/steal',
+      '/credential-elicitations/ref-1/submit',
+      'javascript:alert(1)',
+    ]) {
+      expect(validateFormPayload({ ...BASE, submitUrl: target })).toBeNull();
+      expect(validateFormPayload({ ...BASE, statusUrl: target })).toBeNull();
+    }
   });
 
   it('accepts an EMPTY field schema — the service is the authority, not the client', () => {
@@ -55,39 +62,78 @@ describe('validateFormPayload', () => {
   });
 
   it('rejects a malformed field spec rather than half-rendering it', () => {
-    expect(validateFormPayload({ ...BASE, fields: [{ key: 'a', label: 'A', type: 'nope' }] })).toBeNull();
-    expect(validateFormPayload({ ...BASE, fields: [{ key: 'a', label: 'A' }] })).toBeNull();
     expect(
       validateFormPayload({
         ...BASE,
-        fields: [{ key: 'a', label: 'A', type: CaptureFieldType.String, isSecret: 'yes' }],
+        fields: [{ key: 'a', label: 'A', type: 'nope' }],
+      }),
+    ).toBeNull();
+    expect(
+      validateFormPayload({ ...BASE, fields: [{ key: 'a', label: 'A' }] }),
+    ).toBeNull();
+    expect(
+      validateFormPayload({
+        ...BASE,
+        fields: [
+          {
+            key: 'a',
+            label: 'A',
+            type: CaptureFieldType.String,
+            isSecret: 'yes',
+          },
+        ],
       }),
     ).toBeNull();
     expect(validateFormPayload({ ...BASE, fields: {} })).toBeNull();
   });
 
-  it('accepts a launch (oauth2 / app_install) payload with an absolute URL', () => {
+  it('accepts a launch payload with a root-relative trusted-service path', () => {
     const payload = validateFormPayload({
       ...BASE,
       fields: [],
-      launch: { url: 'https://acme.example.test/oauth/authorize?x=1', label: 'Continue to Acme', hint: 'h' },
+      launch: {
+        path: '/oauth/authorize?x=1',
+        label: 'Continue to Acme',
+        hint: 'h',
+      },
     });
     expect(payload?.launch).toEqual({
-      url: 'https://acme.example.test/oauth/authorize?x=1',
+      path: '/oauth/authorize?x=1',
       label: 'Continue to Acme',
       hint: 'h',
     });
   });
 
-  it('rejects a launch with a relative URL or no label', () => {
-    expect(validateFormPayload({ ...BASE, launch: { url: '/authorize', label: 'Go' } })).toBeNull();
+  it('rejects launch authority/scheme confusion and malformed paths', () => {
+    for (const path of [
+      'authorize',
+      '//evil.example/authorize',
+      'https://evil.example/authorize',
+      'javascript:alert(1)',
+      '\\\\evil.example\\authorize',
+    ]) {
+      expect(
+        validateFormPayload({ ...BASE, launch: { path, label: 'Go' } }),
+      ).toBeNull();
+    }
+    expect(
+      validateFormPayload({
+        ...BASE,
+        launch: { url: 'https://evil.example/a', label: 'Go' },
+      }),
+    ).toBeNull();
     expect(
-      validateFormPayload({ ...BASE, launch: { url: 'https://acme.example.test/a', label: '' } }),
+      validateFormPayload({
+        ...BASE,
+        launch: { path: '/authorize', label: '' },
+      }),
     ).toBeNull();
   });
 
-  it('rejects a missing ref', () => {
-    expect(validateFormPayload({ ...BASE, ref: '' })).toBeNull();
+  it('rejects missing refs and path-traversal/encoding input', () => {
+    for (const ref of ['', '.', '..', '../steal', 'a/b', '%2e%2e', 'réf']) {
+      expect(validateFormPayload({ ...BASE, ref })).toBeNull();
+    }
     expect(validateFormPayload({ ...BASE, ref: undefined })).toBeNull();
   });
 });

package/src/vista/index.ts

@@ -36,9 +36,13 @@ export * from './vista-model';
 export * from './vista-payloads';
 export * from './vista-tabs-manifest';
 export * from './vista-file-source';
+export * from './vista-file-context';
 export * from './vista-form-host';
+export * from './vista-form-context';
 export * from './vista-code-renderer';
+export * from './vista-code-renderer-context';
 export * from './vista-open-context';
+export * from './vista-open-state';
 export * from './use-vista-tabs';
 export * from './VistaPanel';
 export * from './vista-tools';

package/src/vista/surfaces/FilesSurface.tsx

@@ -13,78 +13,12 @@ import { ChevronRight, Folder } from 'lucide-react';
 
 
 import { fileSurface } from '../vista-model';
-import { useVistaOpen } from '../vista-open-context';
+import { useVistaOpen } from '../vista-open-state';
+import { fileExtMeta, groupFilesByFolder } from './file-surface-utils';
 
 import type { VistaFileEntry, VistaFilesPayload } from '../vista-payloads';
 import type { ReactElement } from 'react';
 
-/** Extension → colour-coded tile metadata. */
-interface FileExtMeta {
-  readonly color: string;
-  readonly tag: string;
-}
-
-const EXT_META: Readonly<Record<string, FileExtMeta>> = {
-  ts: { color: 'hsl(var(--info))', tag: 'TS' },
-  tsx: { color: 'hsl(var(--info))', tag: 'TSX' },
-  js: { color: 'hsl(var(--warning))', tag: 'JS' },
-  jsx: { color: 'hsl(var(--warning))', tag: 'JSX' },
-  json: { color: 'hsl(var(--ink-3))', tag: 'JSON' },
-  md: { color: 'hsl(var(--p-people))', tag: 'MD' },
-  css: { color: 'hsl(var(--p-sales))', tag: 'CSS' },
-  html: { color: 'hsl(var(--p-sales))', tag: 'HTML' },
-  yaml: { color: 'hsl(var(--ink-3))', tag: 'YAML' },
-  yml: { color: 'hsl(var(--ink-3))', tag: 'YAML' },
-};
-
-/** Resolve the colour-coded tile metadata for a filename. */
-export function fileExtMeta(name: string): FileExtMeta {
-  if (/\.test\.[tj]sx?$/.test(name) || /\.spec\.[tj]sx?$/.test(name)) {
-    return { color: 'hsl(var(--success))', tag: 'TEST' };
-  }
-  const ext = name.split('.').pop() ?? '';
-  return (
-    EXT_META[ext] ?? {
-      color: 'hsl(var(--ink-4))',
-      tag: (ext || 'FILE').toUpperCase().slice(0, 4),
-    }
-  );
-}
-
-/** A group of files under one folder caption. */
-export interface VistaFileGroup {
-  /** Folder path (`''` = root). */
-  readonly dir: string;
-  readonly files: readonly VistaFileEntry[];
-}
-
-/** Order folder captions: root first, then alphabetical. */
-function compareDirs(a: string, b: string): number {
-  if (a === '') return -1;
-  if (b === '') return 1;
-  return a.localeCompare(b);
-}
-
-/** Group a flat file list by folder, root group first, paths sorted. */
-export function groupFilesByFolder(
-  files: readonly VistaFileEntry[],
-): VistaFileGroup[] {
-  const groups = new Map<string, VistaFileEntry[]>();
-  for (const file of files) {
-    const slash = file.path.lastIndexOf('/');
-    const dir = slash < 0 ? '' : file.path.slice(0, slash);
-    const bucket = groups.get(dir);
-    if (bucket) bucket.push(file);
-    else groups.set(dir, [file]);
-  }
-  return [...groups.keys()].sort(compareDirs).map((dir) => ({
-    dir,
-    files: [...(groups.get(dir) ?? [])].sort((a, b) =>
-      a.path.localeCompare(b.path),
-    ),
-  }));
-}
-
 export function FilesSurface({
   files,
 }: Readonly<VistaFilesPayload>): ReactElement {