@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/function-widget.js

@@ -0,0 +1,307 @@
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { _ as _object_without_properties_loose } from "@swc/helpers/_/_object_without_properties_loose";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * @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 * as Aglyn from "@aglyn/aglyn";
+import { mdiFunctionVariant } from "@aglyn/shared-data-mdi";
+import Alert from "@mui/material/Alert";
+import Button from "@mui/material/Button";
+import Divider from "@mui/material/Divider";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import { forwardRef, useCallback, useContext, useMemo, useState } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+import { FunctionParameterControl, displayFunctionValue as displayValue, initialFunctionArguments as initialArguments } from "./function-controls.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'functionWidget';
+/**
+ * `name | Label` per line. A line with no bar labels the row with the name,
+ * and a name may appear once: the second copy of a row is a typo, not a
+ * second result.
+ */ export function parseFunctionWidgetOutputs(text) {
+    const rows = [];
+    const seen = new Set();
+    for (const line of String(text != null ? text : '').split('\n')){
+        const [rawName, ...rest] = line.split('|');
+        const name = rawName.trim();
+        if (!name || seen.has(name)) continue;
+        seen.add(name);
+        rows.push({
+            name,
+            label: rest.join('|').trim() || name
+        });
+    }
+    return rows;
+}
+/**
+ * Interactive function widget (Component Builder wiring, AGL-93): renders
+ * an input per function parameter and runs the host function client-side
+ * through the shared safe evaluator — a no-code calculator/logic block
+ * (quote estimators, eligibility checks, counters). The definition is
+ * injected server-side at compose; in the besigner the widget shows a
+ * static preview.
+ *
+ * WHAT A REAL CALCULATOR NEEDED (AGL-3202). The first one built on this
+ * compared five platforms, and the widget could ask for nothing but free
+ * text, labeled with the parameter's identifier, and could answer with
+ * nothing but one line. So a parameter now renders as what it IS — a number
+ * box, a yes/no switch, a choice list — under the label its author wrote;
+ * `outputs` lists several named results; and `autoRun` recomputes as the
+ * visitor types. All three are opt-in: a widget that sets none of them
+ * renders and behaves exactly as it did.
+ */ const FunctionWidget = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _ref;
+    const { functionName, title, buttonLabel, resultLabel, outputs, autoRun, definition, globals } = props, rest = _object_without_properties_loose(props, [
+        "functionName",
+        "title",
+        "buttonLabel",
+        "resultLabel",
+        "outputs",
+        "autoRun",
+        "definition",
+        "globals"
+    ]);
+    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    const [args, setArgs] = useState(()=>initialArguments(definition));
+    // Button mode answers for what was typed WHEN the button was pressed, so
+    // the line under it does not change while the visitor edits a number.
+    const [submitted, setSubmitted] = useState(null);
+    const outputRows = useMemo(()=>parseFunctionWidgetOutputs(outputs), [
+        outputs
+    ]);
+    const live = Boolean(autoRun);
+    const evaluated = live ? args : submitted;
+    const run = useMemo(()=>definition && evaluated ? Aglyn.evaluateHostFunction(definition, evaluated, {
+            globals
+        }) : null, [
+        definition,
+        evaluated,
+        globals
+    ]);
+    const handleRun = useCallback(()=>{
+        if (!definition) return;
+        setSubmitted(_extends({}, args));
+    }, [
+        definition,
+        args
+    ]);
+    const setArgument = useCallback((name, value)=>{
+        setArgs((previous)=>_extends({}, previous, {
+                [name]: value
+            }));
+    }, []);
+    // With no definition there is nothing to run, and the line drawn in its
+    // place is addressed to the author: a published page renders the bare
+    // element.
+    if (!definition && !suppressNavigation) return /*#__PURE__*/ _jsx(Stack, _extends({
+        ref: ref
+    }, rest));
+    const parameters = (_ref = definition == null ? void 0 : definition.parameters) != null ? _ref : [];
+    // Typing toward a valid answer is not a mistake. In live mode a required
+    // input that is still empty shows nothing rather than a warning that
+    // fires on the first keystroke of every visit.
+    const waiting = live && (run == null ? void 0 : run.ok) === false && parameters.some((parameter)=>{
+        var _args_parameter_name;
+        return parameter.required && !String((_args_parameter_name = args[parameter.name]) != null ? _args_parameter_name : '').trim() && !parameter.defaultValue;
+    });
+    return /*#__PURE__*/ _jsxs(Stack, _extends({
+        ref: ref,
+        spacing: 1.5,
+        sx: {
+            maxWidth: 420
+        }
+    }, rest, {
+        children: [
+            title ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "h6",
+                children: title
+            }) : null,
+            definition ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            flexWrap: 'wrap',
+                            rowGap: 1.5,
+                            alignItems: 'center'
+                        },
+                        children: parameters.map((parameter)=>{
+                            var _args_parameter_name;
+                            return /*#__PURE__*/ _jsx(FunctionParameterControl, {
+                                name: parameter.name,
+                                type: parameter.type,
+                                required: parameter.required,
+                                label: parameter.label,
+                                options: parameter.options,
+                                value: (_args_parameter_name = args[parameter.name]) != null ? _args_parameter_name : '',
+                                onChange: (value)=>setArgument(parameter.name, value)
+                            }, parameter.name);
+                        })
+                    }),
+                    live ? null : /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        onClick: handleRun,
+                        sx: {
+                            alignSelf: 'flex-start'
+                        },
+                        children: buttonLabel || 'Calculate'
+                    }),
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        spacing: 1,
+                        "aria-live": "polite",
+                        children: [
+                            run && run.ok === false && !waiting ? /*#__PURE__*/ _jsx(Alert, {
+                                severity: "warning",
+                                children: `Error: ${run.error}`
+                            }) : null,
+                            run && run.ok && outputRows.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(Stack, {
+                                        divider: /*#__PURE__*/ _jsx(Divider, {
+                                            flexItem: true
+                                        }),
+                                        spacing: 0.75,
+                                        children: outputRows.map((row)=>/*#__PURE__*/ _jsxs(Stack, {
+                                                direction: "row",
+                                                spacing: 2,
+                                                sx: {
+                                                    justifyContent: 'space-between'
+                                                },
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "body2",
+                                                        color: "text.secondary",
+                                                        children: row.label
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(Typography, {
+                                                        variant: "body2",
+                                                        "data-aglyn-function-output": row.name,
+                                                        sx: {
+                                                            fontWeight: 600,
+                                                            textAlign: 'right'
+                                                        },
+                                                        children: displayValue(run.scope[row.name])
+                                                    })
+                                                ]
+                                            }, row.name))
+                                    }),
+                                    definition.returnValue && displayValue(run.value) ? /*#__PURE__*/ _jsx(Typography, {
+                                        variant: "body2",
+                                        "data-aglyn-function-output": "returnValue",
+                                        children: resultLabel ? `${resultLabel}: ${displayValue(run.value)}` : displayValue(run.value)
+                                    }) : null
+                                ]
+                            }) : null,
+                            run && run.ok && !outputRows.length ? /*#__PURE__*/ _jsx(Alert, {
+                                severity: "success",
+                                children: `${resultLabel || 'Result'}: ${String(run.value)}`
+                            }) : null
+                        ]
+                    })
+                ]
+            }) : /*#__PURE__*/ _jsx(Typography, {
+                variant: "body2",
+                color: "text.secondary",
+                children: functionName ? `Function widget "${functionName}" — interactive on the published site.` : 'Function widget — set the Function name attribute to a function from your dashboard.'
+            })
+        ]
+    }));
+});
+FunctionWidget.displayName = 'AglynFunctionWidget';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Function Widget',
+    description: 'Runs one of your no-code functions and shows the result — calculators, quotes.',
+    category: Aglyn.ComponentCategory.INPUT,
+    icon: {
+        path: mdiFunctionVariant.path,
+        sx: {
+            color: '#7b1fa2'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'functionName',
+            description: 'Name of a function from the dashboard Functions card to run.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Function name'
+        },
+        {
+            name: 'title',
+            description: 'Heading shown above the inputs.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Title'
+        },
+        {
+            name: 'buttonLabel',
+            description: 'Label on the run button.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Button label'
+        },
+        {
+            name: 'resultLabel',
+            description: 'Prefix shown before the result value.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD,
+            label: 'Result label'
+        },
+        {
+            name: 'outputs',
+            description: 'Show several results instead of one. One per line, as ' + '"name | Label": the name of a parameter or variable of the ' + 'function, then what visitors should read beside it. Leave empty ' + 'to show only the function’s return value.',
+            component: Aglyn.FieldComponentType.TEXTAREA,
+            label: 'Results to show'
+        },
+        {
+            name: 'autoRun',
+            description: 'If true, the results update as the visitor types and the button ' + 'is not shown.',
+            component: Aglyn.FieldComponentType.SWITCH,
+            label: 'Update as the visitor types?'
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Function Widget',
+        pluginId: BUNDLE_ID,
+        description: 'Run a no-code function — calculators, quotes, checks',
+        category: Aglyn.ComponentCategory.INPUT,
+        icon: {
+            path: mdiFunctionVariant.path,
+            sx: {
+                color: '#7b1fa2'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                buttonLabel: 'Calculate'
+            }
+        }
+    }
+];
+export default FunctionWidget;
+
+//# sourceMappingURL=function-widget.js.map

