Add responsive schema sidebar with mobile drawer support

bobsingor · bobsingor · commit c2ae62e02564 · 2025-12-07T22:51:29.000+02:00
Introduces a new SchemaSidebar component that adapts between a traditional sidebar and a draggable bottom drawer for mobile/small containers. Adds use-ui-container hooks and context for React, Svelte, and Vue to provide access to the UI root container, enabling responsive behavior and portaling. Updates imports and usage throughout the snippet app, removes the old SchemaPanel, and tweaks sidebar/tab UI for improved usability.
diff --git a/packages/plugin-ui/src/shared/hooks/index.ts b/packages/plugin-ui/src/shared/hooks/index.ts
@@ -1,4 +1,5 @@
 export * from './use-ui';
+export * from './use-ui-container';
 export * from './use-register-anchor';
 export * from './use-item-renderer';
 export * from './use-schema-renderer';
diff --git a/packages/plugin-ui/src/shared/hooks/use-ui-container.ts b/packages/plugin-ui/src/shared/hooks/use-ui-container.ts
@@ -0,0 +1,48 @@
+import { createContext, useContext, RefObject } from '@framework';
+
+export interface UIContainerContextValue {
+  /** Reference to the UIRoot container element */
+  containerRef: RefObject<HTMLDivElement>;
+  /** Get the container element (may be null if not mounted) */
+  getContainer: () => HTMLDivElement | null;
+}
+
+export const UIContainerContext = createContext<UIContainerContextValue | null>(null);
+
+/**
+ * Hook to access the UI container element.
+ *
+ * This provides access to the UIRoot container for:
+ * - Container query based responsiveness
+ * - Portaling elements to the root
+ * - Measuring container dimensions
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { containerRef, getContainer } = useUIContainer();
+ *
+ *   // Use containerRef for ResizeObserver
+ *   useEffect(() => {
+ *     const container = getContainer();
+ *     if (!container) return;
+ *
+ *     const observer = new ResizeObserver(() => {
+ *       console.log('Container width:', container.clientWidth);
+ *     });
+ *     observer.observe(container);
+ *     return () => observer.disconnect();
+ *   }, [getContainer]);
+ *
+ *   // Or portal to the container
+ *   return createPortal(<Modal />, getContainer()!);
+ * }
+ * ```
+ */
+export function useUIContainer(): UIContainerContextValue {
+  const context = useContext(UIContainerContext);
+  if (!context) {
+    throw new Error('useUIContainer must be used within a UIProvider');
+  }
+  return context;
+}
diff --git a/packages/plugin-ui/src/shared/root.tsx b/packages/plugin-ui/src/shared/root.tsx
@@ -1,5 +1,6 @@
 import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';
 import { useUICapability, useUIPlugin } from './hooks/use-ui';
