@aglyn/besigner-ui 1.0.0-beta.143

package/src/lib/components/plugin-settings-field.component.js

@@ -0,0 +1,264 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getKnownPluginInstall, resolvePluginPropFields, unknownPluginPropKeys } from "@aglyn/aglyn";
+import { FormFieldGrid, useFieldApi, useFormApi } from "@aglyn/shared-ui-jsx-forms";
+import { Alert, Box, Button, Checkbox, FormControlLabel, MenuItem, Stack, TextField, Typography } from "@mui/material";
+import { useMemo, useState } from "react";
+import { readAttributeFieldValue } from "../utils/attribute-field-value.js";
+/** Mapper key for the attributes form (editor-internal, never persisted). */ export const PLUGIN_SETTINGS_FIELD_COMPONENT = 'aglyn-plugin-settings-field';
+/** Parses the stored JSON, tolerating anything an author may have typed. */ function parseSettings(value) {
+    if (typeof value !== 'string' || !value.trim()) return {};
+    try {
+        const parsed = JSON.parse(value);
+        return parsed && typeof parsed === 'object' && !Array.isArray(parsed) ? parsed : {};
+    } catch (unused) {
+        return {};
+    }
+}
+/** True when the stored value is non-empty but not parseable. */ function isBrokenJson(value) {
+    if (typeof value !== 'string' || !value.trim()) return false;
+    try {
+        JSON.parse(value);
+        return false;
+    } catch (unused) {
+        return true;
+    }
+}
+const serialize = (settings)=>Object.keys(settings).length ? JSON.stringify(settings) : '';
+/**
+ * A plugin's settings, as real fields (AGL-1049).
+ *
+ * `Plugin settings (JSON)` was a textarea: authors hand-wrote
+ * `{"title":"Spring sale"}` with no validation, no defaults, no idea which keys
+ * exist, and no feedback when a key was dropped for not being in the manifest.
+ * `filterPluginProps` drops anything undeclared, so a typo does not fail — it
+ * quietly does nothing, which is the worst of the options.
+ *
+ * The fields come from `resolvePluginPropFields`, which is driven by
+ * `capabilities.props` — THE allowlist — and merely decorated by the
+ * publisher's optional `propSchema`. So the form agrees with the filter by
+ * construction: it cannot offer a setting the plugin will not receive, and a
+ * plugin that predates `propSchema` still gets a field per declared prop as
+ * plain text rather than a blank box.
+ *
+ * ## Which plugin
+ *
+ * Read from the SIBLING `listingId` field through the form API rather than
+ * from props. The two attributes are edited in one form and the settings are
+ * meaningless without the selection, so this has to follow it live — picking a
+ * different plugin has to re-render against a different manifest, not keep
+ * showing the last one's fields.
+ *
+ * ## The escape hatch stays
+ *
+ * Raw JSON behind a toggle, per the issue: a plugin may legitimately accept a
+ * key no schema covers, and taking that away to make the generated form look
+ * tidier would remove the only way to set it. It is not the way in, though —
+ * it is the way out.
+ */ export function PluginSettingsField(props) {
+    const { input, label, description, isDisabled, listingField, listingFallback, help, FormFieldGridProps } = useFieldApi(props);
+    // The corner controls every field has — the help tip, and the `{}` that
+    // binds the settings to a property — ride the shared grid wrapper.
+    const grid = (children)=>/*#__PURE__*/ _jsx(FormFieldGrid, _extends({
+            help: help
+        }, FormFieldGridProps != null ? FormFieldGridProps : {}, {
+            children: children
+        }));
+    const formApi = useFormApi();
+    const [rawMode, setRawMode] = useState(false);
+    // The sibling selection. `getState()` rather than a subscription: the
+    // attributes form re-renders on every value change already, so reading here
+    // is current without a second subscription to keep in step.
+    //
+    // A Plugin settings PROPERTY names the Plugin property it follows
+    // (`listingField`, e.g. `propValues.plugin`) and that property's default
+    // (`listingFallback`), which is what the page renders while it picks none.
+    const picked = readAttributeFieldValue(formApi.getState().values, typeof listingField === 'string' && listingField ? listingField : 'listingId');
+    const listingId = String(typeof picked === 'string' && picked || (typeof listingFallback === 'string' ? listingFallback : '') || '');
+    const install = getKnownPluginInstall(listingId || undefined);
+    const fields = useMemo(()=>resolvePluginPropFields(install), [
+        install
+    ]);
+    const settings = useMemo(()=>parseSettings(input.value), [
+        input.value
+    ]);
+    const broken = isBrokenJson(input.value);
+    const unknownKeys = useMemo(()=>unknownPluginPropKeys(install, settings), [
+        install,
+        settings
+    ]);
+    const setKey = (name, value)=>{
+        const next = _extends({}, settings);
+        // Removing the key is not the same as storing `""`. An absent key lets the
+        // plugin apply its own default; an empty string overrides it with nothing.
+        if (value === undefined || value === '' || value === null) delete next[name];
+        else next[name] = value;
+        input.onChange(serialize(next));
+    };
+    if (!listingId) {
+        return grid(/*#__PURE__*/ _jsxs(Stack, {
+            spacing: 0.5,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "subtitle2",
+                    children: label != null ? label : 'Plugin settings'
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    variant: "caption",
+                    color: "text.secondary",
+                    children: listingField ? 'Choose a plugin for this page to see its settings.' : 'Choose a plugin above to see its settings.'
+                })
+            ]
+        }));
+    }
+    return grid(/*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                spacing: 1,
+                sx: {
+                    alignItems: 'center',
+                    justifyContent: 'space-between'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "subtitle2",
+                        children: label != null ? label : 'Plugin settings'
+                    }),
+                    /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        onClick: ()=>setRawMode((raw)=>!raw),
+                        children: rawMode ? 'Use fields' : 'Edit as JSON'
+                    })
+                ]
+            }),
+            description ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: description
+            }) : null,
+            broken ? /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: 'These settings are not valid JSON, so the plugin receives none of ' + 'them. Fix them below, or clear the box.'
+            }) : null,
+            unknownKeys.length ? // The silent failure, named. This is the whole complaint in AGL-1049.
+            /*#__PURE__*/ _jsx(Alert, {
+                severity: "warning",
+                children: `This plugin does not declare ${unknownKeys.map((key)=>`"${key}"`).join(', ')}, so ${unknownKeys.length === 1 ? 'it is' : 'they are'} ignored. Check the spelling, or remove ${unknownKeys.length === 1 ? 'it' : 'them'}.`
+            }) : null,
+            rawMode || broken ? /*#__PURE__*/ _jsx(TextField, {
+                size: "small",
+                multiline: true,
+                minRows: 3,
+                fullWidth: true,
+                value: typeof input.value === 'string' ? input.value : '',
+                disabled: isDisabled,
+                onChange: (event)=>input.onChange(event.target.value),
+                placeholder: '{"title":"Spring sale"}',
+                helperText: "Raw JSON — for keys no field covers."
+            }) : !fields.length ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                children: 'This plugin declares no settings, so there is nothing to configure.'
+            }) : /*#__PURE__*/ _jsx(Stack, {
+                spacing: 1.5,
+                children: fields.map((field)=>{
+                    const stored = settings[field.name];
+                    const shared = {
+                        key: field.name,
+                        size: 'small',
+                        fullWidth: true,
+                        label: field.label,
+                        disabled: isDisabled,
+                        helperText: field.description
+                    };
+                    if (field.type === 'boolean') {
+                        return /*#__PURE__*/ _jsxs(Box, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                                        checked: stored === undefined ? Boolean(field.default) : Boolean(stored),
+                                        disabled: isDisabled,
+                                        onChange: (event)=>setKey(field.name, event.target.checked)
+                                    }),
+                                    label: field.label
+                                }),
+                                field.description ? /*#__PURE__*/ _jsx(Typography, {
+                                    variant: "caption",
+                                    color: "text.secondary",
+                                    sx: {
+                                        display: 'block'
+                                    },
+                                    children: field.description
+                                }) : null
+                            ]
+                        }, field.name);
+                    }
+                    if (field.type === 'select') {
+                        var _ref, _field_options;
+                        return /*#__PURE__*/ _jsxs(TextField, _extends({}, shared, {
+                            select: true,
+                            // MUI renders an empty Select as a collapsed box without
+                            // this, so "not set" would be invisible.
+                            slotProps: {
+                                inputLabel: {
+                                    shrink: true
+                                }
+                            },
+                            value: String((_ref = stored != null ? stored : field.default) != null ? _ref : ''),
+                            onChange: (event)=>setKey(field.name, event.target.value),
+                            children: [
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    value: "",
+                                    children: field.default !== undefined ? `Default (${field.default})` : 'Not set'
+                                }),
+                                ((_field_options = field.options) != null ? _field_options : []).map((option)=>{
+                                    var _option_label;
+                                    return /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: option.value,
+                                        children: (_option_label = option.label) != null ? _option_label : option.value
+                                    }, option.value);
+                                })
+                            ]
+                        }));
+                    }
+                    const inputType = field.type === 'number' ? 'number' : field.type === 'date' ? 'datetime-local' : field.type === 'color' ? 'color' : field.type === 'url' ? 'url' : 'text';
+                    return /*#__PURE__*/ _jsx(TextField, _extends({}, shared, {
+                        type: inputType,
+                        // The manifest's default as the placeholder, so "what happens
+                        // if I leave this alone" is visible without guessing.
+                        placeholder: field.default !== undefined ? String(field.default) : undefined,
+                        slotProps: field.type === 'date' || field.type === 'color' ? {
+                            inputLabel: {
+                                shrink: true
+                            }
+                        } : undefined,
+                        value: stored === undefined ? '' : String(stored),
+                        onChange: (event)=>setKey(field.name, field.type === 'number' && event.target.value !== '' ? Number(event.target.value) : event.target.value)
+                    }));
+                })
+            })
+        ]
+    }));
+}
+PluginSettingsField.displayName = 'PluginSettingsField';
+export default PluginSettingsField;
+
+//# sourceMappingURL=plugin-settings-field.component.js.map

