@picked/svelte 0.0.1-dev.1789541668638 → 0.0.1-dev.1793756239746

package/dist/plugins/devtools/DevToolsExperience.svelte

@@ -6,172 +6,415 @@
   the change in the paired React component to maintain visual and behavioral parity.
 -->
 <script lang="ts">
-  import { getExperience, getPicked } from '../../hooks'
-  import { Button, Heading, Stack } from './ui'
-  import Tabs from './components/Tabs.svelte'
-  import ExperiencesListScreen from './screens/experiences/ExperiencesListScreen.svelte'
-  import ExperienceInstancesListScreen from './screens/experience-instances/ExperienceInstancesListScreen.svelte'
-  import PredicatesListScreen from './screens/predicates/PredicatesListScreen.svelte'
-  import ComponentsListScreen from './screens/components/ComponentsListScreen.svelte'
-  import FrameworksListScreen from './screens/frameworks/FrameworksListScreen.svelte'
+  /** @file The devtools shell: the floating button, and a panel of tabs listed down its left-hand side. */
+  import type { Component } from 'svelte'
+  import { tick } from 'svelte'
+  import { getExperience, getPicked, useUnit } from '../../hooks'
+  import { Badge, Button, Heading, Switch } from './ui'
+  import PickedIcon from './PickedIcon.svelte'
+  import AdaptedToolHost from './components/AdaptedToolHost.svelte'
+  import Launcher from './launcher/Launcher.svelte'
+  import { readAutoHide, writeAutoHide } from './launcher/launcher'
+  import Sidebar from './sidebar/Sidebar.svelte'
+  import {
+    DEVELOPER_OPEN_STORAGE_KEY,
+    TAB_STORAGE_KEY,
+    buildNav,
+    developerTabId,
+    isInDeveloper,
+    readStored,
+    resolveTab,
+    toolTabId,
+    writeStored,
+  } from './sidebar/nav'
+  import { readDevtoolsOptions } from './options'
+  import { readCustomTools, reviewTools } from './customTools'
+  import { provideDevtoolsSession } from './session-access'
+  import { setPostureContext } from './posture-context'
+  import { createSessionData } from './session'
+  import {
+    TAB_INTROS,
+    configSourceLabel,
+    derivePosture,
+    guideFixes,
+    guideSections,
+    type GuideSection,
+    type ReviewTabId,
+  } from './derive'
+  import { AnswersPanel, GuidePanel, JourneyPanel, SessionPanel, VariationsPanel } from './review'
   import ProjectScreen from './screens/project/ProjectScreen.svelte'
+  import ComponentsListScreen from './screens/components/ComponentsListScreen.svelte'
   import ConfigScreen from './screens/config/ConfigScreen.svelte'
-  import IdentityScreen from './screens/identity/IdentityScreen.svelte'
-  import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
-  import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
-  import FieldsListScreen from './screens/fields/FieldsListScreen.svelte'
   import ContentListScreen from './screens/content/ContentListScreen.svelte'
-  import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
   import EventsListScreen from './screens/events/EventsListScreen.svelte'
+  import ExperienceInstancesListScreen from './screens/experience-instances/ExperienceInstancesListScreen.svelte'
+  import ExperiencesListScreen from './screens/experiences/ExperiencesListScreen.svelte'
+  import FeaturesListScreen from './screens/features/FeaturesListScreen.svelte'
+  import FieldsListScreen from './screens/fields/FieldsListScreen.svelte'
+  import FrameworksListScreen from './screens/frameworks/FrameworksListScreen.svelte'
+  import HistoryEntriesListScreen from './screens/history/HistoryEntriesListScreen.svelte'
+  import IdentityScreen from './screens/identity/IdentityScreen.svelte'
+  import PredicatesListScreen from './screens/predicates/PredicatesListScreen.svelte'
+  import ResponsesListScreen from './screens/responses/ResponsesListScreen.svelte'
   import CustomToolsScreen from './screens/custom-tools/CustomToolsScreen.svelte'
-  import PickedIcon from './PickedIcon.svelte'
 
   const experience = getExperience()
   const client = getPicked()
 
+  const options = readDevtoolsOptions(client)
+  const tools = reviewTools(readCustomTools(client))
+  const posture = derivePosture({
+    readOnly: options.readOnly,
+    environmentLabel: options.environmentLabel,
+  })
+  setPostureContext(posture)
+
   const dashboardProjectUrl = `${client.dashboardUrl}/p/${client.projectId}`
