@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/function-controls.d.ts

@@ -0,0 +1,66 @@
+/**
+ * @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';
+/**
+ * How one function parameter is ASKED (AGL-3202), shared by the Function
+ * Widget, which asks every parameter in a row, and the Function Input
+ * element, which asks one wherever the author put it.
+ */
+/** The control a parameter is drawn as. `auto` follows the parameter. */
+export type FunctionControlKind = 'auto' | 'number' | 'text' | 'select' | 'chips' | 'switch';
+export declare const FUNCTION_CONTROL_KINDS: readonly FunctionControlKind[];
+/** What each input starts with: the parameter's own default, or nothing. */
+export declare function initialFunctionArguments(definition: Aglyn.HostFunction | undefined): Record<string, string>;
+/** A result as a visitor reads it. */
+export declare function displayFunctionValue(value: number | string | boolean | undefined): string;
+/**
+ * Whether a result counts as "yes" for an element that shows or hides on it.
+ * The strings a function is likely to have built — `'false'`, `'0'`, `'no'` —
+ * read as no, because a text local is the only way a function can carry a
+ * flag it computed from text.
+ */
+export declare function isFunctionValueTruthy(value: number | string | boolean | undefined): boolean;
+/** `control: auto` resolved against what the parameter is. */
+export declare function resolveFunctionControl(control: FunctionControlKind | undefined, parameter: Pick<Aglyn.HostFunctionParameter, 'type' | 'options'> | undefined, hasChoices: boolean): Exclude<FunctionControlKind, 'auto'>;
+export interface FunctionParameterControlProps {
+    /** The parameter's identifier; the label when nothing better is given. */
+    name: string;
+    type?: Aglyn.FunctionValueType;
+    required?: boolean;
+    control?: FunctionControlKind;
+    label?: string;
+    hideLabel?: boolean;
+    /** The choices offered by a select or a row of chips. */
+    options?: Aglyn.HostFunctionParameterOption[];
+    value: string;
+    onChange: (value: string) => void;
+    /** The besigner draws the control so it can be designed around; it is inert. */
+    disabled?: boolean;
+    width?: number | string;
+}
+/**
+ * One parameter, drawn as what it is.
+ *
+ * - **select** is NATIVE. A portal-mounted menu is one more thing a
+ *   transformed or clipped ancestor can misplace, and on a phone the platform
+ *   picker is the better control.
+ * - **chips** are quick picks: buttons that SET the value, pressed when the
+ *   value matches. They are how a number box gets "10 · 25 · 50 · 100"
+ *   beside it — two controls on one parameter, which is why this takes a
+ *   value and an onChange and holds no state of its own.
+ */
+export declare function FunctionParameterControl(props: FunctionParameterControlProps): import("react").JSX.Element;

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

