@lapismd/design-core 0.1.0

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

@@ -0,0 +1,146 @@
+<script lang="ts">
+  import { DropdownMenu } from "bits-ui";
+  import WorkspaceSidebar from "../sidebar/WorkspaceSidebar.svelte";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+  import "../menu/WorkspaceMenuItems.css";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+  import type {
+    WorkspaceNavigation,
+    WorkspaceNavigationItem,
+  } from "./workspace-navigation.js";
+
+  let {
+    workspaceLabel = "Workspace",
+    workspaceNavigation,
+    onOpenSettings,
+  }: {
+    workspaceLabel?: string;
+    workspaceNavigation?: WorkspaceNavigation;
+    onOpenSettings?: () => void;
+  } = $props();
+
+  const { controller, drag } = getAppShellContext();
+  let width = $derived(
+    controller.appearance.showRibbon
+      ? `calc(${controller.renderer.layout.left.size}px - var(--ui-workspace-ribbon-width) + 1px)`
+      : `${controller.renderer.layout.left.size}px`,
+  );
+  let currentLabel = $derived(
+    workspaceNavigation?.currentLabel ?? workspaceLabel,
+  );
+  let pendingNavigationAction: (() => void | Promise<void>) | null = null;
+
+  function selectWorkspace(item: WorkspaceNavigationItem): void {
+    if (!workspaceNavigation || item.disabled) return;
+    pendingNavigationAction = () => workspaceNavigation?.onSelect(item);
+  }
+
+  function manageWorkspaces(): void {
+    if (!workspaceNavigation) return;
+    pendingNavigationAction = workspaceNavigation.onManage;
+  }
+
+  function completeNavigation(open: boolean): void {
+    if (open || !pendingNavigationAction) return;
+    const action = pendingNavigationAction;
+    pendingNavigationAction = null;
+    void action();
+  }
+</script>
+
+<WorkspaceSidebar controller={controller.renderer} side="left" {drag} {width}>
+  {#snippet footer()}
+    {#if onOpenSettings}
+      <footer
+        class="ui-workspace-sidebar__footer"
+        data-ui-part="sidebar-footer"
+      >
+        {#if workspaceNavigation}
+          <DropdownMenu.Root onOpenChangeComplete={completeNavigation}>
+            <DropdownMenu.Trigger
+              class="ui-workspace-sidebar__workspace-trigger"
+              aria-label={`Current workspace: ${currentLabel}`}
+              title={currentLabel}
+            >
+              <span>{currentLabel}</span>
+              <WorkspaceIcon name="chevrons-up-down" />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Portal>
+              <DropdownMenu.Content
+                class="ui-workspace-menu__content ui-workspace-sidebar__workspace-menu"
+                data-ui-component="workspace-navigation"
+                data-ui-part="content"
+                side="top"
+                align="start"
+                sideOffset={4}
+              >
+                <div class="ui-workspace-sidebar__workspace-menu-label">
+                  {workspaceNavigation.menuLabel ?? "Recent workspaces"}
+                </div>
+                <DropdownMenu.Separator class="ui-workspace-menu__separator" />
+                {#if workspaceNavigation.items.length > 0}
+                  {#each workspaceNavigation.items as item (item.id)}
+                    <DropdownMenu.Item
+                      class="ui-workspace-menu__item ui-workspace-sidebar__workspace-menu-item"
+                      disabled={item.disabled}
+                      onSelect={() => selectWorkspace(item)}
+                    >
+                      <span class="ui-workspace-sidebar__workspace-menu-copy">
+                        <span class="ui-workspace-menu__label"
+                          >{item.label}</span
+                        >
+                        {#if item.description}
+                          <span
+                            class="ui-workspace-sidebar__workspace-menu-description"
+                          >
+                            {item.description}
+                          </span>
+                        {/if}
+                      </span>
+                    </DropdownMenu.Item>
+                  {/each}
+                {:else}
+                  <DropdownMenu.Item
+                    class="ui-workspace-menu__item"
+                    disabled={true}
+                  >
+                    <span class="ui-workspace-menu__label">
+                      {workspaceNavigation.emptyLabel ?? "No recent workspaces"}
+                    </span>
+                  </DropdownMenu.Item>
+                {/if}
+                <DropdownMenu.Separator class="ui-workspace-menu__separator" />
+                <DropdownMenu.Item
+                  class="ui-workspace-menu__item"
+                  onSelect={manageWorkspaces}
+                >
+                  <WorkspaceIcon name="folder-open" />
+                  <span class="ui-workspace-menu__label">
+                    {workspaceNavigation.manageLabel ?? "Manage workspaces"}
+                  </span>
+                </DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Portal>
+          </DropdownMenu.Root>
+        {:else}
+          <div
+            class="ui-workspace-sidebar__workspace-label"
+            aria-label={`Current workspace: ${currentLabel}`}
+            title={currentLabel}
+          >
+            <span>{currentLabel}</span>
+          </div>
+        {/if}
+        <button
+          type="button"
+          class="ui-workspace-sidebar__settings-trigger"
+          aria-label="Open settings"
+          title="Open settings"
+          onclick={onOpenSettings}
+        >
+          <WorkspaceIcon name="settings" />
+        </button>
+      </footer>
+    {/if}
+  {/snippet}
+</WorkspaceSidebar>

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

@@ -0,0 +1,14 @@
+<script lang="ts">
+  import type { Snippet } from "svelte";
+  import "./AppShellWorkspace.css";
+
+  let { children }: { children?: Snippet } = $props();
+</script>
+
+<div
+  class="ui-app-shell__main"
+  data-ui-component="app-shell-main"
+  data-ui-part="main"
+>
+  {@render children?.()}
+</div>

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

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import type { AppShellController } from "../core/app-shell-controller.svelte.js";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+
+  let { app }: { app: AppShellController } = $props();
+  let records = $derived(
+    app.notifications.hasCustomPresenter ? [] : app.notifications.transient,
+  );
+</script>
+
+{#if records.length > 0}
+  <div
+    class="ui-app-shell__notice-toasts"
+    aria-label="Notifications"
+    aria-live="polite"
+    role="region"
+    data-ui-part="fallback-notices"
+  >
+    {#each records as record (record.id)}
+      <section
+        class="ui-app-shell__notice-toast"
+        data-severity={record.severity}
+        data-notification-id={record.id}
+        role={record.severity === "error" ? "alert" : "status"}
+      >
+        <span aria-hidden="true"></span>
+        <div>
+          {#if record.title}<strong>{record.title}</strong>{/if}
+          <span>{record.message}</span>
+        </div>
+        <button
+          type="button"
+          aria-label={`Dismiss ${record.title ?? record.message}`}
+          onclick={() => app.notifications.dismiss(record.id)}
+        >
+          <WorkspaceIcon name="x" />
+        </button>
+      </section>
+    {/each}
+  </div>
+{/if}

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

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

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

@@ -0,0 +1,34 @@
+<script lang="ts">
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+  import WorkspaceAboutDialog from "../about-dialog/WorkspaceAboutDialog.svelte";
+  import WorkspaceCommandPalette from "../command-palette/WorkspaceCommandPalette.svelte";
+  import AppShellNoticeToasts from "./AppShellNoticeToasts.svelte";
+
+  const { controller } = getAppShellContext();
+  let { portalTarget }: { portalTarget: HTMLElement } = $props();
+</script>
+
+<div class="ui-app-shell__overlay-layer" data-ui-part="overlay-layer">
+  <AppShellNoticeToasts app={controller} />
+  <WorkspaceCommandPalette app={controller} />
+  {#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}
+  {#each controller.ui.overlays as overlay (overlay.id)}
+    {@const OverlayComponent = overlay.component}
+    <OverlayComponent app={controller} {portalTarget} {...overlay.props} />
+  {/each}
+</div>

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

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  const context = getAppShellContext();
+  let portalTarget = $derived(context.root);
+</script>
+
+{#if portalTarget}
+  {#each context.controller.ui.overlays as overlay (overlay.id)}
+    {@const OverlayComponent = overlay.component}
+    <OverlayComponent
+      app={context.controller}
+      {portalTarget}
+      {...overlay.props}
+    />
+  {/each}
+{/if}

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

@@ -0,0 +1,10 @@
+<script lang="ts">
+  import WorkspaceRibbon from "../ribbon/WorkspaceRibbon.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  const { controller } = getAppShellContext();
+</script>
+
+{#if controller.appearance.showRibbon}
+  <WorkspaceRibbon controller={controller.renderer} />
+{/if}

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

@@ -0,0 +1,8 @@
+<script lang="ts">
+  import WorkspaceSidebar from "../sidebar/WorkspaceSidebar.svelte";
+  import { getAppShellContext } from "./app-shell-context.svelte.js";
+
+  const { controller, drag } = getAppShellContext();
+</script>
+
+<WorkspaceSidebar controller={controller.renderer} side="right" {drag} />

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

@@ -0,0 +1,101 @@
+.ui-app-shell {
+  position: relative;
+  isolation: isolate;
+  display: flex;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-background);
+  font-family: var(--ui-workspace-font-sans);
+}
+
+.ui-app-shell__overlay-layer {
+  display: contents;
+}
+
+.ui-app-shell__notice-toasts {
+  pointer-events: none;
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: calc(var(--ui-workspace-overlay-z-index) + 20);
+  display: grid;
+  width: min(24rem, calc(100% - 1.5rem));
+  gap: 0.5rem;
+}
+
+.ui-app-shell__notice-toast {
+  pointer-events: auto;
+  display: grid;
+  grid-template-columns: 0.25rem minmax(0, 1fr) auto;
+  align-items: start;
+  gap: 0.75rem;
+  border: 1px solid var(--ui-workspace-border);
+  border-radius: var(--ui-workspace-radius-medium);
+  padding: 0.75rem;
+  color: var(--ui-workspace-popover-foreground);
+  background: var(--ui-workspace-popover);
+  box-shadow: var(--ui-workspace-shadow);
+}
+
+.ui-app-shell__notice-toast > span {
+  width: 0.25rem;
+  min-height: 100%;
+  border-radius: 999px;
+  background: var(--ui-workspace-accent);
+}
+
+.ui-app-shell__notice-toast[data-severity="warning"] > span {
+  background: var(--ui-workspace-warning);
+}
+
+.ui-app-shell__notice-toast[data-severity="error"] > span {
+  background: var(--ui-workspace-destructive);
+}
+
+.ui-app-shell__notice-toast > div {
+  display: grid;
+  min-width: 0;
+  gap: 0.125rem;
+  font-size: 0.875rem;
+  line-height: 1.35;
+}
+
+.ui-app-shell__notice-toast > div span {
+  color: var(--ui-workspace-muted-foreground);
+  overflow-wrap: anywhere;
+}
+
+.ui-app-shell__notice-toast button {
+  display: grid;
+  width: 1.75rem;
+  height: 1.75rem;
+  place-content: center;
+  border: 0;
+  border-radius: var(--ui-workspace-radius-small);
+  color: inherit;
+  background: transparent;
+}
+
+.ui-app-shell__notice-toast button:hover {
+  background: var(--ui-workspace-muted);
+}
+
+.ui-app-shell__notice-toast button:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: 2px;
+}
+
+.ui-app-shell__notice-toast button svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+
+.ui-app-shell *,
+.ui-app-shell *::before,
+.ui-app-shell *::after {
+  box-sizing: border-box;
+}

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

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { onMount, untrack, type Snippet } from "svelte";
+  import type { AppShellController } from "../core/app-shell-controller.svelte.js";
+  import type { WorkspacePopoutHost, WorkspaceTheme } from "../core/types.js";
+  import { WorkspaceDragState } from "../drag/workspace-drag.svelte.js";
+  import AppShellPopoutLayer from "../popout/AppShellPopoutLayer.svelte";
+  import { setAppShellContext } from "./app-shell-context.svelte.js";
+  import AppShellOverlayLayer from "./AppShellOverlayLayer.svelte";
+  import "./AppShellRoot.css";
+
+  let {
+    controller,
+    children,
+    autoStart = true,
+    disposeOnDestroy = false,
+    theme,
+    accentColor,
+    fontSize,
+    zoomLevel,
+    activateNewTabs = true,
+    popoutHost,
+    renderOverlays = true,
+    renderPopouts = true,
+    class: className = "",
+  }: {
+    controller: AppShellController;
+    children?: Snippet;
+    autoStart?: boolean;
+    disposeOnDestroy?: boolean;
+    theme?: WorkspaceTheme;
+    accentColor?: string;
+    fontSize?: number;
+    zoomLevel?: number;
+    /** Whether user-created tabs become active immediately. */
+    activateNewTabs?: boolean;
+    popoutHost?: WorkspacePopoutHost | null;
+    renderOverlays?: boolean;
+    renderPopouts?: boolean;
+    class?: string;
+  } = $props();
+
+  const rootController = untrack(() => controller);
+  const drag = new WorkspaceDragState(rootController.renderer);
+  let root = $state<HTMLDivElement | null>(null);
+  let resolvedTheme = $derived(theme ?? controller.appearance.theme);
+  let resolvedAccent = $derived(
+    accentColor ?? controller.appearance.accentColor,
+  );
+  let resolvedFontSize = $derived(fontSize ?? controller.appearance.fontSize);
+  let resolvedZoom = $derived(zoomLevel ?? controller.appearance.zoomLevel);
+  let resolvedScrollbarVisibility = $derived(
+    controller.appearance.scrollbarVisibility,
+  );
+  let appearanceStyle = $derived(
+    [
+      `font-size: ${resolvedFontSize}px`,
+      `zoom: ${resolvedZoom / 16}`,
+      `--ui-workspace-accent: ${resolvedAccent}`,
+      `--ui-workspace-focus-ring: ${resolvedAccent}`,
+      `--ui-workspace-selection: color-mix(in srgb, ${resolvedAccent} 14%, transparent)`,
+    ].join("; "),
+  );
+
+  setAppShellContext(rootController, drag, () => root);
+
+  $effect(() => {
+    controller.renderer.showTabTitleBar = controller.appearance.showTabTitleBar;
+    controller.renderer.showInlineTitle = controller.appearance.showInlineTitle;
+    controller.renderer.activateNewTabs = activateNewTabs;
+  });
+
+  onMount(() => {
+    const document = root?.ownerDocument;
+    const handleDocumentKeydown = (event: KeyboardEvent) => {
+      if (!root || event.defaultPrevented) return;
+      const target = event.target;
+      if (
+        target instanceof Node &&
+        target !== document?.body &&
+        target !== document?.documentElement &&
+        !root.contains(target)
+      ) {
+        return;
+      }
+      void controller.commands.handleKeydown(event);
+    };
+    const disposeSurface = root
+      ? controller.ui.registerSurface(root)
+      : () => {};
+    document?.addEventListener("keydown", handleDocumentKeydown);
+    if (autoStart) void controller.start();
+    return () => {
+      document?.removeEventListener("keydown", handleDocumentKeydown);
+      disposeSurface();
+      drag.clear();
+      if (disposeOnDestroy) void controller.dispose();
+    };
+  });
+</script>
+
+<div
+  bind:this={root}
+  class={`ui-app-shell ${resolvedTheme === "dark" ? "dark" : ""} ${className}`}
+  data-ui-component="app-shell"
+  data-ui-part="root"
+  data-app-shell-root
+  data-app-shell-ready={controller.ready}
+  data-workspace-theme={resolvedTheme}
+  data-workspace-dragging={drag.dragging}
+  data-workspace-focus-mode={controller.renderer.focusMode ? "true" : undefined}
+  data-ui-scrollbar-visibility={resolvedScrollbarVisibility}
+  style={appearanceStyle}
+>
+  {@render children?.()}
+  {#if renderPopouts}
+    <AppShellPopoutLayer
+      host={popoutHost}
+      theme={resolvedTheme}
+      scrollbarVisibility={resolvedScrollbarVisibility}
+    />
+  {/if}
+  {#if renderOverlays && root}
+    <AppShellOverlayLayer portalTarget={root} />
+  {/if}
+</div>

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

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

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

@@ -0,0 +1,80 @@
+.ui-app-shell-settings-dialog {
+  position: absolute;
+  inset: 0;
+  z-index: calc(var(--ui-workspace-overlay-z-index) + 30);
+  display: grid;
+  place-items: center;
+  background: rgb(0 0 0 / 50%);
+}
+
+.ui-app-shell-settings-dialog__content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+  color: var(--ui-workspace-popover-foreground);
+  background: var(--ui-workspace-popover);
+  box-shadow: var(--ui-workspace-shadow);
+}
+
+.ui-app-shell-settings-dialog__content:focus,
+.ui-app-shell-settings-dialog__content:focus-visible {
+  outline: none;
+}
+
+.ui-app-shell-settings-dialog__header {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  clip-path: inset(50%);
+}
+
+.ui-app-shell-settings-dialog__close {
+  position: absolute;
+  top: 0.625rem;
+  right: 0.625rem;
+  z-index: 2;
+  display: grid;
+  width: 2rem;
+  height: 2rem;
+  place-content: center;
+  border: 0;
+  border-radius: var(--ui-workspace-radius-medium);
+  padding: 0;
+  color: var(--ui-workspace-muted-foreground);
+  background: transparent;
+}
+
+.ui-app-shell-settings-dialog__close:hover {
+  color: var(--ui-workspace-popover-foreground);
+  background: var(--ui-workspace-muted);
+}
+
+.ui-app-shell-settings-dialog__close:focus-visible {
+  outline: 2px solid var(--ui-workspace-focus-ring);
+  outline-offset: -2px;
+}
+
+.ui-app-shell-settings-dialog__close svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+@media (min-width: 40rem) {
+  .ui-app-shell-settings-dialog {
+    padding: 1rem;
+  }
+
+  .ui-app-shell-settings-dialog__content {
+    width: min(90vw, var(--ui-workspace-settings-dialog-max-width));
+    height: var(--ui-workspace-settings-dialog-height);
+    max-height: calc(100% - 2rem);
+    border: 1px solid var(--ui-workspace-border);
+    border-radius: var(--ui-workspace-settings-dialog-radius);
+  }
+}