@semiont/react-ui 0.5.27 → 0.5.29

package/src/components/__tests__/StatusDisplay.test.tsx

@@ -43,7 +43,7 @@ describe('StatusDisplay', () => {
     mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.2.3' });
 
     renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidGatewayToken={true} />
     );
 
     await waitFor(() => {
@@ -56,7 +56,7 @@ describe('StatusDisplay', () => {
     mockGetStatus.mockRejectedValue(new Error('Network error'));
 
     renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidGatewayToken={true} />
     );
 
     await waitFor(() => {
@@ -68,7 +68,7 @@ describe('StatusDisplay', () => {
     mockGetStatus.mockRejectedValue(new Error('401 Unauthorized'));
 
     renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidGatewayToken={true} />
     );
 
     await waitFor(() => {
@@ -76,11 +76,11 @@ describe('StatusDisplay', () => {
     });
   });
 
-  it('should show warning for authenticated users missing backend token', () => {
+  it('should show warning for authenticated users missing gateway token', () => {
     mockGetStatus.mockResolvedValue(undefined);
 
     renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={false} isAuthenticated={true} hasValidBackendToken={false} />
+      <StatusDisplay isFullyAuthenticated={false} isAuthenticated={true} hasValidGatewayToken={false} />
     );
 
     expect(screen.getByText(/sign out and sign in again to reconnect/i)).toBeInTheDocument();
@@ -114,18 +114,18 @@ describe('StatusDisplay', () => {
       <StatusDisplay isFullyAuthenticated={false} isAuthenticated={false} />
     );
 
-    expect(screen.getByText('Sign in to view backend status')).toBeInTheDocument();
+    expect(screen.getByText('Sign in to view gateway status')).toBeInTheDocument();
   });
 
   it('should show error hint when there is an error', async () => {
     mockGetStatus.mockRejectedValue(new Error('Connection refused'));
 
     renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidGatewayToken={true} />
     );
 
     await waitFor(() => {
-      expect(screen.getByText(/Check that the backend server is running/)).toBeInTheDocument();
+      expect(screen.getByText(/Check that the gateway server is running/)).toBeInTheDocument();
     });
   });
 
@@ -133,7 +133,7 @@ describe('StatusDisplay', () => {
     mockGetStatus.mockResolvedValue({ status: 'healthy', version: '1.0.0' });
 
     renderWithProviders(
-      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidBackendToken={true} />
+      <StatusDisplay isFullyAuthenticated={true} isAuthenticated={true} hasValidGatewayToken={true} />
     );
 
     await waitFor(() => {

package/src/components/modals/ComposeStep.tsx

@@ -0,0 +1,233 @@
+'use client';
+
+import React, { useState } from 'react';
+import { LOCALES, proposeStoragePath } 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;
+  /**
+   * Folder of the resource being composed FROM, so the new file lands beside
+   * its source (D11). Compose is always `text/markdown`, so the proposal's
+   * extension is fixed.
+   */
+  defaultFolder?: string;
+  /** 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,
+  defaultFolder = '',
+  referenceEntityTypes,
+  entityTypeOptions,
+  showLineNumbers,
+  hoverDelayMs,
+  onBack,
+  onCompose,
+  translations: t,
+}: ComposeStepProps) {
+  // D11 — the Save location starts filled and follows the title until the
+  // user takes it over; `pathTouched` is derived (see ConfigureGenerationStep),
+  // so clearing the field restores the proposal. Compose writes markdown.
+  const pathTouched = draft.storagePath !== '';
+  const effectivePath = pathTouched
+    ? draft.storagePath
+    : proposeStoragePath(defaultFolder, draft.name, 'text/markdown');
+
+  const [isCreating, setIsCreating] = useState(false);
+  const fixedTypes = referenceEntityTypes.length > 0;
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!draft.name.trim() || !effectivePath.trim()) return;
+    setIsCreating(true);
+    try {
+      await onCompose({
+        name: draft.name,
+        storagePath: `file://${effectivePath}`,
+        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={effectivePath}
+            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>
   );
 }