@coffer-org/web-ui 4.0.0 → 6.0.0

package/dist/render/widgets/edit.js

@@ -15,7 +15,7 @@ import { Plus } from 'lucide-react';
 import { RecordInline } from "../../components/RecordInline.js";
 import { RemoveBtn, AddBtn, MultipleChips, CheckLegend, colsToCheckRow, checkRowToCols, Dash, } from "../shared.js";
 import { FieldSlot } from "../dispatch.js";
-import { FieldLabel } from "../chrome.js";
+import { FieldLabel, CHROME_LABEL_CLS } from "../chrome.js";
 import { measuredChipContent, measuredUnitLabel } from "./display.js";
 import { ChecklistRow } from "./checklist-row.js";
 import { ChecklistContent, clientChecklistContentFields } from "./checklist-content.js";
@@ -238,7 +238,7 @@ export function KeyValueWidget({ value, onChange, multiple = true, option, keyLa
     const canAdd = multiple || rows.length < 1;
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx(FlowRow, { items: rows.map((item, idx) => ({
                     key: String(idx),
-                    node: (_jsxs("div", { className: "flex flex-col gap-0.5 w-56 max-w-full min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [_jsx(Input, { placeholder: kLabel, value: item.key, className: "h-6 px-1 min-w-0 text-[11px] font-semibold uppercase text-muted", autoComplete: "off", onChange: (e) => save(rows.map((x, i) => (i === idx ? { ...x, key: e.target.value } : x))) }), _jsx(RemoveBtn, { onClick: () => save(rows.filter((_, i) => i !== idx)) })] }), _jsx(FieldSlot, { bare: true, field: option, value: item.value, mode: "edit", onChange: (v) => updatePairValue(idx, String(v)), recordCtx: recordCtx })] })),
+                    node: (_jsxs("div", { className: "flex flex-col gap-0.5 w-56 max-w-full min-w-0", children: [_jsxs("div", { className: "flex items-center gap-1 min-w-0", children: [_jsx(Input, { placeholder: kLabel, value: item.key, className: `h-6 px-1 ${CHROME_LABEL_CLS}`, autoComplete: "off", onChange: (e) => save(rows.map((x, i) => (i === idx ? { ...x, key: e.target.value } : x))) }), _jsx(RemoveBtn, { onClick: () => save(rows.filter((_, i) => i !== idx)) })] }), _jsx(FieldSlot, { bare: true, field: option, value: item.value, mode: "edit", onChange: (v) => updatePairValue(idx, String(v)), recordCtx: recordCtx })] })),
                 })) }), canAdd && (_jsxs(AddBtn, { onClick: () => setRows((r) => [...r, { key: '', value: '' }]), children: [kLabel, "/", vLabel] }))] }));
 }
 function parseMeasuredItems(value) {

package/dist/render/widgets/fixed-collection.js

@@ -8,6 +8,7 @@ import { FlowRow } from "./flow-row.js";
 import { subFull } from "./group.js";
 import { useGroupEdit } from "./group-edit.js";
 import { useHybridScope } from "../hybrid-scope.js";
+import { datumClass } from "../datum.js";
 export function FixedCollection({ group, value, onChange, recordCtx, mode = 'edit', }) {
     const { t } = useTranslation();
     const depth = useGroupDepth();
@@ -29,6 +30,6 @@ export function FixedCollection({ group, value, onChange, recordCtx, mode = 'edi
     return (_jsxs("fieldset", { className: `${groupScopeClass(depth)} flex flex-col min-w-0 ${STACK}`, children: [_jsx(GroupTitle, { as: "legend", label: t(group.label), icon: groupIcon(group), actions: live ? null : g.actions }), _jsx("div", { className: `flex flex-col ${STACK}`, children: rows.map((row, idx) => (_jsx(Rail, { children: _jsxs("div", { className: "flex items-start gap-2", children: [_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0 shrink-0", children: [by.type.label ? _jsx(FieldLabel, { label: t(by.type.label) }) : null, _jsx("span", { className: "text-sm px-1 py-2", children: fmtOptionLabel(t, { options: byOpts }, String(row[by.key] ?? '')) })] }), _jsx("div", { className: "flex-1 min-w-0", children: _jsx(FlowRow, { items: valueFields.map((sub) => ({
                                         key: sub.key,
                                         full: subFull(sub.type),
-                                        node: editing ? (_jsx("div", { className: "flex flex-col gap-0.5 min-w-0", children: _jsx(FieldSlot, { field: sub.type, value: row[sub.key] ?? '', onChange: (v) => update(idx, sub.key, v), label: sub.type.label ? t(sub.type.label) : undefined, mode: "edit", recordCtx: recordCtx }) })) : (_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', onChange: live ? (v) => update(idx, sub.key, v) : undefined, mode: "view", bare: !live, recordCtx: recordCtx })] })),
+                                        node: editing ? (_jsx("div", { className: "flex flex-col gap-0.5 min-w-0", children: _jsx(FieldSlot, { field: sub.type, value: row[sub.key] ?? '', onChange: (v) => update(idx, sub.key, v), label: sub.type.label ? t(sub.type.label) : undefined, mode: "edit", recordCtx: recordCtx }) })) : (_jsxs("div", { className: `flex flex-col gap-0.5 min-w-0 ${datumClass(sub.type)}`.trim(), children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', onChange: live ? (v) => update(idx, sub.key, v) : undefined, mode: "view", bare: !live, recordCtx: recordCtx })] })),
                                     })) }) })] }) }, String(row[by.key])))) })] }));
 }

