@lapismd/design-core 0.1.0

package/src/shared/workspace/REFERENCE.md

@@ -0,0 +1,122 @@
+# Workspace source provenance
+
+The Workspace layer is a source-led migration of the standalone
+`@lapis-notes/workspace-shell` package. It remains an application-independent
+UI framework and does not import the Lapis runtime.
+
+## Pinned revisions
+
+- Standalone app-shell validated slice: `b06d1e3f58c3`
+- Canonical Lapis source:
+  `a371198e495d9e4e465c2960a04b3a4fd11f4023`
+- Target UI migration base: `bfa709f3`
+
+## Source tree hashes
+
+Hashes are SHA-256 digests of the sorted per-file SHA-256 list for each source
+tree.
+
+| Source tree                               | SHA-256                                                            |
+| ----------------------------------------- | ------------------------------------------------------------------ |
+| `app-shell/src/lib/core`                  | `d32a22a58339721b15eef051dcb96e021cb29ba7c3baef27baf0d1dc39cf7019` |
+| `app-shell/src/lib/settings`              | `b61eecaef1276a44f8fde51809d71ad19aad68e4092c21c8fe551042ead2352b` |
+| `app-shell/src/lib/ui`                    | `002c0adf375b3258c151d518dad2232b51a8d59be11ab791a1428675bb08e4e4` |
+| `app-shell/src/lib/components/ui`         | `aa9c65cf5377be19db43c0af8de5bdae31a6dc80d22b447c86bf924d432036b5` |
+| `app-shell/plugins/fmode/src/lib`         | `b5b39f3b1bf12901c85a8ec637028a8facf84ae0ee195846a244d306c9de4ba7` |
+| `app-shell/plugins/notifications/src/lib` | `95e226285406b89514cc0c7ace9eb71ca11629b1500e2dbf8da1d0b308e5fb72` |
+
+The copied `components/ui` tree is recorded for audit purposes only. It is not
+part of the target migration.
+
+## Archived source reference assets
+
+The target-owned copies live under `reference/lapis/workspace-shell/`. They are
+retained as read-only migration provenance and are no longer served by
+Storybook or used by the active component catalog.
+
+| Asset                       | SHA-256                                                            |
+| --------------------------- | ------------------------------------------------------------------ |
+| `workspace-shell-light.png` | `612902f9da1b729f94a94e15057296cad752cafeab26435f2bed017a6735a28e` |
+| `workspace-shell-dark.png`  | `7b4b1f94d61a7efeb725ddf0c56b024853be5873da76f24be517878c28f09985` |
+| `reference/provenance.json` | `853b8fe4e84fa1915018c3055ea8ed88796aaabec944782fafcff423e70ec5b2` |
+
+Normal Visual Delta and test commands must never rewrite these assets.
+
+The complete standalone Storybook snapshot set is retained separately at
+`reference/lapis/workspace-shell/storybook/`. Its provenance manifest pins 52
+source-story captures to validated app-shell slice `b06d1e3f58c3`, records the
+1280 × 900 / 3× capture contract and inventory digest, and records the
+historical source-to-target mappings.
+
+`pnpm workspace:visual:audit` is the read-only development gate for Workspace
+story classification and snapshot ownership. After candidate creation is
+approved, `pnpm workspace:visual:verify` additionally requires a candidate
+baseline for every non-skipped Workspace story.
+
+The original 52-image set remains immutable as v1 provenance. Corrected v2
+references live in `reference/lapis/workspace-shell/storybook-v2/` and contain
+both light and dark Lapis captures for every canonical scene. The recorded
+metadata includes Chromium, viewport, device scale, frozen time, per-story
+capture scope, and injected F-Mode/Notifications CSS hashes. The 79-story
+crosswalk remains an audit record.
+
+After manual acceptance of the migrated UI, the parity-only stories, source
+capture command, source route, and compare-only Playwright project were retired.
+The committed Workspace component snapshots under
+`tests/visual/storybook.spec.ts-snapshots/workspace/` are now the visual source
+of truth. They are updated only through the repository's explicitly approved
+Visual Delta workflow and compared read-only during normal tests.
+
+## Styling adaptation
+
+The source shell used copied shadcn-svelte components and generated Tailwind
+utilities. The target retains the accessible behavior and Lapis geometry while
+replacing that implementation with:
+
+- direct semantic HTML where sufficient;
+- repository shadcn primitives for settings controls, scroll areas, and
+  resizable panels;
+- direct Bits UI primitives where managed focus or popup semantics are needed;
+- Paneforge for recursive resizing;
+- component-local native CSS;
+- public `--ui-workspace-*` tokens;
+- `data-ui-component` and `data-ui-part` ownership markers.
+
+The optional `@lapismd/design-core/themes/lapis.css` brand theme maps the pinned Lapis
+light/dark palette, shape, and shell geometry onto the host and Workspace token
+contracts. It is selected independently from the Storybook light/dark toolbar,
+so either Lapis colour mode can be reviewed without changing component code.
+
+Any markup deviation required by this adaptation must be recorded beside the
+component in `PLAN.md` and covered by behavior and visual tests.
+
+## Component migration audit
+
+The audit treats source component families as the contract. Target filenames are
+allowed to change to follow this repository's one-family-per-folder convention,
+but retained behavior must have a public target component and colocated story
+coverage.
+
+| Source app-shell family                                                                                                         | Target Workspace family                                                                                    | Status   |
+| ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- |
+| `app-shell-{root,surface,ribbon,left-sidebar,right-sidebar,workspace,floating-layer,status-bar}.svelte`                         | `app-shell/` compound components                                                                           | Complete |
+| `app-shell-{about-dialog,command-palette,settings,hotkey-settings,core-plugins-settings,notice-host,plugin-layer}.svelte`       | `app-shell/`, `about-dialog/`, `command-palette/`, `settings/`                                             | Complete |
+| `workspace-{tab-strip,tabs-move}.svelte` and top-tab rendering from `workspace-pane.svelte`                                     | `tabs/WorkspaceTabs.svelte`, `tabs/WorkspaceTabsMove.svelte`                                               | Complete |
+| `workspace-stacked-pane.svelte`                                                                                                 | `stacked-tabs/WorkspaceStackedTabs.svelte`                                                                 | Complete |
+| `workspace-{pane,tree}.svelte` split recursion                                                                                  | `split/WorkspaceSplit.svelte`, `tree/WorkspaceTree.svelte`                                                 | Complete |
+| `workspace-{sidebar,sidebar-empty,sidebar-group,sidebar-toggle}.svelte`                                                         | `sidebar/`, `sidebar-empty/`, `sidebar-group/`, `sidebar-toggle/`                                          | Complete |
+| `workspace-{view-header,view-host,imperative-view,empty,icon}.svelte`                                                           | `view-header/`, `view-host/`, `empty/`, `icon/`                                                            | Complete |
+| `workspace-context-menu-items.svelte`, `workspace-menu-items.svelte`                                                            | `menu/WorkspaceMenuItems.svelte`                                                                           | Complete |
+| `workspace-drag.svelte.ts`, `workspace-pointer-drag-policy.ts`, `workspace-tabs-drop.{svelte,ts}`, `workspace-tabs-move.svelte` | `drag/`, `drop-overlay/`, `tabs/WorkspaceTabsMove.svelte`                                                  | Complete |
+| `workspace-{floating-window,popout-surface}.svelte`, shell floating and popout layers                                           | `floating-window/`, `floating-layer/`, `popout/`                                                           | Complete |
+| `workspace-{ribbon,status-bar,status-item}.svelte`                                                                              | `ribbon/`, `status-bar/`, `status-item/`                                                                   | Complete |
+| `workspace-mobile.svelte` and all seven `workspace-mobile-*` helper components                                                  | `mobile/WorkspaceMobile*.svelte` public component family                                                   | Complete |
+| `app-settings-*`, `workspace-setting-*`, `workspace-settings-surface.svelte`                                                    | `settings/` native-CSS compound components                                                                 | Complete |
+| F-Mode and Notifications package components                                                                                     | `plugins/f-mode/`, `plugins/notifications/`                                                                | Complete |
+| Lapis `packages/workspace/.../feature/file-explorer` (vault-coupled plugin UI)                                                  | `explorer/` reusable controller + adapters (`Workspace/Panels/Explorer`)                                   | Complete |
+| Source shell, framework, component, settings, overlay, and reference stories                                                    | Colocated `*.stories.svelte` and `*.mdx` files across each target family                                   | Complete |
+| Copied shadcn components and generated Tailwind utility wrappers                                                                | Not migrated; replaced by semantic HTML, direct Bits UI where needed, Paneforge, native CSS, and UI tokens | Excluded |
+
+The active Workspace visual contract is the approved component-story baseline
+catalog. The immutable Lapis inventories remain available only for historical
+provenance.