-  const isPreview = Boolean(client.searchParams['preview-token']?.[0])
-
-  const tabs = [
-    {
-      id: 'project',
-      label: 'Project',
-      component: ProjectScreen,
-      props: {},
-    },
-    {
-      id: 'components',
-      label: 'Components',
-      component: ComponentsListScreen,
-      props: {},
-    },
-    {
-      id: 'config',
-      label: 'Config',
-      component: ConfigScreen,
-      props: {},
-    },
-    {
-      id: 'content',
-      label: 'Content',
-      component: ContentListScreen,
-      props: {},
-    },
-    {
-      id: 'events',
-      label: 'Events',
-      component: EventsListScreen,
-      props: {},
-    },
-    {
-      id: 'experience-instances',
-      label: 'Experience Instances',
-      component: ExperienceInstancesListScreen,
-      props: {},
-    },
-    {
-      id: 'experiences',
-      label: 'Experiences',
-      component: ExperiencesListScreen,
-      props: {},
-    },
-    {
-      id: 'features',
-      label: 'Features',
-      component: FeaturesListScreen,
-      props: {},
-    },
-    {
-      id: 'fields',
-      label: 'Fields',
-      component: FieldsListScreen,
-      props: {},
-    },
-    {
-      id: 'frameworks',
-      label: 'Frameworks',
-      component: FrameworksListScreen,
-      props: {},
-    },
-    {
-      id: 'history',
-      label: 'History',
-      component: HistoryEntriesListScreen,
-      props: {},
-    },
-    {
-      id: 'identity',
-      label: 'Identity',
-      component: IdentityScreen,
-      props: {},
-    },
-    {
-      id: 'predicates',
-      label: 'Predicates',
-      component: PredicatesListScreen,
-      props: {},
-    },
-    {
-      id: 'responses',
-      label: 'Responses',
-      component: ResponsesListScreen,
-      props: {},
-    },
-    {
-      id: 'custom-tools',
-      label: 'Custom Tools',
-      component: CustomToolsScreen,
-      props: {},
-    },
-  ]
-
-  const isOpen = experience.isOpenStore
+  const previewToken = client.searchParams['preview-token']?.[0]
+  const preview = previewTag()
+  const configSource = configSourceLabel(previewToken)
+
+  /**
+   * The tag beside the floating button: a preview session, a preview whose workspace is gone, or none.
+   *
+   * @returns {'preview' | 'unavailable' | null} The tag to show.
+   * @example previewTag() // 'preview' with a preview token
+   */
+  function previewTag(): 'preview' | 'unavailable' | null {
+    if (client.previewUnavailable) return 'unavailable'
+    return previewToken ? 'preview' : null
+  }
+
+  const sessionStorageOf = (): Storage => window.sessionStorage
+  const localStorageOf = (): Storage => window.localStorage
+
+  /** The developer screens, keyed by their sidebar id. */
+  const DEVELOPER_COMPONENTS: Record<string, Component> = {
+    [developerTabId('project')]: ProjectScreen,
+    [developerTabId('components')]: ComponentsListScreen,
+    [developerTabId('config')]: ConfigScreen,
+    [developerTabId('content')]: ContentListScreen,
+    [developerTabId('events')]: EventsListScreen,
+    [developerTabId('experience-instances')]: ExperienceInstancesListScreen,
+    [developerTabId('experiences')]: ExperiencesListScreen,
+    [developerTabId('features')]: FeaturesListScreen,
+    [developerTabId('fields')]: FieldsListScreen,
+    [developerTabId('frameworks')]: FrameworksListScreen,
+    [developerTabId('history')]: HistoryEntriesListScreen,
+    [developerTabId('identity')]: IdentityScreen,
+    [developerTabId('predicates')]: PredicatesListScreen,
+    [developerTabId('responses')]: ResponsesListScreen,
+    [developerTabId('custom-tools')]: CustomToolsScreen,
+  }
+
+  // ── The session record ───────────────────────────────────────────────────────────────────────
+  // Made at mount, which is launch: the launcher renders while the panel is closed, so the trail
+  // and the answer history listen from the start.
+  const session = createSessionData(client, {
+    exclude: options.hiddenExperienceKeys,
+    precedence: options.journeyPrecedence,
+    codeOwned: options.codeOwnedFields,
+  })
+  const releaseSession = provideDevtoolsSession(client, { session, posture })
+  $effect(() => () => {
+    releaseSession()
+    session.destroy()
+  })
+
+  const trails = useUnit(session.trailsStore)
+  const answerHistory = useUnit(session.historyStore)
+  const asked = useUnit(session.askedStore)
+  const journey = useUnit(session.journeyStore)
+  const features = useUnit(client.features.listStore)
+  const isOpen = useUnit(experience.isOpenStore)
+
+  // ── Tabs ─────────────────────────────────────────────────────────────────────────────────────
+  const nav = $derived(buildNav({ variations: $features.length > 0, tools }))
+  const storedTab = readStored(sessionStorageOf, TAB_STORAGE_KEY)
+  let tab = $state(storedTab ?? 'guide')
+  let developerOpen = $state(readStored(sessionStorageOf, DEVELOPER_OPEN_STORAGE_KEY) === 'true')
+  let drawerOpen = $state(false)
+
+  // A tab can disappear under the viewer (Variations once the feature list is empty), and a stored
+  // developer screen opens its group.
+  $effect(() => {
+    const resolved = resolveTab(tab, nav)
+    if (resolved !== tab) tab = resolved
+    if (isInDeveloper(tab, nav) && !developerOpen) developerOpen = true
+  })
+
+  const selectedItem = $derived([...nav.primary, ...nav.developer].find((item) => item.id === tab))
+  const selectedTool = $derived(tools.find((tool) => toolTabId(tool.id) === tab))
+  const developerScreen = $derived(DEVELOPER_COMPONENTS[tab])
+
+  /**
+   * Narrows a tab id to one of the review tabs.
+   *
+   * @param {string} id - A sidebar tab id.
+   * @returns {boolean} `true` for a review tab.
+   * @example isReviewTab('answers') // true
+   */
+  function isReviewTab(id: string): id is ReviewTabId {
+    return id in TAB_INTROS
+  }
+
+  /**
+   * Selects a tab, remembers it, and closes the narrow-panel drawer.
+   *
+   * @param {string} id - The tab to select.
+   * @example selectTab('journey')
+   */
+  function selectTab(id: string): void {
+    tab = id
+    drawerOpen = false
+    writeStored(sessionStorageOf, TAB_STORAGE_KEY, id)
+  }
+
+  /**
+   * Opens or folds the Developer group, and remembers it.
+   *
+   * @example toggleDeveloper()
+   */
+  function toggleDeveloper(): void {
+    developerOpen = !developerOpen
+    writeStored(sessionStorageOf, DEVELOPER_OPEN_STORAGE_KEY, String(developerOpen))
+  }
+
+  // ── How to use ───────────────────────────────────────────────────────────────────────────────
+  const guide = $derived.by(() => {
+    const available = { variations: $features.length > 0 }
+    const lead: GuideSection[] = options.guide.sections.map((section) => ({ ...section, tab: null }))
+    const toolSections: GuideSection[] = tools.flatMap((tool) =>
+      tool.guide
+        ? [
+            {
+              id: `tool-${tool.id}`,
+              title: tool.label,
+              steps: tool.guide.steps,
+              notes: tool.guide.notes ?? [],
+              tab: toolTabId(tool.id),
+            },
+          ]
+        : [],
+    )
+    return {
+      sections: guideSections(available, { lead, tools: toolSections }),
+      fixes: guideFixes(available, options.guide.fixes),
+      tabLabels: Object.fromEntries(nav.primary.map((item) => [item.id, item.label])),
+    }
+  })
+
+  const followUp = options.answerFollowUp
+    ? { label: options.answerFollowUp.label, run: () => options.answerFollowUp?.run(client) }
+    : null
+
+  // ── The floating button ──────────────────────────────────────────────────────────────────────
+  let autoHide = $state(readAutoHide(localStorageOf, options.launcher.autoHide))
+
+  /**
+   * Records the viewer's auto-hide choice.
+   *
+   * @param {boolean} value - Whether the button auto-hides.
+   * @example setAutoHide(false)
+   */
+  function setAutoHide(value: boolean): void {
+    autoHide = value
+    writeAutoHide(localStorageOf, value)
+  }
+
+  // ── Dialog behaviour ─────────────────────────────────────────────────────────────────────────
+  /** The open panel; Svelte sets it back to `null` when the panel unmounts. */
+  let panel: HTMLDivElement | null = $state(null)
+
+  const FOCUSABLE =
+    'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])'
+
+  /**
+   * The panel's focusable elements, in document order.
+   *
+   * @returns {HTMLElement[]} Every focusable element inside the panel.
+   * @example focusables().at(0)?.focus()
+   */
+  function focusables(): HTMLElement[] {
+    if (panel === null) return []
+    return Array.from(panel.querySelectorAll(FOCUSABLE)).filter(
+      (node): node is HTMLElement => node instanceof HTMLElement && node.offsetParent !== null,
+    )
+  }
+
+  /**
+   * Keeps Tab inside the panel, and closes the drawer, then the panel, on Escape.
+   *
+   * @param {KeyboardEvent} event - A key pressed inside the panel.
+   * @example onPanelKeydown(new KeyboardEvent('keydown', { key: 'Escape' }))
+   */
+  function onPanelKeydown(event: KeyboardEvent): void {
+    if (event.key === 'Escape') {
+      event.stopPropagation()
+      if (drawerOpen) drawerOpen = false
+      else experience.close()
+      return
+    }
+
+    if (event.key !== 'Tab') return
+
+    const nodes = focusables()
+    const first = nodes.at(0)
+    const last = nodes.at(-1)
+    if (first === undefined || last === undefined) return
+    if (event.shiftKey && event.target === first) {
+      event.preventDefault()
+      last.focus()
+    } else if (!event.shiftKey && event.target === last) {
+      event.preventDefault()
+      first.focus()
+    }
+  }
+
+  $effect(() => {
+    if (!$isOpen) return
+    void tick().then(() => focusables().at(0)?.focus())
+  })
 </script>
 
 {#if $isOpen}
-  <div
-    data-testid="devtools"
-    class="devtools"
-    role="dialog"
-    aria-modal="true"
-    aria-labelledby="devtools-header"
-  >
-    <div class="backdrop"></div>
-    <div class="container">
-      <header class="toolbar" id="devtools-header">
+  <div data-testid="devtools" class="devtools">
+    <!-- The backdrop is a pointer target only; the keyboard closes the dialog with Escape. -->
+    <div class="backdrop" aria-hidden="true" onclick={() => experience.close()}></div>
+    <div
+      bind:this={panel}
+      class="container"
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby="devtools-header"
+      tabindex="-1"
+      onkeydown={onPanelKeydown}
+    >
+      <header class="toolbar">
         <div class="toolbar-left">
-          <Stack direction="horizontal" gap="small" >
-            <PickedIcon height={25} width={25}/>
-            <Heading size="small">Developer Tools</Heading>
-          </Stack>
+          <button
+            type="button"
+            class="menu-button"
+            aria-expanded={drawerOpen}
+            aria-controls="devtools-nav"
+            data-testid="devtools-menu"
+            onclick={() => (drawerOpen = !drawerOpen)}
+          >
+            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" aria-hidden="true">
+              <path d="M2.5 4h11M2.5 8h11M2.5 12h11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+            </svg>
+            <span class="menu-label">{selectedItem?.label ?? 'Menu'}</span>
+          </button>
+          <span class="brand wide-only">
+            <PickedIcon height={22} width={22} />
+            <span id="devtools-header"><Heading size="small">Picked Devtools</Heading></span>
+          </span>
+          {#if posture.label !== null}
+            <Badge status={posture.readOnly ? 'warning' : 'default'} size="small" testId="devtools-posture">
+              {posture.label}
+            </Badge>
+          {/if}
+          <span class="config-source wide-only" data-testid="devtools-config-source">{configSource}</span>
         </div>
-        <div class="toolbar-center"></div>
         <div class="toolbar-right">
-          <Button variant="ghost" size="small" href={client.documentationSiteUrl} target="_blank">Docs</Button>
-          <Button variant="ghost" size="small" href={dashboardProjectUrl} target="_blank">Dashboard</Button>
+          <span class="auto-hide" data-testid="devtools-auto-hide">
+            <Switch
+              label="Auto-hide button"
+              name="devtools-auto-hide"
+              size="small"
+              checked={autoHide}
+              onchange={setAutoHide}
+            />
+          </span>
+          <span class="wide-only">
+            <Button variant="ghost" size="small" href={client.documentationSiteUrl} target="_blank">Docs</Button>
+          </span>
+          <span class="wide-only">
+            <Button variant="ghost" size="small" href={dashboardProjectUrl} target="_blank">Dashboard</Button>
+          </span>
           <Button variant="ghost" size="small" onclick={() => experience.close()}>Close</Button>
         </div>
       </header>
-      <section class="main">
-        <Tabs {tabs} initialTab={0} />
-      </section>
+
+      <div class="body">
+        {#if drawerOpen}
+          <div class="drawer-scrim" aria-hidden="true" onclick={() => (drawerOpen = false)}></div>
+        {/if}
+        <div class="nav-column" class:drawer-open={drawerOpen} id="devtools-nav">
+          <Sidebar
+            {nav}
+            selected={tab}
+            {developerOpen}
+            onSelect={selectTab}
+            onToggleDeveloper={toggleDeveloper}
+          />
+        </div>
+
+        <section class="pane" aria-label={selectedItem?.label} data-testid="devtools-pane">
+          {#if developerScreen}
+            {@const Screen = developerScreen}
+            <div class="developer-body">
+              <Screen />
+            </div>
+          {:else if selectedTool}
+            <div class="pane-header">
+              <h2 class="pane-title">{selectedTool.label}</h2>
+              {#if selectedTool.description}
+                <p class="intro">{selectedTool.description}</p>
+              {/if}
+            </div>
+            <div class="tool-body">
+              <AdaptedToolHost tool={selectedTool} />
+            </div>
+          {:else if isReviewTab(tab)}
+            <div class="pane-header">
+              <h2 class="pane-title">{selectedItem?.label}</h2>
+              {#if tab !== 'journey'}
+                <p class="intro">{TAB_INTROS[tab]}</p>
+              {/if}
+            </div>
+            <div class="review-body" class:fill={tab === 'journey'}>
+              {#if tab === 'guide'}
+                <GuidePanel
+                  sections={guide.sections}
+                  fixes={guide.fixes}
+                  tabLabels={guide.tabLabels}
+                  onOpenTab={selectTab}
+                />
+              {:else if tab === 'session'}
+                <SessionPanel
+                  {client}
+                  {posture}
+                  journey={$journey}
+                  history={$answerHistory}
+                  onShowAnswers={() => selectTab('answers')}
+                />
+              {:else if tab === 'answers'}
+                <AnswersPanel {client} {posture} asked={$asked} {followUp} />
+              {:else if tab === 'journey'}
+                <JourneyPanel
+                  {client}
+                  {posture}
+                  journey={$journey}
+                  trails={$trails}
+                  hiddenKeys={options.hiddenExperienceKeys}
+                />
+              {:else if tab === 'variations'}
+                <VariationsPanel {client} />
+              {/if}
+            </div>
+          {/if}
+        </section>
+      </div>
     </div>
   </div>
 {:else}
-  <div class="launcher">
-    {#if isPreview}
-      <span class="preview-tag" role="status" aria-live="polite">Preview mode</span>
-    {/if}
-    <button
-      class="floating-button"
-      class:has-preview-tag={isPreview}
-      onclick={() => experience.open()}
-      aria-label="Open Picked Devtools"
-      title="Open Picked Devtools"
-    >
-      <PickedIcon height={25} width={25}/>
-    </button>
-  </div>
+  <Launcher
+    position={options.launcher.position}
+    {autoHide}
+    {preview}
+    onOpen={() => experience.open()}
+  />
 {/if}
 
 <style>
@@ -264,6 +507,12 @@
     overflow: hidden;
   }
 
+  @media (max-width: 640px) {
+    .devtools {
+      padding: var(--space-2);
+    }
+  }
+
   .backdrop {
     position: fixed;
     inset: 0;
@@ -281,44 +530,188 @@
     z-index: 2;
     width: 100%;
     height: 100%;
+    container-type: inline-size;
+    container-name: devtools-panel;
   }
 
   .toolbar {
-    height: 40px;
+    min-height: 40px;
     background-color: var(--color-white);
     border-bottom: 1px solid var(--color-gray-200);
     padding: 0 var(--space-4);
     display: flex;
     align-items: center;
     justify-content: space-between;
+    gap: var(--space-3);
     flex-shrink: 0;
   }
 
   .toolbar-left {
     display: flex;
     align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
   }
 
-  .toolbar-center {
+  .toolbar-right {
     display: flex;
     align-items: center;
-    justify-content: center;
+    gap: var(--space-1);
+    flex-shrink: 0;
   }
 
-  .toolbar-right {
+  .brand {
     display: flex;
     align-items: center;
-    gap: var(--space-1);
+    gap: var(--space-2);
+  }
+
+  .config-source {
+    font-size: var(--text-xs);
+    color: var(--color-gray-500);
+    white-space: nowrap;
+  }
+
+  .auto-hide {
+    margin-right: var(--space-2);
+  }
+
+  .menu-button {
+    display: none;
+    align-items: center;
+    gap: var(--space-2);
+    min-width: 0;
+    height: 28px;
+    padding: 0 var(--space-2);
+    border: 1px solid var(--color-gray-200);
+    border-radius: var(--radius-md);
+    background-color: var(--color-white);
+    font: inherit;
+    font-size: var(--text-sm);
+    font-weight: var(--font-medium);
+    color: var(--color-gray-900);
+    cursor: pointer;
+  }
+
+  .menu-button:focus-visible {
+    outline: var(--ring-width) solid var(--ring-color);
+    outline-offset: var(--ring-offset);
   }
 
-  .main {
+  .menu-label {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .body {
+    position: relative;
     flex: 1;
-    background-color: var(--color-gray-50);
-    overflow: auto;
+    display: grid;
+    grid-template-columns: 200px minmax(0, 1fr);
+    min-height: 0;
+  }
+
+  .nav-column {
+    min-height: 0;
+    border-right: 1px solid var(--color-gray-200);
+    background-color: var(--color-white);
+  }
+
+  .drawer-scrim {
+    display: none;
+  }
+
+  .pane {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    min-height: 0;
+    overflow: hidden;
+    background-color: var(--color-white);
+  }
+
+  .pane-header {
+    flex-shrink: 0;
+    padding: var(--space-3) var(--space-4) 0;
+  }
+
+  .pane-title {
+    margin: 0;
+    font-size: var(--text-base);
+    font-weight: var(--font-semibold);
+    color: var(--color-gray-900);
+  }
+
+  .intro {
+    margin: var(--space-1) 0 0;
+    font-size: var(--text-xs);
+    color: var(--color-gray-500);
+  }
+
+  .review-body {
+    flex: 1;
+    min-height: 0;
+    overflow-y: auto;
+    padding: var(--space-3) var(--space-4) var(--space-4);
+    scrollbar-width: thin;
+  }
+
+  .review-body.fill {
     display: flex;
     flex-direction: column;
   }
 
+  .tool-body {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+    display: grid;
+  }
+
+  .developer-body {
+    flex: 1 1 auto;
+    display: grid;
+    min-height: 0;
+    overflow: auto;
+    background-color: var(--color-gray-50);
+  }
+
+  @container devtools-panel (max-width: 639px) {
+    .body {
+      grid-template-columns: minmax(0, 1fr);
+    }
+
+    .nav-column {
+      display: none;
+      position: absolute;
+      inset: 0 auto 0 0;
+      z-index: 3;
+      width: min(280px, 85%);
+      box-shadow: var(--shadow-xl);
+    }
+
+    .nav-column.drawer-open {
+      display: block;
+    }
+
+    .drawer-scrim {
+      display: block;
+      position: absolute;
+      inset: 0;
+      z-index: 2;
+      background-color: rgba(0, 0, 0, 0.3);
+    }
+
+    .menu-button {
+      display: inline-flex;
+    }
+
+    .wide-only {
+      display: none;
+    }
+  }
+
   /* Global table styles for screens that still use raw tables */
   .devtools :global(table) {
     width: 100%;
@@ -349,57 +742,6 @@
     padding-right: var(--space-4);
   }
 
-  .launcher {
-    position: fixed;
-    bottom: 1rem;
-    right: 0;
-    z-index: 999999;
-    display: flex;
-    align-items: stretch;
-    cursor: pointer;
-    transform: translateX(calc(100% - 8px));
-    transition: transform 180ms ease-out;
-
-    &:hover,
-    &:focus-within {
-      transform: translateX(0);
-    }
-  }
-
-  .floating-button {
-    border-radius: 6px;
-    background-color: #ffffff;
-    display: grid;
-    place-items: center;
-    cursor: pointer;
-    border: 0 transparent;
-    padding: 6px;
-    box-shadow: 2px 2px 4px #00000029;
-
-    &:hover {
-      background-color: #f5f5f5;
-    }
-  }
-
-  .floating-button.has-preview-tag {
-    border-radius: 0 6px 6px 0;
-  }
-
-  .preview-tag {
-    display: flex;
-    align-items: center;
-    padding: 0 10px;
-    background: #2563eb;
-    color: #ffffff;
-    border-radius: 6px 0 0 6px;
-    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
-      'Helvetica Neue', Arial, sans-serif;
-    font-size: 12px;
-    font-weight: 500;
-    line-height: 1.4;
-    box-shadow: 2px 2px 4px #00000029;
-  }
-
   /** Compact inline form elements for use within table cells */
   .devtools :global(.inline-select),
   .devtools :global(.inline-input) {