@lapismd/design-core 0.1.0 → 0.1.2

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

@@ -5,13 +5,17 @@
   import * as Table from "@lapismd/design-core/shadcn/table";
   import WorkspaceIcon from "../icon/WorkspaceIcon.svelte";
   import WorkspaceSettingAddButton from "./WorkspaceSettingAddButton.svelte";
+  import CopyableValue from "./CopyableValue.svelte";
   import {
     asObjectMap,
     asObjectRows,
     createObjectRow,
     nextObjectMapKey,
   } from "./object-collection.js";
-  import type { WorkspaceObjectProperty } from "./types.js";
+  import type {
+    WorkspaceObjectProperty,
+    WorkspaceObjectRowAction,
+  } from "./types.js";
 
   let {
     label,
@@ -22,6 +26,12 @@
     minimumItems,
     maximumItems,
     addLabel,
+    rowKey,
+    reorderable = false,
+    allowAdd = true,
+    allowRemove = true,
+    stateRevision = 0,
+    rowActions = [],
     onValueChange,
   }: {
     label: string;
@@ -32,9 +42,23 @@
     minimumItems?: number;
     maximumItems?: number;
     addLabel?: string;
+    rowKey?: string;
+    reorderable?: boolean;
+    allowAdd?: boolean;
+    allowRemove?: boolean;
+    stateRevision?: number;
+    rowActions?: WorkspaceObjectRowAction[];
     onValueChange: (value: unknown) => void;
   } = $props();
 
+  let busyActions = $state<Record<string, boolean>>({});
+  let actionResults = $state<
+    Record<string, { tone: "success" | "warning" | "error"; message: string }>
+  >({});
+  let visibleProperties = $derived(
+    properties.filter((property) => property.presentation !== "hidden"),
+  );
+
   let rows = $derived.by(() => {
     if (mode === "map") {
       return Object.entries(asObjectMap(value)).map(([key, row]) => ({
@@ -43,15 +67,22 @@
       }));
     }
     return asObjectRows(value).map((row, index) => ({
-      key: String(index),
+      key:
+        rowKey && typeof row[rowKey] === "string" && String(row[rowKey]).trim()
+          ? String(row[rowKey])
+          : String(index),
       row,
     }));
   });
   let canAdd = $derived(
-    !disabled && (maximumItems === undefined || rows.length < maximumItems),
+    allowAdd &&
+      !disabled &&
+      (maximumItems === undefined || rows.length < maximumItems),
   );
   let canRemove = $derived(
-    !disabled && (minimumItems === undefined || rows.length > minimumItems),
+    allowRemove &&
+      !disabled &&
+      (minimumItems === undefined || rows.length > minimumItems),
   );
   let resolvedAddLabel = $derived(
     addLabel ?? (mode === "map" ? `Add ${label} entry` : `Add ${label} row`),
@@ -131,6 +162,69 @@
         .map((entry) => entry.row),
     );
   }
+
+  function moveRow(index: number, offset: -1 | 1) {
+    if (mode !== "array" || disabled || !reorderable) return;
+    const target = index + offset;
+    if (target < 0 || target >= rows.length) return;
+    const next = rows.map((entry) => entry.row);
+    [next[index], next[target]] = [next[target]!, next[index]!];
+    emitArray(next);
+  }
+
+  function actionVisible(
+    action: WorkspaceObjectRowAction,
+    row: Record<string, unknown>,
+  ): boolean {
+    return typeof action.hidden === "function"
+      ? !action.hidden(row)
+      : action.hidden !== true;
+  }
+
+  function actionDisabled(
+    action: WorkspaceObjectRowAction,
+    row: Record<string, unknown>,
+    key: string,
+  ): boolean {
+    stateRevision;
+    const configured =
+      typeof action.disabled === "function"
+        ? action.disabled(row)
+        : action.disabled === true;
+    return (
+      disabled ||
+      configured ||
+      busyActions[`${key}:${action.id}`] === true ||
+      action.busy?.(row) === true
+    );
+  }
+
+  async function runRowAction(
+    action: WorkspaceObjectRowAction,
+    row: Record<string, unknown>,
+    index: number,
+    key: string,
+  ): Promise<void> {
+    if (actionDisabled(action, row, key)) return;
+    if (action.confirm && !(await action.confirm(row))) return;
+    const actionKey = `${key}:${action.id}`;
+    delete actionResults[actionKey];
+    busyActions[actionKey] = true;
+    try {
+      const result = await action.run(row, index);
+      if (result) actionResults[actionKey] = result;
+    } catch (caught) {
+      actionResults[actionKey] = {
+        tone: "error",
+        message:
+          caught instanceof Error
+            ? caught.message
+            : "Unable to run this action",
+      };
+    } finally {
+      busyActions[actionKey] = false;
+    }
+  }
 </script>
 
 <div class="ui-workspace-setting-object-collection">
