@lapismd/design-core 0.1.0 → 0.2.0

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

@@ -0,0 +1,624 @@
+.ui-shell-story-complete {
+  --ui-shell-body-sidebar-width: 10rem;
+}
+
+.ui-shell-story-multi-panel {
+  width: min(100%, 80rem);
+  margin-inline: auto;
+}
+
+.ui-shell-story-multi-panel-wide {
+  width: min(100%, 94rem);
+}
+
+.ui-shell-story-multi-panel-dark {
+  color-scheme: dark;
+}
+
+.ui-shell-story-multi-panel__toolbar {
+  gap: 0.5rem;
+  padding-inline: 0.5rem;
+}
+
+.ui-shell-story-multi-panel__toolbar > span {
+  flex: 1;
+}
+
+.ui-shell-story-multi-panel__nav,
+.ui-shell-story-multi-panel__rail {
+  display: grid;
+  gap: 0.25rem;
+  padding: 0.5rem;
+}
+
+.ui-shell-story-multi-panel__nav button,
+.ui-shell-story-multi-panel__rail button {
+  display: flex;
+  min-height: 2.25rem;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+  padding: 0.375rem 0.625rem;
+  border: 0;
+  border-radius: calc(var(--radius) * 0.75);
+  color: var(--foreground);
+  background: transparent;
+  font: inherit;
+  text-align: start;
+}
+
+.ui-shell-story-multi-panel__nav button:is(:hover, :focus-visible),
+.ui-shell-story-multi-panel__nav button[data-active],
+.ui-shell-story-multi-panel__rail button:is(:hover, :focus-visible) {
+  background: var(--accent);
+}
+
+.ui-shell-story-multi-panel__rail small {
+  color: var(--muted-foreground);
+}
+
+.ui-shell-story-multi-panel__content {
+  width: min(100%, 42rem);
+  margin-inline: auto;
+  padding: clamp(2rem, 8cqw, 6rem) 1.5rem;
+}
+
+.ui-shell-story-multi-panel__content > p:first-child,
+.ui-shell-story-multi-panel__panel-copy p {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.ui-shell-story-multi-panel__content h1 {
+  margin-block: 0.5rem 1rem;
+  font-size: clamp(1.5rem, 4cqw, 3rem);
+  line-height: 1;
+}
+
+.ui-shell-story-multi-panel__panel-copy,
+.ui-shell-story-multi-panel__reviews {
+  display: grid;
+  gap: 0.75rem;
+  padding: 1rem;
+}
+
+.ui-shell-story-multi-panel__panel-copy strong {
+  margin-block-end: 0.75rem;
+}
+
+.ui-shell-story-multi-panel__reviews article {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--card);
+}
+
+.ui-shell-story-multi-panel__reviews span {
+  color: var(--muted-foreground);
+  font-size: 0.75rem;
+}
+
+.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,