@bendyline/squisq-editor-react 1.6.1 → 2.0.0

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 ───────────────────────────────────────────────────────
 
@@ -52,6 +53,8 @@ export interface ThemeCustomizerPanelProps {
   onSave?: (theme: Theme, json: string) => void;
   /** Fired when the user clicks Reset. Host typically clears its persistent storage. */
   onReset?: () => void;
+  /** Optional text trigger. Omit to use the compact icon trigger. */
+  triggerLabel?: string;
 }
 
 export function ThemeCustomizerPanel({
@@ -59,6 +62,7 @@ export function ThemeCustomizerPanel({
   onChange,
   onSave,
   onReset,
+  triggerLabel,
 }: ThemeCustomizerPanelProps) {
   const [open, setOpen] = useState(false);
   const [draft, setDraft] = useState<Draft>(() => themeToDraft(value));
@@ -143,26 +147,30 @@ export function ThemeCustomizerPanel({
       <button
         type="button"
         className={`squisq-toolbar-button squisq-theme-customizer-trigger${
-          open ? ' squisq-toolbar-button--active' : ''
-        }`}
+          triggerLabel ? ' squisq-theme-customizer-trigger--label' : ''
+        }${open ? ' squisq-toolbar-button--active' : ''}`}
         data-tooltip="Customize theme"
         aria-label="Customize theme"
         aria-expanded={open}
         onClick={() => setOpen((v) => !v)}
       >
-        <svg
-          width="16"
-          height="16"
-          viewBox="0 0 16 16"
-          fill="none"
-          stroke="currentColor"
-          strokeWidth="1.5"
-          strokeLinecap="round"
-          strokeLinejoin="round"
-        >
-          <circle cx="8" cy="8" r="6" />
-          <path d="M8 2 A6 6 0 0 1 8 14 Z" fill="currentColor" stroke="none" />
-        </svg>
+        {triggerLabel ? (
+          <span className="squisq-theme-customizer-trigger-label">{triggerLabel}</span>
+        ) : (
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <circle cx="8" cy="8" r="6" />
+            <path d="M8 2 A6 6 0 0 1 8 14 Z" fill="currentColor" stroke="none" />
+          </svg>
+        )}
       </button>
       {open && (
         <div className="squisq-theme-customizer-popover" role="dialog" aria-label="Customize theme">
@@ -181,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';