@lapismd/design-core 0.1.0 → 0.1.2

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>

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

@@ -21,6 +21,7 @@
   import WorkspaceSettingObjectTable from "./WorkspaceSettingObjectTable.svelte";
   import WorkspaceSettingSelect from "./WorkspaceSettingSelect.svelte";
   import WorkspaceSettingToggleTable from "./WorkspaceSettingToggleTable.svelte";
+  import CopyableValue from "./CopyableValue.svelte";
 
   let {
     controller,
@@ -31,7 +32,12 @@
   } = $props();
 
   let value = $derived(controller.get(field.id));
-  let error = $derived(controller.validationErrors[field.id]);
+  let error = $derived(controller.getError(field.id));
+  let busy = $derived(controller.isBusy(field.id));
+  let actionResult = $derived(controller.getActionResult(field.id));
+  let controlDisabled = $derived(
+    field.disabled === true || field.readOnly === true,
+  );
   let options = $state<WorkspaceSettingOption[]>([]);
   let optionRequest = 0;
   let keyValueOptions = $derived.by(() => {
@@ -100,7 +106,8 @@
     return field.type === "key-value" ||
       field.type === "object-array" ||
       field.type === "object-grid" ||
-      field.type === "object-map"
+      field.type === "object-map" ||
+      (field.type === "custom" && field.presentation === "full-width")
       ? "stacked"
       : "row";
   }
@@ -123,7 +130,7 @@
     const next = { ...current };
     delete next[currentKey];
     next[nextKey] = nextValue;
-    controller.update(field.id, next);
+    void controller.set(field.id, next);
   }
 
   function nextKey(field: WorkspaceKeyValueSetting) {
@@ -180,17 +187,17 @@
         <Switch
           id={`setting-${field.id}`}
           checked={value === true}
-          disabled={field.disabled}
-          onCheckedChange={(checked) => controller.update(field.id, checked)}
+          disabled={controlDisabled}
+          onCheckedChange={(checked) => void controller.set(field.id, checked)}
         />
       {:else if field.type === "string" && field.presentation === "icon"}
         <WorkspaceIconPicker
           id={`setting-${field.id}`}
           value={String(value ?? "")}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           placeholder={field.placeholder ?? "Select an icon"}
           ariaLabel={field.title}
-          onValueChange={(next) => controller.update(field.id, next)}
+          onValueChange={(next) => void controller.set(field.id, next)}
         />
       {:else if field.type === "string" && field.presentation === "textarea"}
         <Textarea
@@ -198,30 +205,30 @@
           rows={1}
           value={String(value ?? "")}
           placeholder={field.placeholder}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           aria-invalid={Boolean(error)}
           oninput={(event) =>
-            controller.update(field.id, event.currentTarget.value)}
+            void controller.set(field.id, event.currentTarget.value)}
         />
       {:else if field.type === "string" && (field.presentation === "combobox" || field.optionsSource)}
         <WorkspaceSettingSelect
           id={`setting-${field.id}`}
           items={options}
           value={String(value ?? field.default)}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           ariaLabel={field.title}
           placeholder={field.placeholder}
-          onValueChange={(next: string) => controller.update(field.id, next)}
+          onValueChange={(next: string) => void controller.set(field.id, next)}
         />
       {:else if field.type === "string" && field.presentation === "password"}
         <PasswordInput
           id={`setting-${field.id}`}
           value={String(value ?? "")}
           placeholder={field.placeholder}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           aria-invalid={Boolean(error)}
           oninput={(event) =>
-            controller.update(field.id, event.currentTarget.value)}
+            void controller.set(field.id, event.currentTarget.value)}
         />
       {:else if field.type === "string"}
         <Input
@@ -239,10 +246,10 @@
                     : "text"}
           value={String(value ?? "")}
           placeholder={field.placeholder}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           aria-invalid={Boolean(error)}
           oninput={(event) =>
-            controller.update(field.id, event.currentTarget.value)}
+            void controller.set(field.id, event.currentTarget.value)}
         />
       {:else if (field.type === "number" || field.type === "integer") && field.minimum !== undefined && field.maximum !== undefined}
         <div class="ui-workspace-setting-range">