@@ -0,0 +1,207 @@
+/**
+ * @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 _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Stack from "@mui/material/Stack";
+import Switch from "@mui/material/Switch";
+import TextField from "@mui/material/TextField";
+import Typography from "@mui/material/Typography";
+import { useId } from "react";
+export const FUNCTION_CONTROL_KINDS = [
+    'auto',
+    'number',
+    'text',
+    'select',
+    'chips',
+    'switch'
+];
+/** What each input starts with: the parameter's own default, or nothing. */ export function initialFunctionArguments(definition) {
+    var _ref;
+    const args = {};
+    for (const parameter of (_ref = definition == null ? void 0 : definition.parameters) != null ? _ref : []){
+        var _parameter_options;
+        if (parameter.defaultValue != null && parameter.defaultValue !== '') {
+            args[parameter.name] = String(parameter.defaultValue);
+        } else if ((_parameter_options = parameter.options) == null ? void 0 : _parameter_options.length) {
+            // A select always shows a choice, so the function has to receive the
+            // one on screen — not an empty string the visitor never saw.
+            args[parameter.name] = String(parameter.options[0].value);
+        }
+    }
+    return args;
+}
+/** A result as a visitor reads it. */ export function displayFunctionValue(value) {
+    if (typeof value === 'boolean') return value ? 'Yes' : 'No';
+    return value == null ? '' : String(value);
+}
+/**
+ * Whether a result counts as "yes" for an element that shows or hides on it.
+ * The strings a function is likely to have built — `'false'`, `'0'`, `'no'` —
+ * read as no, because a text local is the only way a function can carry a
+ * flag it computed from text.
+ */ export function isFunctionValueTruthy(value) {
+    if (typeof value === 'boolean') return value;
+    if (typeof value === 'number') return value !== 0 && !Number.isNaN(value);
+    const text = String(value != null ? value : '').trim().toLowerCase();
+    return text !== '' && text !== 'false' && text !== '0' && text !== 'no';
+}
+/** `control: auto` resolved against what the parameter is. */ export function resolveFunctionControl(control, parameter, hasChoices) {
+    var _parameter_options;
+    if (control && control !== 'auto') return control;
+    if (hasChoices || (parameter == null ? void 0 : (_parameter_options = parameter.options) == null ? void 0 : _parameter_options.length)) return 'select';
+    if ((parameter == null ? void 0 : parameter.type) === 'boolean') return 'switch';
+    if ((parameter == null ? void 0 : parameter.type) === 'number') return 'number';
+    return 'text';
+}
+/** Two values name the same choice: "25" and 25.0 are one quick pick. */ function sameChoice(left, right) {
+    if (left === right) return true;
+    if (left.trim() === '' || right.trim() === '') return false;
+    const a = Number(left);
+    const b = Number(right);
+    return Number.isFinite(a) && Number.isFinite(b) && a === b;
+}
+/**
+ * One parameter, drawn as what it is.
+ *
+ * - **select** is NATIVE. A portal-mounted menu is one more thing a
+ *   transformed or clipped ancestor can misplace, and on a phone the platform
+ *   picker is the better control.
+ * - **chips** are quick picks: buttons that SET the value, pressed when the
+ *   value matches. They are how a number box gets "10 · 25 · 50 · 100"
+ *   beside it — two controls on one parameter, which is why this takes a
+ *   value and an onChange and holds no state of its own.
+ */ export function FunctionParameterControl(props) {
+    const { name, type, required, control, label, hideLabel, options = [], value, onChange, disabled, width } = props;
+    const groupLabelId = useId();
+    const text = (label == null ? void 0 : label.trim()) || name;
+    const kind = resolveFunctionControl(control, {
+        type,
+        options
+    }, options.length > 0);
+    if (kind === 'chips') {
+        return /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 0.75,
+            role: "group",
+            "aria-labelledby": groupLabelId,
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    id: groupLabelId,
+                    variant: "caption",
+                    color: "text.secondary",
+                    sx: hideLabel ? visuallyHidden : {
+                        fontWeight: 500
+                    },
+                    children: text
+                }),
+                /*#__PURE__*/ _jsx(Stack, {
+                    direction: "row",
+                    spacing: 0.75,
+                    sx: {
+                        flexWrap: 'wrap',
+                        rowGap: 0.75
+                    },
+                    children: options.map((option)=>{
+                        var _option_label;
+                        const pressed = sameChoice(value, option.value);
+                        return /*#__PURE__*/ _jsx(Chip, {
+                            label: ((_option_label = option.label) == null ? void 0 : _option_label.trim()) || option.value,
+                            size: "small",
+                            clickable: !disabled,
+                            disabled: disabled,
+                            color: pressed ? 'primary' : 'default',
+                            variant: pressed ? 'filled' : 'outlined',
+                            "aria-pressed": pressed,
+                            onClick: ()=>onChange(option.value)
+                        }, option.value);
+                    })
+                })
+            ]
+        });
+    }
+    if (kind === 'switch') {
+        return /*#__PURE__*/ _jsx(FormControlLabel, {
+            label: text,
+            disabled: disabled,
+            control: /*#__PURE__*/ _jsx(Switch, {
+                checked: value === 'true',
+                onChange: (event)=>onChange(event.target.checked ? 'true' : 'false')
+            })
+        });
+    }
+    if (kind === 'select') {
+        return /*#__PURE__*/ _jsx(TextField, {
+            select: true,
+            label: hideLabel ? undefined : text,
+            required: Boolean(required),
+            value: value,
+            disabled: disabled,
+            onChange: (event)=>onChange(event.target.value),
+            size: "small",
+            slotProps: {
+                select: {
+                    native: true
+                },
+                htmlInput: hideLabel ? {
+                    'aria-label': text
+                } : undefined
+            },
+            sx: {
+                minWidth: width != null ? width : 200
+            },
+            children: options.map((option)=>{
+                var _option_label;
+                return /*#__PURE__*/ _jsx("option", {
+                    value: option.value,
+                    children: ((_option_label = option.label) == null ? void 0 : _option_label.trim()) || option.value
+                }, option.value);
+            })
+        });
+    }
+    return /*#__PURE__*/ _jsx(TextField, {
+        label: hideLabel ? undefined : text,
+        required: Boolean(required),
+        value: value,
+        disabled: disabled,
+        onChange: (event)=>onChange(event.target.value),
+        size: "small",
+        type: kind === 'number' ? 'number' : undefined,
+        slotProps: {
+            htmlInput: _extends({}, kind === 'number' ? {
+                inputMode: 'decimal'
+            } : {}, hideLabel ? {
+                'aria-label': text
+            } : {})
+        },
+        sx: {
+            width: width != null ? width : label ? 200 : 140
+        }
+    });
+}
+const visuallyHidden = {
+    border: 0,
+    clip: 'rect(0 0 0 0)',
+    height: '1px',
+    margin: '-1px',
+    overflow: 'hidden',
+    padding: 0,
+    position: 'absolute',
+    whiteSpace: 'nowrap',
+    width: '1px'
+};
+
+//# sourceMappingURL=function-controls.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/function-controls.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 type * as Aglyn from '@aglyn/aglyn'\nimport Chip from '@mui/material/Chip'\nimport FormControlLabel from '@mui/material/FormControlLabel'\nimport Stack from '@mui/material/Stack'\nimport Switch from '@mui/material/Switch'\nimport TextField from '@mui/material/TextField'\nimport Typography from '@mui/material/Typography'\nimport { useId } from 'react'\n\n/**\n * How one function parameter is ASKED (AGL-3202), shared by the Function\n * Widget, which asks every parameter in a row, and the Function Input\n * element, which asks one wherever the author put it.\n */\n\n/** The control a parameter is drawn as. `auto` follows the parameter. */\nexport type FunctionControlKind =\n  | 'auto'\n  | 'number'\n  | 'text'\n  | 'select'\n  | 'chips'\n  | 'switch'\n\nexport const FUNCTION_CONTROL_KINDS: readonly FunctionControlKind[] = [\n  'auto',\n  'number',\n  'text',\n  'select',\n  'chips',\n  'switch',\n]\n\n/** What each input starts with: the parameter's own default, or nothing. */\nexport function initialFunctionArguments(\n  definition: Aglyn.HostFunction | undefined,\n): Record<string, string> {\n  const args: Record<string, string> = {}\n  for (const parameter of definition?.parameters ?? []) {\n    if (parameter.defaultValue != null && parameter.defaultValue !== '') {\n      args[parameter.name] = String(parameter.defaultValue)\n    } else if (parameter.options?.length) {\n      // A select always shows a choice, so the function has to receive the\n      // one on screen — not an empty string the visitor never saw.\n      args[parameter.name] = String(parameter.options[0].value)\n    }\n  }\n  return args\n}\n\n/** A result as a visitor reads it. */\nexport function displayFunctionValue(\n  value: number | string | boolean | undefined,\n): string {\n  if (typeof value === 'boolean') return value ? 'Yes' : 'No'\n  return value == null ? '' : String(value)\n}\n\n/**\n * Whether a result counts as \"yes\" for an element that shows or hides on it.\n * The strings a function is likely to have built — `'false'`, `'0'`, `'no'` —\n * read as no, because a text local is the only way a function can carry a\n * flag it computed from text.\n */\nexport function isFunctionValueTruthy(\n  value: number | string | boolean | undefined,\n): boolean {\n  if (typeof value === 'boolean') return value\n  if (typeof value === 'number') return value !== 0 && !Number.isNaN(value)\n  const text = String(value ?? '').trim().toLowerCase()\n  return text !== '' && text !== 'false' && text !== '0' && text !== 'no'\n}\n\n/** `control: auto` resolved against what the parameter is. */\nexport function resolveFunctionControl(\n  control: FunctionControlKind | undefined,\n  parameter: Pick<Aglyn.HostFunctionParameter, 'type' | 'options'> | undefined,\n  hasChoices: boolean,\n): Exclude<FunctionControlKind, 'auto'> {\n  if (control && control !== 'auto') return control\n  if (hasChoices || parameter?.options?.length) return 'select'\n  if (parameter?.type === 'boolean') return 'switch'\n  if (parameter?.type === 'number') return 'number'\n  return 'text'\n}\n\n/** Two values name the same choice: \"25\" and 25.0 are one quick pick. */\nfunction sameChoice(left: string, right: string): boolean {\n  if (left === right) return true\n  if (left.trim() === '' || right.trim() === '') return false\n  const a = Number(left)\n  const b = Number(right)\n  return Number.isFinite(a) && Number.isFinite(b) && a === b\n}\n\nexport interface FunctionParameterControlProps {\n  /** The parameter's identifier; the label when nothing better is given. */\n  name: string\n  type?: Aglyn.FunctionValueType\n  required?: boolean\n  control?: FunctionControlKind\n  label?: string\n  hideLabel?: boolean\n  /** The choices offered by a select or a row of chips. */\n  options?: Aglyn.HostFunctionParameterOption[]\n  value: string\n  onChange: (value: string) => void\n  /** The besigner draws the control so it can be designed around; it is inert. */\n  disabled?: boolean\n  width?: number | string\n}\n\n/**\n * One parameter, drawn as what it is.\n *\n * - **select** is NATIVE. A portal-mounted menu is one more thing a\n *   transformed or clipped ancestor can misplace, and on a phone the platform\n *   picker is the better control.\n * - **chips** are quick picks: buttons that SET the value, pressed when the\n *   value matches. They are how a number box gets \"10 · 25 · 50 · 100\"\n *   beside it — two controls on one parameter, which is why this takes a\n *   value and an onChange and holds no state of its own.\n */\nexport function FunctionParameterControl(props: FunctionParameterControlProps) {\n  const {\n    name,\n    type,\n    required,\n    control,\n    label,\n    hideLabel,\n    options = [],\n    value,\n    onChange,\n    disabled,\n    width,\n  } = props\n  const groupLabelId = useId()\n  const text = label?.trim() || name\n  const kind = resolveFunctionControl(control, { type, options }, options.length > 0)\n  if (kind === 'chips') {\n    return (\n      <Stack spacing={0.75} role=\"group\" aria-labelledby={groupLabelId}>\n        <Typography\n          id={groupLabelId}\n          variant=\"caption\"\n          color=\"text.secondary\"\n          sx={hideLabel ? visuallyHidden : { fontWeight: 500 }}\n        >\n          {text}\n        </Typography>\n        <Stack direction=\"row\" spacing={0.75} sx={{ flexWrap: 'wrap', rowGap: 0.75 }}>\n          {options.map((option) => {\n            const pressed = sameChoice(value, option.value)\n            return (\n              <Chip\n                key={option.value}\n                label={option.label?.trim() || option.value}\n                size=\"small\"\n                clickable={!disabled}\n                disabled={disabled}\n                color={pressed ? 'primary' : 'default'}\n                variant={pressed ? 'filled' : 'outlined'}\n                aria-pressed={pressed}\n                onClick={() => onChange(option.value)}\n              />\n            )\n          })}\n        </Stack>\n      </Stack>\n    )\n  }\n  if (kind === 'switch') {\n    return (\n      <FormControlLabel\n        label={text}\n        disabled={disabled}\n        control={\n          <Switch\n            checked={value === 'true'}\n            onChange={(event) => onChange(event.target.checked ? 'true' : 'false')}\n          />\n        }\n      />\n    )\n  }\n  if (kind === 'select') {\n    return (\n      <TextField\n        select\n        label={hideLabel ? undefined : text}\n        required={Boolean(required)}\n        value={value}\n        disabled={disabled}\n        onChange={(event) => onChange(event.target.value)}\n        size=\"small\"\n        slotProps={{\n          select: { native: true },\n          htmlInput: hideLabel ? { 'aria-label': text } : undefined,\n        }}\n        sx={{ minWidth: width ?? 200 }}\n      >\n        {options.map((option) => (\n          <option key={option.value} value={option.value}>\n            {option.label?.trim() || option.value}\n          </option>\n        ))}\n      </TextField>\n    )\n  }\n  return (\n    <TextField\n      label={hideLabel ? undefined : text}\n      required={Boolean(required)}\n      value={value}\n      disabled={disabled}\n      onChange={(event) => onChange(event.target.value)}\n      size=\"small\"\n      type={kind === 'number' ? 'number' : undefined}\n      slotProps={{\n        htmlInput: {\n          ...(kind === 'number' ? { inputMode: 'decimal' } : {}),\n          ...(hideLabel ? { 'aria-label': text } : {}),\n        },\n      }}\n      sx={{ width: width ?? (label ? 200 : 140) }}\n    />\n  )\n}\n\nconst visuallyHidden = {\n  border: 0,\n  clip: 'rect(0 0 0 0)',\n  height: '1px',\n  margin: '-1px',\n  overflow: 'hidden',\n  padding: 0,\n  position: 'absolute',\n  whiteSpace: 'nowrap',\n  width: '1px',\n} as const\n"],"names":["Chip","FormControlLabel","Stack","Switch","TextField","Typography","useId","FUNCTION_CONTROL_KINDS","initialFunctionArguments","definition","args","parameter","parameters","defaultValue","name","String","options","length","value","displayFunctionValue","isFunctionValueTruthy","Number","isNaN","text","trim","toLowerCase","resolveFunctionControl","control","hasChoices","type","sameChoice","left","right","a","b","isFinite","FunctionParameterControl","props","required","label","hideLabel","onChange","disabled","width","groupLabelId","kind","spacing","role","aria-labelledby","id","variant","color","sx","visuallyHidden","fontWeight","direction","flexWrap","rowGap","map","option","pressed","size","clickable","aria-pressed","onClick","checked","event","target","select","undefined","Boolean","slotProps","native","htmlInput","minWidth","inputMode","border","clip","height","margin","overflow","padding","position","whiteSpace"],"mappings":"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"}

