@lapismd/design-core 0.1.0 → 0.2.0

package/src/shared/shell/app-shell/examples/AppShellMultiPanelDemo.svelte

@@ -0,0 +1,187 @@
+<script lang="ts">
+  import { Button } from "../../../shadcn/button/index.js";
+  import type {
+    AppShellController,
+    AppShellDisplayMode,
+    AppShellSidebarController,
+  } from "../app-shell-controller.svelte.js";
+  import { AppShell } from "../index.js";
+  import "./AppShellExamples.css";
+
+  let {
+    controller,
+    overview,
+    activity,
+    displayMode = "desktop",
+    frameClass,
+    direction = "ltr",
+  }: {
+    controller: AppShellController;
+    overview: AppShellSidebarController;
+    activity: AppShellSidebarController;
+    displayMode?: AppShellDisplayMode;
+    frameClass?: string;
+    direction?: "ltr" | "rtl";
+  } = $props();
+
+  let surfaceOpen = $state(false);
+  let surfaceTrigger = $state<HTMLButtonElement | null>(null);
+</script>
+
+<div
+  class={["ui-shell-story-frame", "ui-shell-story-multi-panel", frameClass]
+    .filter(Boolean)
+    .join(" ")}
+  dir={direction}
+>
+  <AppShell.Root
+    {controller}
+    {displayMode}
+    mobileBreakpoint={760}
+    desktopMinMainWidth={440}
+    class="ui-shell-story-surface"
+  >
+    <AppShell.Sidebar side="left" label="Navigation" resizable>
+      <AppShell.Sidebar.Header>
+        <strong>Workspace</strong>
+      </AppShell.Sidebar.Header>
+      <AppShell.Sidebar.Body>
+        <nav class="ui-shell-story-multi-panel__nav" aria-label="Workspace">
+          <button type="button" data-active>Inbox</button>
+          <button type="button">Projects</button>
+          <button type="button">Archive</button>
+        </nav>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.Main>
+      <AppShell.Toolbar class="ui-shell-story-multi-panel__toolbar">
+        <AppShell.Sidebar.Toggle side="left" sidebarName="navigation" />
+        <strong>Project updates</strong>
+        <span></span>
+        <AppShell.Sidebar.Toggle side="right" sidebarName="details" />
+        <AppShell.Sidebar.Toggle
+          side="right"
+          sidebarController={overview}
+          sidebarName="overview"
+        />
+      </AppShell.Toolbar>
+      <AppShell.Body label="Project workspace">
+        <article class="ui-shell-story-multi-panel__content">
+          <p>Project workspace</p>
+          <h1>Composable same-side panels</h1>
+          <p>
+            The main surface stays mounted while inspectors, overview rails, and
+            structural layers respond to the available width.
+          </p>
+          <button type="button">Draft update</button>
+        </article>
+      </AppShell.Body>
+    </AppShell.Main>
+
+    <AppShell.Sidebar
+      side="right"
+      label="Details"
+      constraintPriority={0}
+      constrainedPresentation="replace-main"
+      closeable
+    >
+      <AppShell.Sidebar.Header>
+        <strong>Details</strong>
+        <AppShell.Sidebar.Close />
+      </AppShell.Sidebar.Header>
+      <AppShell.Sidebar.Body>
+        <div class="ui-shell-story-multi-panel__panel-copy">
+          <p>Owner</p>
+          <strong>Design systems</strong>
+          <p>Status</p>
+          <strong>In review</strong>
+        </div>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.Sidebar
+      side="right"
+      sidebarController={overview}
+      label="Overview rail"
+      variant="rail"
+      constraintPriority={100}
+      resizable
+    >
+      <AppShell.Sidebar.Body>
+        <nav class="ui-shell-story-multi-panel__rail" aria-label="Overview">
+          <button type="button"><span>Reviews</span><small>4</small></button>
+          <button type="button"><span>People</span><small>12</small></button>
+        </nav>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.Sidebar
+      side="right"
+      sidebarController={activity}
+      label="Activity rail"
+      variant="rail"
+      constraintPriority={100}
+      resizable
+    >
+      <AppShell.Sidebar.Body>
+        <nav class="ui-shell-story-multi-panel__rail" aria-label="Activity">
+          <button type="button"><span>Tasks</span><small>7</small></button>
+          <button type="button"><span>Commits</span><small>18</small></button>
+          <Button
+            bind:ref={surfaceTrigger}
+            variant="outline"
+            size="sm"
+            onclick={() => (surfaceOpen = true)}
+          >
+            Open reviews
+          </Button>
+        </nav>
+      </AppShell.Sidebar.Body>
+    </AppShell.Sidebar>
+
+    <AppShell.SurfaceLayer
+      open={surfaceOpen}
+      label="Release reviews"
+      coverPanelIds={["right"]}
+      suspendPanelIds={["overview"]}
+      returnFocus={surfaceTrigger}
+      dismissLabel="Close reviews"
+      onDismiss={() => (surfaceOpen = false)}
+    >
+      <AppShell.SurfaceLayer.Header>
+        <strong>Release reviews</strong>
+        <Button
+          variant="ghost"
+          size="icon-sm"
+          aria-label="Close release reviews"
+          onclick={() => (surfaceOpen = false)}
+        >
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            aria-hidden="true"
+          >
+            <path d="M18 6 6 18M6 6l12 12"></path>
+          </svg>
+        </Button>
+      </AppShell.SurfaceLayer.Header>
+      <AppShell.SurfaceLayer.Body>
+        <div class="ui-shell-story-multi-panel__reviews">
+          <article>
+            <strong>History 0.1.3</strong>
+            <span>Pending review</span>
+          </article>
+          <article>
+            <strong>Markdown 0.1.5</strong>
+            <span>Approved</span>
+          </article>
+        </div>
+      </AppShell.SurfaceLayer.Body>
+    </AppShell.SurfaceLayer>
+  </AppShell.Root>
+</div>