@@ -140,14 +234,14 @@
         {#if mode === "map"}
           <Table.Head>Name</Table.Head>
         {/if}
-        {#each properties as property (property.id)}
+        {#each visibleProperties as property (property.id)}
           <Table.Head>{property.title}</Table.Head>
         {/each}
         <Table.Head>Actions</Table.Head>
       </Table.Row>
     </Table.Header>
     <Table.Body>
-      {#each rows as entry, index (mode === "map" ? entry.key : index)}
+      {#each rows as entry, index (entry.key)}
         <Table.Row>
           {#if mode === "map"}
             <Table.Cell>
@@ -160,19 +254,40 @@
               />
             </Table.Cell>
           {/if}
-          {#each properties as property (property.id)}
+          {#each visibleProperties as property (property.id)}
             <Table.Cell>
               {#if property.type === "boolean"}
                 <Switch
                   checked={Boolean(entry.row[property.id])}
-                  {disabled}
+                  disabled={disabled || property.readOnly}
                   aria-label={`${label} ${property.title} row ${index + 1}`}
                   onCheckedChange={(checked) =>
                     updateCell(index, property.id, checked)}
                 />
+              {:else if property.presentation === "copyable"}
+                <CopyableValue
+                  value={String(entry.row[property.id] ?? "")}
+                  label={`${label} ${property.title}`}
+                />
+              {:else if property.presentation === "code"}
+                <code class="ui-workspace-setting-object-code"
+                  >{String(entry.row[property.id] ?? "")}</code
+                >
+              {:else if property.presentation === "status"}
+                <span class="ui-workspace-setting-object-status"
+                  >{String(entry.row[property.id] ?? "")}</span
+                >
+              {:else if property.readOnly}
+                <span class="ui-workspace-setting-object-value"
+                  >{String(entry.row[property.id] ?? "")}</span
+                >
               {:else}
                 <Input
-                  type={property.type === "string" ? "text" : "number"}
+                  type={property.type === "string"
+                    ? property.presentation === "url"
+                      ? "url"
+                      : "text"
+                    : "number"}
                   step={property.type === "integer" ? 1 : "any"}
                   aria-label={`${label} ${property.title} row ${index + 1}`}
                   value={String(entry.row[property.id] ?? "")}
@@ -190,23 +305,72 @@
             </Table.Cell>
           {/each}
           <Table.Cell>
-            <Button
-              variant="ghost"
-              size="icon-sm"
-              aria-label={`Remove ${label} row ${index + 1}`}
-              disabled={!canRemove}
-              onclick={() => removeRow(index)}
-            >
-              <WorkspaceIcon name="x" />
-            </Button>
+            <div class="ui-workspace-setting-object-actions">
+              {#if mode === "array" && reorderable}
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={`Move ${label} row ${index + 1} up`}
+                  disabled={disabled || index === 0}
+                  onclick={() => moveRow(index, -1)}
+                >
+                  <WorkspaceIcon name="arrow-up" />
+                </Button>
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={`Move ${label} row ${index + 1} down`}
+                  disabled={disabled || index === rows.length - 1}
+                  onclick={() => moveRow(index, 1)}
+                >
+                  <WorkspaceIcon name="arrow-down" />
+                </Button>
+              {/if}
+              {#each rowActions.filter( (action) => actionVisible(action, entry.row), ) as action (action.id)}
+                <Button
+                  variant={action.variant ?? "ghost"}
+                  size={action.icon ? "icon-sm" : "sm"}
+                  aria-label={action.label}
+                  title={action.label}
+                  disabled={actionDisabled(action, entry.row, entry.key)}
+                  onclick={() =>
+                    void runRowAction(action, entry.row, index, entry.key)}
+                >
+                  {#if action.icon}<WorkspaceIcon name={action.icon} />{/if}
+                  {#if !action.icon}{action.label}{/if}
+                </Button>
+                {@const result = actionResults[`${entry.key}:${action.id}`]}
+                {#if result}
+                  <span
+                    class="ui-workspace-setting-object-action-result"
+                    data-tone={result.tone}
+                    role={result.tone === "error" ? "alert" : "status"}
+                    >{result.message}</span
+                  >
+                {/if}
+              {/each}
+              {#if !disabled && allowRemove}
+                <Button
+                  variant="ghost"
+                  size="icon-sm"
+                  aria-label={`Remove ${label} row ${index + 1}`}
+                  disabled={!canRemove}
+                  onclick={() => removeRow(index)}
+                >
+                  <WorkspaceIcon name="x" />
+                </Button>
+              {/if}
+            </div>
           </Table.Cell>
         </Table.Row>
       {/each}
     </Table.Body>
   </Table.Root>
-  <WorkspaceSettingAddButton
-    label={resolvedAddLabel}
-    disabled={!canAdd}
-    onclick={addRow}
-  />
+  {#if !disabled && allowAdd}
+    <WorkspaceSettingAddButton
+      label={resolvedAddLabel}
+      disabled={!canAdd}
+      onclick={addRow}
+    />
+  {/if}
 </div>

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>