package/src/lib/components/function-widget.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/function-widget.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\nimport * as Aglyn from '@aglyn/aglyn'\nimport { mdiFunctionVariant } from '@aglyn/shared-data-mdi'\nimport Alert from '@mui/material/Alert'\nimport Button from '@mui/material/Button'\nimport Divider from '@mui/material/Divider'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport { forwardRef, useCallback, useContext, useMemo, useState } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { generatePresetId } from '../utils/generate-preset-id'\nimport {\n  FunctionParameterControl,\n  displayFunctionValue as displayValue,\n  initialFunctionArguments as initialArguments,\n} from './function-controls'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'functionWidget'\n\nexport interface FunctionWidgetProps {\n  /** Name of the host function to run (Functions card on the dashboard). */\n  functionName?: string\n  title?: string\n  buttonLabel?: string\n  resultLabel?: string\n  /**\n   * Several named results instead of one (AGL-3202): one per line, as\n   * `name | Label`, where the name is a parameter or variable of the\n   * function. Empty shows the return value alone, as it always has.\n   */\n  outputs?: string\n  /** Recompute as the visitor types; no button (AGL-3202). */\n  autoRun?: boolean\n  /**\n   * Injected at tenant compose time (attachFunctionDefinitions) — never\n   * authored directly. Editor canvas renders without it (inert preview).\n   */\n  definition?: Aglyn.HostFunction\n  /**\n   * The site variables this function reads, by name (AGL-3202). Injected\n   * beside `definition`, and only the ones its expressions name.\n   */\n  globals?: Record<string, number | string | boolean>\n}\n\n/** One row of the `outputs` attribute. */\nexport interface FunctionWidgetOutput {\n  name: string\n  label: string\n}\n\n/**\n * `name | Label` per line. A line with no bar labels the row with the name,\n * and a name may appear once: the second copy of a row is a typo, not a\n * second result.\n */\nexport function parseFunctionWidgetOutputs(\n  text: string | undefined,\n): FunctionWidgetOutput[] {\n  const rows: FunctionWidgetOutput[] = []\n  const seen = new Set<string>()\n  for (const line of String(text ?? '').split('\\n')) {\n    const [rawName, ...rest] = line.split('|')\n    const name = rawName.trim()\n    if (!name || seen.has(name)) continue\n    seen.add(name)\n    rows.push({ name, label: rest.join('|').trim() || name })\n  }\n  return rows\n}\n\n/**\n * Interactive function widget (Component Builder wiring, AGL-93): renders\n * an input per function parameter and runs the host function client-side\n * through the shared safe evaluator — a no-code calculator/logic block\n * (quote estimators, eligibility checks, counters). The definition is\n * injected server-side at compose; in the besigner the widget shows a\n * static preview.\n *\n * WHAT A REAL CALCULATOR NEEDED (AGL-3202). The first one built on this\n * compared five platforms, and the widget could ask for nothing but free\n * text, labeled with the parameter's identifier, and could answer with\n * nothing but one line. So a parameter now renders as what it IS — a number\n * box, a yes/no switch, a choice list — under the label its author wrote;\n * `outputs` lists several named results; and `autoRun` recomputes as the\n * visitor types. All three are opt-in: a widget that sets none of them\n * renders and behaves exactly as it did.\n */\nconst FunctionWidget = forwardRef<HTMLDivElement, FunctionWidgetProps>(\n  (props, ref) => {\n    const {\n      functionName,\n      title,\n      buttonLabel,\n      resultLabel,\n      outputs,\n      autoRun,\n      definition,\n      globals,\n      ...rest\n    } = props\n    const { suppressNavigation } = useContext(Aglyn.ScreenLinkContext)\n    const [args, setArgs] = useState<Record<string, string>>(() =>\n      initialArguments(definition),\n    )\n    // Button mode answers for what was typed WHEN the button was pressed, so\n    // the line under it does not change while the visitor edits a number.\n    const [submitted, setSubmitted] = useState<Record<string, string> | null>(\n      null,\n    )\n    const outputRows = useMemo(\n      () => parseFunctionWidgetOutputs(outputs),\n      [outputs],\n    )\n    const live = Boolean(autoRun)\n    const evaluated = live ? args : submitted\n    const run = useMemo(\n      () =>\n        definition && evaluated\n          ? Aglyn.evaluateHostFunction(definition, evaluated, { globals })\n          : null,\n      [definition, evaluated, globals],\n    )\n    const handleRun = useCallback(() => {\n      if (!definition) return\n      setSubmitted({ ...args })\n    }, [definition, args])\n    const setArgument = useCallback((name: string, value: string) => {\n      setArgs((previous) => ({ ...previous, [name]: value }))\n    }, [])\n    // With no definition there is nothing to run, and the line drawn in its\n    // place is addressed to the author: a published page renders the bare\n    // element.\n    if (!definition && !suppressNavigation) return <Stack ref={ref} {...rest} />\n    const parameters = definition?.parameters ?? []\n    // Typing toward a valid answer is not a mistake. In live mode a required\n    // input that is still empty shows nothing rather than a warning that\n    // fires on the first keystroke of every visit.\n    const waiting =\n      live &&\n      run?.ok === false &&\n      parameters.some(\n        (parameter) =>\n          parameter.required &&\n          !String(args[parameter.name] ?? '').trim() &&\n          !parameter.defaultValue,\n      )\n    return (\n      <Stack ref={ref} spacing={1.5} sx={{ maxWidth: 420 }} {...rest}>\n        {title ? <Typography variant=\"h6\">{title}</Typography> : null}\n        {definition ? (\n          <>\n            <Stack\n              direction=\"row\"\n              spacing={1}\n              sx={{ flexWrap: 'wrap', rowGap: 1.5, alignItems: 'center' }}\n            >\n              {parameters.map((parameter) => (\n                <FunctionParameterControl\n                  key={parameter.name}\n                  name={parameter.name}\n                  type={parameter.type}\n                  required={parameter.required}\n                  label={parameter.label}\n                  options={parameter.options}\n                  value={args[parameter.name] ?? ''}\n                  onChange={(value) => setArgument(parameter.name, value)}\n                />\n              ))}\n            </Stack>\n            {live ? null : (\n              <Button\n                variant=\"contained\"\n                onClick={handleRun}\n                sx={{ alignSelf: 'flex-start' }}\n              >\n                {buttonLabel || 'Calculate'}\n              </Button>\n            )}\n            <Stack spacing={1} aria-live=\"polite\">\n              {run && run.ok === false && !waiting ? (\n                <Alert severity=\"warning\">{`Error: ${run.error}`}</Alert>\n              ) : null}\n              {run && run.ok && outputRows.length ? (\n                <>\n                  <Stack divider={<Divider flexItem />} spacing={0.75}>\n                    {outputRows.map((row) => (\n                      <Stack\n                        key={row.name}\n                        direction=\"row\"\n                        spacing={2}\n                        sx={{ justifyContent: 'space-between' }}\n                      >\n                        <Typography variant=\"body2\" color=\"text.secondary\">\n                          {row.label}\n                        </Typography>\n                        <Typography\n                          variant=\"body2\"\n                          data-aglyn-function-output={row.name}\n                          sx={{ fontWeight: 600, textAlign: 'right' }}\n                        >\n                          {displayValue(run.scope[row.name])}\n                        </Typography>\n                      </Stack>\n                    ))}\n                  </Stack>\n                  {definition.returnValue && displayValue(run.value) ? (\n                    <Typography\n                      variant=\"body2\"\n                      data-aglyn-function-output=\"returnValue\"\n                    >\n                      {resultLabel\n                        ? `${resultLabel}: ${displayValue(run.value)}`\n                        : displayValue(run.value)}\n                    </Typography>\n                  ) : null}\n                </>\n              ) : null}\n              {run && run.ok && !outputRows.length ? (\n                <Alert severity=\"success\">\n                  {`${resultLabel || 'Result'}: ${String(run.value)}`}\n                </Alert>\n              ) : null}\n            </Stack>\n          </>\n        ) : (\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {functionName\n              ? `Function widget \"${functionName}\" — interactive on the published site.`\n              : 'Function widget — set the Function name attribute to a function from your dashboard.'}\n          </Typography>\n        )}\n      </Stack>\n    )\n  },\n)\nFunctionWidget.displayName = 'AglynFunctionWidget'\n\nexport const schema: Aglyn.ComponentSchema<FunctionWidgetProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Function Widget',\n  description:\n    'Runs one of your no-code functions and shows the result — calculators, quotes.',\n  category: Aglyn.ComponentCategory.INPUT,\n  icon: { path: mdiFunctionVariant.path, sx: { color: '#7b1fa2' } },\n  flags: { selfClosing: Aglyn.FEATURE_FLAG.ENABLED },\n  attributes: [\n    {\n      name: 'functionName',\n      description:\n        'Name of a function from the dashboard Functions card to run.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Function name',\n    },\n    {\n      name: 'title',\n      description: 'Heading shown above the inputs.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Title',\n    },\n    {\n      name: 'buttonLabel',\n      description: 'Label on the run button.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Button label',\n    },\n    {\n      name: 'resultLabel',\n      description: 'Prefix shown before the result value.',\n      component: Aglyn.FieldComponentType.TEXT_FIELD,\n      label: 'Result label',\n    },\n    {\n      name: 'outputs',\n      description:\n        'Show several results instead of one. One per line, as ' +\n        '\"name | Label\": the name of a parameter or variable of the ' +\n        'function, then what visitors should read beside it. Leave empty ' +\n        'to show only the function’s return value.',\n      component: Aglyn.FieldComponentType.TEXTAREA,\n      label: 'Results to show',\n    },\n    {\n      name: 'autoRun',\n      description:\n        'If true, the results update as the visitor types and the button ' +\n        'is not shown.',\n      component: Aglyn.FieldComponentType.SWITCH,\n      label: 'Update as the visitor types?',\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Function Widget',\n    pluginId: BUNDLE_ID,\n    description: 'Run a no-code function — calculators, quotes, checks',\n    category: Aglyn.ComponentCategory.INPUT,\n    icon: { path: mdiFunctionVariant.path, sx: { color: '#7b1fa2' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { buttonLabel: 'Calculate' },\n    },\n  },\n]\n\nexport default FunctionWidget\n"],"names":["Aglyn","mdiFunctionVariant","Alert","Button","Divider","Stack","Typography","forwardRef","useCallback","useContext","useMemo","useState","BUNDLE_ID","generatePresetId","FunctionParameterControl","displayFunctionValue","displayValue","initialFunctionArguments","initialArguments","ID","parseFunctionWidgetOutputs","text","rows","seen","Set","line","String","split","rawName","rest","name","trim","has","add","push","label","join","FunctionWidget","props","ref","functionName","title","buttonLabel","resultLabel","outputs","autoRun","definition","globals","suppressNavigation","ScreenLinkContext","args","setArgs","submitted","setSubmitted","outputRows","live","Boolean","evaluated","run","evaluateHostFunction","handleRun","setArgument","value","previous","parameters","waiting","ok","some","parameter","required","defaultValue","spacing","sx","maxWidth","variant","direction","flexWrap","rowGap","alignItems","map","type","options","onChange","onClick","alignSelf","aria-live","severity","error","length","divider","flexItem","row","justifyContent","color","data-aglyn-function-output","fontWeight","textAlign","scope","returnValue","displayName","schema","$id","pluginId","description","category","ComponentCategory","INPUT","icon","path","flags","selfClosing","FEATURE_FLAG","ENABLED","attributes","component","FieldComponentType","TEXT_FIELD","TEXTAREA","SWITCH","presets","NodeType","PRESET","data","componentId"],"mappings":"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"}

package/src/lib/components/grid.d.ts

@@ -0,0 +1,91 @@
+/**
+ * @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 * as Aglyn from '@aglyn/aglyn';
+import { type SpanBreakpoint } from '@aglyn/shared-data-enums/breakpoint-span';
+import { type ReactNode } from 'react';
+export declare const ID: Aglyn.ComponentId;
+/**
+ * Breakpoint keys MUI's responsive `size`/`offset` objects accept.
+ *
+ * Re-exported from `@aglyn/shared-data-enums` rather than declared twice
+ * (AGL-2486): the attributes panel's breakpoint row and this parser have to
+ * agree on the list, and two copies is how they stop agreeing.
+ */
+export declare const BREAKPOINTS: readonly ["xs", "sm", "md", "lg", "xl"];
+export type Breakpoint = SpanBreakpoint;
+export interface GridElementProps {
+    /** Flex container behavior; items are its direct Grid children. */
+    container?: boolean;
+    /**
+     * Column span. Persisted as one string: a bare span (`6`), the keywords
+     * `auto`/`grow`, or per-breakpoint pairs (`xs:12 md:6`). Authored through
+     * the breakpoint row in the attributes panel (AGL-2486); the stored
+     * format is unchanged from when it was a text box.
+     */
+    size?: string | number;
+    /** Empty columns before the item; same syntax as `size`, minus `grow`. */
+    offset?: string | number;
+    spacing?: number | string;
+    rowSpacing?: number | string;
+    columnSpacing?: number | string;
+    /** Total columns in the container; MUI's default is 12. */
+    columns?: number | string;
+    /**
+     * Container flow. MUI supports `row`/`row-reverse` ONLY — Grid subdivides
+     * a layout into columns, and `column`/`column-reverse` are documented as
+     * unsupported (use a Stack for a vertical layout).
+     */
+    direction?: 'row' | 'row-reverse';
+    /** `flex-wrap` for the container; MUI's default is `wrap`. */
+    wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+    children?: ReactNode;
+}
+/**
+ * Parses the authored span syntax into what MUI v6+ Grid expects.
+ *
+ * MUI dropped the `item` prop and the per-breakpoint `xs=`/`md=` props in
+ * v6; v9 (installed here) takes a single `size` that is either a value or
+ * a `{ xs, md, … }` object. One STORED string covers both, and this parser
+ * owns the translation:
+ *
+ *   `6`           → 6
+ *   `auto`        → 'auto'
+ *   `grow`        → 'grow'
+ *   `xs:12 md:6`  → { xs: 12, md: 6 }
+ *
+ * Anything unparseable returns `undefined` rather than a partial object:
+ * a half-applied breakpoint map is a layout that silently differs from
+ * what the author typed.
+ */
+export declare function parseSpan(value: unknown): number | 'auto' | 'grow' | Record<string, number | 'auto' | 'grow'> | undefined;
+/**
+ * Same syntax as `parseSpan`, minus `grow`.
+ *
+ * MUI's `GridOffset` is `'auto' | number` only — a `grow` offset is not
+ * a wider gap, it is a value the layout cannot use, so it is dropped
+ * here rather than passed through to be ignored.
+ */
+export declare function parseOffset(value: unknown): number | "auto" | Record<string, number | "auto">;
+/**
+ * Responsive 12-column grid (https://mui.com/material-ui/react-grid/).
+ * One element covers both roles, matching MUI v6+: switch **Container**
+ * on for the row, leave it off and set a **Span** for each cell.
+ */
+declare const GridElement: import("react").ForwardRefExoticComponent<GridElementProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<GridElementProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default GridElement;