@semiont/react-ui 0.5.26 → 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,14 +424,57 @@
   padding: 2rem 0;
 }
 
-.semiont-gather__loading-text {
-  font-size: 1.125rem;
+/* 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);
-  font-weight: 500;
 }
 
-[data-theme="dark"] .semiont-gather__loading-text {
+.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);
+  font-weight: 500;
 }
 
 .semiont-gather__loading-dot {
@@ -535,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;
@@ -599,8 +794,24 @@
   margin-bottom: 0.5rem;
 }
 
-[data-theme="dark"] .semiont-gather__footer-label {
-  color: var(--semiont-text-tertiary);
+/* 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 {
@@ -665,10 +876,6 @@
   color: var(--semiont-color-primary-600);
 }
 
-[data-theme="dark"] .semiont-gather__expand-btn {
-  color: var(--semiont-text-tertiary);
-}
-
 [data-theme="dark"] .semiont-gather__expand-btn:hover {
   color: var(--semiont-color-primary-400);
 }
@@ -708,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/SearchModal.tsx

@@ -74,7 +74,7 @@ export function SearchModal({
       (q) =>
         semiontRef.current!.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
           map((st) => {
-            const resources = readyValue(st);
+            const resources = readyValue(st)?.resources;
             if (resources === undefined) return undefined;
             return resources
               .map((resource): SearchResult | null => {