package/src/lib/components/plugin-settings-field.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/plugin-settings-field.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport {\n  getKnownPluginInstall,\n  resolvePluginPropFields,\n  unknownPluginPropKeys,\n} from '@aglyn/aglyn'\nimport {\n  FormFieldGrid,\n  type FormFieldGridProps,\n  useFieldApi,\n  useFormApi,\n} from '@aglyn/shared-ui-jsx-forms'\nimport {\n  Alert,\n  Box,\n  Button,\n  Checkbox,\n  FormControlLabel,\n  MenuItem,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { useMemo, useState } from 'react'\n\nimport { readAttributeFieldValue } from '../utils/attribute-field-value'\n\n/** Mapper key for the attributes form (editor-internal, never persisted). */\nexport const PLUGIN_SETTINGS_FIELD_COMPONENT = 'aglyn-plugin-settings-field'\n\n/** Parses the stored JSON, tolerating anything an author may have typed. */\nfunction parseSettings(value: unknown): Record<string, unknown> {\n  if (typeof value !== 'string' || !value.trim()) return {}\n  try {\n    const parsed = JSON.parse(value)\n    return parsed && typeof parsed === 'object' && !Array.isArray(parsed)\n      ? (parsed as Record<string, unknown>)\n      : {}\n  } catch {\n    return {}\n  }\n}\n\n/** True when the stored value is non-empty but not parseable. */\nfunction isBrokenJson(value: unknown): boolean {\n  if (typeof value !== 'string' || !value.trim()) return false\n  try {\n    JSON.parse(value)\n    return false\n  } catch {\n    return true\n  }\n}\n\nconst serialize = (settings: Record<string, unknown>): string =>\n  Object.keys(settings).length ? JSON.stringify(settings) : ''\n\n/**\n * A plugin's settings, as real fields (AGL-1049).\n *\n * `Plugin settings (JSON)` was a textarea: authors hand-wrote\n * `{\"title\":\"Spring sale\"}` with no validation, no defaults, no idea which keys\n * exist, and no feedback when a key was dropped for not being in the manifest.\n * `filterPluginProps` drops anything undeclared, so a typo does not fail — it\n * quietly does nothing, which is the worst of the options.\n *\n * The fields come from `resolvePluginPropFields`, which is driven by\n * `capabilities.props` — THE allowlist — and merely decorated by the\n * publisher's optional `propSchema`. So the form agrees with the filter by\n * construction: it cannot offer a setting the plugin will not receive, and a\n * plugin that predates `propSchema` still gets a field per declared prop as\n * plain text rather than a blank box.\n *\n * ## Which plugin\n *\n * Read from the SIBLING `listingId` field through the form API rather than\n * from props. The two attributes are edited in one form and the settings are\n * meaningless without the selection, so this has to follow it live — picking a\n * different plugin has to re-render against a different manifest, not keep\n * showing the last one's fields.\n *\n * ## The escape hatch stays\n *\n * Raw JSON behind a toggle, per the issue: a plugin may legitimately accept a\n * key no schema covers, and taking that away to make the generated form look\n * tidier would remove the only way to set it. It is not the way in, though —\n * it is the way out.\n */\nexport function PluginSettingsField(props: Record<string, unknown>) {\n  const {\n    input,\n    label,\n    description,\n    isDisabled,\n    listingField,\n    listingFallback,\n    help,\n    FormFieldGridProps,\n  } = useFieldApi(props as never)\n  // The corner controls every field has — the help tip, and the `{}` that\n  // binds the settings to a property — ride the shared grid wrapper.\n  const grid = (children: JSX.Node) => (\n    <FormFieldGrid\n      help={help as FormFieldGridProps['help']}\n      {...((FormFieldGridProps as FormFieldGridProps | undefined) ?? {})}\n    >\n      {children}\n    </FormFieldGrid>\n  )\n  const formApi = useFormApi()\n  const [rawMode, setRawMode] = useState(false)\n\n  // The sibling selection. `getState()` rather than a subscription: the\n  // attributes form re-renders on every value change already, so reading here\n  // is current without a second subscription to keep in step.\n  //\n  // A Plugin settings PROPERTY names the Plugin property it follows\n  // (`listingField`, e.g. `propValues.plugin`) and that property's default\n  // (`listingFallback`), which is what the page renders while it picks none.\n  const picked = readAttributeFieldValue(\n    formApi.getState().values as Record<string, unknown>,\n    typeof listingField === 'string' && listingField ? listingField : 'listingId',\n  )\n  const listingId = String(\n    (typeof picked === 'string' && picked) ||\n      (typeof listingFallback === 'string' ? listingFallback : '') ||\n      '',\n  )\n  const install = getKnownPluginInstall(listingId || undefined)\n  const fields = useMemo(\n    () => resolvePluginPropFields(install),\n    [install],\n  )\n\n  const settings = useMemo(() => parseSettings(input.value), [input.value])\n  const broken = isBrokenJson(input.value)\n  const unknownKeys = useMemo(\n    () => unknownPluginPropKeys(install, settings),\n    [install, settings],\n  )\n\n  const setKey = (name: string, value: unknown) => {\n    const next = { ...settings }\n    // Removing the key is not the same as storing `\"\"`. An absent key lets the\n    // plugin apply its own default; an empty string overrides it with nothing.\n    if (value === undefined || value === '' || value === null) delete next[name]\n    else next[name] = value\n    input.onChange(serialize(next))\n  }\n\n  if (!listingId) {\n    return grid(\n      <Stack spacing={0.5}>\n        <Typography variant=\"subtitle2\">{label ?? 'Plugin settings'}</Typography>\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {listingField\n            ? 'Choose a plugin for this page to see its settings.'\n            : 'Choose a plugin above to see its settings.'}\n        </Typography>\n      </Stack>,\n    )\n  }\n\n  return grid(\n    <Stack spacing={1.5}>\n      <Stack\n        direction=\"row\"\n        spacing={1}\n        sx={{ alignItems: 'center', justifyContent: 'space-between' }}\n      >\n        <Typography variant=\"subtitle2\">{label ?? 'Plugin settings'}</Typography>\n        <Button size=\"small\" onClick={() => setRawMode((raw) => !raw)}>\n          {rawMode ? 'Use fields' : 'Edit as JSON'}\n        </Button>\n      </Stack>\n      {description ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {description}\n        </Typography>\n      ) : null}\n\n      {broken ? (\n        <Alert severity=\"warning\">\n          {'These settings are not valid JSON, so the plugin receives none of ' +\n            'them. Fix them below, or clear the box.'}\n        </Alert>\n      ) : null}\n\n      {unknownKeys.length ? (\n        // The silent failure, named. This is the whole complaint in AGL-1049.\n        <Alert severity=\"warning\">\n          {`This plugin does not declare ${unknownKeys\n            .map((key) => `\"${key}\"`)\n            .join(', ')}, so ${\n            unknownKeys.length === 1 ? 'it is' : 'they are'\n          } ignored. Check the spelling, or remove ${\n            unknownKeys.length === 1 ? 'it' : 'them'\n          }.`}\n        </Alert>\n      ) : null}\n\n      {rawMode || broken ? (\n        <TextField\n          size=\"small\"\n          multiline\n          minRows={3}\n          fullWidth\n          value={typeof input.value === 'string' ? input.value : ''}\n          disabled={isDisabled}\n          onChange={(event) => input.onChange(event.target.value)}\n          placeholder='{\"title\":\"Spring sale\"}'\n          helperText=\"Raw JSON — for keys no field covers.\"\n        />\n      ) : !fields.length ? (\n        <Typography variant=\"caption\" color=\"text.secondary\">\n          {'This plugin declares no settings, so there is nothing to configure.'}\n        </Typography>\n      ) : (\n        <Stack spacing={1.5}>\n          {fields.map((field) => {\n            const stored = settings[field.name]\n            const shared = {\n              key: field.name,\n              size: 'small' as const,\n              fullWidth: true,\n              label: field.label,\n              disabled: isDisabled,\n              helperText: field.description,\n            }\n            if (field.type === 'boolean') {\n              return (\n                <Box key={field.name}>\n                  <FormControlLabel\n                    control={\n                      <Checkbox\n                        checked={\n                          stored === undefined\n                            ? Boolean(field.default)\n                            : Boolean(stored)\n                        }\n                        disabled={isDisabled}\n                        onChange={(event) =>\n                          setKey(field.name, event.target.checked)\n                        }\n                      />\n                    }\n                    label={field.label}\n                  />\n                  {field.description ? (\n                    <Typography\n                      variant=\"caption\"\n                      color=\"text.secondary\"\n                      sx={{ display: 'block' }}\n                    >\n                      {field.description}\n                    </Typography>\n                  ) : null}\n                </Box>\n              )\n            }\n            if (field.type === 'select') {\n              return (\n                <TextField\n                  {...shared}\n                  select\n                  // MUI renders an empty Select as a collapsed box without\n                  // this, so \"not set\" would be invisible.\n                  slotProps={{ inputLabel: { shrink: true } }}\n                  value={String(stored ?? field.default ?? '')}\n                  onChange={(event) => setKey(field.name, event.target.value)}\n                >\n                  <MenuItem value=\"\">\n                    {field.default !== undefined\n                      ? `Default (${field.default})`\n                      : 'Not set'}\n                  </MenuItem>\n                  {(field.options ?? []).map((option) => (\n                    <MenuItem key={option.value} value={option.value}>\n                      {option.label ?? option.value}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              )\n            }\n            const inputType =\n              field.type === 'number'\n                ? 'number'\n                : field.type === 'date'\n                  ? 'datetime-local'\n                  : field.type === 'color'\n                    ? 'color'\n                    : field.type === 'url'\n                      ? 'url'\n                      : 'text'\n            return (\n              <TextField\n                {...shared}\n                type={inputType}\n                // The manifest's default as the placeholder, so \"what happens\n                // if I leave this alone\" is visible without guessing.\n                placeholder={\n                  field.default !== undefined ? String(field.default) : undefined\n                }\n                slotProps={\n                  field.type === 'date' || field.type === 'color'\n                    ? { inputLabel: { shrink: true } }\n                    : undefined\n                }\n                value={stored === undefined ? '' : String(stored)}\n                onChange={(event) =>\n                  setKey(\n                    field.name,\n                    field.type === 'number' && event.target.value !== ''\n                      ? Number(event.target.value)\n                      : event.target.value,\n                  )\n                }\n              />\n            )\n          })}\n        </Stack>\n      )}\n    </Stack>,\n  )\n}\nPluginSettingsField.displayName = 'PluginSettingsField'\n\nexport default PluginSettingsField\n"],"names":["getKnownPluginInstall","resolvePluginPropFields","unknownPluginPropKeys","FormFieldGrid","useFieldApi","useFormApi","Alert","Box","Button","Checkbox","FormControlLabel","MenuItem","Stack","TextField","Typography","useMemo","useState","readAttributeFieldValue","PLUGIN_SETTINGS_FIELD_COMPONENT","parseSettings","value","trim","parsed","JSON","parse","Array","isArray","isBrokenJson","serialize","settings","Object","keys","length","stringify","PluginSettingsField","props","input","label","description","isDisabled","listingField","listingFallback","help","FormFieldGridProps","grid","children","formApi","rawMode","setRawMode","picked","getState","values","listingId","String","install","undefined","fields","broken","unknownKeys","setKey","name","next","onChange","spacing","variant","color","direction","sx","alignItems","justifyContent","size","onClick","raw","severity","map","key","join","multiline","minRows","fullWidth","disabled","event","target","placeholder","helperText","field","stored","shared","type","control","checked","Boolean","default","display","select","slotProps","inputLabel","shrink","options","option","inputType","Number","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,SACEA,qBAAqB,EACrBC,uBAAuB,EACvBC,qBAAqB,QAChB,eAAc;AACrB,SACEC,aAAa,EAEbC,WAAW,EACXC,UAAU,QACL,6BAA4B;AACnC,SACEC,KAAK,EACLC,GAAG,EACHC,MAAM,EACNC,QAAQ,EACRC,gBAAgB,EAChBC,QAAQ,EACRC,KAAK,EACLC,SAAS,EACTC,UAAU,QACL,gBAAe;AACtB,SAASC,OAAO,EAAEC,QAAQ,QAAQ,QAAO;AAEzC,SAASC,uBAAuB,QAAQ,oCAAgC;AAExE,2EAA2E,GAC3E,OAAO,MAAMC,kCAAkC,8BAA6B;AAE5E,0EAA0E,GAC1E,SAASC,cAAcC,KAAc;IACnC,IAAI,OAAOA,UAAU,YAAY,CAACA,MAAMC,IAAI,IAAI,OAAO,CAAC;IACxD,IAAI;QACF,MAAMC,SAASC,KAAKC,KAAK,CAACJ;QAC1B,OAAOE,UAAU,OAAOA,WAAW,YAAY,CAACG,MAAMC,OAAO,CAACJ,UACzDA,SACD,CAAC;IACP,EAAE,eAAM;QACN,OAAO,CAAC;IACV;AACF;AAEA,+DAA+D,GAC/D,SAASK,aAAaP,KAAc;IAClC,IAAI,OAAOA,UAAU,YAAY,CAACA,MAAMC,IAAI,IAAI,OAAO;IACvD,IAAI;QACFE,KAAKC,KAAK,CAACJ;QACX,OAAO;IACT,EAAE,eAAM;QACN,OAAO;IACT;AACF;AAEA,MAAMQ,YAAY,CAACC,WACjBC,OAAOC,IAAI,CAACF,UAAUG,MAAM,GAAGT,KAAKU,SAAS,CAACJ,YAAY;AAE5D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8BC,GACD,OAAO,SAASK,oBAAoBC,KAA8B;IAChE,MAAM,EACJC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,UAAU,EACVC,YAAY,EACZC,eAAe,EACfC,IAAI,EACJC,kBAAkB,EACnB,GAAGvC,YAAY+B;IAChB,wEAAwE;IACxE,mEAAmE;IACnE,MAAMS,OAAO,CAACC,yBACZ,KAAC1C;YACCuC,MAAMA;WACAC,6BAAAA,qBAAyD,CAAC;sBAE/DE;;IAGL,MAAMC,UAAUzC;IAChB,MAAM,CAAC0C,SAASC,WAAW,GAAGhC,SAAS;IAEvC,sEAAsE;IACtE,4EAA4E;IAC5E,4DAA4D;IAC5D,EAAE;IACF,kEAAkE;IAClE,yEAAyE;IACzE,2EAA2E;IAC3E,MAAMiC,SAAShC,wBACb6B,QAAQI,QAAQ,GAAGC,MAAM,EACzB,OAAOX,iBAAiB,YAAYA,eAAeA,eAAe;IAEpE,MAAMY,YAAYC,OAChB,AAAC,OAAOJ,WAAW,YAAYA,UAC5B,CAAA,OAAOR,oBAAoB,WAAWA,kBAAkB,EAAC,KAC1D;IAEJ,MAAMa,UAAUtD,sBAAsBoD,aAAaG;IACnD,MAAMC,SAASzC,QACb,IAAMd,wBAAwBqD,UAC9B;QAACA;KAAQ;IAGX,MAAMzB,WAAWd,QAAQ,IAAMI,cAAciB,MAAMhB,KAAK,GAAG;QAACgB,MAAMhB,KAAK;KAAC;IACxE,MAAMqC,SAAS9B,aAAaS,MAAMhB,KAAK;IACvC,MAAMsC,cAAc3C,QAClB,IAAMb,sBAAsBoD,SAASzB,WACrC;QAACyB;QAASzB;KAAS;IAGrB,MAAM8B,SAAS,CAACC,MAAcxC;QAC5B,MAAMyC,OAAO,aAAKhC;QAClB,2EAA2E;QAC3E,2EAA2E;QAC3E,IAAIT,UAAUmC,aAAanC,UAAU,MAAMA,UAAU,MAAM,OAAOyC,IAAI,CAACD,KAAK;aACvEC,IAAI,CAACD,KAAK,GAAGxC;QAClBgB,MAAM0B,QAAQ,CAAClC,UAAUiC;IAC3B;IAEA,IAAI,CAACT,WAAW;QACd,OAAOR,mBACL,MAAChC;YAAMmD,SAAS;;8BACd,KAACjD;oBAAWkD,SAAQ;8BAAa3B,gBAAAA,QAAS;;8BAC1C,KAACvB;oBAAWkD,SAAQ;oBAAUC,OAAM;8BACjCzB,eACG,uDACA;;;;IAIZ;IAEA,OAAOI,mBACL,MAAChC;QAAMmD,SAAS;;0BACd,MAACnD;gBACCsD,WAAU;gBACVH,SAAS;gBACTI,IAAI;oBAAEC,YAAY;oBAAUC,gBAAgB;gBAAgB;;kCAE5D,KAACvD;wBAAWkD,SAAQ;kCAAa3B,gBAAAA,QAAS;;kCAC1C,KAAC7B;wBAAO8D,MAAK;wBAAQC,SAAS,IAAMvB,WAAW,CAACwB,MAAQ,CAACA;kCACtDzB,UAAU,eAAe;;;;YAG7BT,4BACC,KAACxB;gBAAWkD,SAAQ;gBAAUC,OAAM;0BACjC3B;iBAED;YAEHmB,uBACC,KAACnD;gBAAMmE,UAAS;0BACb,uEACC;iBAEF;YAEHf,YAAY1B,MAAM,GACjB,sEAAsE;0BACtE,KAAC1B;gBAAMmE,UAAS;0BACb,CAAC,6BAA6B,EAAEf,YAC9BgB,GAAG,CAAC,CAACC,MAAQ,CAAC,CAAC,EAAEA,IAAI,CAAC,CAAC,EACvBC,IAAI,CAAC,MAAM,KAAK,EACjBlB,YAAY1B,MAAM,KAAK,IAAI,UAAU,WACtC,wCAAwC,EACvC0B,YAAY1B,MAAM,KAAK,IAAI,OAAO,OACnC,CAAC,CAAC;iBAEH;YAEHe,WAAWU,uBACV,KAAC5C;gBACCyD,MAAK;gBACLO,SAAS;gBACTC,SAAS;gBACTC,SAAS;gBACT3D,OAAO,OAAOgB,MAAMhB,KAAK,KAAK,WAAWgB,MAAMhB,KAAK,GAAG;gBACvD4D,UAAUzC;gBACVuB,UAAU,CAACmB,QAAU7C,MAAM0B,QAAQ,CAACmB,MAAMC,MAAM,CAAC9D,KAAK;gBACtD+D,aAAY;gBACZC,YAAW;iBAEX,CAAC5B,OAAOxB,MAAM,iBAChB,KAAClB;gBAAWkD,SAAQ;gBAAUC,OAAM;0BACjC;+BAGH,KAACrD;gBAAMmD,SAAS;0BACbP,OAAOkB,GAAG,CAAC,CAACW;oBACX,MAAMC,SAASzD,QAAQ,CAACwD,MAAMzB,IAAI,CAAC;oBACnC,MAAM2B,SAAS;wBACbZ,KAAKU,MAAMzB,IAAI;wBACfU,MAAM;wBACNS,WAAW;wBACX1C,OAAOgD,MAAMhD,KAAK;wBAClB2C,UAAUzC;wBACV6C,YAAYC,MAAM/C,WAAW;oBAC/B;oBACA,IAAI+C,MAAMG,IAAI,KAAK,WAAW;wBAC5B,qBACE,MAACjF;;8CACC,KAACG;oCACC+E,uBACE,KAAChF;wCACCiF,SACEJ,WAAW/B,YACPoC,QAAQN,MAAMO,OAAO,IACrBD,QAAQL;wCAEdN,UAAUzC;wCACVuB,UAAU,CAACmB,QACTtB,OAAO0B,MAAMzB,IAAI,EAAEqB,MAAMC,MAAM,CAACQ,OAAO;;oCAI7CrD,OAAOgD,MAAMhD,KAAK;;gCAEnBgD,MAAM/C,WAAW,iBAChB,KAACxB;oCACCkD,SAAQ;oCACRC,OAAM;oCACNE,IAAI;wCAAE0B,SAAS;oCAAQ;8CAEtBR,MAAM/C,WAAW;qCAElB;;2BAzBI+C,MAAMzB,IAAI;oBA4BxB;oBACA,IAAIyB,MAAMG,IAAI,KAAK,UAAU;4BAQTF,MAQZD;wBAfN,qBACE,MAACxE,wBACK0E;4BACJO,MAAM;4BACN,yDAAyD;4BACzD,yCAAyC;4BACzCC,WAAW;gCAAEC,YAAY;oCAAEC,QAAQ;gCAAK;4BAAE;4BAC1C7E,OAAOiC,QAAOiC,OAAAA,iBAAAA,SAAUD,MAAMO,OAAO,YAAvBN,OAA2B;4BACzCxB,UAAU,CAACmB,QAAUtB,OAAO0B,MAAMzB,IAAI,EAAEqB,MAAMC,MAAM,CAAC9D,KAAK;;8CAE1D,KAACT;oCAASS,OAAM;8CACbiE,MAAMO,OAAO,KAAKrC,YACf,CAAC,SAAS,EAAE8B,MAAMO,OAAO,CAAC,CAAC,CAAC,GAC5B;;gCAEL,EAACP,iBAAAA,MAAMa,OAAO,YAAbb,iBAAiB,EAAE,EAAEX,GAAG,CAAC,CAACyB;wCAEvBA;yDADH,KAACxF;wCAA4BS,OAAO+E,OAAO/E,KAAK;mDAC7C+E,gBAAAA,OAAO9D,KAAK,YAAZ8D,gBAAgBA,OAAO/E,KAAK;uCADhB+E,OAAO/E,KAAK;;;;oBAMnC;oBACA,MAAMgF,YACJf,MAAMG,IAAI,KAAK,WACX,WACAH,MAAMG,IAAI,KAAK,SACb,mBACAH,MAAMG,IAAI,KAAK,UACb,UACAH,MAAMG,IAAI,KAAK,QACb,QACA;oBACZ,qBACE,KAAC3E,wBACK0E;wBACJC,MAAMY;wBACN,8DAA8D;wBAC9D,sDAAsD;wBACtDjB,aACEE,MAAMO,OAAO,KAAKrC,YAAYF,OAAOgC,MAAMO,OAAO,IAAIrC;wBAExDwC,WACEV,MAAMG,IAAI,KAAK,UAAUH,MAAMG,IAAI,KAAK,UACpC;4BAAEQ,YAAY;gCAAEC,QAAQ;4BAAK;wBAAE,IAC/B1C;wBAENnC,OAAOkE,WAAW/B,YAAY,KAAKF,OAAOiC;wBAC1CxB,UAAU,CAACmB,QACTtB,OACE0B,MAAMzB,IAAI,EACVyB,MAAMG,IAAI,KAAK,YAAYP,MAAMC,MAAM,CAAC9D,KAAK,KAAK,KAC9CiF,OAAOpB,MAAMC,MAAM,CAAC9D,KAAK,IACzB6D,MAAMC,MAAM,CAAC9D,KAAK;;gBAKhC;;;;AAKV;AACAc,oBAAoBoE,WAAW,GAAG;AAElC,eAAepE,oBAAmB"}

package/src/lib/components/properties-dialog.component.d.ts

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type CloseableDrawerProps } from './closeable-drawer.component';
+export interface PropertiesDialogProps extends Partial<CloseableDrawerProps> {
+    children?: JSX.Children;
+}
+export declare const PropertiesDialogComponent: import("react").ForwardRefExoticComponent<Omit<PropertiesDialogProps, "ref"> & import("react").RefAttributes<any>>;
+export default PropertiesDialogComponent;

package/src/lib/components/properties-dialog.component.js

@@ -0,0 +1,40 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * @license
+ * Copyright 2023 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ import { forwardRef } from "react";
+import CloseableDrawerComponent from "./closeable-drawer.component.js";
+export const PropertiesDialogComponent = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { children, onClose } = props, rest = _object_without_properties_loose(props, [
+        "children",
+        "onClose"
+    ]);
+    return /*#__PURE__*/ _jsx(CloseableDrawerComponent, _extends({
+        ref: ref,
+        drawerTitle: 'Screen Properties',
+        action: 'Done',
+        disableCloseButton: true,
+        onClose: onClose
+    }, rest, {
+        children: children
+    }));
+});
+PropertiesDialogComponent.displayName = 'PropertiesDialogComponent';
+PropertiesDialogComponent.aglyn = true;
+export default PropertiesDialogComponent;
+
+//# sourceMappingURL=properties-dialog.component.js.map