package/dist/render/widgets/group-widgets.js

@@ -37,5 +37,5 @@ function ChecklistPage({ el, value, recordCtx, mode }) {
     return (_jsx(ChecklistGroup, { group: el, value: value, onChange: (v) => void write(v), recordCtx: recordCtx, mode: mode }));
 }
 registerRenderer({ kinds: ['per-weekday'], layout: 'block', Page: WeekdayGroupPage, editor: 'custom' });
-registerRenderer({ kinds: ['url'], layout: 'block', Page: UrlGroupPage });
+registerRenderer({ kinds: ['url'], layout: 'block', Page: UrlGroupPage, activate: 'value' });
 registerRenderer({ kinds: ['checklist'], layout: 'block', Page: ChecklistPage, editor: 'custom' });

package/dist/render/widgets/group.js

@@ -12,6 +12,7 @@ import { useFieldErrors } from "../field-errors.js";
 import { GroupField } from "./group-field.js";
 import { useGroupEdit } from "./group-edit.js";
 import { useHybridScope } from "../hybrid-scope.js";
+import { datumClass } from "../datum.js";
 import { FlowRow } from "./flow-row.js";
 import { fieldLayout } from "../../registry.js";
 export const subFull = (f) => fieldLayout(f) === 'block';
@@ -75,7 +76,7 @@ function CollectionCell({ sub, row, group, recordCtx, onChange, }) {
     const { t } = useTranslation();
     const live = useHybridScope() && Boolean(onChange);
     const wired = live ? onChange : undefined;
-    return (_jsxs("div", { className: "flex flex-col gap-0.5 min-w-0", children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: wired })] }));
+    return (_jsxs("div", { className: `flex flex-col gap-0.5 min-w-0 ${datumClass(sub.type)}`.trim(), children: [sub.type.label ? _jsx(FieldLabel, { label: t(sub.type.label) }) : null, _jsx(FieldSlot, { field: sub.type, fieldKey: live ? sub.key : undefined, value: row[sub.key] ?? '', mode: "view", bare: !live, recordCtx: recordCtx, onChange: wired })] }));
 }
 export function CollectionView({ group, value, onChange, recordCtx, actions, editable = false, }) {
     const { t } = useTranslation();

package/dist/render/widgets/table-group.js

@@ -6,10 +6,11 @@ import { hasValue, hasChildren, isNamedField, isStorageGroup } from '@coffer-org
 import { FieldSlot } from "../dispatch.js";
 import { useFieldErrors } from "../field-errors.js";
 import { AddBtn, usedElsewhere } from "../shared.js";
-import { GroupTitle, groupIcon, useGroupDepth, GroupDepthProvider, groupScopeClass } from "../chrome.js";
+import { GroupTitle, groupIcon, useGroupDepth, GroupDepthProvider, groupScopeClass, ChromeLabel } from "../chrome.js";
 import { Button } from "../../components/ui/button.js";
 import { useGroupEdit } from "./group-edit.js";
 import { useHybridScope } from "../hybrid-scope.js";
+import { datumClass } from "../datum.js";
 export function TableGroup({ group, value, onChange, recordCtx, mode, }) {
     const { t } = useTranslation();
     const errorAt = useFieldErrors();
@@ -49,8 +50,8 @@ export function TableGroup({ group, value, onChange, recordCtx, mode, }) {
     };
     const addRow = () => (live ? setPending((ps) => [...ps, {}]) : setRows([...rows, {}]));
     const rowTools = isEdit || live;
-    const header = (_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/60 bg-muted/15", children: [subs.map((s, i) => (_jsx("th", { className: `text-left text-[11px] font-semibold text-muted uppercase tracking-wider px-3.5 py-2.5 ${isGrowCol(s, i) ? 'w-full min-w-[140px]' : 'whitespace-nowrap min-w-[90px]'}`, children: colLabel(s) ? t(colLabel(s)) : '' }, colKey(s)))), rowTools && _jsx("th", { className: "w-10 px-2", "aria-hidden": true })] }) }));
-    const body = (_jsx("tbody", { className: "divide-y divide-border/30", children: rows.map((row, idx) => (_jsxs("tr", { className: "align-top hover:bg-muted/10 transition-colors", children: [subs.map((s, i) => (_jsx("td", { className: `px-3.5 py-2.5 min-h-10 ${isGrowCol(s, i) ? 'min-w-[140px]' : 'min-w-[90px]'}`, children: _jsx(FieldSlot, { ...colSlot(s), value: row[colKey(s)] ?? (hasValue(s) ? '' : null), excludeValues: usedElsewhere(rows, unique, colKey(s), idx), onChange: (v) => update(idx, colKey(s), v), fieldKey: live ? colKey(s) : undefined, mode: isEdit ? 'edit' : 'view', bare: !live, recordCtx: recordCtx, error: isStorageGroup(group) ? errorAt([group.key, idx, colKey(s)]) : undefined }) }, colKey(s)))), rowTools && (_jsx("td", { className: "px-2 py-2 min-h-10 w-10", children: _jsx(Button, { type: "button", variant: "outline", size: "iconSm", onClick: () => removeRow(idx), title: t('actions.delete'), className: "rounded-lg text-muted hover:border-danger hover:text-danger", children: _jsx(Trash2, { size: 14 }) }) }))] }, idx))) }));
+    const header = (_jsx("thead", { children: _jsxs("tr", { className: "border-b border-border/60 bg-muted/15", children: [subs.map((s, i) => (_jsx("th", { className: `text-left px-3.5 py-2.5 ${isGrowCol(s, i) ? 'w-full min-w-[140px]' : 'whitespace-nowrap min-w-[90px]'}`, children: _jsx(ChromeLabel, { children: colLabel(s) ? t(colLabel(s)) : '' }) }, colKey(s)))), rowTools && _jsx("th", { className: "w-10 px-2", "aria-hidden": true })] }) }));
+    const body = (_jsx("tbody", { className: "divide-y divide-border/30", children: rows.map((row, idx) => (_jsxs("tr", { className: "align-top hover:bg-muted/10 transition-colors", children: [subs.map((s, i) => (_jsx("td", { className: `px-3.5 py-2.5 min-h-10 ${isGrowCol(s, i) ? 'min-w-[140px]' : 'min-w-[90px]'} ${datumClass(colSlot(s).field)}`.trim(), children: _jsx(FieldSlot, { ...colSlot(s), value: row[colKey(s)] ?? (hasValue(s) ? '' : null), excludeValues: usedElsewhere(rows, unique, colKey(s), idx), onChange: (v) => update(idx, colKey(s), v), fieldKey: live ? colKey(s) : undefined, mode: isEdit ? 'edit' : 'view', bare: !live, recordCtx: recordCtx, error: isStorageGroup(group) ? errorAt([group.key, idx, colKey(s)]) : undefined }) }, colKey(s)))), rowTools && (_jsx("td", { className: "px-2 py-2 min-h-10 w-10", children: _jsx(Button, { type: "button", variant: "outline", size: "iconSm", onClick: () => removeRow(idx), title: t('actions.delete'), className: "rounded-lg text-muted hover:border-danger hover:text-danger", children: _jsx(Trash2, { size: 14 }) }) }))] }, idx))) }));
     const tableEl = (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("div", { className: "overflow-x-auto rounded-lg border border-border/60 bg-card/20 shadow-2xs", children: _jsxs("table", { className: "w-full border-collapse text-sm", children: [header, body] }) }), rowTools && _jsx(AddBtn, { onClick: addRow, children: t('form.addRow') })] }));
     if (mode !== 'view')
         return tableEl;

