@bendyline/squisq-editor-react 1.6.2 → 2.0.0

package/src/TemplatePicker.tsx

@@ -6,7 +6,7 @@
  * and a one-sentence description so authors can quickly find the right layout.
  */
 
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import type { CustomTemplateDefinition } from '@bendyline/squisq/schemas';
 import { TEMPLATE_METADATA, resolveTemplateName } from '@bendyline/squisq/doc';
@@ -36,14 +36,20 @@ interface TemplateEntry {
   icon: JSX.Element;
 }
 
-/**
- * DOM id of the portaled template gallery. Exported so hosts that embed the
- * picker inside their own popovers (e.g. the toolbar overflow menu) can treat
- * clicks inside the gallery as "inside" in their outside-click handling.
- */
-export const TEMPLATE_GALLERY_PORTAL_ID = 'squisq-template-gallery-portal';
+/** Matches every gallery when multiple editor instances are mounted. */
+export const TEMPLATE_GALLERY_PORTAL_SELECTOR = '[data-squisq-template-gallery-portal]';
 
 const TEMPLATE_GALLERY_DIALOG_ID = 'squisq-template-gallery-dialog';
+const TEMPLATE_GALLERY_PORTAL_ID_PREFIX = 'squisq-template-gallery-portal';
+
+/**
+ * Give each portaled gallery a stable, collision-free id. Hosts should match
+ * galleries through {@link TEMPLATE_GALLERY_PORTAL_SELECTOR}; a process-wide
+ * singleton id cannot identify the right editor when several are mounted.
+ */
+function useTemplateGalleryPortalId(): string {
+  return `${TEMPLATE_GALLERY_PORTAL_ID_PREFIX}-${useId().replace(/:/g, '')}`;
+}
 
 const W = 56;
 const H = 40;
@@ -419,28 +425,62 @@ export const TEMPLATE_ENTRIES: TemplateEntry[] = [
         <rect x={4} y={6} width={16} height={10} rx={2} fill={FA} opacity={0.85} />
         <rect x={36} y={6} width={16} height={10} rx={2} fill={F2} opacity={0.8} />
         <rect x={20} y={24} width={16} height={10} rx={2} fill={F2} opacity={0.8} />
+        <path d="M 20 11 L 36 11" stroke={FA} strokeWidth={1.5} fill="none" opacity={0.7} />
+        <path d="M 36 11 L 32 8.5 L 32 13.5 Z" fill={FA} opacity={0.7} />
         <path
-          d="M 20 11 L 36 11"
+          d="M 12 16 C 12 22, 24 22, 24 24"
           stroke={FA}
           strokeWidth={1.5}
           fill="none"
           opacity={0.7}
-          markerEnd="url(#tp-diagram-arrow)"
         />
         <path
-          d="M 12 16 C 12 22, 24 22, 24 24"
+          d="M 44 16 C 44 22, 32 22, 32 24"
           stroke={FA}
           strokeWidth={1.5}
           fill="none"
           opacity={0.7}
         />
+      </TemplateIcon>
+    ),
+  },
+  {
+    name: 'tree',
+    label: 'Tree',
+    description:
+      'Renders an ASCII file-tree / outline fence as a filesystem-style treeview — edit as an outline.',
+    icon: (
+      <TemplateIcon>
+        <rect x={6} y={5} width={16} height={7} rx={1.5} fill={FA} opacity={0.85} />
         <path
-          d="M 44 16 C 44 22, 32 22, 32 24"
-          stroke={FA}
+          d="M 12 12 L 12 34 M 12 20 L 22 20 M 12 34 L 22 34"
+          stroke={F1}
           strokeWidth={1.5}
           fill="none"
           opacity={0.7}
         />
+        <rect x={24} y={16} width={14} height={7} rx={1.5} fill={F2} opacity={0.8} />
+        <rect x={24} y={30} width={14} height={7} rx={1.5} fill={F2} opacity={0.8} />
+        <rect x={26} y={2} width={14} height={7} rx={1.5} fill={F2} opacity={0.6} />
+      </TemplateIcon>
+    ),
+  },
+  {
+    name: 'timeline',
+    label: 'Timeline',
+    description:
+      'Plots events across one or more horizontal tracks with callouts and optional branching links.',
+    icon: (
+      <TemplateIcon>
+        <path d="M 5 21 L 51 21" stroke={F1} strokeWidth={1.8} fill="none" />
+        <path d="M 47 18 L 52 21 L 47 24" stroke={F1} strokeWidth={1.5} fill="none" />
+        <circle cx={13} cy={21} r={3} fill={FA} />
+        <circle cx={29} cy={21} r={3} fill={F2} />
+        <circle cx={44} cy={21} r={3} fill={FA} />
+        <path d="M 13 18 L 13 10 M 29 24 L 29 32 M 44 18 L 44 8" stroke={F1} strokeWidth={1} />
+        <rect x={7} y={5} width={12} height={3} rx={1} fill={F2} opacity={0.8} />
+        <rect x={23} y={33} width={12} height={3} rx={1} fill={F2} opacity={0.8} />
+        <rect x={38} y={3} width={12} height={3} rx={1} fill={F2} opacity={0.8} />
       </TemplateIcon>
     ),
   },