package/src/lib/components/properties-dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/besigner/feature/designer/src/lib/components/properties-dialog.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2023 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nimport { forwardRef } from 'react'\nimport CloseableDrawerComponent, {\n  type CloseableDrawerProps,\n} from './closeable-drawer.component'\n\nexport interface PropertiesDialogProps extends Partial<CloseableDrawerProps> {\n  children?: JSX.Children\n}\n\nexport const PropertiesDialogComponent = forwardRef<any, PropertiesDialogProps>(\n  (props, ref) => {\n    const { children, onClose, ...rest } = props\n\n    return (\n      <CloseableDrawerComponent\n        ref={ref}\n        drawerTitle={'Screen Properties'}\n        action={'Done'}\n        disableCloseButton\n        onClose={onClose}\n        {...rest}\n      >\n        {children}\n      </CloseableDrawerComponent>\n    )\n  },\n)\nPropertiesDialogComponent.displayName = 'PropertiesDialogComponent'\nPropertiesDialogComponent.aglyn = true\n\nexport default PropertiesDialogComponent\n"],"names":["forwardRef","CloseableDrawerComponent","PropertiesDialogComponent","props","ref","children","onClose","rest","drawerTitle","action","disableCloseButton","displayName","aglyn"],"mappings":";;;AAAA;;;;;;;;;;;;;;;CAeC,GAED,SAASA,UAAU,QAAQ,QAAO;AAClC,OAAOC,8BAEA,kCAA8B;AAMrC,OAAO,MAAMC,0CAA4BF,WACvC,CAACG,OAAOC;IACN,MAAM,EAAEC,QAAQ,EAAEC,OAAO,EAAW,GAAGH,OAATI,wCAASJ;;;;IAEvC,qBACE,KAACF;QACCG,KAAKA;QACLI,aAAa;QACbC,QAAQ;QACRC,kBAAkB;QAClBJ,SAASA;OACLC;kBAEHF;;AAGP,GACD;AACDH,0BAA0BS,WAAW,GAAG;AACxCT,0BAA0BU,KAAK,GAAG;AAElC,eAAeV,0BAAyB"}

