@lapismd/design-core 0.1.0 → 0.1.2

package/src/shared/shell/app-shell/examples/AppShellExamples.css

@@ -0,0 +1,521 @@
+.ui-shell-story-complete {
+  --ui-shell-body-sidebar-width: 10rem;
+}
+
+.ui-shell-story-mode-demo {
+  position: relative;
+  height: 100%;
+}
+
+.ui-shell-story-mode-controls {
+  position: absolute;
+  z-index: 50;
+  inset-block-end: 1rem;
+  inset-inline-start: 50%;
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--background);
+  box-shadow: var(--ui-shell-main-shadow);
+  transform: translateX(-50%);
+}
+
+.ui-shell-story-mode-controls button {
+  text-transform: capitalize;
+}
+
+.ui-shell-story-sidebar-heading {
+  display: flex;
+  min-height: 2rem;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1rem 0.5rem;
+  white-space: nowrap;
+}
+
+.ui-shell-story-sidebar-heading svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+.ui-minimal-app-shell__sidebar[data-state="collapsed"]
+  .ui-shell-story-sidebar-heading {
+  padding-block-start: 1.25rem;
+}
+
+.ui-shell-story-sidebar-body {
+  padding: 0 0.5rem;
+}
+
+.ui-shell-story-sidebar-body nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding-block-end: 0.5rem;
+}
+
+.ui-shell-story-nav-label {
+  padding: 0.75rem 0.75rem 0.25rem;
+  color: var(--muted-foreground);
+  font-size: 0.6875rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ui-shell-story-sidebar-footer {
+  min-height: 3rem;
+  padding: 0.75rem 1rem;
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.ui-shell-story-project-header {
+  display: flex;
+  min-width: 0;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 0.75rem 0.75rem;
+}
+
+.ui-shell-story-project-app {
+  display: flex;
+  min-width: 0;
+  flex: 1;
+  align-items: center;
+  gap: 0.625rem;
+}
+
+.ui-shell-story-project-app > svg {
+  width: 1.25rem;
+  height: 1.25rem;
+  flex: none;
+}
+
+.ui-shell-story-project-app > div {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+}
+
+.ui-shell-story-project-app strong,
+.ui-shell-story-project-app span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-shell-story-project-app span,
+.ui-shell-story-project-selector > span,
+.ui-shell-story-project-footer,
+.ui-shell-story-files-footer {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+
+.ui-shell-story-project-selector {
+  display: grid;
+  width: 100%;
+  gap: 0.25rem;
+}
+
+.ui-shell-story-project-selector
+  > [data-ui-component="select"][data-ui-part="select-trigger"] {
+  width: 100%;
+  min-width: 0;
+  background: var(--background);
+}
+
+.ui-minimal-app-shell__sidebar[data-state="collapsed"][data-presentation="inline"]
+  .ui-shell-story-project-header {
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+.ui-minimal-app-shell__sidebar[data-state="collapsed"][data-presentation="inline"]
+  .ui-shell-story-project-footer {
+  border-block-start: 0;
+}
+
+.ui-shell-story-project-body,
+.ui-shell-story-files-body {
+  padding: 0.5rem;
+}
+
+.ui-shell-story-project-body nav,
+.ui-shell-story-files-body nav {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.ui-shell-story-project-item,
+.ui-shell-story-files-body button {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  min-height: 2.25rem;
+  align-items: center;
+  gap: 0.625rem;
+  border: 0;
+  border-radius: calc(var(--radius) * 0.75);
+  padding: 0.375rem 0.5rem;
+  color: var(--foreground);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+}
+
+.ui-shell-story-project-item:hover,
+.ui-shell-story-project-item:focus-visible,
+.ui-shell-story-project-item[data-active],
+.ui-shell-story-files-body button:hover,
+.ui-shell-story-files-body button:focus-visible {
+  background: var(--accent);
+}
+
+.ui-shell-story-project-item:focus-visible,
+.ui-shell-story-files-body button:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
+.ui-shell-story-project-item svg,
+.ui-shell-story-files-body button svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+.ui-minimal-app-shell__sidebar[data-state="collapsed"][data-presentation="inline"]
+  .ui-shell-story-project-item,
+.ui-minimal-app-shell__sidebar[data-state="collapsed"]
+  .ui-shell-story-files-body
+  button {
+  justify-content: center;
+  padding-inline: 0;
+}
+
+.ui-shell-story-project-footer,
+.ui-shell-story-files-footer {
+  min-height: 2.75rem;
+  padding: 0.75rem;
+  border-block-start: 1px solid var(--border);
+}
+
+.ui-shell-story-files-header {
+  display: flex;
+  min-height: var(--ui-shell-toolbar-height);
+  align-items: center;
+  gap: 0.625rem;
+  padding-inline: 0.5rem;
+  border-block-end: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.ui-shell-story-files-header > svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+.ui-shell-story-files-header > * {
+  transform: translateY(0.25rem);
+}
+
+.ui-shell-story-ai-header {
+  display: flex;
+  min-height: var(--ui-shell-toolbar-height);
+  align-items: center;
+  gap: 0.75rem;
+  padding-inline: 1rem;
+  border-block-end: 1px solid var(--border);
+  white-space: nowrap;
+}
+
+.ui-shell-story-ai-header svg {
+  width: 1rem;
+  height: 1rem;
+  flex: none;
+}
+
+.ui-shell-story-ai-header > svg,
+.ui-shell-story-ai-header > strong,
+.ui-shell-story-ai-header > [data-ui-part="sidebar-close"] {
+  transform: translateY(0.25rem);
+}
+
+.ui-minimal-app-shell__sidebar[data-side="right"][data-state="collapsed"]
+  .ui-shell-story-ai-header {
+  min-height: 0;
+  padding: 0.5rem 0.5rem 0;
+  border-block-end: 0;
+}
+
+.ui-shell-story-ai-body
+  > [data-ui-component="scroll-area"]
+  > [data-ui-part="scroll-area-viewport"]
+  > div {
+  height: 100%;
+}
+
+.ui-shell-story-ai-body
+  > [data-ui-component="scroll-area"]
+  > [data-ui-part="scroll-area-viewport"]
+  > div
+  > [data-ui-component="button"] {
+  margin: 0.5rem;
+}
+
+.ui-minimal-app-shell__sidebar[data-side="right"][data-state="collapsed"]
+  .ui-shell-story-ai-body
+  > [data-ui-component="scroll-area"]
+  > [data-ui-part="scroll-area-viewport"]
+  > div
+  > [data-ui-component="button"] {
+  margin-block-start: 0.75rem;
+}
+
+.ui-shell-story-ai-body
+  [data-ui-component="ai-chat-layout"][data-density="compact"]
+  [data-ui-part="message-area"] {
+  padding-block-end: 7rem;
+}
+
+.ui-shell-story-ai-composer {
+  display: grid;
+  gap: 0;
+}
+
+.ui-shell-story-ai-composer > [data-ui-component="ai-chat-typing-indicator"] {
+  width: fit-content;
+  padding: 0.25rem 0.5rem;
+  border-radius: calc(var(--radius) * 0.75);
+  background: var(--background);
+}
+
+.ui-shell-story-nav-item {
+  width: 100%;
+  min-width: 0;
+  justify-content: flex-start;
+  overflow: hidden;
+}
+
+.ui-minimal-app-shell__sidebar[data-state="collapsed"]
+  .ui-shell-story-nav-item {
+  justify-content: center;
+}
+
+.ui-shell-story-toolbar-controls {
+  display: flex;
+  width: 100%;
+  min-width: 0;
+  align-items: center;
+  gap: 0.5rem;
+  padding-inline: 0.75rem;
+}
+
+.ui-shell-story-toolbar-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-shell-story-toolbar-spacer {
+  flex: 1;
+}
+
+.ui-shell-story-document-toc {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 3rem 0.75rem 1rem;
+}
+
+.ui-shell-story-document-toc > span {
+  padding: 0 0.5rem 0.5rem;
+  color: var(--muted-foreground);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ui-shell-story-document-toc a {
+  overflow: hidden;
+  border-radius: calc(var(--radius) * 0.75);
+  padding: 0.375rem 0.5rem;
+  color: var(--muted-foreground);
+  font-size: 0.8125rem;
+  text-decoration: none;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ui-shell-story-document-toc a:hover,
+.ui-shell-story-document-toc a:focus-visible,
+.ui-shell-story-document-toc a[aria-current] {
+  color: var(--foreground);
+  background: var(--accent);
+}
+
+.ui-shell-story-document-toc a:focus-visible {
+  outline: 2px solid var(--ring);
+  outline-offset: 1px;
+}
+
+.ui-shell-story-document {
+  max-width: 50rem;
+  padding: 2rem clamp(1.5rem, 5vw, 4rem) 4rem;
+  margin-inline: auto;
+}
+
+.ui-shell-story-document header {
+  margin-block-end: 2.5rem;
+}
+
+.ui-shell-story-document header > span {
+  color: var(--muted-foreground);
+  font-size: 0.6875rem;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ui-shell-story-document h2 {
+  margin: 0.375rem 0 0.75rem;
+  font-size: 2rem;
+}
+
+.ui-shell-story-document h3 {
+  margin: 0 0 0.625rem;
+  font-size: 1.125rem;
+}
+
+.ui-shell-story-document p {
+  margin: 0 0 0.75rem;
+  color: var(--muted-foreground);
+  line-height: 1.65;
+}
+
+.ui-shell-story-document section {
+  scroll-margin-block-start: 1rem;
+  padding-block: 1.25rem;
+  border-block-start: 1px solid var(--border);
+}
+
+.ui-shell-story-document-empty {
+  display: grid;
+  height: 100%;
+  place-content: center;
+  justify-items: center;
+  gap: 0.5rem;
+  padding: 2rem;
+  color: var(--muted-foreground);
+  text-align: center;
+}
+
+.ui-shell-story-document-empty > svg {
+  width: 2rem;
+  height: 2rem;
+}
+
+.ui-shell-story-document-empty strong {
+  color: var(--foreground);
+}
+
+.ui-shell-story-body-demo {
+  container-type: inline-size;
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+  min-height: 48rem;
+  padding: 2rem;
+}
+
+.ui-shell-story-body-demo header {
+  display: flex;
+  max-width: 42rem;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.ui-shell-story-body-demo header p,
+.ui-shell-story-body-demo header h2,
+.ui-shell-story-body-demo header span,
+.ui-shell-story-card-grid p {
+  margin: 0;
+}
+
+.ui-shell-story-body-demo header p,
+.ui-shell-story-card-grid span {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.ui-shell-story-body-demo header h2 {
+  font-size: 1.75rem;
+  line-height: 1.2;
+}
+
+.ui-shell-story-body-demo header > span,
+.ui-shell-story-card-grid p {
+  color: var(--muted-foreground);
+}
+
+.ui-shell-story-card-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 1rem;
+}
+
+.ui-shell-story-card-grid section {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  gap: 0.5rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: calc(var(--radius) * 0.8);
+  background: var(--card);
+}
+
+.ui-shell-story-card-grid strong {
+  font-size: 1.75rem;
+}
+
+@container (max-width: 34rem) {
+  .ui-shell-story-card-grid {
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.75rem;
+  }
+
+  .ui-shell-story-card-grid section {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    grid-template-rows: auto auto;
+    align-items: center;
+    column-gap: 1rem;
+    row-gap: 0.25rem;
+    padding-block: 0.75rem;
+  }
+
+  .ui-shell-story-card-grid section > span,
+  .ui-shell-story-card-grid section > p {
+    grid-column: 1;
+  }
+
+  .ui-shell-story-card-grid section > strong {
+    grid-column: 2;
+    grid-row: 1 / span 2;
+  }
+}

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import FileCode2Icon from "@lucide/svelte/icons/file-code-2";
   import FileTextIcon from "@lucide/svelte/icons/file-text";
   import FolderIcon from "@lucide/svelte/icons/folder";

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import FileTextIcon from "@lucide/svelte/icons/file-text";
   import type { AppShellSide } from "../app-shell-controller.svelte.js";
   import { AppShell } from "../index.js";
@@ -69,11 +70,15 @@
     open={sidebarSide !== undefined}
     label="Table of contents"
     mobileLabel="Document contents"
+    scrollbarVisibility="hover"
   >
     {@render tableOfContents()}
   </AppShell.Body.Sidebar>
 
-  <AppShell.Body.Content label={file ? `${file} content` : "Document content"}>
+  <AppShell.Body.Content
+    label={file ? `${file} content` : "Document content"}
+    scrollbarVisibility="hover"
+  >
     {#if file}
       <article class="ui-shell-story-document">
         <header>

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import FileTextIcon from "@lucide/svelte/icons/file-text";
   import FolderOpenIcon from "@lucide/svelte/icons/folder-open";
   import type {

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import "./AppShellExamples.css";
   import { Button } from "../../../shadcn/button/index.js";
   import type {
     AppShellController,

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/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"} />