@semiont/react-ui 0.3.8 → 0.4.0

package/dist/test-utils.d.mts

@@ -2,8 +2,8 @@ import { ReactElement } from 'react';
 import { RenderOptions, RenderResult } from '@testing-library/react';
 export * from '@testing-library/react';
 import { QueryClient } from '@tanstack/react-query';
-import { T as TranslationManager, S as SessionManager, O as OpenResourcesManager } from './EventBusContext-CLnb2LmB.mjs';
-export { r as resetEventBusForTesting } from './EventBusContext-CLnb2LmB.mjs';
+import { T as TranslationManager, S as SessionManager, O as OpenResourcesManager } from './EventBusContext-DUIMowqQ.mjs';
+export { r as resetEventBusForTesting } from './EventBusContext-DUIMowqQ.mjs';
 import { EventBus } from '@semiont/core';
 export { vi } from 'vitest';
 import 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@semiont/react-ui",
-  "version": "0.3.8",
+  "version": "0.4.0",
   "description": "React components and hooks for Semiont",
   "main": "./dist/index.mjs",
   "types": "./dist/index.d.mts",

package/src/components/modals/ConfigureGenerationStep.tsx

@@ -6,6 +6,7 @@ import { LOCALES } from '@semiont/api-client';
 
 export interface GenerationConfig {
   title: string;
+  storagePath: string;
   prompt?: string;
   language: string;
   temperature: number;
@@ -48,6 +49,7 @@ export function ConfigureGenerationStep({
   translations: t,
 }: 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);
@@ -58,6 +60,7 @@ export function ConfigureGenerationStep({
     const trimmedPrompt = prompt.trim();
     onGenerate({
       title,
+      storagePath: `file://${storagePath}`,
       ...(trimmedPrompt ? { prompt: trimmedPrompt } : {}),
       language,
       temperature,
@@ -84,6 +87,25 @@ export function ConfigureGenerationStep({
         />
       </div>
 
+      {/* Storage URI */}
+      <div className="semiont-form__field">
+        <label htmlFor="wizard-storagePath" className="semiont-form__label">
+          Save location
+        </label>
+        <div className="semiont-input-addon">
+          <span className="semiont-input-addon__prefix">file://</span>
+          <input
+            id="wizard-storagePath"
+            type="text"
+            value={storagePath}
+            onChange={(e) => setStoragePath(e.target.value)}
+            required
+            className="semiont-input semiont-input--addon"
+            placeholder="generated/my-resource.md"
+          />
+        </div>
+      </div>
+
       {/* Additional Instructions */}
       <div className="semiont-form__field">
         <label htmlFor="wizard-prompt" className="semiont-form__label">

package/src/components/navigation/SortableResourceTab.tsx

@@ -46,6 +46,9 @@ export function SortableResourceTab({
 
   const iconEmoji = getResourceIcon(resource.mediaType);
   const isCurrentlyDragging = isSortableDragging || isDragging;
+  const tooltipText = resource.storageUri
+    ? resource.storageUri.replace(/^file:\/\//, '')
+    : resource.name;
 
   // Handle keyboard shortcuts for reordering (Alt + Up/Down)
   const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
@@ -76,7 +79,7 @@ export function SortableResourceTab({
       <LinkComponent
         href={href}
         className="semiont-resource-tab__link"
-        title={resource.name}
+        title={tooltipText}
       >
         <span className="semiont-resource-tab__icon" aria-hidden="true">
           {iconEmoji}

package/src/features/resource-compose/__tests__/ResourceComposePage.test.tsx

@@ -324,6 +324,10 @@ describe('ResourceComposePage', () => {
       const nameInput = screen.getByLabelText('Resource Name');
       fireEvent.change(nameInput, { target: { value: 'Test Resource' } });
 
+      // Fill in save location
+      const storagePathInput = screen.getByLabelText('Save location');
+      fireEvent.change(storagePathInput, { target: { value: 'docs/test-resource.md' } });
+
       // Fill in content
       const editor = screen.getByTestId('code-editor');
       fireEvent.change(editor, { target: { value: 'Test content' } });
@@ -336,15 +340,11 @@ describe('ResourceComposePage', () => {
         expect(onSaveResource).toHaveBeenCalledWith({
           mode: 'new',
           name: 'Test Resource',
+          storageUri: 'file://docs/test-resource.md',
           content: 'Test content',
-          file: undefined,
           format: 'text/markdown',
-          charset: undefined,
           entityTypes: [],
           language: 'en',
-          archiveOriginal: undefined,
-          referenceId: undefined,
-          sourceDocumentId: undefined,
         });
       });
     });
@@ -358,6 +358,10 @@ describe('ResourceComposePage', () => {
       const nameInput = screen.getByLabelText('Resource Name');
       fireEvent.change(nameInput, { target: { value: 'Test Resource' } });
 
+      // Fill in save location
+      const storagePathInput = screen.getByLabelText('Save location');
+      fireEvent.change(storagePathInput, { target: { value: 'docs/test-resource.md' } });
+
       // Select entity type
       const documentButton = screen.getByRole('button', { name: /Document entity type/ });
       fireEvent.click(documentButton);
@@ -402,6 +406,9 @@ describe('ResourceComposePage', () => {
       const nameInput = screen.getByLabelText('Resource Name');
       fireEvent.change(nameInput, { target: { value: 'Test Resource' } });
 
+      const storagePathInput = screen.getByLabelText('Save location');
+      fireEvent.change(storagePathInput, { target: { value: 'docs/test-resource.md' } });
+
       const submitButton = screen.getByRole('button', { name: 'Create Resource' });
       fireEvent.click(submitButton);
 

package/src/features/resource-compose/components/ResourceComposePage.tsx

@@ -96,6 +96,7 @@ export interface ResourceComposePageProps {
 export interface SaveResourceParams {
   mode: 'new' | 'clone' | 'reference';
   name: string;
+  storageUri: string;
   content?: string;
   file?: File;
   format?: string;
@@ -150,6 +151,9 @@ export function ResourceComposePage({
   // Character encoding selection - default to UTF-8 (empty string means use default)
   const [selectedCharset, setSelectedCharset] = useState<string>('');
 
+  // Working-tree path (bare, no protocol prefix) — converted to file:// URI on submit
+  const [storagePath, setStoragePath] = useState('');
+
   // Archive original checkbox (for clones only)
   const [archiveOriginal, setArchiveOriginal] = useState(true);
 
@@ -216,6 +220,7 @@ export function ResourceComposePage({
       const params: SaveResourceParams = {
         mode,
         name: newResourceName,
+        storageUri: `file://${storagePath}`,
         content: newResourceContent,
         format: uploadedFile ? fileMimeType : selectedFormat,
         entityTypes: selectedEntityTypes,
@@ -352,6 +357,26 @@ export function ResourceComposePage({
             />
           </div>
 
+          {/* Storage URI */}
+          <div className="semiont-form__field">
+            <label htmlFor="storagePath" className="semiont-form__label">
+              Save location
+            </label>
+            <div className="semiont-input-addon">
+              <span className="semiont-input-addon__prefix">file://</span>
+              <input
+                id="storagePath"
+                type="text"
+                value={storagePath}
+                onChange={(e) => setStoragePath(e.target.value)}
+                placeholder="docs/my-resource.md"
+                required
+                className="semiont-input semiont-input--addon"
+                disabled={isCreating}
+              />
+            </div>
+          </div>
+
           {/* Entity Types Selection */}
           {(!isReferenceCompletion || selectedEntityTypes.length === 0) && (
             <div className="semiont-form__field semiont-form__entity-types">

package/src/features/resource-viewer/components/ResourceViewerPage.tsx

@@ -195,6 +195,7 @@ export function ResourceViewerPage({
   const handleWizardGenerateSubmit = useCallback((referenceId: string, config: GenerationConfig) => {
     onGenerateDocument(referenceId, {
       title: config.title,
+      storageUri: config.storagePath,
       prompt: config.prompt,
       language: config.language,
       temperature: config.temperature,
@@ -253,7 +254,7 @@ export function ResourceViewerPage({
   useEffect(() => {
     if (resource && rUri) {
       const mediaType = getPrimaryMediaType(resource);
-      addResource(rUri, resource.name, mediaType || undefined);
+      addResource(rUri, resource.name, mediaType || undefined, resource.storageUri);
       if (typeof localStorage !== 'undefined') {
         localStorage.setItem('lastViewedDocumentId', rUri);
       }

package/src/styles/core/inputs.css

@@ -105,6 +105,72 @@
   font-size: var(--semiont-text-base);
 }
 
+/* Input with inline prefix (e.g. "file://") */
+.semiont-input-addon {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid var(--semiont-color-gray-300);
+  border-radius: var(--semiont-radius-md);
+  overflow: hidden;
+  background-color: var(--semiont-bg-primary);
+}
+
+[data-theme="dark"] .semiont-input-addon {
+  border-color: var(--semiont-color-gray-700);
+}
+
+.semiont-input-addon:focus-within {
+  outline: 2px solid var(--semiont-color-primary-500);
+  outline-offset: -1px;
+  border-color: var(--semiont-color-primary-500);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+[data-theme="dark"] .semiont-input-addon:focus-within {
+  outline-color: var(--semiont-color-primary-400);
+  border-color: var(--semiont-color-primary-400);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+}
+
+.semiont-input-addon__prefix {
+  display: flex;
+  align-items: center;
+  padding: 0.5rem 0.5rem 0.5rem 0.75rem;
+  font-size: var(--semiont-text-sm);
+  font-family: var(--semiont-font-mono, monospace);
+  color: var(--semiont-text-tertiary);
+  background-color: var(--semiont-color-gray-50);
+  border-right: 1px solid var(--semiont-color-gray-300);
+  user-select: none;
+  white-space: nowrap;
+}
+
+[data-theme="dark"] .semiont-input-addon__prefix {
+  background-color: var(--semiont-color-gray-800);
+  border-right-color: var(--semiont-color-gray-700);
+  color: var(--semiont-text-tertiary);
+}
+
+.semiont-input--addon {
+  border: none;
+  border-radius: 0;
+  outline: none;
+  box-shadow: none;
+  flex: 1;
+  min-width: 0;
+}
+
+[data-theme="dark"] .semiont-input--addon {
+  border: none;
+}
+
+.semiont-input--addon:focus-visible,
+.semiont-input--addon:focus {
+  outline: none;
+  border: none;
+  box-shadow: none;
+}
+
 /* Placeholder */
 .semiont-input::placeholder {
   color: var(--semiont-text-tertiary);