@semiont/react-ui 0.5.26 → 0.5.28

package/src/components/layout/Header.css

@@ -75,10 +75,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-unified-header__branding-button:hover {
-  background: var(--semiont-bg-tertiary);
-}
-
 .semiont-unified-header__branding-button:focus-visible {
   outline: 2px solid var(--semiont-color-primary-500);
   outline-offset: 2px;

package/src/components/layout/LeftSidebar.css

@@ -51,10 +51,6 @@
   color: var(--semiont-text-primary);
 }
 
-[data-theme="dark"] .semiont-left-sidebar__branding-button:hover {
-  background: var(--semiont-bg-tertiary);
-}
-
 .semiont-left-sidebar__branding-button:focus-visible {
   outline: 2px solid var(--semiont-color-primary-500);
   outline-offset: 2px;

package/src/components/modals/ComposeStep.tsx

@@ -0,0 +1,218 @@
+'use client';
+
+import React, { useState } from 'react';
+import { LOCALES } from '@semiont/core';
+import { CodeMirrorRenderer } from '../CodeMirrorRenderer';
+import { WizardFooter } from './WizardFooter';
+
+/**
+ * COMPOSE-IN-MODAL P1 — the compose strategy's form, as a pure step.
+ *
+ * The from-reference slice of the compose page, lifted: name, save location,
+ * entity types, language, editor. Deliberately none of the page's
+ * upload/format/encoding machinery (the modal composes text; uploads stay on
+ * the standalone page — plan non-goal). The draft is CONTROLLED by the host
+ * (WIZARD-NAVIGATION D3), and the evidence display is the host's job (A3).
+ */
+
+export interface ComposeDraft {
+  name: string;
+  /** Bare working-tree path; the file:// prefix is applied at submit. */
+  storagePath: string;
+  content: string;
+  /** Picked types — consulted only when the reference fixed none (D6). */
+  entityTypes: string[];
+  language: string;
+}
+
+export interface ComposeParams {
+  name: string;
+  /** Full file:// URI. */
+  storagePath: string;
+  content: string;
+  entityTypes: string[];
+  language: string;
+}
+
+export interface ComposeStepProps {
+  draft: ComposeDraft;
+  onDraftChange: (patch: Partial<ComposeDraft>) => void;
+  /** Entity types fixed when the reference was created — read-only tags when
+   *  non-empty (D6): they are not this step's to change. */
+  referenceEntityTypes: string[];
+  /** Picker vocabulary when the reference fixed none. Owner-supplied, so a
+   *  failed load cannot surface as an empty vocabulary. */
+  entityTypeOptions: string[];
+  showLineNumbers: boolean;
+  hoverDelayMs: number;
+  onBack: () => void;
+  /** Create-and-link. Async: the footer pends until it settles; rejection
+   *  re-enables it (the host surfaces the error — same posture as Link). */
+  onCompose: (params: ComposeParams) => Promise<void>;
+  translations: {
+    resourceTitle: string;
+    resourceTitlePlaceholder: string;
+    saveLocation: string;
+    entityTypes: string;
+    language: string;
+    contentLabel: string;
+    back: string;
+    createAndLink: string;
+    creatingAndLinking: string;
+  };
+}
+
+export function ComposeStep({
+  draft,
+  onDraftChange,
+  referenceEntityTypes,
+  entityTypeOptions,
+  showLineNumbers,
+  hoverDelayMs,
+  onBack,
+  onCompose,
+  translations: t,
+}: ComposeStepProps) {
+  const [isCreating, setIsCreating] = useState(false);
+  const fixedTypes = referenceEntityTypes.length > 0;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!draft.name.trim() || !draft.storagePath.trim()) return;
+    setIsCreating(true);
+    try {
+      await onCompose({
+        name: draft.name,
+        storagePath: `file://${draft.storagePath}`,
+        content: draft.content,
+        entityTypes: fixedTypes ? referenceEntityTypes : draft.entityTypes,
+        language: draft.language,
+      });
+    } catch {
+      // The rejection's job ends here: it kept the wizard's close from
+      // running and the host already surfaced the failure. Letting it
+      // escape a React event handler is an unhandled rejection.
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="semiont-form">
+      {/* Name */}
+      <div className="semiont-form__field">
+        <label htmlFor="compose-name" className="semiont-form__label">
+          {t.resourceTitle}
+        </label>
+        <input
+          id="compose-name"
+          type="text"
+          value={draft.name}
+          onChange={(e) => onDraftChange({ name: e.target.value })}
+          placeholder={t.resourceTitlePlaceholder}
+          required
+          className="semiont-input"
+          disabled={isCreating}
+        />
+      </div>
+
+      {/* Storage URI */}
+      <div className="semiont-form__field">
+        <label htmlFor="compose-storagePath" className="semiont-form__label">
+          {t.saveLocation}
+        </label>
+        <div className="semiont-input-addon">
+          <span className="semiont-input-addon__prefix">file://</span>
+          <input
+            id="compose-storagePath"
+            type="text"
+            value={draft.storagePath}
+            onChange={(e) => onDraftChange({ storagePath: e.target.value })}
+            placeholder="people/my-resource.md"
+            required
+            className="semiont-input semiont-input--addon"
+            disabled={isCreating}
+          />
+        </div>
+      </div>
+
+      {/* Entity types: fixed at reference creation → tags; otherwise picker */}
+      <div className="semiont-form__field">
+        <div className="semiont-form__label">{t.entityTypes}</div>
+        {fixedTypes ? (
+          <div className="semiont-form__entity-type-tags" role="list">
+            {referenceEntityTypes.map((type) => (
+              <span key={type} role="listitem" className="semiont-form__entity-type-tag">
+                {type}
+              </span>
+            ))}
+          </div>
+        ) : (
+          <div className="semiont-form__entity-type-buttons" role="group">
+            {entityTypeOptions.map((type) => {
+              const isSelected = draft.entityTypes.includes(type);
+              return (
+                <button
+                  key={type}
+                  type="button"
+                  onClick={() => onDraftChange({
+                    entityTypes: isSelected
+                      ? draft.entityTypes.filter((x) => x !== type)
+                      : [...draft.entityTypes, type],
+                  })}
+                  className="semiont-form__entity-type-button"
+                  data-selected={isSelected}
+                  aria-pressed={isSelected}
+                  disabled={isCreating}
+                >
+                  {type}
+                </button>
+              );
+            })}
+          </div>
+        )}
+      </div>
+
+      {/* Language */}
+      <div className="semiont-form__field">
+        <label htmlFor="compose-language" className="semiont-form__label">
+          {t.language}
+        </label>
+        <select
+          id="compose-language"
+          value={draft.language}
+          onChange={(e) => onDraftChange({ language: e.target.value })}
+          disabled={isCreating}
+          className="semiont-select"
+        >
+          {LOCALES.map((lang) => (
+            <option key={lang.code} value={lang.code}>
+              {lang.nativeName}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      {/* Content editor */}
+      <div className="semiont-form__field semiont-form__editor">
+        <label className="semiont-form__label">{t.contentLabel}</label>
+        <div className="semiont-form__editor-wrapper" lang={draft.language}>
+          <CodeMirrorRenderer
+            content={draft.content}
+            editable={!isCreating}
+            sourceView={true}
+            showLineNumbers={showLineNumbers}
+            hoverDelayMs={hoverDelayMs}
+            onChange={(content: string) => onDraftChange({ content })}
+          />
+        </div>
+      </div>
+
+      <WizardFooter
+        backLabel={t.back}
+        onBack={onBack}
+        primary={{ label: t.createAndLink, pendingLabel: t.creatingAndLinking, pending: isCreating, type: 'submit' }}
+      />
+    </form>
+  );
+}

package/src/components/modals/ConfigureGatherStep.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useState } from 'react';
+import { WizardFooter } from './WizardFooter';
 
 export interface ResourceGatherConfig {
   depth: number;
@@ -10,16 +11,13 @@ export interface ResourceGatherConfig {
 }
 
 export interface ConfigureGatherStepProps {
-  defaults?: Partial<ResourceGatherConfig>;
   onGather: (config: ResourceGatherConfig) => void;
-  onCancel: () => void;
   translations: {
     intro: string;
     includeContent: string;
     includeSummary: string;
     depth: string;
     maxResources: string;
-    cancel: string;
     gather: string;
   };
   /** Slot for the exclusion multi-select (GENERATE-FROM-BUTTON Phase 4). */
@@ -29,13 +27,14 @@ export interface ConfigureGatherStepProps {
 /**
  * First step of the resource-generate flow: pick the gather options before
  * `gather.resource` runs. The `children` slot hosts the entity-type exclusion
- * multi-select (Phase 4).
+ * multi-select (Phase 4). Dismissal is the modal's corner ✕/Esc/backdrop
+ * (WIZARD-NAVIGATION D1), so the footer carries the advance alone.
  */
-export function ConfigureGatherStep({ defaults, onGather, onCancel, translations: t, children }: ConfigureGatherStepProps) {
-  const [includeContent, setIncludeContent] = useState(defaults?.includeContent ?? true);
-  const [includeSummary, setIncludeSummary] = useState(defaults?.includeSummary ?? true);
-  const [depth, setDepth] = useState(defaults?.depth ?? 2);
-  const [maxResources, setMaxResources] = useState(defaults?.maxResources ?? 10);
+export function ConfigureGatherStep({ onGather, translations: t, children }: ConfigureGatherStepProps) {
+  const [includeContent, setIncludeContent] = useState(true);
+  const [includeSummary, setIncludeSummary] = useState(true);
+  const [depth, setDepth] = useState(2);
+  const [maxResources, setMaxResources] = useState(10);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -43,7 +42,7 @@ export function ConfigureGatherStep({ defaults, onGather, onCancel, translations
   };
 
   return (
-    <form onSubmit={handleSubmit} className="semiont-form semiont-form--scrollable">
+    <form onSubmit={handleSubmit} className="semiont-form">
       <p className="semiont-form__helper-text">{t.intro}</p>
 
       <div className="semiont-form__checkbox-field">
@@ -89,14 +88,7 @@ export function ConfigureGatherStep({ defaults, onGather, onCancel, translations
       {/* Exclusion multi-select slot (Phase 4) */}
       {children}
 
-      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
-        <button type="button" onClick={onCancel} className="semiont-button--secondary semiont-button--flex">
-          ✕ {t.cancel}
-        </button>
-        <button type="submit" className="semiont-button--primary semiont-button--flex">
-          ✨ {t.gather}
-        </button>
-      </div>
+      <WizardFooter primary={{ label: t.gather, type: 'submit' }} />
     </form>
   );
 }

package/src/components/modals/ConfigureGenerationStep.tsx

@@ -1,8 +1,28 @@
 'use client';
 
-import React, { useState } from 'react';
-import type { GatheredContext } from '@semiont/core';
+import React, { useEffect } from 'react';
+import { WizardFooter } from './WizardFooter';
+import type { CollaboratorEntry, GatheredContext } from '@semiont/core';
 import { LOCALES } from '@semiont/core';
+
+/**
+ * Bounds for the max-length control when no ceiling is known. These are the
+ * values this control has always shipped — the fallback is today's behaviour,
+ * not an unbounded field (INFERENCE-LIMITS-EXPOSURE D6, as corrected in review).
+ */
+const MIN_MAX_TOKENS = 100;
+const DEFAULT_MAX_TOKENS_CEILING = 4000;
+/** The step's form values, owned by the wizard so Back cannot discard them (D3). */
+export interface GenerationDraft {
+  title: string;
+  storagePath: string;
+  prompt: string;
+  language: string;
+  temperature: number;
+  /** Text, not number: the field is user-editable and may be mid-edit or empty. */
+  maxTokensText: string;
+}
+
 export interface GenerationConfig {
   title: string;
   storagePath: string;
@@ -14,15 +34,19 @@ export interface GenerationConfig {
 }
 
 export interface ConfigureGenerationStepProps {
-  defaultTitle: string;
-  locale: string;
   context: GatheredContext;
-  onBack: () => void;
-  onCancel: () => void;
+  /** Echo of the gather step's hint — the thing being steered stays visible (GEP D8). */
+  hintEcho?: { label: string; value: string };
+  /** Owned by the wizard so Back is lossless (WIZARD-NAVIGATION D3). */
+  config: GenerationDraft;
+  onConfigChange: (config: GenerationDraft) => void;
+  /** Absent in a single-stack host (GATHER-AT-THE-TOP D6) — the footer then renders no retreat. */
+  onBack?: () => void;
   onGenerate: (config: GenerationConfig) => void;
   translations: {
     resourceTitle: string;
     resourceTitlePlaceholder: string;
+    saveLocation: string;
     additionalInstructions: string;
     additionalInstructionsPlaceholder: string;
     language: string;
@@ -32,27 +56,66 @@ export interface ConfigureGenerationStepProps {
     creativityCreative: string;
     maxLength: string;
     maxLengthHelp: string;
-    cancel: string;
-    back: string;
+    /**
+     * Shown INSTEAD of `maxLengthHelp` when the ceiling is known, so the bound
+     * is legible rather than mysterious. Interpolates `{{maxOutputTokens}}`
+     * and `{{model}}`.
+     */
+    maxLengthCeiling: string;
+    back?: string;
     generate: string;
   };
+  /**
+   * The roster entry serving `generation` (from `useCollaborators`). When its
+   * `limits` are known the max-length control is hard-bounded by the model's
+   * output ceiling; absent — or present without `limits`, which is normal when
+   * discovery could not answer right now — the control keeps its default
+   * bounds and generation still submits (D3).
+   */
+  generationAgent?: CollaboratorEntry;
 }
 
 export function ConfigureGenerationStep({
-  defaultTitle,
-  locale,
   context,
+  hintEcho,
+  config,
+  onConfigChange,
   onBack,
-  onCancel,
   onGenerate,
   translations: t,
+  generationAgent,
 }: ConfigureGenerationStepProps) {
-  const [title, setTitle] = useState(defaultTitle);
-  const [storagePath, setStoragePath] = useState('');
-  const [prompt, setPrompt] = useState('');
-  const [language, setLanguage] = useState(locale);
-  const [temperature, setTemperature] = useState(0.7);
-  const [maxTokens, setMaxTokens] = useState(500);
+  // CONTROLLED (WIZARD-NAVIGATION D3): these were six local `useState`s, so Back
+  // unmounted the step and threw away every typed instruction, the save path and
+  // both sliders. `maxTokensText` stays TEXT rather than a number so the field can
+  // be cleared mid-edit — `parseInt` on an empty field yields NaN, which React
+  // warns about and which used to travel into the job config.
+  const { title, storagePath, prompt, language, temperature, maxTokensText } = config;
+  const set = (patch: Partial<GenerationDraft>) => onConfigChange({ ...config, ...patch });
+
+  const ceiling = generationAgent?.limits?.maxOutputTokens ?? DEFAULT_MAX_TOKENS_CEILING;
+
+  /**
+   * The value that will actually be submitted: always finite, always inside
+   * the bounds, whatever the field currently shows.
+   */
+  const clamp = (n: number): number =>
+    Math.min(Math.max(Number.isFinite(n) ? n : MIN_MAX_TOKENS, MIN_MAX_TOKENS), ceiling);
+
+  const submittedMaxTokens = clamp(parseInt(maxTokensText, 10));
+
+  // Re-clamp whenever the ceiling changes — which INCLUDES its first arrival.
+  // `browse.agents()` is asynchronous, so `generationAgent` is undefined on the
+  // first render and lands later; clamping only in the `useState` initializer
+  // would satisfy a mount-time test and do nothing in the running app.
+  useEffect(() => {
+    const n = parseInt(maxTokensText, 10);
+    // An empty/mid-edit field is left alone; submission clamps it anyway.
+    if (Number.isFinite(n) && n > ceiling) set({ maxTokensText: String(ceiling) });
+    // `set` and the draft are intentionally out of the dep list: this reacts to the
+    // CEILING arriving (browse.agents() is async), not to the user typing.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [ceiling]);
 
   const handleSubmit = (e: React.FormEvent) => {
     e.preventDefault();
@@ -63,13 +126,21 @@ export function ConfigureGenerationStep({
       ...(trimmedPrompt ? { prompt: trimmedPrompt } : {}),
       language,
       temperature,
-      maxTokens,
+      maxTokens: submittedMaxTokens,
       context,
     });
   };
 
   return (
-    <form onSubmit={handleSubmit} className="semiont-form semiont-form--scrollable">
+    // No --scrollable: this form renders below the evidence display inside the
+    // host's single step-scroll pane — an independent scroll region here is
+    // what squeezed the parameters out of view (the measured failure).
+    <form onSubmit={handleSubmit} className="semiont-form">
+      {hintEcho && (
+        <p className="semiont-wizard__hint-echo">
+          {hintEcho.label}: {hintEcho.value}
+        </p>
+      )}
       {/* Resource Title */}
       <div className="semiont-form__field">
         <label htmlFor="wizard-title" className="semiont-form__label">
@@ -79,7 +150,7 @@ export function ConfigureGenerationStep({
           id="wizard-title"
           type="text"
           value={title}
-          onChange={(e) => setTitle(e.target.value)}
+          onChange={(e) => set({ title: e.target.value })}
           required
           className="semiont-input"
           placeholder={t.resourceTitlePlaceholder}
@@ -89,7 +160,7 @@ export function ConfigureGenerationStep({
       {/* Storage URI */}
       <div className="semiont-form__field">
         <label htmlFor="wizard-storagePath" className="semiont-form__label">
-          Save location
+          {t.saveLocation}
         </label>
         <div className="semiont-input-addon">
           <span className="semiont-input-addon__prefix">file://</span>
@@ -97,7 +168,7 @@ export function ConfigureGenerationStep({
             id="wizard-storagePath"
             type="text"
             value={storagePath}
-            onChange={(e) => setStoragePath(e.target.value)}
+            onChange={(e) => set({ storagePath: e.target.value })}
             required
             className="semiont-input semiont-input--addon"
             placeholder="generated/my-resource.md"
@@ -113,7 +184,7 @@ export function ConfigureGenerationStep({
         <textarea
           id="wizard-prompt"
           value={prompt}
-          onChange={(e) => setPrompt(e.target.value)}
+          onChange={(e) => set({ prompt: e.target.value })}
           rows={2}
           className="semiont-textarea"
           placeholder={t.additionalInstructionsPlaceholder}
@@ -129,7 +200,7 @@ export function ConfigureGenerationStep({
           <select
             id="wizard-language"
             value={language}
-            onChange={(e) => setLanguage(e.target.value)}
+            onChange={(e) => set({ language: e.target.value })}
             className="semiont-select"
           >
             {LOCALES.map((lang) => (
@@ -140,7 +211,7 @@ export function ConfigureGenerationStep({
           </select>
         </div>
 
-        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--grow">
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--slider">
           <label htmlFor="wizard-temperature" className="semiont-form__label">
             {t.creativity} ({temperature.toFixed(1)})
           </label>
@@ -151,7 +222,7 @@ export function ConfigureGenerationStep({
             max="1"
             step="0.1"
             value={temperature}
-            onChange={(e) => setTemperature(parseFloat(e.target.value))}
+            onChange={(e) => set({ temperature: parseFloat(e.target.value) })}
             className="semiont-slider"
           />
           <div className="semiont-slider__labels semiont-slider__labels--small">
@@ -160,46 +231,52 @@ export function ConfigureGenerationStep({
           </div>
         </div>
 
-        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow">
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow semiont-form__field--end">
           <label htmlFor="wizard-maxTokens" className="semiont-form__label">
             {t.maxLength}
           </label>
           <input
             id="wizard-maxTokens"
             type="number"
-            min="100"
-            max="4000"
+            min={MIN_MAX_TOKENS}
+            max={ceiling}
             step="100"
-            value={maxTokens}
-            onChange={(e) => setMaxTokens(parseInt(e.target.value))}
+            value={maxTokensText}
+            onChange={(e) => {
+              const raw = e.target.value;
+              // Empty is a legitimate transient state while retyping.
+              if (raw === '') { set({ maxTokensText: '' }); return; }
+              const n = parseInt(raw, 10);
+              if (!Number.isFinite(n)) return;
+              // `max` alone does not stop a larger value being typed — it only
+              // marks the field invalid. D6 says it cannot be entered, so the
+              // clamp lives here.
+              set({ maxTokensText: String(Math.min(n, ceiling)) });
+            }}
             className="semiont-input"
           />
         </div>
       </div>
 
-      {/* Action Buttons */}
-      <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
-        <button
-          type="button"
-          onClick={onCancel}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ✕ {t.cancel}
-        </button>
-        <button
-          type="button"
-          onClick={onBack}
-          className="semiont-button--secondary semiont-button--flex"
-        >
-          ◀ {t.back}
-        </button>
-        <button
-          type="submit"
-          className="semiont-button--primary semiont-button--flex"
-        >
-          ✨ {t.generate}
-        </button>
-      </div>
+      {/* The bound, as a full sentence — which is why it lives UNDER the row,
+          never inside the 5.5rem Max Length column: a sentence in that box
+          wraps one word per line and its height taxes the whole flex row. */}
+      <p className="semiont-form__help semiont-form__help--row">
+        {generationAgent?.limits
+          ? t.maxLengthCeiling
+              .replace('{{maxOutputTokens}}', String(ceiling))
+              .replace(
+                '{{model}}',
+                (generationAgent.agent as { model?: string; name?: string }).model
+                  ?? generationAgent.agent.name,
+              )
+          : t.maxLengthHelp}
+      </p>
+
+      <WizardFooter
+        {...(onBack && t.back ? { backLabel: t.back, onBack } : {})}
+        primary={{ label: t.generate, type: 'submit' }}
+      />
     </form>
   );
 }