package/src/shared/shell/app-shell/examples/AppShellProjectSidebarDemo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import BoxesIcon from "@lucide/svelte/icons/boxes";
   import FolderKanbanIcon from "@lucide/svelte/icons/folder-kanban";
   import NotebookTabsIcon from "@lucide/svelte/icons/notebook-tabs";

package/src/shared/shell/app-shell/examples/AppShellSidebarDemo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import FileTextIcon from "@lucide/svelte/icons/file-text";
   import FilesIcon from "@lucide/svelte/icons/files";
   import InfoIcon from "@lucide/svelte/icons/info";

package/src/shared/shell/app-shell/examples/AppShellToolbarDemo.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import { AppShell } from "../index.js";
 
   let {

package/src/shared/shell/app-shell/index.ts

@@ -10,6 +10,9 @@ import AppShellSidebarClose from "./AppShellSidebarClose.svelte";
 import AppShellSidebarFooter from "./AppShellSidebarFooter.svelte";
 import AppShellSidebarHeader from "./AppShellSidebarHeader.svelte";
 import AppShellSidebarToggle from "./AppShellSidebarToggle.svelte";
+import AppShellSurfaceLayer from "./AppShellSurfaceLayer.svelte";
+import AppShellSurfaceLayerBody from "./AppShellSurfaceLayerBody.svelte";
+import AppShellSurfaceLayerHeader from "./AppShellSurfaceLayerHeader.svelte";
 import AppShellToolbar from "./AppShellToolbar.svelte";
 
 export const Sidebar = Object.assign(AppShellSidebar, {
@@ -26,6 +29,11 @@ export const Body = Object.assign(AppShellBody, {
   Toggle: AppShellBodyToggle,
 });
 
+export const SurfaceLayer = Object.assign(AppShellSurfaceLayer, {
+  Header: AppShellSurfaceLayerHeader,
+  Body: AppShellSurfaceLayerBody,
+});
+
 export {
   AppShellBody,
   AppShellBodyContent,
@@ -39,6 +47,9 @@ export {
   AppShellSidebarFooter,
   AppShellSidebarHeader,
   AppShellSidebarToggle,
+  AppShellSurfaceLayer,
+  AppShellSurfaceLayerBody,
+  AppShellSurfaceLayerHeader,
   AppShellToolbar,
   AppShellBodyContent as BodyContent,
   AppShellBodySidebar as BodySidebar,
@@ -50,6 +61,8 @@ export {
   AppShellSidebarFooter as SidebarFooter,
   AppShellSidebarHeader as SidebarHeader,
   AppShellSidebarToggle as SidebarToggle,
+  AppShellSurfaceLayerBody as SurfaceLayerBody,
+  AppShellSurfaceLayerHeader as SurfaceLayerHeader,
   AppShellToolbar as Toolbar,
 };
 
@@ -59,6 +72,7 @@ export const AppShell = {
   Main: AppShellMain,
   Toolbar: AppShellToolbar,
   Body,
+  SurfaceLayer,
 } as const;
 
 export * from "./app-shell-body-context.svelte.js";

package/src/shared/shell/shell.tokens.css

@@ -19,4 +19,6 @@
       color-mix(in srgb, var(--foreground) 10%, transparent),
     0 1px 2px -1px color-mix(in srgb, var(--foreground) 10%, transparent);
   --ui-shell-main-border: 1px solid var(--border);
+  --ui-shell-surface-layer-main-start-allowance: 0px;
+  --ui-shell-surface-layer-inline-end-inset: var(--ui-shell-main-block-inset);
 }

package/src/shared/shell/shell.tokens.ts

@@ -14,6 +14,9 @@ export const shellTokenNames = {
   mainRadius: "--ui-shell-main-radius",
   mainShadow: "--ui-shell-main-shadow",
   mainBorder: "--ui-shell-main-border",
+  surfaceLayerMainStartAllowance:
+    "--ui-shell-surface-layer-main-start-allowance",
+  surfaceLayerInlineEndInset: "--ui-shell-surface-layer-inline-end-inset",
 } as const;
 
 export type ShellTokenKey = keyof typeof shellTokenNames;
@@ -36,4 +39,6 @@ export const shellTokenDefaults: Record<ShellTokenKey, string> = {
   mainShadow:
     "0 1px 3px color-mix(in srgb, var(--foreground) 10%, transparent), 0 1px 2px -1px color-mix(in srgb, var(--foreground) 10%, transparent)",
   mainBorder: "1px solid var(--border)",
+  surfaceLayerMainStartAllowance: "0px",
+  surfaceLayerInlineEndInset: "var(--ui-shell-main-block-inset)",
 };

package/src/shared/workspace/menu/WorkspaceContextMenuItems.svelte

@@ -22,8 +22,9 @@
     event: MouseEvent,
   ) {
     if (entry.disabled) return;
+    const selectedMenu = menu;
     await entry.callback?.(event);
-    if (entry.closeOnSelect) menu.hide();
+    if (entry.closeOnSelect) selectedMenu.hide();
   }
 </script>
 

package/src/shared/workspace/menu/WorkspaceMenuItems.svelte

@@ -22,8 +22,9 @@
     event: MouseEvent,
   ) {
     if (entry.disabled) return;
+    const selectedMenu = menu;
     await entry.callback?.(event);
-    if (entry.closeOnSelect) menu.hide();
+    if (entry.closeOnSelect) selectedMenu.hide();
   }
 </script>
 

package/src/shared/workspace/problems/ProblemsQuickFix.svelte

@@ -30,10 +30,7 @@
       class="ui-workspace-problems__severity"
       name={severityIcon}
     />
-    <WorkspaceIcon
-      class="ui-workspace-problems__lightbulb"
-      name="lightbulb"
-    />
+    <WorkspaceIcon class="ui-workspace-problems__lightbulb" name="lightbulb" />
   </DropdownMenu.Trigger>
   <DropdownMenu.Portal>
     <DropdownMenu.Content

package/src/shared/workspace/settings/AppSettingsContent.svelte

@@ -90,6 +90,12 @@
     settingsState.controller.selectSection(result.sectionId);
     settingsState.query = "";
     await tick();
+    if (result.fieldId) {
+      const section = settingsState.controller.sections.find(
+        (candidate) => candidate.id === result.sectionId,
+      );
+      await section?.revealSearchEntry?.(result.fieldId);
+    }
     await tick();
     requestAnimationFrame(() => {
       const element = viewport?.querySelector<HTMLElement>(

package/src/shared/workspace/settings/AppSettingsNavigation.svelte

@@ -2,6 +2,12 @@
   import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
   import { getAppSettingsContext } from "./app-settings-context.svelte.js";
 
+  let {
+    onselect,
+  }: {
+    onselect?: (sectionId: string) => void;
+  } = $props();
+
   const state = getAppSettingsContext();
   let groups = $derived.by(() => {
     const configured = new Map(
@@ -47,6 +53,7 @@
             onclick={() => {
               state.controller.selectSection(section.id);
               state.query = "";
+              onselect?.(section.id);
             }}
           >
             <WorkspaceIcon name={section.icon ?? "settings"} />

package/src/shared/workspace/settings/CopyableValue.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+  import { onDestroy } from "svelte";
+  import { Button } from "@lapismd/design-core/shadcn/button";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
+  import { shortenCopyableValue } from "./copyable-value.js";
+
+  let {
+    value,
+    label = "value",
+    emptyLabel = "None",
+    leadingCharacters = 8,
+    trailingCharacters = 4,
+    class: className,
+    testId,
+  }: {
+    value?: string | null;
+    label?: string;
+    emptyLabel?: string;
+    leadingCharacters?: number;
+    trailingCharacters?: number;
+    class?: string;
+    testId?: string;
+  } = $props();
+
+  let copied = $state(false);
+  let failed = $state(false);
+  let resetTimer: ReturnType<typeof setTimeout> | undefined;
+  let displayValue = $derived(
+    value
+      ? shortenCopyableValue(value, leadingCharacters, trailingCharacters)
+      : emptyLabel,
+  );
+
+  onDestroy(() => {
+    if (resetTimer) clearTimeout(resetTimer);
+  });
+
+  async function copy(): Promise<void> {
+    if (!value) return;
+    copied = false;
+    failed = false;
+    try {
+      const clipboard = globalThis.navigator?.clipboard;
+      if (!clipboard?.writeText) throw new Error("Clipboard is unavailable");
+      await clipboard.writeText(value);
+      copied = true;
+    } catch {
+      failed = true;
+    }
+    if (resetTimer) clearTimeout(resetTimer);
+    resetTimer = setTimeout(() => {
+      copied = false;
+      failed = false;
+    }, 1_500);
+  }
+</script>
+
+{#if value}
+  <Button
+    class={["ui-workspace-copyable-value", className].filter(Boolean).join(" ")}
+    variant="ghost"
+    size="xs"
+    aria-label={`Copy full ${label}: ${value}`}
+    title={`Copy full ${label}`}
+    data-testid={testId}
+    data-copied={copied || undefined}
+    data-copy-failed={failed || undefined}
+    onclick={() => void copy()}
+  >
+    <code>{displayValue}</code>
+    <WorkspaceIcon
+      name={copied ? "check" : failed ? "triangle-alert" : "copy"}
+    />
+  </Button>
+{:else}
+  <span
+    class={["ui-workspace-copyable-value__empty", className]
+      .filter(Boolean)
+      .join(" ")}>{displayValue}</span
+  >
+{/if}

package/src/shared/workspace/settings/DeclarativeSettingsSection.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  import AppSettingsRoot from "./AppSettingsRoot.svelte";
+  import AppSettingsSection from "./AppSettingsSection.svelte";
+  import type { WorkspaceSettingsController } from "./settings-controller.svelte.js";
+  import type { WorkspaceSettingsSection } from "./types.js";
+
+  let {
+    controller,
+    section,
+    class: className = "",
+  }: {
+    controller: WorkspaceSettingsController;
+    section: WorkspaceSettingsSection;
+    class?: string;
+  } = $props();
+</script>
+
+<AppSettingsRoot {controller} class={className}>
+  <AppSettingsSection {section} />
+</AppSettingsRoot>