package/src/lib/components/function-scope.d.ts

@@ -0,0 +1,110 @@
+/**
+ * @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 ReactNode } from 'react';
+import { type FunctionControlKind } from './function-controls';
+/**
+ * A CALCULATOR AN AUTHOR LAYS OUT (AGL-3202).
+ *
+ * The Function Widget draws a whole calculator itself: inputs in a row, a
+ * button, a result. That is the right block for "a quote in a sidebar" and
+ * the wrong one for the page that prompted this — a comparison with a number
+ * box AND quick picks on the same value, two questions asked as lists, a
+ * table of five rows where four can be filtered away, one row highlighted, a
+ * sentence under it and a footnote that changes with the choices. No amount
+ * of options on one block reaches that, and it should not have to: laying
+ * things out is what the canvas is for.
+ *
+ * So the pieces are separate elements, and one function binds them:
+ *
+ * - **Calculator** (`functionScope`) holds the function, the visitor's
+ *   answers and the live result, and is an ordinary container.
+ * - **Calculator Input** (`functionInput`) asks ONE parameter, as a number
+ *   box, a list, a switch or a row of quick-pick chips. Two inputs may ask
+ *   the same parameter; they stay in step because the answer lives above
+ *   them.
+ * - **Calculator Result** (`functionOutput`) shows one named value, styled
+ *   like any text.
+ * - **Show When** (`functionShow`) is a container that appears only while a
+ *   named value is truthy — a table row a filter can remove.
+ *
+ * Everything between them is whatever the author builds: stacks, grids,
+ * headings, borders. The design is theirs and the arithmetic is the site's
+ * function, reading the site's variables.
+ */
+export declare const SCOPE_ID: Aglyn.ComponentId;
+export declare const INPUT_ID: Aglyn.ComponentId;
+export declare const OUTPUT_ID: Aglyn.ComponentId;
+export declare const SHOW_ID: Aglyn.ComponentId;
+export interface FunctionScopeProps {
+    /** Name of the site function every element inside is bound to. */
+    functionName?: string;
+    children?: ReactNode;
+    /** Injected at compose (attachFunctionDefinitions); never authored. */
+    definition?: Aglyn.HostFunction;
+    /** The site variables the function names; injected beside `definition`. */
+    globals?: Record<string, number | string | boolean>;
+}
+declare const FunctionScope: import("react").ForwardRefExoticComponent<FunctionScopeProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface FunctionInputProps {
+    /** The function parameter this control asks. */
+    parameter?: string;
+    control?: FunctionControlKind;
+    /** Overrides the parameter's own label. */
+    label?: string;
+    hideLabel?: boolean;
+    /**
+     * Overrides the parameter's own choices, as `value: Label, value: Label`.
+     * This is how quick picks are given: `10, 25, 50, 100` beside a number box.
+     */
+    choices?: string;
+}
+declare const FunctionInput: import("react").ForwardRefExoticComponent<FunctionInputProps & import("react").RefAttributes<HTMLDivElement>>;
+export interface FunctionOutputProps {
+    /** A parameter or variable of the function; empty is its return value. */
+    name?: string;
+    /** What the besigner shows in the result's place, e.g. `$625`. */
+    placeholder?: string;
+    /** Read a change aloud. One result per calculator, usually the sentence. */
+    announce?: boolean;
+    element?: 'div' | 'p' | 'span';
+}
+/**
+ * `**like this**` becomes emphasis, and nothing else is markup. The value is
+ * text a function built — often from what a visitor typed — so it is split
+ * into React nodes and never parsed as HTML.
+ */
+export declare function renderFunctionEmphasis(text: string): ReactNode;
+declare const FunctionOutput: import("react").ForwardRefExoticComponent<FunctionOutputProps & import("react").RefAttributes<HTMLElement>>;
+export interface FunctionShowProps {
+    /** A parameter or variable of the function. */
+    when?: string;
+    /** Show while the value is NOT truthy instead. */
+    invert?: boolean;
+    children?: ReactNode;
+}
+declare const FunctionShow: import("react").ForwardRefExoticComponent<FunctionShowProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const schema: Aglyn.ComponentSchema<FunctionScopeProps>;
+export declare const functionInputSchema: Aglyn.ComponentSchema<FunctionInputProps>;
+export declare const functionOutputSchema: Aglyn.ComponentSchema<FunctionOutputProps>;
+export declare const functionShowSchema: Aglyn.ComponentSchema<FunctionShowProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export declare const functionInputPresets: Aglyn.PresetSchema[];
+export declare const functionOutputPresets: Aglyn.PresetSchema[];
+export declare const functionShowPresets: Aglyn.PresetSchema[];
+export { FunctionInput, FunctionOutput, FunctionShow };
+export default FunctionScope;