@semiont/react-ui 0.5.26 → 0.5.28

package/src/components/modals/ResourceSearchModal.tsx

@@ -1,224 +0,0 @@
-'use client';
-
-import { useState, useEffect, useRef } from 'react';
-import { readyValue } from '@semiont/sdk';
-import { Dialog, DialogPanel, DialogTitle, Transition, TransitionChild } from '@headlessui/react';
-import { map } from 'rxjs/operators';
-import { getResourceId, getPrimaryRepresentation } from '@semiont/core';
-import { createSearchPipeline } from '@semiont/sdk';
-import { useSemiont } from '../../session/SemiontProvider';
-import { useObservable } from '../../hooks/useObservable';
-import { useSearchAnnouncements } from '../../hooks/useSearchAnnouncements';
-
-import type { ResourceDescriptor } from '@semiont/core';
-
-type SearchResult = {
-  id: string;
-  name: string;
-  content?: string;
-  mediaType?: string;
-};
-
-const SEARCH_DEBOUNCE_MS = 300;
-const SEARCH_LIMIT = 50;
-
-function toSearchResult(resource: ResourceDescriptor & { content?: string }): SearchResult | null {
-  const id = getResourceId(resource);
-  if (!id) return null;
-  const primary = getPrimaryRepresentation(resource);
-  return {
-    id,
-    name: resource.name,
-    content: resource.content,
-    mediaType: primary?.mediaType,
-  };
-}
-
-interface ResourceSearchModalProps {
-  isOpen: boolean;
-  onClose: () => void;
-  onSelect: (resourceId: string) => void;
-  searchTerm?: string;
-  translations?: {
-    title?: string;
-    placeholder?: string;
-    searching?: string;
-    noResults?: string;
-    close?: string;
-  };
-}
-
-export function ResourceSearchModal({
-  isOpen,
-  onClose,
-  onSelect,
-  searchTerm = '',
-  translations = {}
-}: ResourceSearchModalProps) {
-  const { announceSearchResults, announceSearching, announceNavigation } = useSearchAnnouncements();
-  const semiont = useObservable(useSemiont().activeSession$)?.client;
-  // Pipeline factory captures `semiont` once via useState; if semiont is
-  // still loading at first render the captured value would be undefined.
-  // Route through a ref so the fetch closure reads the latest client.
-  const semiontRef = useRef(semiont);
-  semiontRef.current = semiont;
-
-  const t = {
-    title: translations.title || 'Search Resources',
-    placeholder: translations.placeholder || 'Search for resources...',
-    searching: translations.searching || 'Searching...',
-    noResults: translations.noResults || 'No documents found',
-    close: translations.close || '✕',
-  };
-
-  // ── Search pipeline ─────────────────────────────────────────────────────
-  const [pipeline] = useState(() =>
-    createSearchPipeline<SearchResult>(
-      (q) =>
-        semiontRef.current!.browse.resources({ search: q, limit: SEARCH_LIMIT }).pipe(
-          map((st) => {
-            const resources = readyValue(st);
-            if (resources === undefined) return undefined;
-            return resources
-              .map(toSearchResult)
-              .filter((r): r is SearchResult => r !== null);
-          }),
-        ),
-      { debounceMs: SEARCH_DEBOUNCE_MS, initialQuery: searchTerm },
-    ),
-  );
-  useEffect(() => () => pipeline.dispose(), [pipeline]);
-
-  const search = useObservable(pipeline.query$) ?? '';
-  const searchState = useObservable(pipeline.state$);
-  const results = searchState?.results ?? [];
-  const loading = searchState?.isSearching ?? false;
-
-  // Re-seed when modal re-opens with a different searchTerm prop. The
-  // initialQuery option only applies to the first construction; subsequent
-  // prop changes need an explicit setQuery.
-  useEffect(() => {
-    if (isOpen && searchTerm) {
-      pipeline.setQuery(searchTerm);
-    }
-  }, [isOpen, searchTerm, pipeline]);
-
-  // Accessibility announcements for search lifecycle.
-  useEffect(() => {
-    if (!search.trim()) return;
-    if (loading) {
-      announceSearching();
-    } else {
-      announceSearchResults(results.length, search);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [loading, results.length]);
-
-  const handleSelect = (resourceId: string, resourceName: string) => {
-    announceNavigation(resourceName, 'resource');
-    onSelect(resourceId);
-    onClose();
-  };
-
-  return (
-    <Transition appear show={isOpen}>
-      <Dialog as="div" className="semiont-search-modal semiont-search-modal--resource" onClose={onClose}>
-        {/* Backdrop */}
-        <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>
-
-        {/* Modal panel */}
-        <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">
-                <div className="semiont-search-modal__header">
-                  <DialogTitle className="semiont-search-modal__title">
-                    {t.title}
-                  </DialogTitle>
-                  <button
-                    onClick={onClose}
-                    className="semiont-search-modal__close-button"
-                    aria-label={t.close}
-                  >
-                    {t.close}
-                  </button>
-                </div>
-
-                <div className="semiont-search-modal__search-form">
-                  <input
-                    type="text"
-                    value={search}
-                    onChange={(e) => pipeline.setQuery(e.target.value)}
-                    placeholder={t.placeholder}
-                    className="semiont-search-modal__search-input"
-                    autoFocus
-                  />
-                </div>
-
-                <div className="semiont-search-modal__results">
-                  {loading && (
-                    <div className="semiont-search-modal__empty">
-                      {t.searching}
-                    </div>
-                  )}
-
-                  {!loading && results.length === 0 && search && (
-                    <div className="semiont-search-modal__empty">
-                      {t.noResults}
-                    </div>
-                  )}
-
-                  {!loading && results.length > 0 && (
-                    <div className="semiont-search-modal__resource-list">
-                      {results.map((resource) => {
-                        const isImage = resource.mediaType?.startsWith('image/');
-
-                        return (
-                          <div
-                            key={resource.id}
-                            className="semiont-search-modal__resource-item"
-                            onClick={() => handleSelect(resource.id, resource.name)}
-                          >
-                            <h4 className="semiont-search-modal__resource-name">
-                              {resource.name}
-                            </h4>
-                            {resource.content && !isImage && (
-                              <p className="semiont-search-modal__resource-description">
-                                {resource.content.substring(0, 150)}...
-                              </p>
-                            )}
-                            {isImage && (
-                              <p className="semiont-search-modal__resource-media-type">
-                                {resource.mediaType}
-                              </p>
-                            )}
-                          </div>
-                        );
-                      })}
-                    </div>
-                  )}
-                </div>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
-        </div>
-      </Dialog>
-    </Transition>
-  );
-}

package/src/components/modals/__tests__/ResourceSearchModal.test.tsx

@@ -1,159 +0,0 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { asStates } from '../../../__tests__/test-client';
-import { screen, fireEvent, waitFor } from '@testing-library/react';
-import { BehaviorSubject } from 'rxjs';
-import { renderWithProviders } from '../../../test-utils';
-import '@testing-library/jest-dom';
-import { ResourceSearchModal } from '../ResourceSearchModal';
-
-// Mock HeadlessUI to avoid jsdom OOM issues
-vi.mock('@headlessui/react', () => ({
-  Dialog: ({ children, onClose, ...props }: any) => <div role="dialog" {...props}>{typeof children === 'function' ? children({ open: true }) : children}</div>,
-  DialogPanel: ({ children, ...props }: any) => <div {...props}>{children}</div>,
-  DialogTitle: ({ children, ...props }: any) => <h2 {...props}>{children}</h2>,
-  Transition: ({ show, children }: any) => show ? <>{children}</> : null,
-  TransitionChild: ({ children }: any) => <>{children}</>,
-}));
-
-// Mock the http-transport Observable surface.
-// The session-based useSemiont path: useObservable(useSemiont().activeSession$)?.client
-// We mock useSemiont to return a stable browser whose activeSession$ emits a
-// session-shaped object that carries the mock client.
-const browseResourcesSubject = new BehaviorSubject<any[] | undefined>(undefined);
-const browseResourcesMock = vi.fn(() => asStates(browseResourcesSubject.asObservable()));
-const stableMockClient = { browse: { resources: browseResourcesMock } };
-const stableMockSession = { client: stableMockClient };
-const stableActiveSession$ = new BehaviorSubject<any>(stableMockSession);
-const stableMockBrowser = { activeSession$: stableActiveSession$ };
-
-vi.mock('../../../session/SemiontProvider', async () => {
-  const actual = await vi.importActual<typeof import('../../../session/SemiontProvider')>(
-    '../../../session/SemiontProvider'
-  );
-  return {
-    ...actual,
-    useSemiont: () => stableMockBrowser,
-  };
-});
-
-// Mock search announcements
-vi.mock('../../../hooks/useSearchAnnouncements', () => ({
-  useSearchAnnouncements: vi.fn(() => ({
-    announceSearchResults: vi.fn(),
-    announceSearching: vi.fn(),
-    announceNavigation: vi.fn(),
-  })),
-}));
-
-function setBrowseResults(resources: any[] | undefined) {
-  browseResourcesSubject.next(resources);
-}
-
-describe('ResourceSearchModal', () => {
-  const defaultProps = {
-    isOpen: true,
-    onClose: vi.fn(),
-    onSelect: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-    browseResourcesSubject.next(undefined);
-  });
-
-  const buildResource = (id: string, name: string, mediaType = 'text/plain', content?: string) => ({
-    '@context': 'https://www.w3.org/ns/anno.jsonld',
-    '@id': id,
-    name,
-    content,
-    representations: [{ mediaType, isPrimary: true }],
-  });
-
-  it('renders modal with title when open', () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
-    expect(screen.getByText('Search Resources')).toBeInTheDocument();
-  });
-
-  it('does not render when closed', () => {
-    renderWithProviders(
-      <ResourceSearchModal {...defaultProps} isOpen={false} />
-    );
-    expect(screen.queryByText('Search Resources')).not.toBeInTheDocument();
-  });
-
-  it('renders search input with placeholder', () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} />);
-    expect(screen.getByPlaceholderText('Search for resources...')).toBeInTheDocument();
-  });
-
-  it('uses custom translations', () => {
-    renderWithProviders(
-      <ResourceSearchModal
-        {...defaultProps}
-        translations={{ title: 'Find Docs', placeholder: 'Type here...' }}
-      />
-    );
-    expect(screen.getByText('Find Docs')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Type here...')).toBeInTheDocument();
-  });
-
-  it('shows loading state while the Observable has not emitted', async () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="something" />);
-    await waitFor(() => expect(screen.getByText('Searching...')).toBeInTheDocument(), { timeout: 1000 });
-  });
-
-  it('shows no results message when search returns an empty array', async () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="xyz" />);
-    setBrowseResults([]);
-    await waitFor(() => expect(screen.getByText('No documents found')).toBeInTheDocument(), { timeout: 1000 });
-  });
-
-  it('renders search results', async () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="test" />);
-    setBrowseResults([buildResource('res-1', 'Test Document', 'text/plain', 'Some content here')]);
-    await waitFor(() => expect(screen.getByText('Test Document')).toBeInTheDocument(), { timeout: 1000 });
-  });
-
-  it('calls onSelect and onClose when a result is clicked', async () => {
-    const onSelect = vi.fn();
-    const onClose = vi.fn();
-
-    renderWithProviders(
-      <ResourceSearchModal
-        {...defaultProps}
-        searchTerm="test"
-        onSelect={onSelect}
-        onClose={onClose}
-      />
-    );
-    setBrowseResults([buildResource('res-1', 'Test Document', 'text/plain', 'Some content')]);
-    await waitFor(() => expect(screen.getByText('Test Document')).toBeInTheDocument(), { timeout: 1000 });
-
-    fireEvent.click(screen.getByText('Test Document'));
-    expect(onSelect).toHaveBeenCalledWith('res-1');
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('shows media type for image results', async () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="photo" />);
-    setBrowseResults([buildResource('res-img', 'Photo', 'image/png')]);
-    await waitFor(() => expect(screen.getByText('image/png')).toBeInTheDocument(), { timeout: 1000 });
-  });
-
-  it('calls onClose when close button is clicked', () => {
-    const onClose = vi.fn();
-    renderWithProviders(
-      <ResourceSearchModal {...defaultProps} onClose={onClose} />
-    );
-    fireEvent.click(screen.getByLabelText('✕'));
-    expect(onClose).toHaveBeenCalled();
-  });
-
-  it('passes the search term through to browse.resources', async () => {
-    renderWithProviders(<ResourceSearchModal {...defaultProps} searchTerm="hello" />);
-    await waitFor(
-      () => expect(browseResourcesMock).toHaveBeenCalledWith({ search: 'hello', limit: 50 }),
-      { timeout: 1000 }
-    );
-  });
-});

