@semiont/react-ui 0.5.27 → 0.5.28

package/src/components/modals/SearchModal.css

@@ -6,11 +6,6 @@
   z-index: 1000;
 }
 
-/* Resource search modal variant (higher z-index) */
-.semiont-search-modal--resource {
-  z-index: 1001;
-}
-
 /* Backdrop */
 .semiont-search-modal__backdrop {
   position: fixed;
@@ -369,12 +364,7 @@
   outline-color: var(--semiont-color-primary-400);
 }
 
-/* Search form */
-.semiont-search-modal__search-form {
-  margin-bottom: 1rem;
-}
-
-/* Search input (for ResourceSearchModal) */
+/* Search input */
 .semiont-search-modal__search-input {
   width: 100%;
   padding: 0.5rem 0.75rem;
@@ -398,79 +388,16 @@
   outline-color: var(--semiont-color-primary-400);
 }
 
-/* Resource list */
-.semiont-search-modal__resource-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-}
-
-/* Resource item */
-.semiont-search-modal__resource-item {
-  padding: 0.75rem;
-  border: 1px solid var(--semiont-color-gray-200);
-  border-radius: 0.5rem;
-  cursor: pointer;
-  transition: background-color 0.2s;
-}
-
-.semiont-search-modal__resource-item:hover {
-  background-color: var(--semiont-color-gray-50);
-}
-
-[data-theme="dark"] .semiont-search-modal__resource-item {
-  border-color: var(--semiont-color-gray-700);
-}
-
-[data-theme="dark"] .semiont-search-modal__resource-item:hover {
-  background-color: rgba(55, 65, 81, 0.5);
-}
-
-/* Resource name */
-.semiont-search-modal__resource-name {
-  font-weight: 500;
-  color: var(--semiont-color-gray-900);
-  margin-bottom: 0.25rem;
-}
-
-[data-theme="dark"] .semiont-search-modal__resource-name {
-  color: var(--semiont-color-white);
-}
-
-/* Resource description */
-.semiont-search-modal__resource-description {
-  font-size: 0.875rem;
-  color: var(--semiont-color-gray-600);
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-[data-theme="dark"] .semiont-search-modal__resource-description {
-  color: var(--semiont-color-gray-400);
-}
-
-/* Resource media type */
-.semiont-search-modal__resource-media-type {
-  font-size: 0.875rem;
-  font-style: italic;
-  color: var(--semiont-color-gray-500);
-}
-
-[data-theme="dark"] .semiont-search-modal__resource-media-type {
-  color: var(--semiont-color-gray-500);
-}
-
 /* Wide panel variant for two-pane layouts */
 .semiont-search-modal__panel--wide {
   max-width: 1100px;
 }
 
-/* Gather-context step: wider modal */
+/* Gather-context step. Width comes from `--wide` (GEP D2: the family's own
+   1100px precedent), applied alongside at both call sites — this class owns
+   only the gather-specific flex/height shape. */
 .semiont-search-modal__panel--gather {
-  max-width: min(90vw, 820px);
-  max-height: min(90vh, 680px);
+  max-height: min(92vh, 860px);
   display: flex;
   flex-direction: column;
   overflow: hidden;
@@ -497,6 +424,53 @@
   padding: 2rem 0;
 }
 
+/* The gather skeleton: the loading screen is the loaded screen minus the
+   data — known annotation facts up top, pane headers in place, shimmer bars
+   where the gather's answers will land. */
+.semiont-gather__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  flex: 1;
+}
+
+.semiont-gather__skeleton-source {
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-gather__skeleton-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+}
+
+.semiont-gather__skeleton-exact {
+  font-weight: var(--semiont-font-medium);
+  color: var(--semiont-text-primary);
+}
+
+.semiont-gather__skeleton-panes {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.5rem;
+}
+
+.semiont-gather__skeleton-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+/* One small dots animation per zone, sitting exactly where that zone's
+   content will land. Reuses the loading-dot spans (same animation). */
+.semiont-gather__skeleton-dots {
+  display: flex;
+  gap: 0.375rem;
+  padding: 0.375rem 0;
+}
+
 .semiont-gather__loading-text {
   font-size: 1.125rem;
   color: var(--semiont-text-secondary);
@@ -531,6 +505,231 @@
   padding-top: 0.25rem;
 }
 