package/dist/types.d.ts

@@ -48,6 +48,7 @@ export interface FieldValueProps {
 }
 export type PickerSize = 'small' | 'large' | 'modal';
 export type EditorMode = 'popover' | 'modal' | 'inplace' | 'custom';
+export type ActivateMode = 'edit' | 'value';
 export interface FieldPickerProps {
     field: FieldMeta;
     draft: unknown;
@@ -80,5 +81,6 @@ export interface FieldRenderer {
     pickerSize?: PickerSize | ((field: FieldMeta) => PickerSize);
     Picker?: FC<FieldPickerProps>;
     editor?: EditorMode;
+    activate?: ActivateMode;
     keys?: (value: unknown, field: FieldMeta, ctx: FieldKeyCtx) => FieldKey[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coffer-org/web-ui",
-  "version": "4.0.0",
+  "version": "6.0.0",
   "type": "module",
   "engines": {
     "node": ">=24"
@@ -25,7 +25,7 @@
     "postpack": "node ../../scripts/swap-exports.mjs src"
   },
   "dependencies": {
-    "@coffer-org/sdk": "^4.0.0",
+    "@coffer-org/sdk": "^6.0.0",
     "@ark-ui/react": "^5.37.2",
     "@base-ui/react": "^1.5.0",
     "@icons-pack/react-simple-icons": "^13.13.0",