@classic-homes/theme-svelte 1.17.0 → 1.19.0

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

@@ -0,0 +1,168 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+  import DropdownMenu, {
+    type DropdownMenuItem,
+    type DropdownMenuGroup,
+  } from '../DropdownMenu.svelte';
+  import SegmentedControl, { type SegmentedControlOption } from '../SegmentedControl.svelte';
+
+  /**
+   * StudioBar - the one bar across the top of a Studio.
+   *
+   * Left: back link and the document title, edited in place. Middle: the
+   * modes that separate building from configuring (e.g. Build · Settings ·
+   * Share). Right: save status, issues, the primary action, and one overflow
+   * menu for everything else (export, history, delete...). On phones the
+   * modes wrap onto their own row.
+   */
+  interface Props {
+    /** Title of the document being edited (bindable) */
+    title?: string;
+    /** Called when an edited title is committed (blur or Enter) */
+    onTitleChange?: (title: string) => void;
+    /** Show the title as text instead of an input */
+    titleReadonly?: boolean;
+    titlePlaceholder?: string;
+    /** Small line under the title, e.g. "Survey · 5 questions" */
+    subtitle?: string;
+    /** Back link, e.g. to the list of surveys */
+    backHref?: string;
+    /** Accessible name of the back link (default: "Back") */
+    backLabel?: string;
+    /** Mode tabs; omit for single-mode editors */
+    modes?: SegmentedControlOption[];
+    /** Active mode (bindable) */
+    mode?: string;
+    onModeChange?: (mode: string) => void;
+    /** Save state, normally a `SaveStatus` */
+    status?: Snippet;
+    /** Issues, normally an `IssuesButton` */
+    issues?: Snippet;
+    /** Primary action(s), e.g. a Publish or Present button */
+    actions?: Snippet;
+    /** Overflow menu items (export, history, delete...) */
+    menuItems?: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** Accessible name of the overflow menu (default: "More actions") */
+    menuLabel?: string;
+    class?: string;
+  }
+
+  let {
+    title = $bindable(''),
+    onTitleChange,
+    titleReadonly = false,
+    titlePlaceholder = 'Untitled',
+    subtitle,
+    backHref,
+    backLabel = 'Back',
+    modes,
+    mode = $bindable(modes?.[0]?.value ?? ''),
+    onModeChange,
+    status,
+    issues,
+    actions,
+    menuItems,
+    menuLabel = 'More actions',
+    class: className,
+  }: Props = $props();
+
+  // Title value when editing began, so Escape can put it back
+  let titleAtFocus = '';
+
+  function commitTitle(input: HTMLInputElement) {
+    const next = input.value.trim();
+    if (!next) {
+      title = titleAtFocus;
+      return;
+    }
+    if (next !== titleAtFocus) onTitleChange?.(next);
+    titleAtFocus = next;
+  }
+
+  function titleKeydown(event: KeyboardEvent) {
+    const input = event.currentTarget as HTMLInputElement;
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      input.blur();
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      title = titleAtFocus;
+      input.value = titleAtFocus;
+      input.blur();
+    }
+  }
+</script>
+
+<header
+  class={cn(
+    'flex shrink-0 flex-wrap items-center gap-x-2 gap-y-2 border-b border-border bg-background px-2 py-2 md:h-14 md:flex-nowrap md:gap-x-3 md:px-3 md:py-0',
+    className
+  )}
+>
+  <div class="flex min-w-0 flex-1 items-center gap-1 md:basis-0">
+    {#if backHref}
+      <a
+        href={backHref}
+        class="flex h-9 w-9 shrink-0 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"
+        aria-label={backLabel}
+        title={backLabel}
+      >
+        <Icon name="arrow-left" size={18} aria-hidden="true" />
+      </a>
+    {/if}
+    <div class="min-w-0 flex-1">
+      <h1 class={titleReadonly ? 'truncate px-1.5 text-base font-semibold' : 'sr-only'}>
+        {title || titlePlaceholder}
+      </h1>
+      {#if !titleReadonly}
+        <input
+          bind:value={title}
+          aria-label="Title"
+          placeholder={titlePlaceholder}
+          class="block w-full max-w-md truncate rounded-md border border-transparent bg-transparent px-1.5 py-0.5 text-base font-semibold leading-tight outline-none hover:border-border focus:border-input focus:bg-background focus:ring-2 focus:ring-ring"
+          onfocus={(e) => (titleAtFocus = (e.currentTarget as HTMLInputElement).value)}
+          onblur={(e) => commitTitle(e.currentTarget as HTMLInputElement)}
+          onkeydown={titleKeydown}
+        />
+      {/if}
+      {#if subtitle}
+        <p class="truncate px-1.5 text-xs text-muted-foreground">{subtitle}</p>
+      {/if}
+    </div>
+  </div>
+
+  {#if modes && modes.length > 1}
+    <div class="order-last flex w-full justify-center md:order-none md:w-auto">
+      <SegmentedControl
+        options={modes}
+        bind:value={mode}
+        onValueChange={onModeChange}
+        label="Editor mode"
+        size="sm"
+        class="w-full md:w-auto [&>*]:flex-1 md:[&>*]:flex-none"
+      />
+    </div>
+  {/if}
+
+  <div class="flex shrink-0 items-center justify-end gap-1 md:flex-1 md:basis-0 md:gap-2">
+    {#if status}{@render status()}{/if}
+    {#if issues}{@render issues()}{/if}
+    {#if actions}{@render actions()}{/if}
+    {#if menuItems && menuItems.length > 0}
+      <DropdownMenu
+        items={menuItems}
+        align="end"
+        triggerVariant="ghost"
+        triggerSize="icon"
+        triggerClass="h-9 w-9"
+        triggerLabel={menuLabel}
+      >
+        {#snippet trigger()}
+          <Icon name="more-horizontal" size={18} aria-hidden="true" />
+        {/snippet}
+      </DropdownMenu>
+    {/if}
+  </div>
+</header>

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

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+import { type DropdownMenuItem, type DropdownMenuGroup } from '../DropdownMenu.svelte';
+import { type SegmentedControlOption } from '../SegmentedControl.svelte';
+/**
+ * StudioBar - the one bar across the top of a Studio.
+ *
+ * Left: back link and the document title, edited in place. Middle: the
+ * modes that separate building from configuring (e.g. Build · Settings ·
+ * Share). Right: save status, issues, the primary action, and one overflow
+ * menu for everything else (export, history, delete...). On phones the
+ * modes wrap onto their own row.
+ */
+interface Props {
+    /** Title of the document being edited (bindable) */
+    title?: string;
+    /** Called when an edited title is committed (blur or Enter) */
+    onTitleChange?: (title: string) => void;
+    /** Show the title as text instead of an input */
+    titleReadonly?: boolean;
+    titlePlaceholder?: string;
+    /** Small line under the title, e.g. "Survey · 5 questions" */
+    subtitle?: string;
+    /** Back link, e.g. to the list of surveys */
+    backHref?: string;
+    /** Accessible name of the back link (default: "Back") */
+    backLabel?: string;
+    /** Mode tabs; omit for single-mode editors */
+    modes?: SegmentedControlOption[];
+    /** Active mode (bindable) */
+    mode?: string;
+    onModeChange?: (mode: string) => void;
+    /** Save state, normally a `SaveStatus` */
+    status?: Snippet;
+    /** Issues, normally an `IssuesButton` */
+    issues?: Snippet;
+    /** Primary action(s), e.g. a Publish or Present button */
+    actions?: Snippet;
+    /** Overflow menu items (export, history, delete...) */
+    menuItems?: (DropdownMenuItem | DropdownMenuGroup)[];
+    /** Accessible name of the overflow menu (default: "More actions") */
+    menuLabel?: string;
+    class?: string;
+}
+declare const StudioBar: import("svelte").Component<Props, {}, "title" | "mode">;
+type StudioBar = ReturnType<typeof StudioBar>;
+export default StudioBar;

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

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import SegmentedControl from '../SegmentedControl.svelte';
+  import { getStudioContext } from './context.js';
+
+  /**
+   * StudioCanvas - the middle of a Studio: the real thing, as people will see it.
+   *
+   * Scrolls on its own and centres its content on a quiet backdrop. With
+   * `deviceToggle`, a Desktop/Phone switch narrows the frame to phone width.
+   * Wrap each selectable part in a `StudioCanvasItem`, or, for content
+   * rendered elsewhere (an iframe), handle selection yourself.
+   */
+  interface Props {
+    children: Snippet;
+    /** Show the Desktop/Phone switch */
+    deviceToggle?: boolean;
+    /** Previewed device (bindable) */
+    device?: 'desktop' | 'phone';
+    /** Width of the frame on desktop (default: 48rem, a readable column) */
+    maxWidth?: string;
+    /** Extra controls beside the device switch */
+    toolbar?: Snippet;
+    /** Accessible name of the canvas region (default: "Canvas") */
+    label?: string;
+    /** Clicked on the backdrop, outside any item: usually clears the selection */
+    onBackgroundClick?: () => void;
+    /** Classes for the frame that holds the content */
+    frameClass?: string;
+    class?: string;
+  }
+
+  let {
+    children,
+    deviceToggle = false,
+    device = $bindable('desktop'),
+    maxWidth = '48rem',
+    toolbar,
+    label = 'Canvas',
+    onBackgroundClick,
+    frameClass,
+    class: className,
+  }: Props = $props();
+
+  const studio = getStudioContext();
+  // On a phone the canvas already is phone width; the switch would do nothing
+  const showDevices = $derived(deviceToggle && studio?.layout !== 'compact');
+  const width = $derived(device === 'phone' && showDevices ? '390px' : maxWidth);
+</script>
+
+<section aria-label={label} class={cn('flex h-full flex-col', className)}>
+  {#if showDevices || toolbar}
+    <div class="flex shrink-0 items-center justify-end gap-2 px-3 pt-3">
+      {#if toolbar}{@render toolbar()}{/if}
+      {#if showDevices}
+        <SegmentedControl
+          bind:value={device}
+          label="Preview size"
+          size="sm"
+          options={[
+            { value: 'desktop', label: 'Desktop', icon: 'monitor' },
+            { value: 'phone', label: 'Phone', icon: 'smartphone' },
+          ]}
+        />
+      {/if}
+    </div>
+  {/if}
+
+  <!-- svelte-ignore a11y_click_events_have_key_events, a11y_no_static_element_interactions -->
+  <div
+    class="min-h-0 flex-1 overflow-y-auto px-3 pb-20 pt-3 md:px-6 md:pb-10"
+    onclick={(e) => {
+      if (e.target === e.currentTarget) onBackgroundClick?.();
+    }}
+  >
+    <div
+      class={cn(
+        'mx-auto w-full rounded-lg border border-border bg-background shadow-sm transition-[max-width] duration-200',
+        frameClass
+      )}
+      style:max-width={width}
+    >
+      {@render children()}
+    </div>
+  </div>
+</section>

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

@@ -0,0 +1,30 @@
+import type { Snippet } from 'svelte';
+/**
+ * StudioCanvas - the middle of a Studio: the real thing, as people will see it.
+ *
+ * Scrolls on its own and centres its content on a quiet backdrop. With
+ * `deviceToggle`, a Desktop/Phone switch narrows the frame to phone width.
+ * Wrap each selectable part in a `StudioCanvasItem`, or, for content
+ * rendered elsewhere (an iframe), handle selection yourself.
+ */
+interface Props {
+    children: Snippet;
+    /** Show the Desktop/Phone switch */
+    deviceToggle?: boolean;
+    /** Previewed device (bindable) */
+    device?: 'desktop' | 'phone';
+    /** Width of the frame on desktop (default: 48rem, a readable column) */
+    maxWidth?: string;
+    /** Extra controls beside the device switch */
+    toolbar?: Snippet;
+    /** Accessible name of the canvas region (default: "Canvas") */
+    label?: string;
+    /** Clicked on the backdrop, outside any item: usually clears the selection */
+    onBackgroundClick?: () => void;
+    /** Classes for the frame that holds the content */
+    frameClass?: string;
+    class?: string;
+}
+declare const StudioCanvas: import("svelte").Component<Props, {}, "device">;
+type StudioCanvas = ReturnType<typeof StudioCanvas>;
+export default StudioCanvas;

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

@@ -0,0 +1,121 @@
+<script lang="ts">
+  import { tick, type Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+  import Icon from '../Icon.svelte';
+  import { getStudioContext } from './context.js';
+
+  /**
+   * StudioCanvasItem - one selectable part of the canvas (a question, a block).
+   *
+   * Clicking anywhere in it, or tabbing into it, selects it; the content stays
+   * live, so a previewed question can still be answered. The selected item
+   * gets a ring and its `toolbar` (duplicate, delete...). With `onInsert`, a
+   * "+" between this item and the next adds a new one right there. On phones
+   * picking an item opens the inspector sheet.
+   */
+  interface Props {
+    children: Snippet;
+    selected?: boolean;
+    onSelect?: () => void;
+    /** Names the item for screen readers and its Edit button, e.g. "Question 2" */
+    label: string;
+    /** Quick actions shown on the selected item */
+    toolbar?: Snippet;
+    /** Shows a "+" below the item that inserts after it */
+    onInsert?: () => void;
+    /** Accessible name of the insert button (default: "Add below {label}") */
+    insertLabel?: string;
+    /** Marks the item as having problems */
+    invalid?: boolean;
+    class?: string;
+  }
+
+  let {
+    children,
+    selected = false,
+    onSelect,
+    label,
+    toolbar,
+    onInsert,
+    insertLabel,
+    invalid = false,
+    class: className,
+  }: Props = $props();
+
+  const studio = getStudioContext();
+  let element: HTMLDivElement | undefined = $state();
+
+  function select(reveal: boolean) {
+    if (!selected) onSelect?.();
+    if (reveal) studio?.revealInspector();
+  }
+
+  $effect(() => {
+    if (!selected || !element) return;
+    const el = element;
+    void tick().then(() => {
+      // Don't yank the canvas while the user is working inside the item
+      if (el.contains(document.activeElement)) return;
+      const reduce = window.matchMedia?.('(prefers-reduced-motion: reduce)').matches;
+      el.scrollIntoView?.({ block: 'nearest', behavior: reduce ? 'auto' : 'smooth' });
+    });
+  });
+</script>
+
+<div
+  bind:this={element}
+  role="group"
+  aria-label={label}
+  aria-current={selected ? 'true' : undefined}
+  data-selected={selected || undefined}
+  class={cn(
+    'group/item relative scroll-my-6 rounded-lg transition-shadow',
+    // Problems use a dashed amber outline: in brands whose primary is red, a
+    // red ring would read as "selected"
+    selected ? 'ring-2 ring-primary' : 'hover:ring-1 hover:ring-border',
+    invalid && 'outline-dashed outline-2 -outline-offset-2 outline-warning/70',
+    className
+  )}
+  onclickcapture={(e) => select(!(e.target as Element).closest?.('[data-studio-quick-action]'))}
+  onfocusin={() => select(false)}
+>
+  {#if !selected}
+    <!-- Keyboard way in for items with no focusable content of their own -->
+    <button
+      type="button"
+      class="sr-only left-2 top-2 z-10 rounded-md bg-primary px-2 py-1 text-xs font-medium text-primary-foreground focus:not-sr-only focus:absolute"
+      onclick={() => select(true)}
+    >
+      Edit {label}
+    </button>
+  {/if}
+
+  {#if selected && toolbar}
+    <div
+      data-studio-quick-action
+      class="absolute -top-4 right-3 z-10 flex items-center gap-0.5 rounded-md border border-border bg-background p-0.5 shadow-md"
+    >
+      {@render toolbar()}
+    </div>
+  {/if}
+
+  {@render children()}
+
+  {#if onInsert}
+    <div class="relative h-0" data-studio-quick-action>
+      <button
+        type="button"
+        aria-label={insertLabel ?? `Add below ${label}`}
+        title={insertLabel ?? 'Add below'}
+        class="absolute left-1/2 top-0 z-10 flex h-7 w-7 -translate-x-1/2 -translate-y-1/2 items-center justify-center rounded-full border border-border bg-background text-muted-foreground opacity-0 shadow-sm hover:border-primary hover:text-primary focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/item:opacity-100 [@media(hover:none)]:opacity-100"
+        class:opacity-100={selected}
+        onclick={(e) => {
+          e.stopPropagation();
+          onInsert?.();
+        }}
+      >
+        <Icon name="plus" size={14} aria-hidden="true" />
+      </button>
+    </div>
+  {/if}
+</div>

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

@@ -0,0 +1,29 @@
+import { type Snippet } from 'svelte';
+/**
+ * StudioCanvasItem - one selectable part of the canvas (a question, a block).
+ *
+ * Clicking anywhere in it, or tabbing into it, selects it; the content stays
+ * live, so a previewed question can still be answered. The selected item
+ * gets a ring and its `toolbar` (duplicate, delete...). With `onInsert`, a
+ * "+" between this item and the next adds a new one right there. On phones
+ * picking an item opens the inspector sheet.
+ */
+interface Props {
+    children: Snippet;
+    selected?: boolean;
+    onSelect?: () => void;
+    /** Names the item for screen readers and its Edit button, e.g. "Question 2" */
+    label: string;
+    /** Quick actions shown on the selected item */
+    toolbar?: Snippet;
+    /** Shows a "+" below the item that inserts after it */
+    onInsert?: () => void;
+    /** Accessible name of the insert button (default: "Add below {label}") */
+    insertLabel?: string;
+    /** Marks the item as having problems */
+    invalid?: boolean;
+    class?: string;
+}
+declare const StudioCanvasItem: import("svelte").Component<Props, {}, "">;
+type StudioCanvasItem = ReturnType<typeof StudioCanvasItem>;
+export default StudioCanvasItem;

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

@@ -0,0 +1,133 @@
+<script lang="ts" module>
+  export interface StudioInspectorTab {
+    id: string;
+    label: string;
+    /** Shown after the label, e.g. the number of comments */
+    count?: number;
+  }
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+  import { cn } from '../../utils.js';
+
+  /**
+   * StudioInspector - the Studio's right column: settings for whatever is
+   * selected, and nothing else.
+   *
+   * A header names the selection ("Question 3", "Single choice") with room
+   * for an action such as Change type; `tabs` put related views side by side
+   * with editing (e.g. Slide · Comments) instead of replacing it. Group the
+   * fields with `StudioInspectorSection`, content first and rarely-used
+   * settings in a collapsed "Advanced" section.
+   */
+  interface Props {
+    /** What is selected, e.g. "Question 3" */
+    title?: string;
+    /** Its kind, e.g. "Single choice" */
+    description?: string;
+    /** Header action, e.g. a Change type menu */
+    headerActions?: Snippet;
+    tabs?: StudioInspectorTab[];
+    /** Active tab (bindable) */
+    tab?: string;
+    onTabChange?: (tab: string) => void;
+    /** The fields; with tabs, render the active tab's content */
+    children: Snippet;
+    /** Pinned under the fields */
+    footer?: Snippet;
+    class?: string;
+  }
+
+  let {
+    title,
+    description,
+    headerActions,
+    tabs,
+    tab = $bindable(tabs?.[0]?.id ?? ''),
+    onTabChange,
+    children,
+    footer,
+    class: className,
+  }: Props = $props();
+
+  const uid = $props.id();
+
+  function choose(id: string) {
+    if (id === tab) return;
+    tab = id;
+    onTabChange?.(id);
+  }
+
+  function tabKeydown(event: KeyboardEvent, index: number) {
+    if (!tabs) return;
+    let next = -1;
+    if (event.key === 'ArrowRight') next = (index + 1) % tabs.length;
+    else if (event.key === 'ArrowLeft') next = (index - 1 + tabs.length) % tabs.length;
+    if (next < 0) return;
+    event.preventDefault();
+    choose(tabs[next].id);
+    document.getElementById(`${uid}-tab-${tabs[next].id}`)?.focus();
+  }
+</script>
+
+<div class={cn('flex h-full min-h-0 flex-col', className)}>
+  {#if title || headerActions}
+    <div class="flex shrink-0 items-start gap-2 border-b border-border px-4 py-3">
+      <div class="min-w-0 flex-1">
+        {#if title}<h2 class="truncate text-sm font-semibold">{title}</h2>{/if}
+        {#if description}
+          <p class="truncate text-xs text-muted-foreground">{description}</p>
+        {/if}
+      </div>
+      {#if headerActions}
+        <div class="flex shrink-0 items-center gap-1">{@render headerActions()}</div>
+      {/if}
+    </div>
+  {/if}
+
+  {#if tabs && tabs.length > 1}
+    <div
+      role="tablist"
+      aria-label={title ?? 'Inspector'}
+      class="flex shrink-0 gap-4 border-b border-border px-4"
+    >
+      {#each tabs as t, index (t.id)}
+        <button
+          type="button"
+          role="tab"
+          id="{uid}-tab-{t.id}"
+          aria-selected={t.id === tab}
+          aria-controls="{uid}-panel"
+          tabindex={t.id === tab ? 0 : -1}
+          class={cn(
+            '-mb-px border-b-2 py-2 text-sm font-medium focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            t.id === tab
+              ? 'border-primary text-foreground'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          )}
+          onclick={() => choose(t.id)}
+          onkeydown={(e) => tabKeydown(e, index)}
+        >
+          {t.label}
+          {#if t.count}
+            <span class="ml-1 rounded-full bg-muted px-1.5 text-xs tabular-nums">{t.count}</span>
+          {/if}
+        </button>
+      {/each}
+    </div>
+  {/if}
+
+  <div
+    class="min-h-0 flex-1 overflow-y-auto"
+    id={tabs && tabs.length > 1 ? `${uid}-panel` : undefined}
+    role={tabs && tabs.length > 1 ? 'tabpanel' : undefined}
+    aria-labelledby={tabs && tabs.length > 1 ? `${uid}-tab-${tab}` : undefined}
+  >
+    {@render children()}
+  </div>
+
+  {#if footer}
+    <div class="shrink-0 border-t border-border px-4 py-3">{@render footer()}</div>
+  {/if}
+</div>

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

@@ -0,0 +1,37 @@
+export interface StudioInspectorTab {
+    id: string;
+    label: string;
+    /** Shown after the label, e.g. the number of comments */
+    count?: number;
+}
+import type { Snippet } from 'svelte';
+/**
+ * StudioInspector - the Studio's right column: settings for whatever is
+ * selected, and nothing else.
+ *
+ * A header names the selection ("Question 3", "Single choice") with room
+ * for an action such as Change type; `tabs` put related views side by side
+ * with editing (e.g. Slide · Comments) instead of replacing it. Group the
+ * fields with `StudioInspectorSection`, content first and rarely-used
+ * settings in a collapsed "Advanced" section.
+ */
+interface Props {
+    /** What is selected, e.g. "Question 3" */
+    title?: string;
+    /** Its kind, e.g. "Single choice" */
+    description?: string;
+    /** Header action, e.g. a Change type menu */
+    headerActions?: Snippet;
+    tabs?: StudioInspectorTab[];
+    /** Active tab (bindable) */
+    tab?: string;
+    onTabChange?: (tab: string) => void;
+    /** The fields; with tabs, render the active tab's content */
+    children: Snippet;
+    /** Pinned under the fields */
+    footer?: Snippet;
+    class?: string;
+}
+declare const StudioInspector: import("svelte").Component<Props, {}, "tab">;
+type StudioInspector = ReturnType<typeof StudioInspector>;
+export default StudioInspector;