@lapismd/design-core 0.1.0 → 0.2.0

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

@@ -87,34 +87,34 @@
     onValueChange={onValueChange as ((next: string[]) => void) | undefined}
   />
 {:else}
-<SelectRoot
-  {...rest}
-  type="single"
-  {disabled}
-  bind:value={selectedValue}
-  onValueChange={onValueChange as ((next: string) => void) | undefined}
->
-  <Select.Trigger
-    {id}
-    role="combobox"
-    aria-label={ariaLabel}
-    aria-controls={optionsId}
-  >
-    <span class="ui-workspace-setting-select__value">{triggerContent}</span>
-  </Select.Trigger>
-  <Select.Content
-    id={optionsId}
-    aria-label={ariaLabel ? `${ariaLabel} options` : undefined}
+  <SelectRoot
+    {...rest}
+    type="single"
+    {disabled}
+    bind:value={selectedValue}
+    onValueChange={onValueChange as ((next: string) => void) | undefined}
   >
-    <Select.Group>
-      {#each items as item (item.value)}
-        <Select.Item
-          value={item.value}
-          label={item.label}
-          disabled={item.disabled}
-        />
-      {/each}
-    </Select.Group>
-  </Select.Content>
-</SelectRoot>
+    <Select.Trigger
+      {id}
+      role="combobox"
+      aria-label={ariaLabel}
+      aria-controls={optionsId}
+    >
+      <span class="ui-workspace-setting-select__value">{triggerContent}</span>
+    </Select.Trigger>
+    <Select.Content
+      id={optionsId}
+      aria-label={ariaLabel ? `${ariaLabel} options` : undefined}
+    >
+      <Select.Group>
+        {#each items as item (item.value)}
+          <Select.Item
+            value={item.value}
+            label={item.label}
+            disabled={item.disabled}
+          />
+        {/each}
+      </Select.Group>
+    </Select.Content>
+  </SelectRoot>
 {/if}

package/src/shared/workspace/settings/WorkspaceSettings.css

@@ -1,4 +1,5 @@
 .ui-workspace-settings {
+  position: relative;
   display: flex;
   width: 100%;
   height: 100%;
@@ -8,6 +9,12 @@
   color: var(--ui-workspace-foreground);
   background: var(--ui-workspace-background);
   font-size: 1rem;
+  container-name: workspace-settings;
+  container-type: inline-size;
+}
+
+.ui-workspace-settings__mobile-toolbar {
+  display: none;
 }
 
 .ui-workspace-settings__sidebar {
@@ -667,6 +674,138 @@
   text-align: right;
 }
 
+.ui-workspace-setting-object-actions {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 0.2rem;
+}
+
+.ui-workspace-setting-object-code,
+.ui-workspace-setting-object-value,
+.ui-workspace-setting-object-status {
+  display: inline-block;
+  max-width: 20rem;
+  color: var(--ui-workspace-foreground);
+  font-size: 0.8125rem;
+  overflow-wrap: anywhere;
+}
+
+.ui-workspace-setting-object-code {
+  font-family: var(--ui-font-mono, monospace);
+}
+
+.ui-workspace-setting-object-status {
+  border-radius: 999px;
+  padding: 0.2rem 0.5rem;
+  color: var(--ui-workspace-muted-foreground);
+  background: var(--ui-workspace-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.ui-workspace-setting-output {
+  display: inline-flex;
+  min-height: var(--ui-workspace-settings-control-height);
+  max-width: 24rem;
+  align-items: center;
+  color: var(--ui-workspace-foreground);
+  font-size: 0.8125rem;
+  overflow-wrap: anywhere;
+}
+
+.ui-workspace-setting-output[data-presentation="code"] code {
+  font-family: var(--ui-font-mono, monospace);
+}
+
+.ui-workspace-setting-output[data-presentation="status"] {
+  min-height: 1.65rem;
+  border-radius: 999px;
+  padding: 0.2rem 0.55rem;
+  color: var(--ui-workspace-muted-foreground);
+  background: var(--ui-workspace-muted);
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.ui-workspace-setting-action-result,
+.ui-workspace-setting-object-action-result {
+  margin: 0;
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.75rem;
+}
+
+.ui-workspace-setting-action-result[data-tone="success"],
+.ui-workspace-setting-object-action-result[data-tone="success"] {
+  color: var(--ui-workspace-success, #15803d);
+}
+
+.ui-workspace-setting-action-result[data-tone="warning"],
+.ui-workspace-setting-object-action-result[data-tone="warning"] {
+  color: var(--ui-workspace-warning, #a16207);
+}
+
+.ui-workspace-setting-action-result[data-tone="error"],
+.ui-workspace-setting-object-action-result[data-tone="error"] {
+  color: var(--ui-workspace-destructive, #b91c1c);
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"] {
+  --ui-button-padding-inline: 0.4rem;
+  min-width: 0;
+  max-width: 100%;
+  height: 1.65rem;
+  gap: 0.35rem;
+  border: 1px solid transparent;
+  border-radius: var(--ui-workspace-settings-control-radius);
+  color: inherit;
+  background: color-mix(in srgb, currentcolor 7%, transparent);
+  font-weight: 500;
+  transition:
+    background-color 120ms ease,
+    border-color 120ms ease,
+    box-shadow 120ms ease;
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"] code {
+  min-width: 0;
+  overflow: hidden;
+  font: 500 0.75rem/1 var(--ui-font-mono, monospace);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"]
+  [data-ui-component="workspace-icon"] {
+  width: 0.75rem;
+  height: 0.75rem;
+  flex: 0 0 auto;
+}
+
+button.ui-workspace-copyable-value[data-copy-failed="true"] {
+  color: var(--ui-workspace-destructive);
+}
+
+.ui-workspace-copyable-value__empty {
+  color: var(--ui-workspace-muted-foreground);
+  font-size: 0.8125rem;
+}
+
+@media (hover: hover) {
+  button.ui-workspace-copyable-value[data-ui-component="button"]:hover {
+    border-color: color-mix(in srgb, currentcolor 20%, transparent);
+    color: var(--ui-workspace-panel-action-hover-foreground);
+    background: var(--ui-workspace-panel-action-hover-background);
+    box-shadow: 0 1px 2px color-mix(in srgb, currentcolor 14%, transparent);
+  }
+}
+
+button.ui-workspace-copyable-value[data-ui-component="button"]:focus-visible {
+  border-color: color-mix(in srgb, currentcolor 28%, transparent);
+  color: var(--ui-workspace-panel-action-hover-foreground);
+  background: var(--ui-workspace-panel-action-hover-background);
+}
+
 .ui-workspace-setting-unsupported {
   max-width: 22rem;
 }
@@ -1151,11 +1290,39 @@
   height: 1rem;
 }
 
-@media (max-width: 44rem) {
+@container workspace-settings (max-width: 44rem) {
   .ui-workspace-settings__sidebar {
-    width: 10rem;
-    min-width: 8rem;
-    flex-basis: 10rem;
+    display: none;
+  }
+
+  .ui-workspace-settings__mobile-toolbar {
+    position: absolute;
+    z-index: 2;
+    inset: 0 0 auto;
+    display: flex;
+    min-width: 0;
+    flex: 0 0 auto;
+    align-items: center;
+    border-bottom: 1px solid var(--ui-workspace-border);
+    padding: 0.375rem 0.5rem;
+    background: var(--ui-workspace-panel);
+  }
+
+  .ui-workspace-settings__content-inner {
+    padding-top: 3.75rem;
+  }
+
+  .ui-workspace-settings__mobile-navigation-trigger {
+    min-width: 0;
+    max-width: 100%;
+    justify-content: flex-start;
+    color: var(--ui-workspace-foreground);
+  }
+
+  .ui-workspace-settings__mobile-navigation-trigger span {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .ui-workspace-settings__content-inner {
@@ -1188,3 +1355,22 @@
     flex-wrap: wrap;
   }
 }
+
+.ui-workspace-settings__mobile-sheet {
+  width: min(20rem, calc(100vw - 2rem));
+  max-width: calc(100vw - 2rem);
+  min-height: 0;
+  gap: 0;
+  overflow: hidden;
+  padding: 0;
+  color: var(--ui-workspace-foreground);
+  background: var(--ui-workspace-panel);
+}
+
+.ui-workspace-settings__mobile-sheet-body {
+  display: flex;
+  min-height: 0;
+  flex: 1 1 auto;
+  flex-direction: column;
+  padding-top: 2.75rem;
+}

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

@@ -2,7 +2,7 @@
   import { Input } from "@lapismd/design-core/shadcn/input";
   import type { WorkspaceCustomSettingProps } from "./types.js";
 
-  let { id, value, disabled, update }: WorkspaceCustomSettingProps = $props();
+  let { id, value, disabled, setValue }: WorkspaceCustomSettingProps = $props();
 </script>
 
 <label class="ui-workspace-settings-story-custom">
@@ -12,6 +12,6 @@
     type="text"
     value={String(value ?? "")}
     {disabled}
-    oninput={(event) => update(event.currentTarget.value)}
+    oninput={(event) => void setValue(event.currentTarget.value)}
   />
 </label>

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

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import type { WorkspaceSettingsPageProps } from "./types.js";
+
+  let { section }: WorkspaceSettingsPageProps = $props();
+</script>
+
+<section aria-labelledby="custom-settings-page-title">
+  <h1 id="custom-settings-page-title">{section.title}</h1>
+  <article data-setting-id="community.spellcheck">
+    <h2>Spellcheck</h2>
+    <p>Check prose while editing.</p>
+  </article>
+</section>

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

@@ -1,5 +1,8 @@
 <script lang="ts">
+  import { Button } from "../../shadcn/button/index.js";
+  import * as Sheet from "../../shadcn/sheet/index.js";
   import type { AppShellController } from "../core/app-shell-controller.svelte.js";
+  import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
   import type { WorkspaceSettingsController } from "./settings-controller.svelte.js";
   import AppSettingsContent from "./AppSettingsContent.svelte";
   import AppSettingsNavigation from "./AppSettingsNavigation.svelte";
@@ -13,6 +16,13 @@
     controller: WorkspaceSettingsController;
     app?: AppShellController;
   } = $props();
+
+  let navigationOpen = $state(false);
+  let selectedSection = $derived(
+    controller.sections.find(
+      (section) => section.id === controller.selectedSectionId,
+    ) ?? controller.sections[0],
+  );
 </script>
 
 <AppSettingsRoot {controller} {app}>
@@ -24,5 +34,45 @@
     <AppSettingsSearch />
     <AppSettingsNavigation />
   </aside>
+  <div
+    class="ui-workspace-settings__mobile-toolbar"
+    data-ui-part="settings-mobile-toolbar"
+  >
+    <Sheet.Root bind:open={navigationOpen}>
+      <Sheet.Trigger>
+        {#snippet child({ props })}
+          <Button
+            {...props}
+            class="ui-workspace-settings__mobile-navigation-trigger"
+            variant="ghost"
+            size="sm"
+            aria-label="Open settings navigation"
+          >
+            <WorkspaceIcon name="panel-left" data-icon="inline-start" />
+            <span>{selectedSection?.title ?? "Settings"}</span>
+          </Button>
+        {/snippet}
+      </Sheet.Trigger>
+      <Sheet.Content
+        side="left"
+        class="ui-workspace-settings__mobile-sheet"
+        aria-label="Settings navigation"
+      >
+        <Sheet.Header class="sr-only">
+          <Sheet.Title>Settings navigation</Sheet.Title>
+          <Sheet.Description>
+            Search settings and choose a settings section.
+          </Sheet.Description>
+        </Sheet.Header>
+        <div
+          class="ui-workspace-settings__mobile-sheet-body"
+          data-ui-part="settings-mobile-sheet-body"
+        >
+          <AppSettingsSearch />
+          <AppSettingsNavigation onselect={() => (navigationOpen = false)} />
+        </div>
+      </Sheet.Content>
+    </Sheet.Root>
+  </div>
   <AppSettingsContent />
 </AppSettingsRoot>

package/src/shared/workspace/settings/configuration.ts

@@ -1,6 +1,7 @@
 import type { WorkspaceSettingsController } from "./settings-controller.svelte.js";
 import type {
   WorkspaceSettingOption,
+  WorkspaceSettingsDefinition,
   WorkspaceSettingsNavigationGroup,
   WorkspaceSettingsSection,
 } from "./types.js";
@@ -72,6 +73,10 @@ export class ConfigurationSchema {
     return this.register(section);
   }
 
+  registerDefinition(definition: WorkspaceSettingsDefinition): () => void {
+    return this.settings.registerDefinition(definition);
+  }
+
   registerNavigationGroup(group: WorkspaceSettingsNavigationGroup): () => void {
     return this.settings.registerNavigationGroup(group);
   }

package/src/shared/workspace/settings/copyable-value.ts

@@ -0,0 +1,10 @@
+export function shortenCopyableValue(
+  value: string,
+  leadingCharacters = 8,
+  trailingCharacters = 4,
+): string {
+  const leading = Math.max(1, Math.floor(leadingCharacters));
+  const trailing = Math.max(0, Math.floor(trailingCharacters));
+  if (value.length <= leading + trailing + 1) return value;
+  return `${value.slice(0, leading)}…${trailing ? value.slice(-trailing) : ""}`;
+}

package/src/shared/workspace/settings/index.ts

@@ -5,11 +5,14 @@ import AppSettingsSearch from "./AppSettingsSearch.svelte";
 import AppSettingsSection from "./AppSettingsSection.svelte";
 import AppShellHotkeySettings from "./AppShellHotkeySettings.svelte";
 import AppShellPluginsSettings from "./AppShellPluginsSettings.svelte";
+import CopyableValue from "./CopyableValue.svelte";
+import DeclarativeSettingsSection from "./DeclarativeSettingsSection.svelte";
 import WorkspaceSettingField from "./WorkspaceSettingField.svelte";
 import WorkspaceSettingList from "./WorkspaceSettingList.svelte";
 import WorkspaceSettingsSurface from "./WorkspaceSettingsSurface.svelte";
 
 export * from "./configuration.js";
+export * from "./copyable-value.js";
 export * from "./persistence.js";
 export * from "./settings-controller.svelte.js";
 export * from "./types.js";
@@ -22,6 +25,8 @@ export {
   AppSettingsSection,
   AppShellHotkeySettings,
   AppShellPluginsSettings,
+  CopyableValue,
+  DeclarativeSettingsSection,
   WorkspaceSettingField,
   WorkspaceSettingList,
   WorkspaceSettingsSurface,