@semiont/react-ui 0.5.9 → 0.5.11

package/src/components/modals/ConfigureGatherStep.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import React, { useState } from 'react';
+
+export interface ResourceGatherConfig {
+  depth: number;
+  maxResources: number;
+  includeContent: boolean;
+  includeSummary: boolean;
+}
+
+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). */
+  children?: React.ReactNode;
+}
+
+/**
+ * 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).
+ */
+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);
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    onGather({ includeContent, includeSummary, depth, maxResources });
+  };
+
+  return (
+    <form onSubmit={handleSubmit} className="semiont-form semiont-form--scrollable">
+      <p className="semiont-form__helper-text">{t.intro}</p>
+
+      <div className="semiont-form__checkbox-field">
+        <label className="semiont-form__checkbox-label">
+          <input type="checkbox" checked={includeContent} onChange={(e) => setIncludeContent(e.target.checked)} />
+          {t.includeContent}
+        </label>
+      </div>
+      <div className="semiont-form__checkbox-field">
+        <label className="semiont-form__checkbox-label">
+          <input type="checkbox" checked={includeSummary} onChange={(e) => setIncludeSummary(e.target.checked)} />
+          {t.includeSummary}
+        </label>
+      </div>
+
+      <div className="semiont-form__inline-row">
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow">
+          <label htmlFor="gather-depth" className="semiont-form__label">{t.depth}</label>
+          <input
+            id="gather-depth"
+            type="number"
+            min="1"
+            max="5"
+            value={depth}
+            onChange={(e) => setDepth(parseInt(e.target.value))}
+            className="semiont-input"
+          />
+        </div>
+        <div className="semiont-form__field semiont-form__field--inline semiont-form__field--narrow">
+          <label htmlFor="gather-max" className="semiont-form__label">{t.maxResources}</label>
+          <input
+            id="gather-max"
+            type="number"
+            min="1"
+            max="50"
+            value={maxResources}
+            onChange={(e) => setMaxResources(parseInt(e.target.value))}
+            className="semiont-input"
+          />
+        </div>
+      </div>
+
+      {/* 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>
+    </form>
+  );
+}

package/src/components/modals/ContextSummary.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import type { GatheredContext } from '@semiont/core';
+import { deriveViews, type GatheredContext } from '@semiont/core';
 
 export interface ContextSummaryTranslations {
   sourceContextLabel: string;
@@ -16,14 +16,23 @@ export interface ContextSummaryProps {
 }
 
 export function ContextSummary({ context, translations: t }: ContextSummaryProps) {
-  const graphContext = context.graphContext;
-  const connections = graphContext?.connections ?? [];
-  const citedBy = graphContext?.citedBy ?? [];
-  const citedByCount = graphContext?.citedByCount ?? 0;
+  // Graph views are focus-agnostic — only the focal resource id (and an optional
+  // focal annotation id) differ by kind.
+  const mainResourceId = context.focus.kind === 'annotation'
+    ? String(context.focus.sourceResource.id)
+    : String(context.focus.resource.id);
+  const focalAnnotationId = context.focus.kind === 'annotation'
+    ? context.focus.annotation.id
+    : undefined;
+  const { connections, citedBy, citedByCount } = deriveViews(
+    context.graph,
+    mainResourceId,
+    focalAnnotationId,
+  );
 
   return (
     <>
-      {graphContext && (connections.length > 0 || citedByCount > 0) && (
+      {(connections.length > 0 || citedByCount > 0) && (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
 
           {connections.length > 0 && (

package/src/components/modals/GatherContextStep.tsx

@@ -9,11 +9,12 @@ export interface GatherContextStepProps {
   context: GatheredContext | null;
   contextLoading: boolean;
   contextError: Error | null;
-  userHint: string;
-  onUserHintChange: (value: string) => void;
-  onBind: () => void;
-  onGenerate: () => void;
-  onCompose: () => void;
+  /** Annotation-wizard controls. Omit for a display-only (e.g. resource-focus) render. */
+  userHint?: string;
+  onUserHintChange?: (value: string) => void;
+  onBind?: () => void;
+  onGenerate?: () => void;
+  onCompose?: () => void;
   translations: {
     title: string;
     loadingContext: string;
@@ -29,7 +30,7 @@ export function GatherContextStep({
   context,
   contextLoading,
   contextError,
-  userHint,
+  userHint = '',
   onUserHintChange,
   onBind,
   onGenerate,
@@ -38,7 +39,8 @@ export function GatherContextStep({
 }: GatherContextStepProps) {
   const [sourceExpanded, setSourceExpanded] = useState(false);
   const contextReady = !contextLoading && !contextError && !!context;
-  const sourceContext = context?.sourceContext;
+  const focus = context?.focus.kind === 'annotation' ? context.focus : null;
+  const resourceFocus = context?.focus.kind === 'resource' ? context.focus : null;
   const highlightRef = useRef<HTMLSpanElement>(null);
 
   // Scroll the highlighted term into view when context loads
@@ -69,16 +71,16 @@ export function GatherContextStep({
 
       {context && (
         <>
-          {/* Full-width source context strip */}
-          {sourceContext && (
+          {/* Full-width source context strip — annotation focus */}
+          {focus?.selected && (
             <div className="semiont-gather__source-strip">
               <label className="semiont-form__label" style={{ marginBottom: '0.375rem' }}>
-                {t.sourceContextLabel}{context.sourceResource?.name ? ` "${context.sourceResource.name}"` : ''}
+                {t.sourceContextLabel}{focus.sourceResource.name ? ` "${focus.sourceResource.name}"` : ''}
               </label>
               <div className={`semiont-gather__source-box${sourceExpanded ? ' semiont-gather__source-box--expanded' : ''}`}>
                 <div className="semiont-gather__source-context">
                   <div style={{ fontSize: 'var(--semiont-text-sm)', fontFamily: 'monospace', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
-                    {sourceContext.before && <span>{sourceContext.before}</span>}
+                    {focus.selected.before && <span>{focus.selected.before}</span>}
                     <span
                       ref={highlightRef}
                       style={{
@@ -88,19 +90,19 @@ export function GatherContextStep({
                         color: 'var(--semiont-color-primary-900)',
                       }}
                     >
-                      {sourceContext.selected}
+                      {focus.selected.text}
                     </span>
                     {(context.metadata?.entityTypes ?? []).map(et => (
                       <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
                         {et}
                       </span>
                     ))}
-                    {context.annotation?.motivation && (
+                    {focus.annotation.motivation && (
                       <span className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
-                        {context.annotation.motivation}
+                        {focus.annotation.motivation}
                       </span>
                     )}
-                    {sourceContext.after && <span>{sourceContext.after}</span>}
+                    {focus.selected.after && <span>{focus.selected.after}</span>}
                   </div>
                 </div>
                 <button
@@ -114,60 +116,103 @@ export function GatherContextStep({
             </div>
           )}
 
+          {/* Full-width source context strip — resource focus */}
+          {resourceFocus && (
+            <div className="semiont-gather__source-strip">
+              <label className="semiont-form__label" style={{ marginBottom: '0.375rem' }}>
+                {t.sourceContextLabel}{resourceFocus.resource.name ? ` "${resourceFocus.resource.name}"` : ''}
+              </label>
+              {(resourceFocus.summary || resourceFocus.content?.main) && (
+                <div className={`semiont-gather__source-box${sourceExpanded ? ' semiont-gather__source-box--expanded' : ''}`}>
+                  <div className="semiont-gather__source-context">
+                    <div style={{ fontSize: 'var(--semiont-text-sm)', whiteSpace: 'pre-wrap', color: 'var(--semiont-text-secondary)' }}>
+                      {resourceFocus.summary ?? resourceFocus.content?.main}
+                      {(context.metadata?.entityTypes ?? []).map(et => (
+                        <span key={et} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', fontWeight: 400, verticalAlign: 'middle', marginLeft: '0.25rem' }}>
+                          {et}
+                        </span>
+                      ))}
+                    </div>
+                  </div>
+                  <button
+                    type="button"
+                    className="semiont-gather__expand-btn"
+                    onClick={() => setSourceExpanded(v => !v)}
+                  >
+                    {sourceExpanded ? '▲ less' : '▼ more'}
+                  </button>
+                </div>
+              )}
+              {resourceFocus.suggestedReferences && resourceFocus.suggestedReferences.length > 0 && (
+                <div style={{ marginTop: '0.5rem' }}>
+                  {resourceFocus.suggestedReferences.map(ref => (
+                    <span key={ref} className="semiont-chip" style={{ fontSize: 'var(--semiont-text-xs)', padding: '0.125rem 0.375rem', marginRight: '0.25rem' }}>
+                      {ref}
+                    </span>
+                  ))}
+                </div>
+              )}
+            </div>
+          )}
+
           {/* Two-column body */}
           <div className="semiont-gather__body">
-            {/* Left: annotation metadata */}
+            {/* Left: context summary (graph views) */}
             <div className="semiont-gather__left">
               <ContextSummary context={context} translations={t} />
             </div>
 
-            {/* Right: hint textarea */}
-            <div className="semiont-gather__right">
-              <div className="semiont-form__field">
-                <label className="semiont-form__label">
-                  {t.userHintLabel}
-                </label>
-                <textarea
-                  value={userHint}
-                  onChange={(e) => onUserHintChange(e.target.value)}
-                  placeholder={t.userHintPlaceholder}
-                  className="semiont-search-modal__search-input semiont-gather__hint-textarea"
-                  style={{ resize: 'vertical', fontFamily: 'inherit' }}
-                />
+            {/* Right: hint textarea (annotation focus only) */}
+            {focus && (
+              <div className="semiont-gather__right">
+                <div className="semiont-form__field">
+                  <label className="semiont-form__label">
+                    {t.userHintLabel}
+                  </label>
+                  <textarea
+                    value={userHint}
+                    onChange={(e) => onUserHintChange?.(e.target.value)}
+                    placeholder={t.userHintPlaceholder}
+                    className="semiont-search-modal__search-input semiont-gather__hint-textarea"
+                    style={{ resize: 'vertical', fontFamily: 'inherit' }}
+                  />
+                </div>
               </div>
-            </div>
+            )}
           </div>
 
-          {/* Full-width footer: resolution strategy */}
-          <div className="semiont-gather__footer">
-            <div className="semiont-gather__footer-label">{t.resolutionStrategyLabel}</div>
-            <div className="semiont-gather__actions">
-              <button
-                type="button"
-                onClick={onBind}
-                disabled={!contextReady}
-                className="semiont-button--primary semiont-button--flex"
-              >
-                🔍 {t.search}…
-              </button>
-              <button
-                type="button"
-                onClick={onGenerate}
-                disabled={!contextReady}
-                className="semiont-button--primary semiont-button--flex"
-              >
-                ✨ {t.generate}…
-              </button>
-              <button
-                type="button"
-                onClick={onCompose}
-                disabled={!contextReady}
-                className="semiont-button--secondary semiont-button--flex"
-              >
-                ✍️ {t.compose}
-              </button>
+          {/* Full-width footer: resolution strategy (annotation focus only) */}
+          {focus && (
+            <div className="semiont-gather__footer">
+              <div className="semiont-gather__footer-label">{t.resolutionStrategyLabel}</div>
+              <div className="semiont-gather__actions">
+                <button
+                  type="button"
+                  onClick={onBind}
+                  disabled={!contextReady}
+                  className="semiont-button--primary semiont-button--flex"
+                >
+                  🔍 {t.search}…
+                </button>
+                <button
+                  type="button"
+                  onClick={onGenerate}
+                  disabled={!contextReady}
+                  className="semiont-button--primary semiont-button--flex"
+                >
+                  ✨ {t.generate}…
+                </button>
+                <button
+                  type="button"
+                  onClick={onCompose}
+                  disabled={!contextReady}
+                  className="semiont-button--secondary semiont-button--flex"
+                >
+                  ✍️ {t.compose}
+                </button>
+              </div>
             </div>
-          </div>
+          )}
         </>
       )}
     </div>

package/src/components/modals/ResourceGenerateModal.tsx

@@ -0,0 +1,258 @@
+'use client';
+
+import { useState, useEffect, useCallback } from 'react';
+import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
+import { useResourceGather } from '../../hooks/useResourceGather';
+import { useSemiont } from '../../session/SemiontProvider';
+import { useObservable } from '../../hooks/useObservable';
+import { ConfigureGatherStep, type ResourceGatherConfig } from './ConfigureGatherStep';
+import { GatherContextStep } from './GatherContextStep';
+import { ConfigureGenerationStep, type GenerationConfig } from './ConfigureGenerationStep';
+
+export interface ResourceGenerateModalTranslations {
+  // Step titles + nav
+  gatherTitle: string;
+  reviewTitle: string;
+  configureTitle: string;
+  next: string;
+  back: string;
+  cancel: string;
+  // ConfigureGatherStep
+  gatherIntro: string;
+  includeContent: string;
+  includeSummary: string;
+  gatherDepth: string;
+  gatherMaxResources: string;
+  gatherButton: string;
+  excludeLabel: string;
+  // GatherContextStep display
+  loadingContext: string;
+  failedContext: string;
+  sourceContextLabel: string;
+  connectionsLabel: string;
+  citedByLabel: string;
+  // ConfigureGenerationStep
+  resourceTitle: string;
+  resourceTitlePlaceholder: string;
+  additionalInstructions: string;
+  additionalInstructionsPlaceholder: string;
+  language: string;
+  languageHelp: string;
+  creativity: string;
+  creativityFocused: string;
+  creativityCreative: string;
+  maxLength: string;
+  maxLengthHelp: string;
+  generate: string;
+}
+
+export interface ResourceGenerateModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  resourceId: string;
+  defaultTitle: string;
+  locale: string;
+  gatherDefaults?: Partial<ResourceGatherConfig>;
+  /**
+   * Emit the chosen generation config. The parent runs the job
+   * (`client.yield.fromResource(resourceId, …).run(…)`) — mirrors how the
+   * annotation wizard delegates `yield.fromAnnotation` to its parent.
+   */
+  onGenerateSubmit: (resourceId: string, config: GenerationConfig) => void;
+  translations: ResourceGenerateModalTranslations;
+}
+
+type Step = 'configure-gather' | 'review' | 'configure-generation';
+
+/**
+ * Resource-generate flow (GENERATE-FROM-BUTTON): configure gather options →
+ * `gather.resource` → review the gathered `GatheredContext` → configure
+ * generation → emit. Reuses the kind-aware `GatherContextStep` for the review.
+ */
+export function ResourceGenerateModal({
+  isOpen,
+  onClose,
+  resourceId,
+  defaultTitle,
+  locale,
+  gatherDefaults,
+  onGenerateSubmit,
+  translations: t,
+}: ResourceGenerateModalProps) {
+  const [step, setStep] = useState<Step>('configure-gather');
+  const { context, loading, error, gather, reset } = useResourceGather();
+  const client = useObservable(useSemiont().activeSession$)?.client;
+  const entityTypeOptions = useObservable(client?.browse.entityTypes()) ?? [];
+  const [excludeEntityTypes, setExcludeEntityTypes] = useState<string[]>([]);
+
+  // Reset to the first step whenever the modal (re)opens.
+  useEffect(() => {
+    if (isOpen) {
+      setStep('configure-gather');
+      setExcludeEntityTypes([]);
+      reset();
+    }
+  }, [isOpen, reset]);
+
+  const handleGather = useCallback((config: ResourceGatherConfig) => {
+    setStep('review');
+    void gather(resourceId, {
+      ...config,
+      ...(excludeEntityTypes.length ? { excludeEntityTypes } : {}),
+    });
+  }, [gather, resourceId, excludeEntityTypes]);
+
+  const handleGenerate = useCallback((config: GenerationConfig) => {
+    onGenerateSubmit(resourceId, config);
+    onClose();
+  }, [onGenerateSubmit, resourceId, onClose]);
+
+  const stepTitle = step === 'configure-gather' ? t.gatherTitle : step === 'review' ? t.reviewTitle : t.configureTitle;
+
+  return (
+    <Transition appear show={isOpen}>
+      <Dialog as="div" className="semiont-search-modal" onClose={onClose}>
+        <TransitionChild
+          enter="ease-out duration-200"
+          enterFrom="opacity-0"
+          enterTo="opacity-100"
+          leave="ease-in duration-150"
+          leaveFrom="opacity-100"
+          leaveTo="opacity-0"
+        >
+          <div className="semiont-search-modal__backdrop" />
+        </TransitionChild>
+
+        <div className="semiont-search-modal__wrapper">
+          <div className="semiont-search-modal__centering semiont-search-modal__centering--center">
+            <TransitionChild
+              enter="ease-out duration-200"
+              enterFrom="opacity-0 scale-95"
+              enterTo="opacity-100 scale-100"
+              leave="ease-in duration-150"
+              leaveFrom="opacity-100 scale-100"
+              leaveTo="opacity-0 scale-95"
+            >
+              <DialogPanel className="semiont-search-modal__panel semiont-search-modal__panel--with-border semiont-search-modal__panel--gather">
+                <div className="semiont-search-modal__header">
+                  <DialogTitle className="semiont-search-modal__title">{stepTitle}</DialogTitle>
+                  <button onClick={onClose} className="semiont-search-modal__close-button" aria-label="Close">
+                    ✕
+                  </button>
+                </div>
+
+                {step === 'configure-gather' && (
+                  <ConfigureGatherStep
+                    defaults={gatherDefaults}
+                    onGather={handleGather}
+                    onCancel={onClose}
+                    translations={{
+                      intro: t.gatherIntro,
+                      includeContent: t.includeContent,
+                      includeSummary: t.includeSummary,
+                      depth: t.gatherDepth,
+                      maxResources: t.gatherMaxResources,
+                      cancel: t.cancel,
+                      gather: t.gatherButton,
+                    }}
+                  >
+                    {entityTypeOptions.length > 0 && (
+                      <div className="semiont-form__field semiont-form__entity-types">
+                        <label className="semiont-form__label">{t.excludeLabel}</label>
+                        <div className="semiont-form__entity-type-buttons">
+                          {entityTypeOptions.map((et) => {
+                            const isSelected = excludeEntityTypes.includes(et);
+                            return (
+                              <button
+                                key={et}
+                                type="button"
+                                className="semiont-form__entity-type-button"
+                                data-selected={isSelected}
+                                aria-pressed={isSelected}
+                                onClick={() => setExcludeEntityTypes(prev => prev.includes(et) ? prev.filter(x => x !== et) : [...prev, et])}
+                              >
+                                {et}
+                              </button>
+                            );
+                          })}
+                        </div>
+                      </div>
+                    )}
+                  </ConfigureGatherStep>
+                )}
+
+                {step === 'review' && (
+                  <>
+                    <GatherContextStep
+                      context={context}
+                      contextLoading={loading}
+                      contextError={error}
+                      translations={{
+                        title: '',
+                        loadingContext: t.loadingContext,
+                        failedContext: t.failedContext,
+                        search: '',
+                        generate: '',
+                        compose: '',
+                        resolutionStrategyLabel: '',
+                        sourceContextLabel: t.sourceContextLabel,
+                        connectionsLabel: t.connectionsLabel,
+                        citedByLabel: t.citedByLabel,
+                        userHintLabel: '',
+                        userHintPlaceholder: '',
+                      }}
+                    />
+                    <div className="semiont-modal__actions" style={{ paddingTop: '0.5rem' }}>
+                      <button
+                        type="button"
+                        onClick={() => setStep('configure-gather')}
+                        className="semiont-button--secondary semiont-button--flex"
+                      >
+                        ◀ {t.back}
+                      </button>
+                      <button
+                        type="button"
+                        onClick={() => setStep('configure-generation')}
+                        disabled={!context}
+                        className="semiont-button--primary semiont-button--flex"
+                      >
+                        {t.next} ▶
+                      </button>
+                    </div>
+                  </>
+                )}
+
+                {step === 'configure-generation' && context && (
+                  <ConfigureGenerationStep
+                    defaultTitle={defaultTitle}
+                    locale={locale}
+                    context={context}
+                    onBack={() => setStep('review')}
+                    onCancel={onClose}
+                    onGenerate={handleGenerate}
+                    translations={{
+                      resourceTitle: t.resourceTitle,
+                      resourceTitlePlaceholder: t.resourceTitlePlaceholder,
+                      additionalInstructions: t.additionalInstructions,
+                      additionalInstructionsPlaceholder: t.additionalInstructionsPlaceholder,
+                      language: t.language,
+                      languageHelp: t.languageHelp,
+                      creativity: t.creativity,
+                      creativityFocused: t.creativityFocused,
+                      creativityCreative: t.creativityCreative,
+                      maxLength: t.maxLength,
+                      maxLengthHelp: t.maxLengthHelp,
+                      cancel: t.cancel,
+                      back: t.back,
+                      generate: t.generate,
+                    }}
+                  />
+                )}
+              </DialogPanel>
+            </TransitionChild>
+          </div>
+        </div>
+      </Dialog>
+    </Transition>
+  );
+}