@@ -253,9 +260,10 @@
             min={field.minimum}
             max={field.maximum}
             step={field.step ?? (field.type === "integer" ? 1 : 0.1)}
-            disabled={field.disabled}
+            disabled={controlDisabled}
             aria-label={field.title}
-            onValueChange={(next: number) => controller.update(field.id, next)}
+            onValueChange={(next: number) =>
+              void controller.set(field.id, next)}
           />
           <output for={`setting-${field.id}`}
             >{Number(value ?? field.default)}</output
@@ -269,18 +277,18 @@
           min={field.minimum}
           max={field.maximum}
           step={field.step ?? (field.type === "integer" ? 1 : "any")}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           onchange={(event) =>
-            controller.update(field.id, event.currentTarget.valueAsNumber)}
+            void controller.set(field.id, event.currentTarget.valueAsNumber)}
         />
       {:else if field.type === "enum"}
         <WorkspaceSettingSelect
           id={`setting-${field.id}`}
           items={options}
           value={String(value ?? field.default)}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           ariaLabel={field.title}
-          onValueChange={(next: string) => controller.update(field.id, next)}
+          onValueChange={(next: string) => void controller.set(field.id, next)}
         />
       {:else if field.type === "multi-enum"}
         <WorkspaceSettingSelect
@@ -292,10 +300,11 @@
                 (entry): entry is string => typeof entry === "string",
               )
             : field.default}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           ariaLabel={field.title}
           placeholder="Select options..."
-          onValueChange={(next: string[]) => controller.update(field.id, next)}
+          onValueChange={(next: string[]) =>
+            void controller.set(field.id, next)}
         />
       {:else if field.type === "list"}
         <WorkspaceSettingList
@@ -303,19 +312,26 @@
           label={field.title}
           itemLabels={field.itemLabels}
           value={Array.isArray(value) ? value : []}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           maximumItems={field.maximumItems}
-          onValueChange={(next) => controller.update(field.id, next)}
+          onValueChange={(next) => void controller.set(field.id, next)}
         />
       {:else if field.type === "object-array" || field.type === "object-grid"}
         <WorkspaceSettingObjectTable
           label={field.title}
           properties={field.properties}
           value={value ?? field.default}
-          disabled={field.disabled}
+          disabled={controlDisabled}
           minimumItems={field.minimumItems}
           maximumItems={field.maximumItems}
-          onValueChange={(next) => controller.update(field.id, next)}
+          rowKey={field.rowKey}
+          reorderable={field.reorderable}
+          allowAdd={field.allowAdd}
+          allowRemove={field.allowRemove}
+          stateRevision={controller.sourceRevision}
+          addLabel={field.addLabel}
+          rowActions={field.rowActions}
+          onValueChange={(next) => void controller.set(field.id, next)}
         />
       {:else if field.type === "object-map"}
         <WorkspaceSettingObjectTable
@@ -323,8 +339,8 @@
           properties={field.properties}
           mode="map"
           value={value ?? field.default}
-          disabled={field.disabled}
-          onValueChange={(next) => controller.update(field.id, next)}
+          disabled={controlDisabled}
+          onValueChange={(next) => void controller.set(field.id, next)}
         />
       {:else if field.type === "key-value"}
         <div class="ui-workspace-setting-key-value">
@@ -370,7 +386,7 @@
                       onclick={() => {
                         const next = { ...keyValue(field) };
                         delete next[key];
-                        controller.update(field.id, next);
+                        void controller.set(field.id, next);
                       }}
                     >
                       <WorkspaceIcon name="trash-2" />