+/* GEP P2: the evidence panes — quiet lists under small-cap headers (D1/D3/D4). */
+.semiont-gather-pane {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  min-height: 0;
+  overflow-y: auto; /* a pane scrolls inside itself; the panel never grows */
+}
+
+.semiont-gather-pane__title {
+  font-size: var(--semiont-text-xs);
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-gather-pane__summary {
+  margin: 0;
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-primary);
+}
+
+.semiont-gather-pane__empty {
+  margin: 0;
+  font-size: var(--semiont-text-sm);
+  font-style: italic;
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-corpus__list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.semiont-corpus__card {
+  padding: 0.375rem 0.5rem;
+  border: 1px solid var(--semiont-border-primary);
+  border-radius: 0.375rem;
+}
+
+.semiont-corpus__card-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.semiont-corpus__source {
+  font-size: var(--semiont-text-sm);
+  font-weight: 500;
+  color: var(--semiont-text-primary);
+}
+
+.semiont-corpus__score {
+  margin-left: auto;
+  font-size: var(--semiont-text-xs);
+  font-variant-numeric: tabular-nums;
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-corpus__snippet {
+  margin: 0.25rem 0 0;
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-corpus__receipt {
+  margin: 0;
+  font-size: var(--semiont-text-xs);
+  font-style: italic;
+  color: var(--semiont-text-tertiary);
+}
+
+/* GEP P4 (D3): the graph pane's body — a deterministic, hand-rolled SVG. */
+.semiont-graph {
+  width: 100%;
+  height: auto;
+  flex-shrink: 0;
+}
+
+.semiont-graph__node rect {
+  fill: var(--semiont-bg-secondary);
+  stroke: var(--semiont-border-primary);
+  stroke-width: 1;
+}
+
+.semiont-graph__node text {
+  font-size: 11px;
+  fill: var(--semiont-text-primary);
+}
+
+.semiont-graph__node--focal rect {
+  fill: var(--semiont-color-primary-100);
+  stroke: var(--semiont-color-primary-600);
+  stroke-width: 2;
+}
+
+.semiont-graph__node--annotation rect {
+  fill: var(--semiont-bg-primary);
+  stroke-dasharray: 4 3;
+}
+
+.semiont-graph__edge line {
+  stroke: var(--semiont-border-primary);
+  stroke-width: 1.5;
+}
+
+.semiont-graph__edge--cites line {
+  stroke: var(--semiont-color-primary-600);
+}
+
+.semiont-graph__edge--annotation-of line {
+  stroke-dasharray: 4 3;
+}
+
+[data-theme="dark"] .semiont-graph__node--focal rect {
+  fill: var(--semiont-color-primary-900);
+  stroke: var(--semiont-color-primary-400);
+}
+
+[data-theme="dark"] .semiont-graph__edge--cites line {
+  stroke: var(--semiont-color-primary-400);
+}
+
+/* Recall chips: the exclusion picker inverted — every entity type starts
+   INCLUDED, wearing the app's token look (the semiont-tag tint), and a click
+   crosses one off the recall: outline, tertiary text, struck through. The
+   wire still carries the exclude list; only the presentation inverted. */
+.semiont-form__recall-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.semiont-form__recall-chip {
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--semiont-radius-full);
+  font-size: var(--semiont-text-sm);
+  cursor: pointer;
+  border: 1px solid transparent;
+  background: var(--semiont-color-primary-100);
+  color: var(--semiont-color-primary-700);
+}
+
+[data-theme="dark"] .semiont-form__recall-chip {
+  background: var(--semiont-color-primary-900);
+  color: var(--semiont-color-primary-300);
+}
+
+.semiont-form__recall-chip[data-included="false"] {
+  background: none;
+  border-color: var(--semiont-border-primary);
+  color: var(--semiont-text-tertiary);
+  text-decoration: line-through;
+}
+
+.semiont-form__recall-chip:hover {
+  opacity: 0.85;
+}
+
+.semiont-form__recall-chip:focus-visible {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: 1px;
+}
+
+/* Post-gather receipt: the spent controls' compact echo — what THIS gather
+   asked for, and the way back to the full form. Same vocabulary as the
+   corpus pane's exclusion receipt and the wizard's strategy band: a choice
+   made upstream, echoed compactly. Dashed like the graph's annotation
+   nodes — a stand-in for something expandable. */
+.semiont-gather-receipt {
+  display: block;
+  width: 100%;
+  flex-shrink: 0;
+  text-align: left;
+  padding: 0.5rem 0.75rem;
+  font-size: var(--semiont-text-sm);
+  color: var(--semiont-text-secondary);
+  background: none;
+  border: 1px dashed var(--semiont-border-primary);
+  border-radius: 0.375rem;
+  cursor: pointer;
+}
+
+.semiont-gather-receipt:hover {
+  color: var(--semiont-text-primary);
+  border-color: var(--semiont-color-primary-600);
+}
+
+/* GEP D5: the hint on its own full-width row, input-then-act above the footer. */
+.semiont-gather__hint-row {
+  flex-shrink: 0;
+  padding-top: 0.5rem;
+}
+
+.semiont-gather__hint-effect {
+  font-weight: 400;
+  color: var(--semiont-text-tertiary);
+}
+
+/* GEP D8: the gather step's hint stays visible while being steered by. */
+.semiont-wizard__hint-echo {
+  margin: 0 0 0.5rem;
+  font-size: var(--semiont-text-xs);
+  font-style: italic;
+  color: var(--semiont-text-secondary);
+}
+
+/* Suggested references are prose (D3) — sentences, listed, not chipped. */
+.semiont-gather__suggested {
+  margin: 0.5rem 0 0;
+  padding-left: 1.25rem;
+  font-size: var(--semiont-text-xs);
+  color: var(--semiont-text-secondary);
+}
+
+.semiont-gather__suggested li {
+  margin-bottom: 0.25rem;
+}
+
 /* Two-column body below the strip */
 .semiont-gather__body {
   display: flex;
@@ -595,6 +794,26 @@
   margin-bottom: 0.5rem;
 }
 
+/* The chosen strategy on a strategy step — the chooser band collapsed to its
+   selection: a passive echo on the label's own line (--echo). Sized like the
+   form's text and in the TEXT color: blue is reserved for controls, and this
+   is never a control — the emoji carries the strategy's identity. */
+.semiont-gather__footer--echo {
+  display: flex;
+  align-items: baseline;
+  gap: 0.75rem;
+}
+
+.semiont-gather__footer--echo .semiont-gather__footer-label {
+  margin-bottom: 0;
+}
+
+.semiont-gather__chosen-strategy {
+  font-size: var(--semiont-text-sm);
+  font-weight: var(--semiont-font-semibold);
+  color: var(--semiont-text-primary);
+}
+
 .semiont-gather__actions {
   display: flex;
   flex-flow: row nowrap;
@@ -696,40 +915,57 @@
   }
 }
 
-/* Two-pane layout for search results + context */
-.semiont-search-results__two-pane {
+/* D4 discard guard: inline prompt raised when dismissal would destroy a
+   non-empty compose draft. Never window.confirm; the footer stays
+   dismissal-free (A4) — this band owns the decision. */
+.semiont-wizard__discard-prompt {
   display: flex;
-  gap: 1.5rem;
+  align-items: center;
+  gap: 0.75rem;
+  margin-bottom: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  border: 1px solid var(--semiont-color-red-600);
+  border-radius: var(--semiont-radius-md);
 }
 
-.semiont-search-results__context-pane {
-  flex: 0 0 340px;
-  max-height: 500px;
-  overflow-y: auto;
+.semiont-wizard__discard-prompt-text {
+  flex: 1;
+  font-weight: var(--semiont-font-semibold);
 }
 
-.semiont-search-results__results-pane {
+/* The strategy steps' single scroll pane: evidence + step content scroll
+   TOGETHER inside the clipped gather panel. The hosts start it scrolled to
+   the bottom on entry, so the step's own content shows in full and the
+   evidence tucks up under the modal top. */
+.semiont-wizard__step-scroll {
   flex: 1;
-  max-height: 500px;
+  min-height: 0;
   overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Inside the single pane the display flows at natural height — the gather
+   step's clip-and-scroll flex (outer/body/panes each scrolling internally)
+   would otherwise compress the evidence AND nest scrollbars. One scrollbar
+   governs the whole step. */
+.semiont-wizard__step-scroll .semiont-gather__outer,
+.semiont-wizard__step-scroll .semiont-gather__body {
+  flex: none;
+  min-height: auto;
+  overflow: visible;
 }
 
-/* Narrow screens: stack vertically, context above results */
+.semiont-wizard__step-scroll .semiont-gather__left,
+.semiont-wizard__step-scroll .semiont-gather__right,
+.semiont-wizard__step-scroll .semiont-gather-pane {
+  min-height: auto;
+  overflow-y: visible;
+}
+
+/* Narrow screens */
 @media (max-width: 640px) {
   .semiont-search-modal__panel--wide {
     max-width: 100%;
   }
-
-  .semiont-search-results__two-pane {
-    flex-direction: column;
-  }
-
-  .semiont-search-results__context-pane {
-    flex: none;
-    max-height: 200px;
-  }
-
-  .semiont-search-results__results-pane {
-    max-height: 350px;
-  }
 }

package/src/components/modals/SearchResultsStep.tsx

@@ -1,18 +1,21 @@
 'use client';
 import { WizardFooter } from './WizardFooter';
 
-import type { GatheredContext, ResourceDescriptor } from '@semiont/core';
-import { ContextSummary } from './ContextSummary';
-import type { ContextSummaryTranslations } from './ContextSummary';
+import type { ResourceDescriptor } from '@semiont/core';
 
 export type ScoredResult = ResourceDescriptor & {
   score?: number;
   matchReason?: string;
 };
 
+/**
+ * Pure RESULTS (GEP D10, amended): ranked rows with scores and Link buttons.
+ * The evidence display is the HOST's job — the wizard stacks the full
+ * display-only GatherContextStep (with the collapsed strategy band) above
+ * this step, the same grammar as the configure steps.
+ */
 export interface SearchResultsStepProps {
   results: ScoredResult[];
-  context: GatheredContext;
   onLink: (resourceId: string) => void;
   onBack: () => void;
   translations: {
@@ -20,84 +23,74 @@ export interface SearchResultsStepProps {
     link: string;
     back: string;
     score: string;
-  } & ContextSummaryTranslations;
+  };
 }
 
 export function SearchResultsStep({
   results,
-  context,
   onLink,
   onBack,
   translations: t,
 }: SearchResultsStepProps) {
   return (
     <>
-      {/* Two-pane layout: context left, results right */}
-      <div className="semiont-search-results__two-pane">
-        {/* Left: Gathered Context */}
-        <div className="semiont-search-results__context-pane">
-          <ContextSummary context={context} translations={t} />
-        </div>
-
-        {/* Right: Results List */}
-        <div className="semiont-search-results__results-pane">
-          {results.length === 0 ? (
-            <div className="semiont-modal__empty-state" style={{ textAlign: 'center', padding: '2rem 0' }}>
-              {t.noResults}
-            </div>
-          ) : (
-            results.map((result) => {
-              const id = result['@id'];
-              return (
-                <div
-                  key={id}
-                  style={{
-                    padding: '0.75rem',
-                    borderBottom: '1px solid var(--semiont-border-primary)',
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between',
-                    gap: '0.75rem',
-                  }}
-                >
-                  <div style={{ flex: 1, minWidth: 0 }}>
-                    <div style={{ fontWeight: 500, color: 'var(--semiont-text-primary)' }}>
-                      {result.name}
+      <div className="semiont-search-results">
+        {results.length === 0 ? (
+          <div className="semiont-modal__empty-state" style={{ textAlign: 'center', padding: '2rem 0' }}>
+            {t.noResults}
+          </div>
+        ) : (
+          results.map((result) => {
+            const id = result['@id'];
+            return (
+              <div
+                key={id}
+                style={{
+                  padding: '0.75rem',
+                  borderBottom: '1px solid var(--semiont-border-primary)',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'space-between',
+                  gap: '0.75rem',
+                }}
+              >
+                <div style={{ flex: 1, minWidth: 0 }}>
+                  <div style={{ fontWeight: 500, color: 'var(--semiont-text-primary)' }}>
+                    {result.name}
+                  </div>
+                  {result.description && (
+                    <div style={{
+                      fontSize: 'var(--semiont-text-sm)',
+                      color: 'var(--semiont-text-secondary)',
+                      marginTop: '0.25rem',
+                      overflow: 'hidden',
+                      textOverflow: 'ellipsis',
+                      whiteSpace: 'nowrap',
+                    }}>
+                      {result.description}
                     </div>
-                    {result.description && (
-                      <div style={{
-                        fontSize: 'var(--semiont-text-sm)',
-                        color: 'var(--semiont-text-secondary)',
-                        marginTop: '0.25rem',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis',
-                        whiteSpace: 'nowrap',
-                      }}>
-                        {result.description}
-                      </div>
+                  )}
+                  <div style={{ fontSize: 'var(--semiont-text-xs)', color: 'var(--semiont-text-tertiary)', marginTop: '0.25rem', display: 'flex', gap: '0.5rem' }}>
+                    {result.score !== undefined && (
+                      <span>{t.score}: {result.score}</span>
+                    )}
+                    {result.matchReason && (
+                      <span>{result.matchReason}</span>
                     )}
-                    <div style={{ fontSize: 'var(--semiont-text-xs)', color: 'var(--semiont-text-tertiary)', marginTop: '0.25rem', display: 'flex', gap: '0.5rem' }}>
-                      {result.score !== undefined && (
-                        <span>{t.score}: {result.score}</span>
-                      )}
-                      {result.matchReason && (
-                        <span>{result.matchReason}</span>
-                      )}
-                    </div>
                   </div>
-                  <button
-                    type="button"
-                    onClick={() => onLink(id)}
-                    className="semiont-button--primary"
-                    style={{ flexShrink: 0 }}
-                  >
-                    🔗 {t.link}
-                  </button>
                 </div>
-              );
-            })
-          )}
-        </div>
+                <button
+                  type="button"
+                  onClick={() => onLink(id)}
+                  className="semiont-button--primary"
+                  style={{ flexShrink: 0 }}
+                >
+                  🔗 {t.link}
+                </button>
+              </div>
+            );
+          })
+        )}
       </div>
 
       <WizardFooter backLabel={t.back} onBack={onBack} />

package/src/components/modals/WizardFooter.tsx

@@ -20,6 +20,12 @@ export interface WizardFooterPrimary {
   /** Shown while `pending`; falls back to `label`. */
   pendingLabel?: string;
   pending?: boolean;
+  /**
+   * The action's PRECONDITION is not met yet (e.g. the review step waiting on
+   * gather). Unlike `pending` — the action itself running — this disables only
+   * the primary: retreat must stay live while a precondition loads.
+   */
+  disabled?: boolean;
   type: 'submit' | 'button';
   onClick?: () => void;
 }
@@ -52,7 +58,7 @@ export function WizardFooter({ backLabel, onBack, primary }: WizardFooterProps)
           type={primary.type}
           {...(primary.onClick ? { onClick: primary.onClick } : {})}
           className="semiont-button--primary"
-          disabled={pending}
+          disabled={pending || (primary.disabled ?? false)}
           data-pending={pending ? 'true' : 'false'}
         >
           {pending ? (primary.pendingLabel ?? primary.label) : primary.label}