package/src/lib/components/property-binding-field.component.d.ts

@@ -0,0 +1,142 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import type * as Aglyn from '@aglyn/aglyn';
+import { type BindableAttributeField } from '@aglyn/aglyn';
+import { type FormFieldGridProps } from '@aglyn/shared-ui-jsx-forms';
+import { type ComponentType, type ReactNode } from 'react';
+import type { BindingOption } from '../contexts/binding-picker-context';
+import { type ResolvedTokenLabel, type TokenLabelContext } from '../utils/token-segments';
+/**
+ * Binding a field that has no text to type a token into.
+ *
+ * A free-text attribute has always taken `{{prop.headline}}`: the token is
+ * typed, or picked with the `{}` in the box, and substitution does the rest.
+ * A switch, a checkbox, a dropdown or an icon picker has no text to type into,
+ * so inside a reusable component it could only ever hold the component's own
+ * value — and a property of the matching kind had nothing to drive.
+ *
+ * This wraps such a field, inside a component editor only. Unbound, it is the
+ * field exactly as before, with a `{}` among its corner controls. Bound, the
+ * control gives way to the property it is bound to, drawn as the pill a text
+ * field would draw — because the control would otherwise go on showing a
+ * value the page no longer uses.
+ *
+ * The stored value is the same exact `{{prop.<name>}}` token a text field
+ * holds, so the graft needs nothing new to find it, and a binding to a
+ * property of the wrong kind is simply never offered.
+ */
+/** Mapper key for {@link PropertyBindingField} (editor-internal, never persisted). */
+export declare const PROPERTY_BINDING_FIELD_COMPONENT = "aglyn-property-binding-field";
+/**
+ * The names of the property kinds a declared field can be bound to, in the
+ * panel's own words — `Yes / no or Checkbox` for a switch, `Color` for a color
+ * picker — for the sentences that tell an author what to add.
+ *
+ * Every kind is tried as it can be declared (bare, with answers, taking
+ * several), so a list-holding dropdown names the kinds that hold lists.
+ */
+export declare function propertyKindsBindableTo(declared: BindableAttributeField): string;
+/** A component-mapper entry: a component, or `{ component, ...defaults }`. */
+export type PropertyBindingControl = ComponentType<any> | {
+    component: ComponentType<any>;
+    [key: string]: unknown;
+};
+export interface PropertyBindingOptions {
+    /** The attribute type the component schema declares for this field. */
+    declaredComponent: unknown;
+    /**
+     * The attribute as the schema declares it, for whether it holds one value
+     * or several (`isMulti`, a checkbox's `options`). The field itself is read
+     * when this is absent.
+     */
+    declaredField?: BindableAttributeField;
+    /**
+     * The props the edited component declares, or `undefined` outside a
+     * component editor — where `{{prop.*}}` resolves to nothing, so there is
+     * nothing to bind to.
+     */
+    componentProps: readonly Aglyn.ReusableComponentProp[] | null | undefined;
+    /** The mapper entry this field renders with while unbound. */
+    control: PropertyBindingControl | undefined;
+    /** Display-name inputs for the bound pill. */
+    tokenLabelContext?: TokenLabelContext;
+    /** Whose properties these are, for what an empty picker says. */
+    owner?: 'component' | 'layout';
+}
+/**
+ * The field, wrapped to take a property binding when it can, or unchanged.
+ *
+ * Every field kind that holds a value can be bound (AGL-2893), to the
+ * properties that hold the same shape of value (`reusablePropBindsToField`):
+ * a switch to a Yes / no, a color picker to a Color, a dropdown that takes
+ * several answers to a property that holds several.
+ *
+ * Unchanged outside a component or layout editor, for a free-text field — it
+ * takes any property's token typed into it — for a read-only or disabled
+ * field (a control that writes an unwritable field is a lie), and whenever the
+ * control to fall back to is unknown, since a wrapper with nothing to render
+ * would blank the field.
+ */
+export declare function withPropertyBinding<T extends Record<string, unknown>>(field: T, options: PropertyBindingOptions): T;
+export interface PropertyBindingFieldProps {
+    [key: string]: unknown;
+    name: string;
+    label?: ReactNode;
+    help?: unknown;
+    description?: ReactNode;
+    helperText?: ReactNode;
+    bindingControl?: PropertyBindingControl;
+    bindingOptions?: BindingOption[];
+    /** The declared props this field can be bound to. */
+    bindingProps?: readonly Aglyn.ReusableComponentProp[];
+    /** Those props' kinds in the panel's words, e.g. `Choice`. */
+    bindingKinds?: string;
+    bindingEmptyText?: string;
+    tokenLabelContext?: TokenLabelContext;
+    FormFieldGridProps?: FormFieldGridProps;
+}
+/**
+ * What a bound field says under the property it follows, and whether that is
+ * a problem.
+ *
+ * Three ways a binding can be wrong while still looking bound, each named in
+ * words an author can act on: the property is gone (it was renamed or
+ * removed, so nothing substitutes), the property is the wrong kind (a token
+ * written some other way than this field's picker), or — for a dropdown —
+ * some of the property's choices are values the dropdown does not offer.
+ */
+export declare function describePropertyBinding(options: {
+    token: string;
+    resolved: ResolvedTokenLabel;
+    bindingProps?: readonly Aglyn.ReusableComponentProp[];
+    bindingKinds?: string;
+    fieldOptions?: unknown;
+}): {
+    text: string;
+    error: boolean;
+};
+/**
+ * The data-driven-forms field registered as
+ * {@link PROPERTY_BINDING_FIELD_COMPONENT}. The token flows through
+ * react-final-form like any other value, so the Attributes panel's debounced
+ * autosave commits a binding exactly as it commits a tick.
+ */
+export declare function PropertyBindingField(props: PropertyBindingFieldProps): import("react").JSX.Element;
+export declare namespace PropertyBindingField {
+    var displayName: string;
+}
+export default PropertyBindingField;