@@ -383,20 +399,62 @@
           <WorkspaceSettingAddButton
             label={field.addLabel ?? "Add entry"}
             onclick={() =>
-              controller.update(field.id, {
+              void controller.set(field.id, {
                 ...keyValue(field),
                 [nextKey(field)]: keyValueOptions[0]?.value ?? "",
               })}
           />
         </div>
+      {:else if field.type === "output"}
+        {#if field.presentation === "copyable"}
+          <CopyableValue
+            value={value == null ? null : String(value)}
+            label={field.copyLabel ?? field.title}
+            emptyLabel={field.emptyLabel}
+            leadingCharacters={field.leadingCharacters}
+            trailingCharacters={field.trailingCharacters}
+          />
+        {:else}
+          <output
+            id={`setting-${field.id}`}
+            class="ui-workspace-setting-output"
+            data-presentation={field.presentation ?? "text"}
+          >
+            {#if field.presentation === "code"}
+              <code
+                >{value == null
+                  ? (field.emptyLabel ?? "None")
+                  : String(value)}</code
+              >
+            {:else}
+              {value == null ? (field.emptyLabel ?? "None") : String(value)}
+            {/if}
+          </output>
+        {/if}
       {:else if field.type === "custom"}
-        {@const CustomComponent = field.component}
-        <CustomComponent
-          id={field.id}
-          {value}
-          disabled={field.disabled}
-          update={(next) => controller.update(field.id, next)}
-        />
+        {@const CustomComponent = field.adapter
+          ? controller.resolveCustomAdapter(field.id, field.adapter)?.component
+          : field.component}
+        {#if CustomComponent}
+          <CustomComponent
+            id={field.id}
+            {field}
+            {value}
+            disabled={controlDisabled}
+            readOnly={field.readOnly}
+            {busy}
+            {error}
+            setValue={(next) => controller.set(field.id, next)}
+            update={(next) => controller.update(field.id, next)}
+          />
+        {:else}
+          <Alert.Root class="ui-workspace-setting-unsupported">
+            <Alert.Title>Unavailable custom field</Alert.Title>
+            <Alert.Description>
+              The adapter for this setting is not registered.
+            </Alert.Description>
+          </Alert.Root>
+        {/if}
       {:else if field.type === "unsupported"}
         <Alert.Root class="ui-workspace-setting-unsupported">
           <Alert.Title>Unsupported setting</Alert.Title>
@@ -410,7 +468,8 @@
         <Button
           id={`setting-${field.id}`}
           variant={field.variant ?? "outline"}
-          disabled={field.disabled}
+          disabled={controller.isDisabled(field.id) || busy}
+          aria-busy={busy}
           onclick={() => controller.runAction(field.id)}
         >
           {#if field.icon}<WorkspaceIcon name={field.icon} />{/if}
@@ -418,14 +477,24 @@
         </Button>
       {/if}
 
-      {#if field.type !== "action"}
+      {#if field.type === "action" && actionResult}
+        <p
+          class="ui-workspace-setting-action-result"
+          data-tone={actionResult.tone}
+          role={actionResult.tone === "error" ? "alert" : "status"}
+        >
+          {actionResult.message}
+        </p>
+      {/if}
+
+      {#if field.type !== "action" && field.type !== "output" && "default" in field && field.default !== undefined}
         <Button
           class="ui-workspace-setting-restore"
           variant="ghost"
           size="icon-sm"
           aria-label={`Restore ${field.title} default`}
           title="Restore default"
-          disabled={field.disabled}
+          disabled={controlDisabled}
           onclick={() => controller.restoreDefault(field.id)}
         >
           <WorkspaceIcon name="rotate-ccw" />

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

@@ -85,7 +85,9 @@
           dataUiComponent="workspace-setting-multiselect"
           data-ui-part="trigger"
         >
-          <span class="ui-workspace-setting-select__value">{triggerContent}</span>
+          <span class="ui-workspace-setting-select__value"
+            >{triggerContent}</span
+          >
           <span data-ui-part="chevron">
             <WorkspaceIcon name="chevrons-up-down" />
           </span>
@@ -100,17 +102,16 @@
         data-ui-component="workspace-setting-multiselect"
         data-ui-part="content"
       >
-        <CommandView.Root
-          shouldFilter={false}
-          label={ariaLabel ?? placeholder}
-        >
+        <CommandView.Root shouldFilter={false} label={ariaLabel ?? placeholder}>
           <CommandView.Input
             bind:value={query}
             placeholder="Search options..."
             autocomplete="off"
             spellcheck="false"
           />
-          <CommandView.List aria-label={ariaLabel ? `${ariaLabel} options` : "Options"}>
+          <CommandView.List
+            aria-label={ariaLabel ? `${ariaLabel} options` : "Options"}
+          >
             <CommandView.Empty>No options found.</CommandView.Empty>
             {#if filtered.length > 0}
               <CommandView.Group>