@kahitsan/ksui 0.32.0 → 0.34.0

package/src/components/composite/TransferAccountsPicker.tsx

@@ -40,11 +40,11 @@ function AccountTile(p: AccountTileProps): JSX.Element {
       onClick={p.onEditRequest}
       class={`group flex flex-1 min-w-0 items-center gap-3 border px-4 py-3 text-left transition-colors cursor-pointer ${p.clipClass}`}
       classList={{
-        "border-blue-500/40 bg-blue-500/5 hover:bg-blue-500/10":
+        "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_40%,transparent)] bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_5%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_10%,transparent)]":
           isFilled() && isFrom(),
-        "border-amber-500/40 bg-amber-500/5 hover:bg-amber-500/10":
+        "border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_40%,transparent)] bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_5%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_10%,transparent)]":
           isFilled() && !isFrom(),
-        "border-dashed border-zinc-700 bg-zinc-900/40 hover:border-amber-500/50 hover:bg-zinc-900/60":
+        "border-dashed border-[var(--ks-input-border,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_40%,transparent)] hover:border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_50%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_60%,transparent)]":
           !isFilled(),
       }}
       aria-label={
@@ -57,7 +57,7 @@ function AccountTile(p: AccountTileProps): JSX.Element {
         when={p.account}
         keyed
         fallback={
-          <span class="flex h-8 w-8 items-center justify-center text-zinc-500">
+          <span class="flex h-8 w-8 items-center justify-center text-[var(--ks-fg-subtle,#71717a)]">
             <Plus size={18} />
           </span>
         }
@@ -66,7 +66,7 @@ function AccountTile(p: AccountTileProps): JSX.Element {
           <AccountAvatar
             account={a}
             size={28}
-            iconClass={isFrom() ? "text-blue-300" : "text-amber-300"}
+            iconClass={isFrom() ? "text-[var(--ks-info,#38bdf8)]" : "text-[var(--ks-accent-hover,#fcd34d)]"}
           />
         )}
       </Show>
@@ -74,9 +74,9 @@ function AccountTile(p: AccountTileProps): JSX.Element {
         <span
           class="text-[10px] font-semibold uppercase tracking-widest"
           classList={{
-            "text-blue-300": isFilled() && isFrom(),
-            "text-amber-300": isFilled() && !isFrom(),
-            "text-zinc-500": !isFilled(),
+            "text-[var(--ks-info,#38bdf8)]": isFilled() && isFrom(),
+            "text-[var(--ks-accent-hover,#fcd34d)]": isFilled() && !isFrom(),
+            "text-[var(--ks-fg-subtle,#71717a)]": !isFilled(),
           }}
         >
           {isFrom() ? "From" : "To"}
@@ -85,23 +85,23 @@ function AccountTile(p: AccountTileProps): JSX.Element {
           when={p.account}
           keyed
           fallback={
-            <span class="text-sm text-zinc-500">{p.emptyHint}</span>
+            <span class="text-sm text-[var(--ks-fg-subtle,#71717a)]">{p.emptyHint}</span>
           }
         >
           {(a) => (
             <>
-              <span class="truncate text-sm font-semibold text-zinc-100">
+              <span class="truncate text-sm font-semibold text-[var(--ks-fg,#ffffff)]">
                 {a.name}
               </span>
               <Show when={a.balance != null}>
-                <span class="flex items-baseline gap-1 text-[11px] tabular-nums text-zinc-400">
+                <span class="flex items-baseline gap-1 text-[11px] tabular-nums text-[var(--ks-fg-muted,#a1a1aa)]">
                   <span class="truncate">{formatPHP(a.balance!)}</span>
                   <Show when={p.delta !== 0}>
                     <span
                       class="whitespace-nowrap font-semibold"
                       classList={{
-                        "text-red-400": p.delta < 0,
-                        "text-emerald-400": p.delta > 0,
+                        "text-[var(--ks-danger-fg,#f87171)]": p.delta < 0,
+                        "text-[var(--ks-success-fg,#34d399)]": p.delta > 0,
                       }}
                       data-testid={`transactions-form-transfer-delta-${p.role}`}
                     >
@@ -168,7 +168,7 @@ export default function TransferAccountsPicker(
               type="button"
               data-testid="transactions-form-transfer-swap"
               onClick={swap}
-              class="flex h-9 w-9 shrink-0 items-center justify-center self-center border border-zinc-700 bg-zinc-900 text-zinc-300 transition-colors hover:border-amber-500/60 hover:text-amber-300 cursor-pointer ks-hud-clip-button max-sm:rotate-90"
+              class="flex h-9 w-9 shrink-0 items-center justify-center self-center border border-[var(--ks-input-border,#3f3f46)] bg-[var(--ks-input-bg,#18181b)] text-[var(--ks-fg,#ffffff)] transition-colors hover:border-[color-mix(in_srgb,var(--ks-warning,#f59e0b)_60%,transparent)] hover:text-[var(--ks-accent-hover,#fcd34d)] cursor-pointer ks-hud-clip-button max-sm:rotate-90"
               aria-label="Swap source and destination"
               title="Swap source and destination"
             >
@@ -193,8 +193,8 @@ export default function TransferAccountsPicker(
                   x2="56"
                   y2="7"
                 >
-                  <stop offset="0" stop-color="#3b82f6" />
-                  <stop offset="1" stop-color="#f59e0b" />
+                  <stop offset="0" style={{ "stop-color": "var(--ks-info, #38bdf8)" }} />
+                  <stop offset="1" style={{ "stop-color": "var(--ks-warning, #f59e0b)" }} />
                 </linearGradient>
               </defs>
               <line
@@ -206,7 +206,7 @@ export default function TransferAccountsPicker(
                 stroke-width="2"
                 class="fin-flow-dash"
               />
-              <path d="M44 1 L56 7 L44 13 Z" fill="#f59e0b" />
+              <path d="M44 1 L56 7 L44 13 Z" style={{ fill: "var(--ks-warning, #f59e0b)" }} />
             </svg>
             <svg
               viewBox="0 0 14 40"
@@ -221,8 +221,8 @@ export default function TransferAccountsPicker(
                   x2="7"
                   y2="40"
                 >
-                  <stop offset="0" stop-color="#3b82f6" />
-                  <stop offset="1" stop-color="#f59e0b" />
+                  <stop offset="0" style={{ "stop-color": "var(--ks-info, #38bdf8)" }} />
+                  <stop offset="1" style={{ "stop-color": "var(--ks-warning, #f59e0b)" }} />
                 </linearGradient>
               </defs>
               <line
@@ -234,7 +234,7 @@ export default function TransferAccountsPicker(
                 stroke-width="2"
                 class="fin-flow-dash"
               />
-              <path d="M1 30 L13 30 L7 40 Z" fill="#f59e0b" />
+              <path d="M1 30 L13 30 L7 40 Z" style={{ fill: "var(--ks-warning, #f59e0b)" }} />
             </svg>
           </div>
         </Show>

package/src/components/composite/TransferFeeChip.tsx

@@ -13,9 +13,9 @@ export default function TransferFeeChip(props: TransferFeeChipProps) {
       onClick={props.onToggle}
       class="flex items-center gap-1.5 self-center rounded-md border px-2.5 py-1 text-[11px] font-semibold uppercase tracking-wider transition-colors cursor-pointer"
       classList={{
-        "border-blue-500/50 bg-blue-500/15 text-blue-300 hover:bg-blue-500/25":
+        "border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_50%,transparent)] bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_15%,transparent)] text-[var(--ks-info-fg,#7dd3fc)] hover:bg-[color-mix(in_srgb,var(--ks-info,#38bdf8)_25%,transparent)]":
           props.enabled,
-        "border-zinc-700 bg-zinc-950/60 text-zinc-400 hover:border-blue-500/40 hover:text-blue-300":
+        "border-[var(--ks-input-border,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-surface,#0f0f0f)_60%,transparent)] text-[var(--ks-fg-muted,#a1a1aa)] hover:border-[color-mix(in_srgb,var(--ks-info,#38bdf8)_40%,transparent)] hover:text-[var(--ks-info-fg,#7dd3fc)]":
           !props.enabled,
       }}
       aria-pressed={props.enabled}

package/src/components/composite/VoucherPicker.tsx

@@ -229,15 +229,15 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
         onClick={() => !props.disabled && setOpen((o) => !o)}
         class={`${props.compact ? "inline-flex" : "w-full flex"} items-center gap-2 ${
           props.compact ? "px-2.5 py-2" : "px-3 py-2.5"
-        } rounded-lg bg-zinc-800/30 border border-zinc-700/50 hover:border-amber-500/40 hover:bg-amber-500/5 transition-colors text-sm text-left cursor-pointer disabled:cursor-not-allowed disabled:opacity-60`}
+        } rounded-lg bg-[color-mix(in_srgb,var(--ks-border,rgba(39,39,42,0.5))_30%,transparent)] border border-[color-mix(in_srgb,var(--ks-border-strong,#3f3f46)_50%,transparent)] hover:border-[color-mix(in_srgb,var(--ks-primary,#c9a961)_40%,transparent)] hover:bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_5%,transparent)] transition-colors text-sm text-left cursor-pointer disabled:cursor-not-allowed disabled:opacity-60`}
         aria-haspopup="listbox"
         aria-expanded={open()}
       >
-        <Ticket size={16} class="shrink-0 text-zinc-400" />
-        <Show when={props.selected} fallback={<span class="text-zinc-500 italic">No voucher</span>}>
+        <Ticket size={16} class="shrink-0 text-[var(--ks-fg-muted,#a1a1aa)]" />
+        <Show when={props.selected} fallback={<span class="text-[var(--ks-fg-subtle,#71717a)] italic">No voucher</span>}>
           <span class="flex-1 min-w-0">
-            <span class="block truncate text-zinc-100 font-medium">{props.selected!.code}</span>
-            <span class="block truncate text-[11px] text-emerald-400">
+            <span class="block truncate text-[var(--ks-fg,#ffffff)] font-medium">{props.selected!.code}</span>
+            <span class="block truncate text-[11px] text-[var(--ks-success-fg,#34d399)]">
               {formatVoucherDescription(props.selected!)}
               <Show when={previewDiscount() > 0}> · {formatCurrency(previewDiscount())} off</Show>
             </span>
@@ -246,7 +246,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
             type="button"
             data-testid="voucher-picker-clear"
             onClick={clear}
-            class="shrink-0 p-1 rounded text-zinc-500 hover:text-red-400 hover:bg-red-500/10 transition-colors cursor-pointer"
+            class="shrink-0 p-1 rounded text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-danger-fg,#f87171)] hover:bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] transition-colors cursor-pointer"
             title="Remove voucher"
             aria-label="Remove voucher"
           >
@@ -260,14 +260,14 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
           <div
             ref={popupRef}
             data-testid="voucher-picker-popup"
-            class="z-[100] rounded-md border border-zinc-700 bg-zinc-900/95 backdrop-blur shadow-xl overflow-hidden flex flex-col"
+            class="z-[100] rounded-md border border-[var(--ks-input-border,#3f3f46)] bg-[color-mix(in_srgb,var(--ks-overlay-surface,#18181b)_95%,transparent)] backdrop-blur shadow-xl overflow-hidden flex flex-col"
             style={popupStyle()}
           >
-            <div class="px-3 py-2 border-b border-zinc-800 flex items-center gap-2">
-              <Ticket size={14} class="text-zinc-500 shrink-0" />
-              <span class="text-xs uppercase tracking-widest text-zinc-500 font-bold">Vouchers</span>
+            <div class="px-3 py-2 border-b border-[var(--ks-border-strong,#3f3f46)] flex items-center gap-2">
+              <Ticket size={14} class="text-[var(--ks-fg-subtle,#71717a)] shrink-0" />
+              <span class="text-xs uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-bold">Vouchers</span>
               <Show when={loading()}>
-                <Loader2 size={14} class="animate-spin text-zinc-500 ml-auto shrink-0" />
+                <Loader2 size={14} class="animate-spin text-[var(--ks-fg-subtle,#71717a)] ml-auto shrink-0" />
               </Show>
             </div>
             <ul
@@ -277,7 +277,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
             >
               <Show when={error()}>
                 <li>
-                  <div role="status" class="px-3 py-2 text-xs text-red-400">
+                  <div role="status" class="px-3 py-2 text-xs text-[var(--ks-danger-fg,#f87171)]">
                     {error()}
                   </div>
                 </li>
@@ -286,7 +286,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                 when={!loading() && !error() && applicable().length === 0 && inapplicable().length === 0}
               >
                 <li>
-                  <div role="status" class="px-3 py-4 text-xs text-zinc-500 text-center">
+                  <div role="status" class="px-3 py-4 text-xs text-[var(--ks-fg-subtle,#71717a)] text-center">
                     No vouchers available.
                   </div>
                 </li>
@@ -301,20 +301,20 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                         type="button"
                         data-testid={`voucher-picker-result-${v.id}`}
                         onClick={() => select(v)}
-                        class="w-full text-left px-3 py-2 hover:bg-amber-500/10 transition-colors flex items-start gap-2 cursor-pointer"
+                        class="w-full text-left px-3 py-2 hover:bg-[color-mix(in_srgb,var(--ks-primary,#c9a961)_10%,transparent)] transition-colors flex items-start gap-2 cursor-pointer"
                       >
-                        <Ticket size={14} class="shrink-0 mt-0.5 text-emerald-400" aria-hidden="true" />
+                        <Ticket size={14} class="shrink-0 mt-0.5 text-[var(--ks-success-fg,#34d399)]" aria-hidden="true" />
                         <span class="flex-1 min-w-0">
-                          <span class="block text-sm text-zinc-100 truncate">{v.code}</span>
-                          <span class="block text-[11px] text-zinc-500 truncate">
+                          <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">{v.code}</span>
+                          <span class="block text-[11px] text-[var(--ks-fg-subtle,#71717a)] truncate">
                             {formatVoucherDescription(v)}
                           </span>
                         </span>
-                        <span class="text-xs text-emerald-300 shrink-0 mt-0.5 font-mono">
+                        <span class="text-xs text-[var(--ks-success-fg,#34d399)] shrink-0 mt-0.5 font-mono">
                           {formatCurrency(discount())}
                         </span>
                         <Show when={selected()}>
-                          <span class="text-amber-400 shrink-0 mt-0.5">✓</span>
+                          <span class="text-[var(--ks-accent,#fbbf24)] shrink-0 mt-0.5">✓</span>
                         </Show>
                       </button>
                     </li>
@@ -323,7 +323,7 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
               </For>
               <Show when={inapplicable().length > 0}>
                 <li>
-                  <div class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-widest text-zinc-600 font-semibold border-t border-zinc-800 mt-1">
+                  <div class="px-3 pt-3 pb-1 text-[10px] uppercase tracking-widest text-[var(--ks-fg-subtle,#71717a)] font-semibold border-t border-[var(--ks-border-strong,#3f3f46)] mt-1">
                     Not applicable to this cart
                   </div>
                 </li>
@@ -335,10 +335,10 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
                         class="w-full text-left px-3 py-2 flex items-start gap-2 opacity-50 cursor-not-allowed"
                         aria-disabled="true"
                       >
-                        <Ticket size={14} class="shrink-0 mt-0.5 text-zinc-500" aria-hidden="true" />
+                        <Ticket size={14} class="shrink-0 mt-0.5 text-[var(--ks-fg-subtle,#71717a)]" aria-hidden="true" />
                         <span class="flex-1 min-w-0">
-                          <span class="block text-sm text-zinc-300 truncate">{v.code}</span>
-                          <span class="block text-[11px] text-zinc-500 truncate">
+                          <span class="block text-sm text-[var(--ks-fg,#ffffff)] truncate">{v.code}</span>
+                          <span class="block text-[11px] text-[var(--ks-fg-subtle,#71717a)] truncate">
                             {formatVoucherDescription(v)}
                           </span>
                         </span>
@@ -349,12 +349,12 @@ export default function VoucherPicker(props: VoucherPickerProps): JSX.Element {
               </Show>
             </ul>
             <Show when={props.selected}>
-              <div class="border-t border-zinc-800">
+              <div class="border-t border-[var(--ks-border-strong,#3f3f46)]">
                 <button
                   type="button"
                   data-testid="voucher-picker-clear-from-list"
                   onClick={() => select(null)}
-                  class="w-full text-left px-3 py-2 text-xs text-red-400 hover:bg-red-500/10 transition-colors flex items-center gap-2 cursor-pointer"
+                  class="w-full text-left px-3 py-2 text-xs text-[var(--ks-danger-fg,#f87171)] hover:bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] transition-colors flex items-center gap-2 cursor-pointer"
                 >
                   <X size={12} />
                   <span>Remove voucher</span>

package/src/components/composite/resource/ResourceForm.tsx

@@ -76,7 +76,7 @@ export function ResourceForm(props: ResourceFormProps) {
       <Show when={props.error}>
         <div
           data-testid={`${props.spec.testIdPrefix}-form-error`}
-          class="rounded-lg border border-red-500/30 bg-red-500/10 px-3 py-2 text-sm text-red-400"
+          class="rounded-lg border border-[color-mix(in_srgb,var(--ks-danger,#ef4444)_30%,transparent)] bg-[color-mix(in_srgb,var(--ks-danger,#ef4444)_10%,transparent)] px-3 py-2 text-sm text-[var(--ks-danger-fg,#f87171)]"
         >
           {props.error}
         </div>

package/src/components/composite/resource/ResourcePage.tsx

@@ -316,7 +316,7 @@ export function ResourcePage<T extends ResourceRow>(
                       onChange={(e) =>
                         setFilterState(f.param, e.currentTarget.value)
                       }
-                      class="rounded-lg border border-zinc-800/50 bg-zinc-900 px-3 py-1.5 text-xs text-zinc-400 cursor-pointer"
+                      class="rounded-lg border border-[var(--ks-border,rgba(39,39,42,0.5))] bg-[var(--ks-input-bg,#18181b)] px-3 py-1.5 text-xs text-[var(--ks-fg-muted,#a1a1aa)] cursor-pointer"
                     >
                       <For each={f.options}>
                         {(o) => <option value={o.value}>{o.label}</option>}
@@ -344,7 +344,7 @@ export function ResourcePage<T extends ResourceRow>(
         >
           <div data-testid={`${spec.testIdPrefix}-create-modal`}>
             <div class="flex items-center justify-between mb-6">
-              <h2 class="text-lg font-semibold text-zinc-100">
+              <h2 class="text-lg font-semibold text-[var(--ks-fg,#ffffff)]">
                 {spec.labels.createTitle}
               </h2>
               <button
@@ -352,7 +352,7 @@ export function ResourcePage<T extends ResourceRow>(
                   setCreateOpen(false);
                   resetForm();
                 }}
-                class="text-zinc-500 hover:text-zinc-300 cursor-pointer"
+                class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-fg,#ffffff)] cursor-pointer"
                 aria-label="Close"
               >
                 <X size={20} />
@@ -387,7 +387,7 @@ export function ResourcePage<T extends ResourceRow>(
           >
             <div data-testid={`${spec.testIdPrefix}-detail-modal`}>
               <div class="flex items-center justify-between mb-6">
-                <h2 class="text-lg font-semibold text-zinc-100">
+                <h2 class="text-lg font-semibold text-[var(--ks-fg,#ffffff)]">
                   {editing()
                     ? spec.labels.editTitle
                     : String(row()[spec.labels.titleField] ?? "")}
@@ -396,7 +396,7 @@ export function ResourcePage<T extends ResourceRow>(
                   <Show when={!editing() && canEdit()}>
                     <button
                       onClick={startEdit}
-                      class="text-zinc-500 hover:text-amber-400 cursor-pointer p-1"
+                      class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-accent,#fbbf24)] cursor-pointer p-1"
                       title="Edit"
                       aria-label="Edit"
                     >
@@ -407,7 +407,7 @@ export function ResourcePage<T extends ResourceRow>(
                     {row()[spec.softDeleteField] ? (
                       <button
                         onClick={() => handleArchive(row().id)}
-                        class="text-zinc-500 hover:text-red-400 cursor-pointer p-1"
+                        class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-danger-fg,#f87171)] cursor-pointer p-1"
                         title="Archive"
                         aria-label="Archive"
                       >
@@ -416,7 +416,7 @@ export function ResourcePage<T extends ResourceRow>(
                     ) : (
                       <button
                         onClick={() => handleRestore(row().id)}
-                        class="text-zinc-500 hover:text-emerald-400 cursor-pointer p-1"
+                        class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-success-fg,#34d399)] cursor-pointer p-1"
                         title="Restore"
                         aria-label="Restore"
                       >
@@ -429,7 +429,7 @@ export function ResourcePage<T extends ResourceRow>(
                       setDetailRow(null);
                       setEditing(false);
                     }}
-                    class="text-zinc-500 hover:text-zinc-300 cursor-pointer p-1"
+                    class="text-[var(--ks-fg-subtle,#71717a)] hover:text-[var(--ks-fg,#ffffff)] cursor-pointer p-1"
                     aria-label="Close"
                   >
                     <X size={20} />

package/src/components/composite/resource/cells.tsx

@@ -18,7 +18,7 @@ export function renderCell(
       return (
         <button
           data-testid={`${spec.testIdPrefix}-row-${row.id}`}
-          class="text-left text-zinc-200 hover:text-amber-400 transition-colors cursor-pointer"
+          class="text-left text-[var(--ks-fg,#ffffff)] hover:text-[var(--ks-accent,#fbbf24)] transition-colors cursor-pointer"
           onClick={() => onTitleClick(row.id)}
         >
           {String(raw ?? "")}
@@ -26,7 +26,7 @@ export function renderCell(
       );
     case "enum": {
       const key = String(raw ?? "");
-      return <span class="text-zinc-400 text-sm capitalize">{r.labels[key] || key}</span>;
+      return <span class="text-[var(--ks-fg-muted,#a1a1aa)] text-sm capitalize">{r.labels[key] || key}</span>;
     }
     case "status": {
       const active = Boolean(raw);
@@ -35,7 +35,10 @@ export function renderCell(
     }
     case "text":
     default: {
-      const cls = (r.type === "text" && r.muted) ? "text-zinc-500 text-sm" : "text-zinc-400 text-sm";
+      const cls =
+        r.type === "text" && r.muted
+          ? "text-[var(--ks-fg-subtle,#71717a)] text-sm"
+          : "text-[var(--ks-fg-muted,#a1a1aa)] text-sm";
       const text = raw === null || raw === undefined || raw === "" ? "—" : String(raw);
       return <span class={cls}>{text}</span>;
     }

package/src/components/composite/resource/form-spec.ts

@@ -0,0 +1,141 @@
+// Pure builder for a declarative form descriptor. field.* helpers compile DOWN
+// to the EXISTING UiField union, so ResourceForm renders them with zero new
+// path. defineForm(...).fields plugs straight into the route adapter as
+// spec.fields. No solid-js — data only.
+import type { FieldTransform, UiField, UiFieldSelectOption } from "./spec.js";
+
+// ---- field defs ------------------------------------------------------------
+
+// FieldDef carries the lowered UiField body minus the key (supplied at the
+// fields-record key) and label (supplied per builder). `kind` is the discriminant.
+export interface FieldDefText {
+  readonly kind: "text";
+  readonly label: string;
+  readonly required?: boolean;
+  readonly transform: FieldTransform;
+  readonly placeholder?: string;
+}
+export interface FieldDefTextarea {
+  readonly kind: "textarea";
+  readonly label: string;
+  readonly required?: boolean;
+  readonly transform: FieldTransform;
+  readonly placeholder?: string;
+  readonly rows?: number;
+}
+export interface FieldDefSelect {
+  readonly kind: "select";
+  readonly label: string;
+  readonly required?: boolean;
+  readonly default?: string;
+  readonly options: readonly UiFieldSelectOption[];
+}
+// Declared-but-unwired kinds: present in the union so the contract is whole,
+// but no field.* builder produces them — an unwired kind is a tsc error at the
+// call site, never a silent runtime hole (the adapter also throws on it).
+export interface FieldDefUnwired {
+  readonly kind: "currency" | "date" | "relation" | "file";
+  readonly label: string;
+}
+export type FieldDef = FieldDefText | FieldDefTextarea | FieldDefSelect | FieldDefUnwired;
+
+export const field = {
+  text: (opts: {
+    label: string;
+    required?: boolean;
+    transform: FieldTransform;
+    placeholder?: string;
+  }): FieldDefText =>
+    Object.freeze({
+      kind: "text",
+      label: opts.label,
+      transform: opts.transform,
+      ...(opts.required ? { required: opts.required } : {}),
+      ...(opts.placeholder !== undefined ? { placeholder: opts.placeholder } : {}),
+    }),
+  textarea: (opts: {
+    label: string;
+    required?: boolean;
+    transform: FieldTransform;
+    placeholder?: string;
+    rows?: number;
+  }): FieldDefTextarea =>
+    Object.freeze({
+      kind: "textarea",
+      label: opts.label,
+      transform: opts.transform,
+      ...(opts.required ? { required: opts.required } : {}),
+      ...(opts.rows !== undefined ? { rows: opts.rows } : {}),
+      ...(opts.placeholder !== undefined ? { placeholder: opts.placeholder } : {}),
+    }),
+  select: (opts: {
+    label: string;
+    required?: boolean;
+    default?: string;
+    options: readonly UiFieldSelectOption[];
+  }): FieldDefSelect =>
+    Object.freeze({
+      kind: "select",
+      label: opts.label,
+      options: opts.options,
+      ...(opts.default !== undefined ? { default: opts.default } : {}),
+      ...(opts.required ? { required: opts.required } : {}),
+    }),
+} as const;
+
+// ---- the form spec ---------------------------------------------------------
+
+export interface FormSpec {
+  readonly name?: string;
+  readonly title?: string;
+  readonly fields: Readonly<Record<string, FieldDef>>;
+  // Binding seam: STRING command ids, not hardcoded verbs, so a flow runtime
+  // can slot in without recontracting the form.
+  readonly submit: { readonly create?: string; readonly update?: string; readonly label?: string };
+  readonly layout?: unknown;
+}
+
+export function defineForm(cfg: FormSpec): FormSpec {
+  return Object.freeze(cfg);
+}
+
+// ---- lowering (consumed by ./route-adapter) ---------------------------------
+
+/** Fold one FieldDef + its key into the existing UiField. THROWS on an
+ *  unwired kind so the wired subset fails loudly at build/test. */
+export function fieldToUiField(key: string, def: FieldDef): UiField {
+  switch (def.kind) {
+    case "text":
+      return {
+        key,
+        label: def.label,
+        type: "text",
+        ...(def.required ? { required: def.required } : {}),
+        transform: def.transform,
+        ...(def.placeholder !== undefined ? { placeholder: def.placeholder } : {}),
+      };
+    case "textarea":
+      return {
+        key,
+        label: def.label,
+        type: "textarea",
+        ...(def.required ? { required: def.required } : {}),
+        transform: def.transform,
+        ...(def.rows !== undefined ? { rows: def.rows } : {}),
+        ...(def.placeholder !== undefined ? { placeholder: def.placeholder } : {}),
+      };
+    case "select":
+      return {
+        key,
+        label: def.label,
+        type: "select",
+        ...(def.default !== undefined ? { default: def.default } : {}),
+        options: def.options,
+        ...(def.required ? { required: def.required } : {}),
+      };
+    default:
+      throw new Error(
+        `form-spec: field "${key}" uses unwired kind "${(def as { kind: string }).kind}" (only text/textarea/select are wired)`,
+      );
+  }
+}

package/src/components/composite/resource/route-adapter.ts

@@ -0,0 +1,63 @@
+// The compile-down core: routeToResourceSpec folds a RouteSpec DOWN to the
+// EXISTING ResourceUiSpec byte-identically, so ResourcePage (untouched) is
+// the single render engine. THROWS on unrepresentable config (a 2nd view mode,
+// a cards body, an unwired field kind) so the table-only subset is enforced at
+// author/build time, never silently dropped. Pure — no solid-js.
+import type { ResourceUiSpec, UiColumn, UiField } from "./spec.js";
+import type { BodyView, RouteSpec } from "./route-spec.js";
+import { fieldToUiField } from "./form-spec.js";
+
+/** Resolve the single body view, rejecting the multi-view / cards cases the
+ *  table-only subset does not render yet. */
+function resolveTableView(view: RouteSpec["view"]): BodyView {
+  if ("views" in view) {
+    throw new Error(
+      "route-adapter: multi-view routes are not supported (a second view mode is deferred)",
+    );
+  }
+  if (view.kind !== "table") {
+    throw new Error(
+      `route-adapter: body view "${view.kind}" is not wired (only "table" lowers to ResourcePage)`,
+    );
+  }
+  return view;
+}
+
+function routeColumns(view: BodyView): UiColumn[] {
+  if (view.kind !== "table") {
+    throw new Error(`route-adapter: cannot lower a "${view.kind}" body to columns`);
+  }
+  return view.columns.map((c) =>
+    c.orderable === undefined
+      ? { key: c.key, title: c.title, render: c.render }
+      : { key: c.key, title: c.title, orderable: c.orderable, render: c.render },
+  );
+}
+
+function routeFields(route: RouteSpec): UiField[] {
+  if (!route.form) return [];
+  return Object.entries(route.form.fields).map(([key, def]) => fieldToUiField(key, def));
+}
+
+export function routeToResourceSpec(route: RouteSpec): ResourceUiSpec {
+  const view = resolveTableView(route.view);
+
+  const spec: ResourceUiSpec = {
+    basePath: route.basePath,
+    title: route.title,
+    ...(route.subtitle !== undefined ? { subtitle: route.subtitle } : {}),
+    permissions: {
+      view: route.permissions.view,
+      edit: route.permissions.edit,
+      delete: route.permissions.delete,
+    },
+    softDeleteField: route.softDeleteField,
+    testIdPrefix: route.testIdPrefix,
+    columns: routeColumns(view),
+    fields: routeFields(route),
+    ...(route.toolbar?.filters !== undefined ? { filters: route.toolbar.filters } : {}),
+    detail: route.detail,
+    labels: route.labels,
+  };
+  return spec;
+}