package/src/integrations/tailwind-plugin.cjs

@@ -1,224 +0,0 @@
-/**
- * Tailwind CSS Plugin for Semiont Components
- *
- * This plugin provides utilities for styling Semiont components
- * using Tailwind CSS classes while respecting the data-attribute architecture.
- */
-
-const plugin = require('tailwindcss/plugin');
-const { tokens } = require('../design-tokens');
-
-module.exports = plugin(function({ addBase, addComponents, addUtilities, theme }) {
-  // Add base styles for CSS variables
-  addBase({
-    ':root': Object.entries(tokens.colors.primary).reduce((acc, [key, value]) => ({
-      ...acc,
-      [`--semiont-color-primary-${key}`]: value
-    }), {}),
-  });
-
-  // Add component styles
-  addComponents({
-    // Button component styles
-    '.semiont-button': {
-      '@apply relative inline-flex items-center justify-center': {},
-      '@apply font-medium transition-all duration-200': {},
-      '@apply focus:outline-hidden focus:ring-2 focus:ring-offset-2': {},
-      '@apply disabled:opacity-50 disabled:cursor-not-allowed': {},
-    },
-
-    // Button variants
-    '.semiont-button[data-variant="primary"]': {
-      '@apply bg-blue-500 text-white hover:bg-blue-600 active:bg-blue-700': {},
-      '@apply focus:ring-blue-500': {},
-    },
-    '.semiont-button[data-variant="secondary"]': {
-      '@apply bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300': {},
-      '@apply focus:ring-gray-500': {},
-    },
-    '.semiont-button[data-variant="tertiary"]': {
-      '@apply bg-transparent text-blue-600 ring-1 ring-inset ring-blue-200': {},
-      '@apply hover:bg-blue-50 hover:ring-blue-300 active:bg-blue-100': {},
-      '@apply focus:ring-blue-500': {},
-    },
-    '.semiont-button[data-variant="danger"]': {
-      '@apply bg-red-500 text-white hover:bg-red-600 active:bg-red-700': {},
-      '@apply focus:ring-red-500': {},
-    },
-    '.semiont-button[data-variant="warning"]': {
-      '@apply bg-amber-500 text-gray-900 hover:bg-amber-600 active:bg-amber-700': {},
-      '@apply focus:ring-amber-500': {},
-    },
-    '.semiont-button[data-variant="ghost"]': {
-      '@apply bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200': {},
-      '@apply focus:ring-gray-500': {},
-    },
-
-    // Button sizes
-    '.semiont-button[data-size="xs"]': {
-      '@apply px-2 py-1 text-xs rounded-sm min-h-[1.75rem]': {},
-    },
-    '.semiont-button[data-size="sm"]': {
-      '@apply px-3 py-1.5 text-sm rounded-sm min-h-[2rem]': {},
-    },
-    '.semiont-button[data-size="md"]': {
-      '@apply px-4 py-2 text-base rounded-md min-h-[2.5rem]': {},
-    },
-    '.semiont-button[data-size="lg"]': {
-      '@apply px-6 py-2.5 text-lg rounded-md min-h-[3rem]': {},
-    },
-    '.semiont-button[data-size="xl"]': {
-      '@apply px-8 py-3 text-xl rounded-lg min-h-[3.5rem]': {},
-    },
-
-    // Icon-only buttons
-    '.semiont-button[data-icon-only="true"][data-size="xs"]': {
-      '@apply p-1 w-7 h-7': {},
-    },
-    '.semiont-button[data-icon-only="true"][data-size="sm"]': {
-      '@apply p-1.5 w-8 h-8': {},
-    },
-    '.semiont-button[data-icon-only="true"][data-size="md"]': {
-      '@apply p-2 w-10 h-10': {},
-    },
-    '.semiont-button[data-icon-only="true"][data-size="lg"]': {
-      '@apply p-2.5 w-12 h-12': {},
-    },
-    '.semiont-button[data-icon-only="true"][data-size="xl"]': {
-      '@apply p-3 w-14 h-14': {},
-    },
-
-    // Full width
-    '.semiont-button[data-full-width="true"]': {
-      '@apply w-full': {},
-    },
-
-    // Loading state
-    '.semiont-button[data-loading="true"]': {
-      '@apply pointer-events-none': {},
-    },
-    '.semiont-button[data-loading="true"] .semiont-button-content': {
-      '@apply invisible': {},
-    },
-    '.semiont-button[data-loading="true"] .semiont-button-icon': {
-      '@apply invisible': {},
-    },
-
-    // Button spinner
-    '.semiont-button-spinner': {
-      '@apply absolute inset-0 flex items-center justify-center': {},
-    },
-    '.semiont-spinner-svg': {
-      '@apply animate-spin w-5 h-5': {},
-    },
-
-    // Button content and icons
-    '.semiont-button-content': {
-      '@apply inline-flex items-center': {},
-    },
-    '.semiont-button-icon': {
-      '@apply inline-flex items-center justify-center flex-shrink-0': {},
-    },
-    '.semiont-button-icon-left': {
-      '@apply mr-2': {},
-    },
-    '.semiont-button-icon-right': {
-      '@apply ml-2': {},
-    },
-
-    // Button group
-    '.semiont-button-group': {
-      '@apply flex': {},
-    },
-    '.semiont-button-group[data-orientation="horizontal"]': {
-      '@apply flex-row': {},
-    },
-    '.semiont-button-group[data-orientation="vertical"]': {
-      '@apply flex-col': {},
-    },
-
-    // Button group spacing
-    '.semiont-button-group[data-spacing="xs"]': {
-      '@apply gap-1': {},
-    },
-    '.semiont-button-group[data-spacing="sm"]': {
-      '@apply gap-2': {},
-    },
-    '.semiont-button-group[data-spacing="md"]': {
-      '@apply gap-4': {},
-    },
-    '.semiont-button-group[data-spacing="lg"]': {
-      '@apply gap-6': {},
-    },
-
-    // Attached button groups
-    '.semiont-button-group[data-attached="true"]': {
-      '@apply gap-0': {},
-    },
-    '.semiont-button-group[data-attached="true"][data-orientation="horizontal"] .semiont-button:not(:first-child)': {
-      '@apply rounded-l-none -ml-px': {},
-    },
-    '.semiont-button-group[data-attached="true"][data-orientation="horizontal"] .semiont-button:not(:last-child)': {
-      '@apply rounded-r-none': {},
-    },
-    '.semiont-button-group[data-attached="true"][data-orientation="vertical"] .semiont-button:not(:first-child)': {
-      '@apply rounded-t-none -mt-px': {},
-    },
-    '.semiont-button-group[data-attached="true"][data-orientation="vertical"] .semiont-button:not(:last-child)': {
-      '@apply rounded-b-none': {},
-    },
-  });
-
-  // Add utility classes for custom data attributes
-  addUtilities({
-    '.semiont-variant-primary': {
-      '&[data-variant="primary"]': {
-        '@apply bg-blue-500 text-white': {},
-      },
-    },
-    '.semiont-variant-secondary': {
-      '&[data-variant="secondary"]': {
-        '@apply bg-gray-100 text-gray-900': {},
-      },
-    },
-    '.semiont-size-sm': {
-      '&[data-size="sm"]': {
-        '@apply px-3 py-1.5 text-sm': {},
-      },
-    },
-    '.semiont-size-md': {
-      '&[data-size="md"]': {
-        '@apply px-4 py-2 text-base': {},
-      },
-    },
-    '.semiont-size-lg': {
-      '&[data-size="lg"]': {
-        '@apply px-6 py-2.5 text-lg': {},
-      },
-    },
-  });
-}, {
-  // Plugin configuration
-  theme: {
-    extend: {
-      colors: {
-        semiont: {
-          primary: tokens.colors.primary,
-          secondary: tokens.colors.secondary,
-          semantic: tokens.colors.semantic,
-          neutral: tokens.colors.neutral,
-        },
-      },
-      spacing: tokens.spacing,
-      fontSize: tokens.typography.fontSize,
-      borderRadius: tokens.borderRadius,
-      transitionDuration: tokens.transitions.duration,
-    },
-  },
-});
-
-// Export for CommonJS
-module.exports.semiontPlugin = module.exports;
-
-// Export for ESM
-module.exports.default = module.exports;