package/src/shared/workspace/about-dialog/WorkspaceAboutDialog.css

@@ -0,0 +1,163 @@
+.ui-workspace-about {
+  position: absolute;
+  inset: 0;
+  z-index: calc(var(--ui-workspace-overlay-z-index) + 30);
+  display: grid;
+  place-items: center;
+  padding: 1rem;
+  background: rgb(0 0 0 / 42%);
+}
+
+.ui-workspace-about__dialog {
+  width: min(20rem, 100%);
+  border: 1px solid var(--ui-workspace-border);
+  border-radius: 1.75rem;
+  padding: 1.75rem 1.5rem 1.25rem;
+  color: var(--ui-workspace-popover-foreground);
+  background: var(--ui-workspace-popover);
+  box-shadow: var(--ui-workspace-shadow);
+  text-align: center;
+}
+
+.ui-workspace-about__logo {
+  display: grid;
+  width: 5rem;
+  height: 5rem;
+  margin: 0 auto 1rem;
+  place-content: center;
+  overflow: hidden;
+  border-radius: 1.35rem;
+  color: var(--ui-workspace-accent);
+  background: var(--ui-workspace-muted);
+}
+
+.ui-workspace-about__logo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.ui-workspace-about__logo svg {
+  width: 2.25rem;
+  height: 2.25rem;
+}
+
+.ui-workspace-about h2 {
+  margin: 0;
+  font-size: 1.35rem;
+  font-weight: 600;
+  letter-spacing: -0.02em;
+}
+
+.ui-workspace-about p {
+  margin: 0.75rem 0 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.875rem;
+}
+
+.ui-workspace-about p + p {
+  margin-top: 0.25rem;
+}
+
+.ui-workspace-about__commit,
+.ui-workspace-about__actions button {
+  border: 1px solid var(--ui-workspace-border);
+  color: inherit;
+  background: transparent;
+  font: inherit;
+}
+
+.ui-workspace-about__commit {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 2rem;
+  margin-top: 0.75rem;
+  border-radius: 999px;
+  padding: 0 0.75rem;
+  font: 0.75rem var(--ui-workspace-font-mono);
+}
+
+.ui-workspace-about__commit svg {
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.ui-workspace-about__copyright {
+  margin-top: 1rem !important;
+  font-size: 0.75rem !important;
+  line-height: 1.5;
+}
+
+.ui-workspace-about__actions {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 0.75rem;
+  margin-top: 1.5rem;
+}
+
+.ui-workspace-about__actions button {
+  min-height: 2.5rem;
+  border-radius: 999px;
+}
+
+.ui-workspace-about__actions
+  button:is([data-variant="secondary"], [data-variant="secondary-strong"]) {
+  color: var(--ui-workspace-secondary-foreground);
+  transition:
+    background-color 150ms ease,
+    border-color 150ms ease,
+    color 150ms ease;
+}
+
+.ui-workspace-about__actions button[data-variant="secondary"] {
+  border-color: var(--ui-workspace-secondary);
+  background: var(--ui-workspace-secondary);
+}
+
+.ui-workspace-about__actions button[data-variant="secondary"]:hover {
+  color: var(--ui-workspace-secondary-foreground);
+  background: color-mix(
+    in oklab,
+    var(--ui-workspace-secondary) 85%,
+    var(--ui-workspace-secondary-foreground)
+  );
+  filter: none;
+}
+
+.ui-workspace-about__actions button[data-variant="secondary-strong"] {
+  border-color: color-mix(
+    in oklab,
+    var(--ui-workspace-secondary) 85%,
+    var(--ui-workspace-secondary-foreground)
+  );
+  background: color-mix(
+    in oklab,
+    var(--ui-workspace-secondary) 85%,
+    var(--ui-workspace-secondary-foreground)
+  );
+}
+
+.ui-workspace-about__actions button[data-variant="secondary-strong"]:hover {
+  border-color: color-mix(
+    in oklab,
+    var(--ui-workspace-secondary) 70%,
+    var(--ui-workspace-secondary-foreground)
+  );
+  color: var(--ui-workspace-secondary-foreground);
+  background: color-mix(
+    in oklab,
+    var(--ui-workspace-secondary) 70%,
+    var(--ui-workspace-secondary-foreground)
+  );
+  filter: none;
+}
+
+.ui-workspace-about button:hover {
+  filter: brightness(0.98);
+}
+
+.ui-workspace-about button:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: 2px;
+}