@@ -566,6 +606,8 @@ export function TemplatePicker({
   const [dialogStyle, setDialogStyle] = useState<React.CSSProperties>({});
   const containerRef = useRef<HTMLDivElement>(null);
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId().replace(/:/g, '')}`;
 
   const updateDialogBounds = () => {
     if (!triggerRef.current) return;
@@ -583,7 +625,7 @@ export function TemplatePicker({
     const handler = (e: MouseEvent) => {
       const target = e.target as Node;
       const inTrigger = triggerRef.current?.contains(target);
-      const inDialog = document.getElementById(TEMPLATE_GALLERY_DIALOG_ID)?.contains(target);
+      const inDialog = dialogRef.current?.contains(target);
       if (!inTrigger && !inDialog) {
         setOpen(false);
       }
@@ -646,6 +688,8 @@ export function TemplatePicker({
   const gallery = open
     ? createPortal(
         <TemplateGalleryDialog
+          dialogRef={dialogRef}
+          dialogId={dialogId}
           title={dialogTitle}
           colorScheme={colorScheme}
           style={dialogStyle}
@@ -673,6 +717,7 @@ export function TemplatePicker({
         onClick={handleOpen}
         aria-haspopup="dialog"
         aria-expanded={open}
+        aria-controls={open ? dialogId : undefined}
         title="Choose block type"
       >
         <span className="squisq-template-picker-trigger-label">Block:</span>
@@ -707,12 +752,16 @@ export function TemplatePicker({
 // ── Reusable gallery body ──────────────────────────────────────────
 
 function TemplateGalleryDialog({
+  dialogRef,
+  dialogId,
   children,
   title,
   colorScheme,
   style,
   onClose,
 }: {
+  dialogRef: React.RefObject<HTMLDivElement>;
+  dialogId: string;
   children: React.ReactNode;
   title: string;
   colorScheme: 'light' | 'dark';
@@ -721,7 +770,8 @@ function TemplateGalleryDialog({
 }) {
   return (
     <div
-      id={TEMPLATE_GALLERY_DIALOG_ID}
+      ref={dialogRef}
+      id={dialogId}
       className="squisq-template-gallery-dialog"
       data-theme={colorScheme}
       style={style}
@@ -833,6 +883,7 @@ function TemplateGalleryBody({
   onOpenDesigner?: () => void;
   previewSource?: TemplatePreviewSource;
 }) {
+  const galleryId = useTemplateGalleryPortalId();
   const [query, setQuery] = useState('');
   const searchRef = useRef<HTMLInputElement>(null);
   // Pull merged doc + library templates from the surrounding context.
@@ -894,7 +945,8 @@ function TemplateGalleryBody({
 
   return (
     <div
-      id={TEMPLATE_GALLERY_PORTAL_ID}
+      id={galleryId}
+      data-squisq-template-gallery-portal=""
       className={`squisq-template-gallery${grouped ? ' squisq-template-gallery--segmented' : ''}`}
       role="listbox"
       aria-label="Block types"
@@ -1154,10 +1206,13 @@ export function TemplateBadgePopover({
   previewSource,
 }: TemplateBadgePopoverProps) {
   const [style, setStyle] = useState<React.CSSProperties>(() => computeDialogStyle(anchorRect));
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const dialogId = `${TEMPLATE_GALLERY_DIALOG_ID}-${useId().replace(/:/g, '')}`;
 
   // Reposition once after mount so the dialog covers the current editor shell.
   useEffect(() => {
-    requestAnimationFrame(() => setStyle(computeDialogStyle(anchorRect)));
+    const frame = requestAnimationFrame(() => setStyle(computeDialogStyle(anchorRect)));
+    return () => cancelAnimationFrame(frame);
   }, [anchorRect]);
 
   // Outside click + Escape close
@@ -1167,7 +1222,7 @@ export function TemplateBadgePopover({
     };
     const onMouse = (e: MouseEvent) => {
       const target = e.target as Node;
-      const inDialog = document.getElementById(TEMPLATE_GALLERY_DIALOG_ID)?.contains(target);
+      const inDialog = dialogRef.current?.contains(target);
       if (!inDialog) onClose();
     };
     // Defer the mousedown listener by one frame so the click that opened
@@ -1192,6 +1247,8 @@ export function TemplateBadgePopover({
 
   return createPortal(
     <TemplateGalleryDialog
+      dialogRef={dialogRef}
+      dialogId={dialogId}
       title={dialogTitle}
       colorScheme={colorScheme}
       style={style}
@@ -1211,7 +1268,7 @@ export function TemplateBadgePopover({
 }
 
 function templateDialogTitle(previewSource?: TemplatePreviewSource): string {
-  return `Block type for ${templateDialogBlockTitle(previewSource)}`;
+  return `Block Type for ${templateDialogBlockTitle(previewSource)}`;
 }
 
 function templateDialogBlockTitle(previewSource?: TemplatePreviewSource): string {
@@ -1253,8 +1310,5 @@ function findEditorShellRect(anchor: Element | DOMRect): DOMRect {
     }
   }
 
-  const fallback = document.querySelector('.squisq-editor-shell');
-  if (fallback) return fallback.getBoundingClientRect();
-
   return new DOMRect(0, 0, window.innerWidth, window.innerHeight);
 }

package/src/ThemeCustomizerPanel.tsx

@@ -40,6 +40,7 @@ import {
   type ImageTreatmentPreset,
 } from './customThemes/themeDraft';
 import { Section, SeedColorRow, FontPicker, PresetRow } from './customThemes/themeControls';
+import { ImportThemeSection } from './customThemes/ImportThemeSection';
 
 // ── Component ───────────────────────────────────────────────────────
 
@@ -188,6 +189,13 @@ export function ThemeCustomizerPanel({
               />
             </Section>
 
+            <Section
+              title="Import from file"
+              hint="Pull colors and fonts from a Word, PowerPoint, or Excel file."
+            >
+              <ImportThemeSection onImported={(patch) => updateDraft(patch)} />
+            </Section>
+
             <Section title="Colors" hint="Pick seed colors. The rest is derived.">
               <SeedColorRow
                 label="Primary"

package/src/ThemePicker.tsx

@@ -9,7 +9,7 @@
  * preview-on-hover style listing rather than a wall of names.
  */
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import {
   getThemeSummaries,
@@ -95,6 +95,7 @@ function ThemeNameChip({
   return (
     <span
       className={`squisq-theme-picker-name-chip${className ? ` ${className}` : ''}`}
+      data-theme-id={theme.id}
       style={{
         background: theme.colors.background,
         color: theme.colors.text,
@@ -102,7 +103,7 @@ function ThemeNameChip({
         borderColor: theme.colors.backgroundLight,
       }}
     >
-      {label}
+      <span className="squisq-theme-picker-name-chip-label">{label}</span>
     </span>
   );
 }
@@ -133,6 +134,8 @@ export function ThemePicker({
   const [open, setOpen] = useState(false);
   const [popoverStyle, setPopoverStyle] = useState<React.CSSProperties>({});
   const triggerRef = useRef<HTMLButtonElement>(null);
+  const popoverRef = useRef<HTMLDivElement>(null);
+  const popoverId = `squisq-theme-picker-popover-${useId().replace(/:/g, '')}`;
 
   // Custom entries are computed per-render (built-ins stay static at module
   // load). A custom theme is already a full Theme, so it becomes an entry
@@ -189,7 +192,7 @@ export function ThemePicker({
     // trigger as-is. On the first open it doesn't exist yet — we'll
     // re-run after mount via the requestAnimationFrame in the open
     // effect, so estimate generously for paint #1.
-    const popoverEl = document.getElementById('squisq-theme-picker-popover');
+    const popoverEl = popoverRef.current;
     const measured = popoverEl?.scrollHeight ?? 520;
     const spaceBelow = vh - rect.bottom - margin - gap;
     const spaceAbove = rect.top - margin - gap;
@@ -229,7 +232,7 @@ export function ThemePicker({
     const onDown = (e: MouseEvent) => {
       const target = e.target as Node;
       if (triggerRef.current?.contains(target)) return;
-      const popoverEl = document.getElementById('squisq-theme-picker-popover');
+      const popoverEl = popoverRef.current;
       if (popoverEl?.contains(target)) return;
       setOpen(false);
     };
@@ -258,7 +261,8 @@ export function ThemePicker({
   const popover = open
     ? createPortal(
         <div
-          id="squisq-theme-picker-popover"
+          ref={popoverRef}
+          id={popoverId}
           className="squisq-theme-picker-popover"
           role="listbox"
           aria-label={ariaLabel}
@@ -392,6 +396,7 @@ export function ThemePicker({
         onClick={handleToggle}
         aria-haspopup="listbox"
         aria-expanded={open}
+        aria-controls={open ? popoverId : undefined}
         aria-label={ariaLabel}
       >
         {previewEntry && (

package/src/TimelineBlockPreview.tsx

@@ -3,7 +3,7 @@
  *
  * Renders a tiny slideshow-style thumbnail of a single block, used to fill each
  * bar on the timeline. Reuses the same rendering path as the inline preview
- * gutter and the slideshow: `buildPreviewDoc` → `getLayers` → `BlockRenderer`.
+ * gutter and the slideshow: `buildPreviewDoc` → `materializeBlockLayers` → `BlockRenderer`.
  */
 
 import { memo } from 'react';