+import { UIContainerContext, UIContainerContextValue } from './hooks/use-ui-container';
 import {
   useState,
   useEffect,
@@ -39,15 +40,26 @@ export function UIRoot({ children, style, ...restProps }: UIRootProps) {
   const styleElRef = useRef<HTMLStyleElement | null>(null);
   const styleTargetRef = useRef<HTMLElement | ShadowRoot | null>(null);
   const previousElementRef = useRef<HTMLDivElement | null>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
+
+  // Create container context value (memoized to prevent unnecessary re-renders)
+  const containerContextValue = useMemo<UIContainerContextValue>(
+    () => ({
+      containerRef,
+      getContainer: () => containerRef.current,
+    }),
+    [],
+  );
 
   // Callback ref that handles style injection when element mounts
   // Handles React Strict Mode by tracking previous element
   const rootRefCallback = useCallback(
     (element: HTMLDivElement | null) => {
       const previousElement = previousElementRef.current;
 
-      // Update ref
+      // Update refs
       previousElementRef.current = element;
+      (containerRef as any).current = element;
 
       // If element is null (unmount), don't do anything yet
       // React Strict Mode will remount, so we'll handle cleanup in useEffect
@@ -147,8 +159,10 @@ export function UIRoot({ children, style, ...restProps }: UIRootProps) {
   };
 
   return (
-    <div ref={rootRefCallback} {...rootProps} {...restProps} style={combinedStyle}>
-      {children}
-    </div>
+    <UIContainerContext.Provider value={containerContextValue}>
+      <div ref={rootRefCallback} {...rootProps} {...restProps} style={combinedStyle}>
+        {children}
+      </div>
+    </UIContainerContext.Provider>
   );
 }
diff --git a/packages/plugin-ui/src/svelte/hooks/index.ts b/packages/plugin-ui/src/svelte/hooks/index.ts
@@ -1,4 +1,5 @@
 export * from './use-ui.svelte';
+export * from './use-ui-container.svelte';
 export * from './use-register-anchor.svelte';
 export * from './use-item-renderer.svelte';
 export * from './use-schema-renderer.svelte';
diff --git a/packages/plugin-ui/src/svelte/hooks/use-ui-container.svelte.ts b/packages/plugin-ui/src/svelte/hooks/use-ui-container.svelte.ts
@@ -0,0 +1,55 @@
+import { getContext, setContext } from 'svelte';
+
+export interface UIContainerContextValue {
+  /** Get the container element (may be null if not mounted) */
+  getContainer: () => HTMLDivElement | null;
+}
+
+const UI_CONTAINER_KEY = Symbol('ui-container');
+
+/**
+ * Set up the container context (called by UIRoot)
+ */
+export function setUIContainerContext(value: UIContainerContextValue): void {
+  setContext(UI_CONTAINER_KEY, value);
+}
+
+/**
+ * Hook to access the UI container element.
+ *
+ * This provides access to the UIRoot container for:
+ * - Container query based responsiveness
+ * - Portaling elements to the root
+ * - Measuring container dimensions
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import { useUIContainer } from '@embedpdf/plugin-ui/svelte';
+ *   import { onMount, onDestroy } from 'svelte';
+ *
+ *   const { getContainer } = useUIContainer();
+ *
+ *   let observer;
+ *
+ *   onMount(() => {
+ *     const container = getContainer();
+ *     if (!container) return;
+ *
+ *     observer = new ResizeObserver(() => {
+ *       console.log('Container width:', container.clientWidth);
+ *     });
+ *     observer.observe(container);
+ *   });
+ *
+ *   onDestroy(() => observer?.disconnect());
+ * </script>
+ * ```
+ */
+export function useUIContainer(): UIContainerContextValue {
+  const context = getContext<UIContainerContextValue>(UI_CONTAINER_KEY);
+  if (!context) {
+    throw new Error('useUIContainer must be used within a UIProvider');
+  }
+  return context;
+}
diff --git a/packages/plugin-ui/src/svelte/root.svelte b/packages/plugin-ui/src/svelte/root.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';
   import { useUIPlugin, useUICapability } from './hooks/use-ui.svelte';
+  import { setUIContainerContext } from './hooks/use-ui-container.svelte';
   import type { Snippet } from 'svelte';
   import type { HTMLAttributes } from 'svelte/elements';
 
@@ -18,6 +19,11 @@
   let styleEl: HTMLStyleElement | null = null;
   let styleTarget: HTMLElement | ShadowRoot | null = null;
 
+  // Provide container context for child components
+  setUIContainerContext({
+    getContainer: () => rootElement,
+  });
+
   function getStyleTarget(element: HTMLElement): HTMLElement | ShadowRoot {
     const root = element.getRootNode();
     if (root instanceof ShadowRoot) {
diff --git a/packages/plugin-ui/src/vue/hooks/index.ts b/packages/plugin-ui/src/vue/hooks/index.ts
@@ -1,4 +1,5 @@
 export * from './use-ui';
+export * from './use-ui-container';
 export * from './use-register-anchor';
 export * from './use-item-renderer';
 export * from './use-schema-renderer';
diff --git a/packages/plugin-ui/src/vue/hooks/use-ui-container.ts b/packages/plugin-ui/src/vue/hooks/use-ui-container.ts
@@ -0,0 +1,48 @@
+import { inject, type Ref, type InjectionKey } from 'vue';
+
+export interface UIContainerContextValue {
+  /** Reference to the UIRoot container element */
+  containerRef: Ref<HTMLDivElement | null>;
+  /** Get the container element (may be null if not mounted) */
+  getContainer: () => HTMLDivElement | null;
+}
+
+export const UI_CONTAINER_KEY: InjectionKey<UIContainerContextValue> = Symbol('ui-container');
+
+/**
+ * Hook to access the UI container element.
+ *
+ * This provides access to the UIRoot container for:
+ * - Container query based responsiveness
+ * - Portaling elements to the root
+ * - Measuring container dimensions
+ *
+ * @example
+ * ```vue
+ * <script setup>
+ * import { useUIContainer } from '@embedpdf/plugin-ui/vue';
+ * import { onMounted, onUnmounted } from 'vue';
+ *
+ * const { containerRef, getContainer } = useUIContainer();
+ *
+ * onMounted(() => {
+ *   const container = getContainer();
+ *   if (!container) return;
+ *
+ *   const observer = new ResizeObserver(() => {
+ *     console.log('Container width:', container.clientWidth);
+ *   });
+ *   observer.observe(container);
+ *
+ *   onUnmounted(() => observer.disconnect());
+ * });
+ * </script>
+ * ```
+ */
+export function useUIContainer(): UIContainerContextValue {
+  const context = inject(UI_CONTAINER_KEY);
+  if (!context) {
+    throw new Error('useUIContainer must be used within a UIProvider');
+  }
+  return context;
+}
diff --git a/packages/plugin-ui/src/vue/root.vue b/packages/plugin-ui/src/vue/root.vue
@@ -9,9 +9,10 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, onMounted, onUnmounted, watch, useAttrs } from 'vue';
+import { ref, computed, onMounted, onUnmounted, watch, useAttrs, provide } from 'vue';
 import { UI_ATTRIBUTES, UI_SELECTORS } from '@embedpdf/plugin-ui';
 import { useUIPlugin, useUICapability } from './hooks/use-ui';
+import { UI_CONTAINER_KEY, type UIContainerContextValue } from './hooks/use-ui-container';
 
 // Disable automatic attribute inheritance since we handle it manually
 defineOptions({
@@ -26,6 +27,13 @@ const { provides } = useUICapability();
 const disabledCategories = ref<string[]>([]);
 const rootRef = ref<HTMLDivElement | null>(null);
 
+// Provide container context for child components
+const containerContext: UIContainerContextValue = {
+  containerRef: rootRef,
+  getContainer: () => rootRef.value,
+};
+provide(UI_CONTAINER_KEY, containerContext);
+
 let styleEl: HTMLStyleElement | null = null;
 let styleTarget: HTMLElement | ShadowRoot | null = null;
 
diff --git a/snippet/src/components/app.tsx b/snippet/src/components/app.tsx
@@ -35,23 +35,6 @@ import {
 } from '@embedpdf/plugin-document-manager/preact';
 import { CommandsPluginPackage } from '@embedpdf/plugin-commands/preact';
 import { I18nPluginPackage } from '@embedpdf/plugin-i18n/preact';
-import {
-  commands,
-  viewerUISchema,
-  englishTranslations,
-  paramResolvers,
-  dutchTranslations,
-  germanTranslations,
-  frenchTranslations,
-} from '../config';
-import { SchemaToolbar } from '../ui/schema-toolbar';
-import { SchemaPanel } from '../ui/schema-panel';
-import { SchemaMenu } from '../ui/schema-menu';
-import { SchemaModal } from '../ui/schema-modal';
-// Custom components for schema-driven UI
-import { ThumbnailsSidebar } from './thumbnails-sidebar';
-import { SearchSidebar } from './search-sidebar';
-import { OutlineSidebar } from './outline-sidebar';
 import {
   MarqueeZoom,
   ZoomMode,
@@ -69,7 +52,6 @@ import {
 } from '@embedpdf/plugin-tiling/preact';
 import { ThumbnailPluginConfig, ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/preact';
 import { AnnotationLayer, AnnotationPluginPackage } from '@embedpdf/plugin-annotation/preact';
-import { LoadingIndicator } from './ui/loading-indicator';
 import { PrintPluginPackage } from '@embedpdf/plugin-print/preact';
 import { FullscreenPluginPackage } from '@embedpdf/plugin-fullscreen/preact';
 import { BookmarkPluginPackage } from '@embedpdf/plugin-bookmark/preact';
@@ -84,14 +66,35 @@ import { MarqueeCapture, CapturePluginPackage } from '@embedpdf/plugin-capture/p
 import { HistoryPluginPackage } from '@embedpdf/plugin-history/preact';
 import { RedactionLayer, RedactionPluginPackage } from '@embedpdf/plugin-redaction/preact';
 import { AttachmentPluginPackage } from '@embedpdf/plugin-attachment/preact';
-import { HintLayer } from './hint-layer';
-import { CommentSidebar } from './comment-sidebar';
-import { CustomZoomToolbar } from './custom-zoom-toolbar';
-import { AnnotationSidebar } from './annotation-sidebar';
+
+import { SchemaToolbar } from '@/ui/schema-toolbar';
+import { SchemaSidebar } from '@/ui/schema-sidebar';
+import { SchemaMenu } from '@/ui/schema-menu';
+import { SchemaModal } from '@/ui/schema-modal';
+// Custom components for schema-driven UI
+import { ThumbnailsSidebar } from '@/components/thumbnails-sidebar';
+import { SearchSidebar } from '@/components/search-sidebar';
+import { OutlineSidebar } from '@/components/outline-sidebar';
+
+import { LoadingIndicator } from '@/components/ui/loading-indicator';
+import { HintLayer } from '@/components/hint-layer';
+import { CommentSidebar } from '@/components/comment-sidebar';
+import { CustomZoomToolbar } from '@/components/custom-zoom-toolbar';
+import { AnnotationSidebar } from '@/components/annotation-sidebar';
 import { SchemaSelectionMenu } from '@/ui/schema-selection-menu';
 import { SchemaOverlay } from '@/ui/schema-overlay';
-import { PrintModal } from './print-modal';
-import { PageControls } from './page-controls';
+import { PrintModal } from '@/components/print-modal';
+import { PageControls } from '@/components/page-controls';
+
+import {
+  commands,
+  viewerUISchema,
+  englishTranslations,
+  paramResolvers,
+  dutchTranslations,
+  germanTranslations,
+  frenchTranslations,
+} from '@/config';
 
 export { ScrollStrategy, ZoomMode, SpreadMode, Rotation };
 
@@ -303,9 +306,9 @@ export function PDFViewer({ config, onRegistryReady }: PDFViewerProps) {
   const uiRenderers = useMemo(
     () => ({
       toolbar: SchemaToolbar,
-      sidebar: SchemaPanel, // SchemaPanel handles sidebars
+      sidebar: SchemaSidebar,
       modal: SchemaModal,
-      overlay: SchemaOverlay, // SchemaOverlay handles floating overlays
+      overlay: SchemaOverlay,
       menu: SchemaMenu,
       selectionMenu: SchemaSelectionMenu,
     }),
diff --git a/snippet/src/components/comment-sidebar.tsx b/snippet/src/components/comment-sidebar.tsx
@@ -62,7 +62,7 @@ export const CommentSidebar = ({ documentId }: CommentSidebarProps) => {
         y: ann.object.rect.origin.y,
       },
       alignX: 50,
-      alignY: 50,
+      alignY: 25,
       behavior: 'smooth',
     });
   };
diff --git a/snippet/src/components/search-sidebar.tsx b/snippet/src/components/search-sidebar.tsx
@@ -64,7 +64,7 @@ export function SearchSidebar({ documentId, onClose }: SearchSidebarProps) {
 
   // Focus input on mount
   useEffect(() => {
-    inputRef.current?.focus();
+    //inputRef.current?.focus();
   }, []);
 
   // Sync inputValue with persisted state.query when state loads
diff --git a/snippet/src/ui/schema-panel.tsx b/snippet/src/ui/schema-panel.tsx
diff --git a/snippet/src/ui/schema-sidebar.tsx b/snippet/src/ui/schema-sidebar.tsx

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export * from './use-ui';`
	`2`	`+export * from './use-ui-container';`
`2`	`3`	`export * from './use-register-anchor';`
`3`	`4`	`export * from './use-item-renderer';`
`4`	`5`	`export * from './use-schema-renderer';`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`export * from './use-ui.svelte';`
	`2`	`+export * from './use-ui-container.svelte';`
`2`	`3`	`export * from './use-register-anchor.svelte';`
`3`	`4`	`export * from './use-item-renderer.svelte';`
`4`	`5`	`export * from './use-schema-renderer.svelte';`