@classic-homes/theme-svelte 1.18.0 → 1.19.1

package/dist/lib/components/studio/StudioOutline.svelte

@@ -0,0 +1,303 @@
+<script lang="ts" module>
+  import type { IconName } from '../Icon.svelte';
+
+  export interface StudioOutlineEntry {
+    id: string;
+    title: string;
+    /** Second line, e.g. the question type or slide layout */
+    subtitle?: string;
+    icon?: IconName;
+    /** Number of problems on this item; shown as a count, not just a colour */
+    issues?: number;
+    /** Colour of the issue count (default: error) */
+    issueSeverity?: 'error' | 'warning';
+    /** Dim the row, e.g. a hidden slide */
+    muted?: boolean;
+    /** Short trailing tag, e.g. "Hidden" or "2 comments" */
+    badge?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+  import DropdownMenu, { type DropdownMenuItem } from '../DropdownMenu.svelte';
+  import SortableList from '../SortableList.svelte';
+  import { getStudioContext } from './context.js';
+
+  /**
+   * StudioOutline - the Studio's rail: every item in order, the one place to
+   * select, reorder and add.
+   *
+   * Rows reorder by their drag handle (or keyboard, see `SortableList`); the
+   * row menu holds duplicate/delete and Move up/down. Arrow keys move between
+   * rows. Picking a row inside the phone sheet closes the sheet and opens the
+   * inspector. Pass `thumbnail` to show a preview per row (slides).
+   */
+  interface Props {
+    items: StudioOutlineEntry[];
+    /** Selected item id (bindable) */
+    selected?: string | null;
+    onSelect?: (id: string) => void;
+    /** Move item `from` to index `to`; omit to turn reordering off */
+    onReorder?: (from: number, to: number) => void;
+    /** Row menu items; Move up/down are added for you when `onReorder` is set */
+    menuItems?: (entry: StudioOutlineEntry, index: number) => DropdownMenuItem[];
+    /** Shows the add button at the bottom of the rail */
+    onAdd?: () => void;
+    /** Add button text (default: "Add") */
+    addLabel?: string;
+    /** Accessible name of the list, e.g. "Questions" (default: "Items") */
+    label?: string;
+    /** Number rows 1, 2, 3... (default: true) */
+    numbered?: boolean;
+    /** Preview per row, e.g. a slide thumbnail */
+    thumbnail?: Snippet<[StudioOutlineEntry, number]>;
+    /** Above the list, e.g. a heading or filter */
+    header?: Snippet;
+    /** Shown when there are no items */
+    empty?: Snippet;
+    class?: string;
+  }
+
+  let {
+    items,
+    selected = $bindable(null),
+    onSelect,
+    onReorder,
+    menuItems,
+    onAdd,
+    addLabel = 'Add',
+    label = 'Items',
+    numbered = true,
+    thumbnail,
+    header,
+    empty,
+    class: className,
+  }: Props = $props();
+
+  const studio = getStudioContext();
+  let listHost: HTMLDivElement | undefined = $state();
+
+  const focusIndex = $derived(
+    Math.max(
+      0,
+      items.findIndex((i) => i.id === selected)
+    )
+  );
+
+  function select(id: string) {
+    selected = id;
+    onSelect?.(id);
+    studio?.revealInspector();
+  }
+
+  function rowButtons() {
+    return Array.from(listHost?.querySelectorAll<HTMLElement>('[data-outline-row]') ?? []);
+  }
+
+  function rowKeydown(event: KeyboardEvent, index: number) {
+    const buttons = rowButtons();
+    let next = -1;
+    if (event.key === 'ArrowDown') next = Math.min(index + 1, buttons.length - 1);
+    else if (event.key === 'ArrowUp') next = Math.max(index - 1, 0);
+    else if (event.key === 'Home') next = 0;
+    else if (event.key === 'End') next = buttons.length - 1;
+    if (next < 0) return;
+    event.preventDefault();
+    buttons[next]?.focus();
+  }
+
+  function rowMenu(entry: StudioOutlineEntry, index: number): DropdownMenuItem[] {
+    const own = menuItems?.(entry, index) ?? [];
+    if (!onReorder) return own;
+    const reorder = onReorder;
+    const moves: DropdownMenuItem[] = [
+      {
+        label: 'Move up',
+        icon: 'arrow-up',
+        disabled: index === 0,
+        onSelect: () => reorder(index, index - 1),
+      },
+      {
+        label: 'Move down',
+        icon: 'arrow-down',
+        disabled: index === items.length - 1,
+        onSelect: () => reorder(index, index + 1),
+      },
+    ];
+    return own.length ? [...moves, { type: 'separator' }, ...own] : moves;
+  }
+
+  // Keep the selected row visible when selection comes from the canvas
+  $effect(() => {
+    const id = selected;
+    if (!id || !listHost) return;
+    void tick().then(() => {
+      listHost
+        ?.querySelector(`[data-outline-id="${CSS.escape(id)}"]`)
+        ?.scrollIntoView?.({ block: 'nearest' });
+    });
+  });
+</script>
+
+{#snippet row(entry: StudioOutlineEntry, index: number, handle?: Record<string, unknown>)}
+  {@const active = entry.id === selected}
+  {@const menu = rowMenu(entry, index)}
+  <div
+    data-outline-id={entry.id}
+    class={cn(
+      'group relative flex items-stretch gap-0.5 rounded-md',
+      active ? 'bg-primary/10 ring-1 ring-inset ring-primary/40' : 'hover:bg-muted-hover'
+    )}
+  >
+    {#if handle}
+      <button
+        {...handle}
+        class="flex w-6 shrink-0 cursor-grab touch-none items-center justify-center rounded-l-md text-muted-foreground opacity-0 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring active:cursor-grabbing group-hover:opacity-100 aria-pressed:opacity-100 [@media(hover:none)]:opacity-100"
+        class:opacity-100={active}
+      >
+        <Icon name="grip" size={14} aria-hidden="true" />
+      </button>
+    {/if}
+
+    <button
+      type="button"
+      data-outline-row
+      tabindex={index === focusIndex ? 0 : -1}
+      aria-current={active ? 'true' : undefined}
+      class={cn(
+        'flex min-w-0 flex-1 flex-col gap-1.5 rounded-md py-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+        !handle && 'pl-2',
+        entry.muted && 'opacity-60'
+      )}
+      onclick={() => select(entry.id)}
+      onkeydown={(e) => rowKeydown(e, index)}
+    >
+      {#if thumbnail}
+        <div class="w-full overflow-hidden rounded border border-border bg-background">
+          {@render thumbnail(entry, index)}
+        </div>
+      {/if}
+      <span class="flex min-w-0 items-start gap-2">
+        {#if numbered}
+          <span class="w-5 shrink-0 pt-px text-right text-xs tabular-nums text-muted-foreground">
+            {index + 1}
+          </span>
+        {/if}
+        {#if entry.icon && !thumbnail}
+          <Icon
+            name={entry.icon}
+            size={16}
+            class="mt-px shrink-0 text-muted-foreground"
+            aria-hidden="true"
+          />
+        {/if}
+        <span class="min-w-0 flex-1">
+          <span
+            class={cn(
+              'block truncate text-sm',
+              active ? 'font-medium text-foreground' : 'text-foreground'
+            )}
+          >
+            {entry.title || 'Untitled'}
+          </span>
+          {#if entry.subtitle}
+            <span class="block truncate text-xs text-muted-foreground">{entry.subtitle}</span>
+          {/if}
+        </span>
+        {#if entry.badge}
+          <span
+            class="shrink-0 rounded bg-muted px-1.5 py-px text-[0.6875rem] text-muted-foreground"
+          >
+            {entry.badge}
+          </span>
+        {/if}
+        {#if entry.issues}
+          <span
+            class="inline-flex shrink-0 items-center gap-0.5 text-xs font-medium tabular-nums"
+            title="{entry.issues} {entry.issues === 1 ? 'issue' : 'issues'}"
+          >
+            <Icon
+              name="alert-triangle"
+              size={12}
+              class={entry.issueSeverity === 'warning' ? 'text-warning' : 'text-destructive'}
+              aria-hidden="true"
+            />
+            {entry.issues}
+            <span class="sr-only">{entry.issues === 1 ? 'issue' : 'issues'}</span>
+          </span>
+        {/if}
+      </span>
+    </button>
+
+    {#if menu.length}
+      <div
+        class={cn(
+          'flex shrink-0 items-start pt-1 opacity-0 focus-within:opacity-100 group-hover:opacity-100 [@media(hover:none)]:opacity-100',
+          active && 'opacity-100'
+        )}
+      >
+        <DropdownMenu
+          items={menu}
+          align="end"
+          triggerClass="flex h-7 w-7 items-center justify-center rounded-md text-muted-foreground hover:bg-muted-hover hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          triggerLabel="Actions for {entry.title || `item ${index + 1}`}"
+        >
+          {#snippet trigger()}
+            <Icon name="more-horizontal" size={16} aria-hidden="true" />
+          {/snippet}
+        </DropdownMenu>
+      </div>
+    {/if}
+  </div>
+{/snippet}
+
+<div class={cn('flex h-full min-h-0 flex-col', className)}>
+  {#if header}
+    <div class="shrink-0 border-b border-border px-3 py-2">{@render header()}</div>
+  {/if}
+
+  <div bind:this={listHost} class="min-h-0 flex-1 overflow-y-auto p-2">
+    {#if items.length === 0}
+      {#if empty}
+        {@render empty()}
+      {:else}
+        <p class="px-2 py-6 text-center text-sm text-muted-foreground">Nothing here yet.</p>
+      {/if}
+    {:else if onReorder}
+      <SortableList
+        {items}
+        getKey={(entry) => entry.id}
+        {onReorder}
+        {label}
+        getItemLabel={(entry, index) => entry.title || `item ${index + 1}`}
+        class="space-y-0.5"
+      >
+        {#snippet item({ item: entry, index, handle })}
+          {@render row(entry, index, handle as unknown as Record<string, unknown>)}
+        {/snippet}
+      </SortableList>
+    {:else}
+      <ul aria-label={label} class="space-y-0.5">
+        {#each items as entry, index (entry.id)}
+          <li>{@render row(entry, index)}</li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+
+  {#if onAdd}
+    <div class="shrink-0 border-t border-border p-2">
+      <button
+        type="button"
+        class="flex h-9 w-full items-center justify-center gap-2 rounded-md border border-dashed border-border text-sm font-medium text-muted-foreground hover:border-primary hover:bg-primary/5 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        onclick={onAdd}
+      >
+        <Icon name="plus" size={16} aria-hidden="true" />
+        {addLabel}
+      </button>
+    </div>
+  {/if}
+</div>

package/dist/lib/components/studio/StudioOutline.svelte.d.ts

@@ -0,0 +1,55 @@
+import type { IconName } from '../Icon.svelte';
+export interface StudioOutlineEntry {
+    id: string;
+    title: string;
+    /** Second line, e.g. the question type or slide layout */
+    subtitle?: string;
+    icon?: IconName;
+    /** Number of problems on this item; shown as a count, not just a colour */
+    issues?: number;
+    /** Colour of the issue count (default: error) */
+    issueSeverity?: 'error' | 'warning';
+    /** Dim the row, e.g. a hidden slide */
+    muted?: boolean;
+    /** Short trailing tag, e.g. "Hidden" or "2 comments" */
+    badge?: string;
+}
+import { type Snippet } from 'svelte';
+import { type DropdownMenuItem } from '../DropdownMenu.svelte';
+/**
+ * StudioOutline - the Studio's rail: every item in order, the one place to
+ * select, reorder and add.
+ *
+ * Rows reorder by their drag handle (or keyboard, see `SortableList`); the
+ * row menu holds duplicate/delete and Move up/down. Arrow keys move between
+ * rows. Picking a row inside the phone sheet closes the sheet and opens the
+ * inspector. Pass `thumbnail` to show a preview per row (slides).
+ */
+interface Props {
+    items: StudioOutlineEntry[];
+    /** Selected item id (bindable) */
+    selected?: string | null;
+    onSelect?: (id: string) => void;
+    /** Move item `from` to index `to`; omit to turn reordering off */
+    onReorder?: (from: number, to: number) => void;
+    /** Row menu items; Move up/down are added for you when `onReorder` is set */
+    menuItems?: (entry: StudioOutlineEntry, index: number) => DropdownMenuItem[];
+    /** Shows the add button at the bottom of the rail */
+    onAdd?: () => void;
+    /** Add button text (default: "Add") */
+    addLabel?: string;
+    /** Accessible name of the list, e.g. "Questions" (default: "Items") */
+    label?: string;
+    /** Number rows 1, 2, 3... (default: true) */
+    numbered?: boolean;
+    /** Preview per row, e.g. a slide thumbnail */
+    thumbnail?: Snippet<[StudioOutlineEntry, number]>;
+    /** Above the list, e.g. a heading or filter */
+    header?: Snippet;
+    /** Shown when there are no items */
+    empty?: Snippet;
+    class?: string;
+}
+declare const StudioOutline: import("svelte").Component<Props, {}, "selected">;
+type StudioOutline = ReturnType<typeof StudioOutline>;
+export default StudioOutline;

package/dist/lib/components/studio/StudioPage.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  /**
+   * StudioPage - a full-width, scrolling page inside a Studio, for modes that
+   * configure rather than build (Settings, Share, Deck). Pass it as the
+   * Studio's `canvas` with no rail or inspector. Group its fields in Cards or
+   * `StudioInspectorSection`s with plain headings: Basics, Schedule, Privacy...
+   */
+  interface Props {
+    title?: string;
+    description?: string;
+    children: Snippet;
+    /** Content width (default: 42rem) */
+    maxWidth?: string;
+    class?: string;
+  }
+
+  let { title, description, children, maxWidth = '42rem', class: className }: Props = $props();
+</script>
+
+<div class="h-full overflow-y-auto bg-muted/40">
+  <div
+    class={cn('mx-auto w-full space-y-6 px-4 py-6 md:py-10', className)}
+    style:max-width={maxWidth}
+  >
+    {#if title || description}
+      <div>
+        {#if title}<h2 class="text-xl font-semibold">{title}</h2>{/if}
+        {#if description}<p class="mt-1 text-sm text-muted-foreground">{description}</p>{/if}
+      </div>
+    {/if}
+    {@render children()}
+  </div>
+</div>

package/dist/lib/components/studio/StudioPage.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { Snippet } from 'svelte';
+/**
+ * StudioPage - a full-width, scrolling page inside a Studio, for modes that
+ * configure rather than build (Settings, Share, Deck). Pass it as the
+ * Studio's `canvas` with no rail or inspector. Group its fields in Cards or
+ * `StudioInspectorSection`s with plain headings: Basics, Schedule, Privacy...
+ */
+interface Props {
+    title?: string;
+    description?: string;
+    children: Snippet;
+    /** Content width (default: 42rem) */
+    maxWidth?: string;
+    class?: string;
+}
+declare const StudioPage: import("svelte").Component<Props, {}, "">;
+type StudioPage = ReturnType<typeof StudioPage>;
+export default StudioPage;

package/dist/lib/components/studio/context.d.ts

@@ -0,0 +1,25 @@
+/**
+ * How much room the Studio has:
+ * - `wide` (≥1280px): outline, canvas and inspector side by side
+ * - `medium` (768–1279px): the outline moves into a sheet; canvas and inspector stay
+ * - `compact` (<768px): canvas only; outline and inspector open as sheets
+ */
+export type StudioLayout = 'wide' | 'medium' | 'compact';
+export interface StudioContext {
+    readonly layout: StudioLayout;
+    /** Whether the outline is shown in a sheet rather than as a column */
+    readonly railInSheet: boolean;
+    /** Whether the inspector is shown in a sheet rather than as a column */
+    readonly inspectorInSheet: boolean;
+    openRail(): void;
+    closeRail(): void;
+    /**
+     * Bring the inspector into view after the user picks something to edit:
+     * closes the outline sheet and, on phones, opens the inspector sheet.
+     */
+    revealInspector(): void;
+    closeInspector(): void;
+}
+export declare function setStudioContext(context: StudioContext): void;
+/** The surrounding Studio, or undefined when a Studio part is used on its own */
+export declare function getStudioContext(): StudioContext | undefined;

package/dist/lib/components/studio/context.js

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const KEY = Symbol('classic-studio');
+export function setStudioContext(context) {
+    setContext(KEY, context);
+}
+/** The surrounding Studio, or undefined when a Studio part is used on its own */
+export function getStudioContext() {
+    return getContext(KEY);
+}

package/dist/lib/components/studio/index.d.ts

@@ -0,0 +1,12 @@
+export { default as Studio } from './Studio.svelte';
+export { default as StudioBar } from './StudioBar.svelte';
+export { default as StudioOutline, type StudioOutlineEntry } from './StudioOutline.svelte';
+export { default as StudioCanvas } from './StudioCanvas.svelte';
+export { default as StudioCanvasItem } from './StudioCanvasItem.svelte';
+export { default as StudioInspector, type StudioInspectorTab } from './StudioInspector.svelte';
+export { default as StudioInspectorSection } from './StudioInspectorSection.svelte';
+export { default as StudioPage } from './StudioPage.svelte';
+export { default as SaveStatus, type SaveState } from './SaveStatus.svelte';
+export { default as IssuesButton, type StudioIssue } from './IssuesButton.svelte';
+export { default as InsertPalette, type InsertPaletteItem, type InsertPaletteGroup, } from './InsertPalette.svelte';
+export { getStudioContext, type StudioContext, type StudioLayout } from './context.js';

package/dist/lib/components/studio/index.js

@@ -0,0 +1,12 @@
+export { default as Studio } from './Studio.svelte';
+export { default as StudioBar } from './StudioBar.svelte';
+export { default as StudioOutline } from './StudioOutline.svelte';
+export { default as StudioCanvas } from './StudioCanvas.svelte';
+export { default as StudioCanvasItem } from './StudioCanvasItem.svelte';
+export { default as StudioInspector } from './StudioInspector.svelte';
+export { default as StudioInspectorSection } from './StudioInspectorSection.svelte';
+export { default as StudioPage } from './StudioPage.svelte';
+export { default as SaveStatus } from './SaveStatus.svelte';
+export { default as IssuesButton } from './IssuesButton.svelte';
+export { default as InsertPalette, } from './InsertPalette.svelte';
+export { getStudioContext } from './context.js';

package/dist/lib/index.d.ts

@@ -65,6 +65,9 @@ export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as ActiveFilterChips, type ActiveFilterChip, } from './components/ActiveFilterChips.svelte';
 export { default as SegmentedControl, type SegmentedControlOption, } from './components/SegmentedControl.svelte';
 export { default as ViewToggle, type ViewToggleOption, defaultViewToggleOptions, } from './components/ViewToggle.svelte';
+export { default as Sheet } from './components/Sheet.svelte';
+export { default as SortableList, type SortableHandleProps, type SortableItemContext, } from './components/SortableList.svelte';
+export { Studio, StudioBar, StudioOutline, StudioCanvas, StudioCanvasItem, StudioInspector, StudioInspectorSection, StudioPage, SaveStatus, IssuesButton, InsertPalette, getStudioContext, type StudioOutlineEntry, type StudioInspectorTab, type SaveState, type StudioIssue, type InsertPaletteItem, type InsertPaletteGroup, type StudioContext, type StudioLayout, } from './components/studio/index.js';
 export { AspectRatio, Image, Video, Audio, MediaEmbed, MediaGrid, MediaCarousel, Lightbox, } from './components/media/index.js';
 export type { MediaGridColumns } from './components/media/MediaGrid.svelte';
 export type { DropdownMenuItem, DropdownMenuGroup, SelectOption, SelectGroup, Tab, FileMetadata, DataTableColumn, DataTableFilterFn, DataTableFilterOption, RadioOption, ComboboxOption, MultiSelectOption, SignatureData, SignatureStroke, SignaturePoint, SignatureMetadata, SignatureFont, SignatureValidationResult, MediaKind, MediaEmbedProvider, MediaSource, MediaTextTrack, MediaItemBase, ImageMediaItem, VideoMediaItem, AudioMediaItem, EmbedMediaItem, MediaItem, MediaAspectRatio, MediaFit, CloudflareStreamAccount, MatterportPlayerOptions, } from './types/components.js';

package/dist/lib/index.js

@@ -78,6 +78,12 @@ export { default as FilterPanel } from './components/FilterPanel.svelte';
 export { default as ActiveFilterChips, } from './components/ActiveFilterChips.svelte';
 export { default as SegmentedControl, } from './components/SegmentedControl.svelte';
 export { default as ViewToggle, defaultViewToggleOptions, } from './components/ViewToggle.svelte';
+// Overlay: edge sheet
+export { default as Sheet } from './components/Sheet.svelte';
+// Reorderable list
+export { default as SortableList, } from './components/SortableList.svelte';
+// Studio - full-screen editor frame (outline, canvas, inspector)
+export { Studio, StudioBar, StudioOutline, StudioCanvas, StudioCanvasItem, StudioInspector, StudioInspectorSection, StudioPage, SaveStatus, IssuesButton, InsertPalette, getStudioContext, } from './components/studio/index.js';
 // Media Components
 export { AspectRatio, Image, Video, Audio, MediaEmbed, MediaGrid, MediaCarousel, Lightbox, } from './components/media/index.js';
 // DataTable sub-components and utilities

package/dist/lib/schemas/common.d.ts

@@ -155,15 +155,15 @@ export declare const addressSchema: z.ZodObject<{
     street: string;
     city: string;
     postalCode: string;
-    street2?: string | undefined;
     state?: string | undefined;
+    street2?: string | undefined;
 }, {
     country: string;
     street: string;
     city: string;
     postalCode: string;
-    street2?: string | undefined;
     state?: string | undefined;
+    street2?: string | undefined;
 }>;
 export type Address = z.infer<typeof addressSchema>;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@classic-homes/theme-svelte",
-  "version": "1.18.0",
+  "version": "1.19.1",
   "description": "Svelte components for the Classic theme system",
   "type": "module",
   "svelte": "./dist/lib/index.js",