@lapismd/design-core 0.1.0 → 0.2.0

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>

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>