package/src/shared/workspace/about-dialog/WorkspaceAboutDialog.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+  import type { AppShellApplicationInfo } from "../core/types.js";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+  import "./WorkspaceAboutDialog.css";
+
+  let {
+    info,
+    open = $bindable(false),
+    onOpenChange,
+    onCopyResult,
+  }: {
+    info: AppShellApplicationInfo;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onCopyResult?: (success: boolean, value: "version" | "commit") => void;
+  } = $props();
+
+  let shortCommit = $derived(info.commitHash?.trim().slice(0, 7) ?? "");
+  let formattedBuildTime = $derived(formatBuildTime(info.buildTime));
+
+  function formatBuildTime(value: string | null | undefined): string | null {
+    if (!value) return null;
+    const timestamp = Date.parse(value);
+    if (Number.isNaN(timestamp)) return null;
+    return new Intl.DateTimeFormat(undefined, {
+      dateStyle: "medium",
+      timeStyle: "short",
+    }).format(new Date(timestamp));
+  }
+
+  function setOpen(next: boolean): void {
+    open = next;
+    onOpenChange?.(next);
+  }
+
+  async function copy(
+    value: string,
+    kind: "version" | "commit",
+  ): Promise<void> {
+    try {
+      await navigator.clipboard.writeText(value);
+      onCopyResult?.(true, kind);
+    } catch {
+      onCopyResult?.(false, kind);
+    }
+  }
+</script>
+
+{#if open}
+  <div
+    class="ui-workspace-about"
+    data-ui-component="workspace-about-dialog"
+    data-ui-part="overlay"
+    role="presentation"
+    onclick={(event) => {
+      if (event.currentTarget === event.target) setOpen(false);
+    }}
+  >
+    <div
+      class="ui-workspace-about__dialog"
+      data-ui-part="dialog"
+      data-workspace-about
+      role="dialog"
+      tabindex="-1"
+      aria-modal="true"
+      aria-labelledby="ui-workspace-about-title"
+      onkeydown={(event) => {
+        if (event.key === "Escape") setOpen(false);
+      }}
+    >
+      <div class="ui-workspace-about__logo">
+        {#if info.logoUrl}
+          <img src={info.logoUrl} alt={info.name} />
+        {:else}
+          <WorkspaceIcon name={info.icon ?? "info"} />
+        {/if}
+      </div>
+      <h2 id="ui-workspace-about-title">{info.name}</h2>
+      <p>Version {info.version}</p>
+      {#if formattedBuildTime}<p>Built {formattedBuildTime}</p>{/if}
+      {#if shortCommit}
+        <button
+          type="button"
+          class="ui-workspace-about__commit"
+          aria-label={`Copy commit ${shortCommit}`}
+          onclick={() => void copy(info.commitHash ?? "", "commit")}
+        >
+          {shortCommit}
+          <WorkspaceIcon name="copy" />
+        </button>
+      {/if}
+      {#if info.copyright}
+        <p class="ui-workspace-about__copyright">{info.copyright}</p>
+      {/if}
+      <div class="ui-workspace-about__actions">
+        <button
+          type="button"
+          data-variant="secondary-strong"
+          onclick={() => setOpen(false)}
+        >
+          OK
+        </button>
+        <button
+          type="button"
+          data-variant="secondary"
+          onclick={() => void copy(info.version, "version")}
+        >
+          Copy
+        </button>
+      </div>
+    </div>
+  </div>
+{/if}

package/src/shared/workspace/about-dialog/index.ts

@@ -0,0 +1 @@
+export { default as WorkspaceAboutDialog } from "./WorkspaceAboutDialog.svelte";

package/src/shared/workspace/app-shell/AppShellAboutDialog.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+  import WorkspaceAboutDialog from "../about-dialog/WorkspaceAboutDialog.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  const { controller } = getAppShellContext();
+</script>
+
+{#if controller.applicationInfo}
+  <WorkspaceAboutDialog
+    info={controller.applicationInfo}
+    open={controller.aboutDialogOpen}
+    onOpenChange={(open) => {
+      if (open) controller.openAboutDialog();
+      else controller.closeAboutDialog();
+    }}
+    onCopyResult={(success, value) => {
+      const label = value === "version" ? "Version" : "Commit hash";
+      controller.notices.show(
+        success ? `${label} copied` : `Failed to copy ${label.toLowerCase()}`,
+      );
+    }}
+  />
+{/if}

package/src/shared/workspace/app-shell/AppShellBottomPanel.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import type { WorkspaceTab } from "../core/types.js";
+  import WorkspaceBottomPanel from "../bottom-panel/WorkspaceBottomPanel.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  let {
+    createTab,
+  }: {
+    createTab?: (paneId: string) => WorkspaceTab;
+  } = $props();
+
+  const { controller, drag } = getAppShellContext();
+</script>
+
+<WorkspaceBottomPanel controller={controller.renderer} {drag} {createTab} />

package/src/shared/workspace/app-shell/AppShellCommandPalette.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import WorkspaceCommandPalette from "../command-palette/WorkspaceCommandPalette.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  let {
+    placeholder = "Type a command or search...",
+  }: {
+    placeholder?: string;
+  } = $props();
+  const { controller } = getAppShellContext();
+</script>
+
+<WorkspaceCommandPalette app={controller} {placeholder} />

package/src/shared/workspace/app-shell/AppShellCorePluginsSettings.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import AppShellPluginsSettings from "../settings/AppShellPluginsSettings.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  const { controller } = getAppShellContext();
+</script>
+
+<AppShellPluginsSettings app={controller} />

package/src/shared/workspace/app-shell/AppShellDesktopLayout.css

@@ -0,0 +1,81 @@
+.ui-app-shell__desktop-layout {
+  display: grid;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  flex: 1 1 auto;
+  grid-template-columns: auto minmax(0, 1fr) auto;
+  grid-template-rows: minmax(0, 1fr) 0;
+  overflow: hidden;
+}
+
+.ui-app-shell__desktop-layout > [data-app-shell-sidebar="left"] {
+  grid-column: 1;
+  grid-row: 1 / 3;
+}
+
+.ui-app-shell__desktop-layout > .ui-app-shell__main {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+.ui-app-shell__desktop-layout > [data-app-shell-sidebar="right"] {
+  grid-column: 3;
+  grid-row: 1 / 3;
+}
+
+.ui-app-shell__desktop-layout > .ui-workspace-bottom-panel {
+  grid-column: 2;
+  grid-row: 2;
+  height: 100%;
+  min-height: 0;
+  max-height: none;
+}
+
+.ui-app-shell__desktop-layout:has(
+    > .ui-workspace-bottom-panel:not([data-maximized="true"])
+  ) {
+  grid-template-rows:
+    minmax(0, 1fr)
+    min(
+      var(--ui-app-shell-bottom-panel-height, 15rem),
+      var(--ui-workspace-bottom-panel-max-height)
+    );
+}
+
+.ui-app-shell__desktop-layout[data-bottom-panel-alignment="left"]
+  > [data-app-shell-sidebar="left"] {
+  grid-row: 1;
+}
+
+.ui-app-shell__desktop-layout[data-bottom-panel-alignment="left"]
+  > .ui-workspace-bottom-panel {
+  grid-column: 1 / 3;
+}
+
+.ui-app-shell__desktop-layout[data-bottom-panel-alignment="right"]
+  > [data-app-shell-sidebar="right"] {
+  grid-row: 1;
+}
+
+.ui-app-shell__desktop-layout[data-bottom-panel-alignment="right"]
+  > .ui-workspace-bottom-panel {
+  grid-column: 2 / 4;
+}
+
+.ui-app-shell__desktop-layout[data-bottom-panel-alignment="justify"]
+  > [data-app-shell-sidebar] {
+  grid-row: 1;
+}
+
+.ui-app-shell__desktop-layout[data-bottom-panel-alignment="justify"]
+  > .ui-workspace-bottom-panel {
+  grid-column: 1 / 4;
+}
+
+.ui-app-shell__desktop-layout:has(
+    > .ui-workspace-bottom-panel[data-maximized="true"]
+  ) {
+  grid-template-rows: 0 minmax(0, 1fr);
+}

package/src/shared/workspace/app-shell/AppShellDesktopLayout.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import type { WorkspaceBottomPanelAlignment } from "../core/types.js";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+  import "./AppShellDesktopLayout.css";
+
+  let {
+    children,
+    bottomPanelAlignment,
+  }: {
+    children?: Snippet;
+    /** Override the controller-owned desktop bottom-panel alignment. */
+    bottomPanelAlignment?: WorkspaceBottomPanelAlignment;
+  } = $props();
+
+  const { controller } = getAppShellContext();
+  let resolvedAlignment = $derived(
+    bottomPanelAlignment ?? controller.workspace.bottomPanelAlignment,
+  );
+  let bottomPanelHeight = $derived(
+    `${controller.renderer.layout.bottom.size}px`,
+  );
+</script>
+
+<div
+  class="ui-app-shell__desktop-layout"
+  data-ui-component="app-shell-desktop-layout"
+  data-ui-part="desktop-layout"
+  data-bottom-panel-alignment={resolvedAlignment}
+  style:--ui-app-shell-bottom-panel-height={bottomPanelHeight}
+>
+  {@render children?.()}
+</div>

package/src/shared/workspace/app-shell/AppShellFloatingLayer.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import type { WorkspaceTab } from "../core/types.js";
+  import WorkspaceFloatingLayer from "../floating-layer/WorkspaceFloatingLayer.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  let {
+    createTab,
+  }: {
+    createTab?: (paneId: string) => WorkspaceTab;
+  } = $props();
+
+  const context = getAppShellContext();
+</script>
+
+<WorkspaceFloatingLayer
+  controller={context.controller.renderer}
+  drag={context.drag}
+  {createTab}
+  boundsRoot={context.root}
+/>

package/src/shared/workspace/app-shell/AppShellHotkeySettings.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import AppShellHotkeySettings from "../settings/AppShellHotkeySettings.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  const { controller } = getAppShellContext();
+</script>
+
+<AppShellHotkeySettings app={controller} />