@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/inline-text.js

@@ -0,0 +1,407 @@
+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 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 { mdiFormatColorHighlight, mdiFormatColorText } from "@aglyn/shared-data-mdi";
+import MuiBox from "@mui/material/Box";
+import { forwardRef } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { FIELD_TEXT_CONTENT } from "../constants/field-presets.js";
+import { authorHtmlLabel } from "../utils/author-html-label.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'muiInlineText';
+/**
+ * Inline elements the run may render as. An allow-list rather than a
+ * free-text field, for the same reason Box's is (AGL-1201): `element` is
+ * persisted and rendered verbatim into every visitor's page, so a typed
+ * value would let an author put `script`/`iframe` there.
+ *
+ * All five are phrasing content, so a run is always legal inside a
+ * paragraph — which is the whole point of the element.
+ */ export const INLINE_TEXT_ELEMENTS = [
+    'span',
+    'strong',
+    'em',
+    'mark',
+    'small'
+];
+/**
+ * Theme palette paths, never raw hexes: the design's `text/muted` and
+ * `text/primary` tokens ARE `text.secondary` / `text.primary`, and a
+ * hardcoded `#757575` would ignore the site's theme (and dark mode).
+ *
+ * Every value is a real sentinel — an option value of `''` is stripped
+ * before save and the pick silently reverts on reload (AGL-1191), so
+ * "inherit" has to be spelled out rather than left blank.
+ */ const TONE_COLOR = {
+    inherit: undefined,
+    primary: 'text.primary',
+    secondary: 'text.secondary',
+    disabled: 'text.disabled',
+    accent: 'primary.main',
+    accentAlt: 'secondary.main',
+    success: 'success.main',
+    warning: 'warning.main',
+    error: 'error.main'
+};
+/** Named weights so the field is a pick, not a number to remember. */ const FONT_WEIGHT = {
+    inherit: undefined,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700
+};
+/**
+ * `text-decoration` PROPAGATES — it is not inherited. An ancestor's
+ * underline (a Screen Link, a struck-through block) is painted straight
+ * across every in-flow inline descendant, and `text-decoration: none` on
+ * the descendant CANNOT remove it. Only an element that is not an in-flow
+ * non-atomic inline box escapes the propagation, which is why "None" also
+ * switches the run to `inline-block`: an atomic inline box is not painted
+ * through.
+ *
+ * That costs line-breaking — an inline-block will not break across lines —
+ * so it is opt-in rather than the default, and the field says so. The
+ * default, `inherit`, is a plain `display: inline` run that flows and wraps
+ * with the rest of the sentence.
+ */ const DECORATION_SX = {
+    inherit: {},
+    none: {
+        display: 'inline-block',
+        textDecoration: 'none'
+    },
+    underline: {
+        textDecoration: 'underline'
+    },
+    lineThrough: {
+        textDecoration: 'line-through'
+    }
+};
+/**
+ * One run of text inside a sentence (AGL-1235).
+ *
+ * The gap this fills: `muiTypography` is `textEditable`, therefore a leaf —
+ * `nodeAcceptsChildren` reports false, so no span can be nested inside it.
+ * A statement whose argument lives in an emphasised phrase ("Aglyn commerce
+ * is **part of the platform**") could not be authored at all; the whole line
+ * was one flat colour.
+ *
+ * This is a leaf too, deliberately: the shape that renders correctly is a
+ * block container holding SIBLING inline runs, not a nested span. Sibling
+ * runs flow and wrap as a single paragraph, so the sentence breaks
+ * naturally with the emphasis landing in the right place. Drop a Box as
+ * `p`, then one of these per style change.
+ */ const InlineText = /*#__PURE__*/ forwardRef((props, ref)=>{
+    var _DECORATION_SX_decoration, _authorHtmlLabel;
+    const { element, tone, weight, decoration, children, sx, html } = props, rest = _object_without_properties_loose(props, [
+        "element",
+        "tone",
+        "weight",
+        "decoration",
+        "children",
+        "sx",
+        "html"
+    ]);
+    const component = INLINE_TEXT_ELEMENTS.includes(element) ? element : 'span';
+    // Node styles ride the renderer-merged sx; recompose rather than spread
+    // (the stack.ts/link-box.tsx pattern). Writing an `sx` literal after the
+    // props spread would REPLACE the author's styles silently — the defect
+    // class `aglyn/no-sx-after-spread` guards (AGL-1240/1284).
+    const nodeSx = Array.isArray(sx) ? sx : sx ? [
+        sx
+    ] : [];
+    // A cleared attribute persists as null, so every lookup below must miss
+    // rather than throw; `Record[null]` is simply undefined.
+    const color = TONE_COLOR[tone];
+    const fontWeight = FONT_WEIGHT[weight];
+    return /*#__PURE__*/ _jsx(MuiBox, _extends({
+        ref: ref,
+        component: component
+    }, rest, {
+        // Order matters: the baseline first, then the declared attributes,
+        // then the author's node styles last so the Styles panel always wins.
+        sx: [
+            {
+                display: 'inline'
+            },
+            color ? {
+                color
+            } : {},
+            fontWeight ? {
+                fontWeight
+            } : {},
+            (_DECORATION_SX_decoration = DECORATION_SX[decoration]) != null ? _DECORATION_SX_decoration : {},
+            ...nodeSx
+        ],
+        children: (_authorHtmlLabel = authorHtmlLabel(html)) != null ? _authorHtmlLabel : children
+    }));
+});
+InlineText.displayName = 'AglynInlineText';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Inline Text',
+    description: 'One run of text inside a sentence — put several side by side in a ' + 'paragraph to emphasise a phrase without breaking the line.',
+    category: Aglyn.ComponentCategory.TEXT,
+    icon: {
+        path: mdiFormatColorText.path,
+        sx: {
+            color: '#057822'
+        }
+    },
+    flags: {
+        // The run IS its text: edited inline on the canvas, like Typography.
+        textEditable: Aglyn.FEATURE_FLAG.ENABLED,
+        richTextEditable: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    // Emphasis only (AGL-2557), for a different reason than the controls: this
+    // run is not interactive, it is `display: inline`. Every element it may
+    // render as is phrasing content — that is the guarantee INLINE_TEXT_ELEMENTS
+    // exists to make — so a list inside one is a block in an inline box, which
+    // the parser lifts straight back out of the enclosing paragraph. Links stay
+    // with Screen Link, whose job is a resolved target rather than a typed href.
+    richTextCommands: [
+        Aglyn.RICH_TEXT_COMMANDS.EMPHASIS
+    ],
+    attributes: [
+        FIELD_TEXT_CONTENT,
+        {
+            name: 'element',
+            label: 'Component',
+            description: 'The DOM element this run renders as. `strong` and `em` carry ' + 'meaning for screen readers and search engines; `mark` marks a ' + 'highlighted phrase; `span` is purely visual.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: INLINE_TEXT_ELEMENTS.map((value)=>({
+                    value,
+                    label: value
+                }))
+        },
+        {
+            name: 'tone',
+            label: 'Color',
+            description: "Palette token for this run. Two-tone text is a muted sentence " + 'with one run set to Primary (or Accent) — theme tokens, so it ' + 'still reads correctly in dark mode.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'inherit',
+                    label: 'Inherit'
+                },
+                {
+                    value: 'primary',
+                    label: 'Text primary'
+                },
+                {
+                    value: 'secondary',
+                    label: 'Text muted'
+                },
+                {
+                    value: 'disabled',
+                    label: 'Text disabled'
+                },
+                {
+                    value: 'accent',
+                    label: 'Accent'
+                },
+                {
+                    value: 'accentAlt',
+                    label: 'Accent alternate'
+                },
+                {
+                    value: 'success',
+                    label: 'Success'
+                },
+                {
+                    value: 'warning',
+                    label: 'Warning'
+                },
+                {
+                    value: 'error',
+                    label: 'Error'
+                }
+            ]
+        },
+        {
+            name: 'weight',
+            label: 'Weight',
+            description: 'Font weight for this run only.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'inherit',
+                    label: 'Inherit'
+                },
+                {
+                    value: 'regular',
+                    label: 'Regular'
+                },
+                {
+                    value: 'medium',
+                    label: 'Medium'
+                },
+                {
+                    value: 'semibold',
+                    label: 'Semi bold'
+                },
+                {
+                    value: 'bold',
+                    label: 'Bold'
+                }
+            ]
+        },
+        {
+            name: 'decoration',
+            label: 'Underline / strike',
+            description: 'Inherit follows the surrounding text, including a link\'s ' + 'underline — an underline PROPAGATES down and cannot be switched ' + 'off from inside. None does switch it off, at the cost of the run ' + 'no longer breaking across lines, so keep it to a short phrase.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'inherit',
+                    label: 'Inherit'
+                },
+                {
+                    value: 'none',
+                    label: 'None (does not wrap)'
+                },
+                {
+                    value: 'underline',
+                    label: 'Underline'
+                },
+                {
+                    value: 'lineThrough',
+                    label: 'Strikethrough'
+                }
+            ]
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Inline Text',
+        pluginId: BUNDLE_ID,
+        description: 'One run of text inside a sentence',
+        category: Aglyn.ComponentCategory.TEXT,
+        icon: schema.icon,
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                element: 'span',
+                children: 'Inline text'
+            }
+        }
+    },
+    {
+        $id: generatePresetId(ID, 'emphasis'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Emphasised Text',
+        pluginId: BUNDLE_ID,
+        description: 'A phrase picked out of a muted sentence',
+        category: Aglyn.ComponentCategory.TEXT,
+        icon: {
+            path: mdiFormatColorHighlight.path,
+            sx: {
+                color: '#057822'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                element: 'strong',
+                tone: 'primary',
+                weight: 'bold',
+                children: 'the emphasised phrase'
+            }
+        }
+    },
+    {
+        // The whole shape in one drop (AGL-1235): the reason the emphasis was
+        // never authored is that assembling it by hand meant a container, three
+        // runs and a colour on each. This is that assembly, ready to retype.
+        $id: generatePresetId(ID, 'statement'),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Two-tone Statement',
+        pluginId: BUNDLE_ID,
+        description: 'A muted sentence with one phrase emphasised',
+        category: Aglyn.ComponentCategory.TEXT,
+        icon: {
+            path: mdiFormatColorHighlight.path,
+            sx: {
+                color: '#057822'
+            }
+        },
+        data: {
+            $id: null,
+            // A real `<p>`, not a div: the runs are phrasing content, so the
+            // paragraph is the honest container and screen readers get a
+            // sentence rather than three unrelated fragments.
+            componentId: 'muiBox',
+            pluginId: BUNDLE_ID,
+            props: {
+                component: 'p'
+            },
+            // Node-level sx (AGL-1346) — the record the Styles panel edits.
+            sx: {
+                marginTop: 0,
+                marginRight: 0,
+                marginBottom: 0,
+                marginLeft: 0
+            },
+            nodes: [
+                {
+                    $id: null,
+                    componentId: ID,
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        element: 'span',
+                        tone: 'secondary',
+                        children: 'Everything you build is '
+                    }
+                },
+                {
+                    $id: null,
+                    componentId: ID,
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        element: 'strong',
+                        tone: 'primary',
+                        weight: 'bold',
+                        children: 'part of the platform'
+                    }
+                },
+                {
+                    $id: null,
+                    componentId: ID,
+                    pluginId: BUNDLE_ID,
+                    props: {
+                        element: 'span',
+                        tone: 'secondary',
+                        children: ', not bolted onto it.'
+                    }
+                }
+            ]
+        }
+    }
+];
+export default InlineText;
+
+//# sourceMappingURL=inline-text.js.map

package/src/lib/components/inline-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/mui/src/lib/components/inline-text.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 { mdiFormatColorHighlight, mdiFormatColorText } from '@aglyn/shared-data-mdi'\nimport MuiBox from '@mui/material/Box'\nimport type { SxProps } from '@mui/material/styles'\nimport { forwardRef, type ReactNode } from 'react'\nimport { BUNDLE_ID } from '../constants/bundle-common'\nimport { FIELD_TEXT_CONTENT } from '../constants/field-presets'\nimport { authorHtmlLabel } from '../utils/author-html-label'\nimport { generatePresetId } from '../utils/generate-preset-id'\n\n// Component ids are persisted in screen documents; never rename.\nexport const ID: Aglyn.ComponentId = 'muiInlineText'\n\n/**\n * Inline elements the run may render as. An allow-list rather than a\n * free-text field, for the same reason Box's is (AGL-1201): `element` is\n * persisted and rendered verbatim into every visitor's page, so a typed\n * value would let an author put `script`/`iframe` there.\n *\n * All five are phrasing content, so a run is always legal inside a\n * paragraph — which is the whole point of the element.\n */\nexport const INLINE_TEXT_ELEMENTS = [\n  'span',\n  'strong',\n  'em',\n  'mark',\n  'small',\n] as const\nexport type InlineTextElement = (typeof INLINE_TEXT_ELEMENTS)[number]\n\n/**\n * Theme palette paths, never raw hexes: the design's `text/muted` and\n * `text/primary` tokens ARE `text.secondary` / `text.primary`, and a\n * hardcoded `#757575` would ignore the site's theme (and dark mode).\n *\n * Every value is a real sentinel — an option value of `''` is stripped\n * before save and the pick silently reverts on reload (AGL-1191), so\n * \"inherit\" has to be spelled out rather than left blank.\n */\nconst TONE_COLOR: Record<string, string> = {\n  inherit: undefined,\n  primary: 'text.primary',\n  secondary: 'text.secondary',\n  disabled: 'text.disabled',\n  accent: 'primary.main',\n  accentAlt: 'secondary.main',\n  success: 'success.main',\n  warning: 'warning.main',\n  error: 'error.main',\n}\n\n/** Named weights so the field is a pick, not a number to remember. */\nconst FONT_WEIGHT: Record<string, number> = {\n  inherit: undefined,\n  regular: 400,\n  medium: 500,\n  semibold: 600,\n  bold: 700,\n}\n\n/**\n * `text-decoration` PROPAGATES — it is not inherited. An ancestor's\n * underline (a Screen Link, a struck-through block) is painted straight\n * across every in-flow inline descendant, and `text-decoration: none` on\n * the descendant CANNOT remove it. Only an element that is not an in-flow\n * non-atomic inline box escapes the propagation, which is why \"None\" also\n * switches the run to `inline-block`: an atomic inline box is not painted\n * through.\n *\n * That costs line-breaking — an inline-block will not break across lines —\n * so it is opt-in rather than the default, and the field says so. The\n * default, `inherit`, is a plain `display: inline` run that flows and wraps\n * with the rest of the sentence.\n */\nconst DECORATION_SX: Record<string, Record<string, string>> = {\n  inherit: {},\n  none: { display: 'inline-block', textDecoration: 'none' },\n  underline: { textDecoration: 'underline' },\n  lineThrough: { textDecoration: 'line-through' },\n}\n\nexport interface InlineTextProps {\n  /** The DOM element rendered; defaults to `span`. */\n  element?: InlineTextElement\n  /** Palette token key from {@link TONE_COLOR}. */\n  tone?: string\n  /** Named weight key from {@link FONT_WEIGHT}. */\n  weight?: string\n  /** Decoration behaviour key from {@link DECORATION_SX}. */\n  decoration?: string\n  /**\n   * Authored node styles, handed over by the renderer rather than typed\n   * into an attribute. Declared because the merge below reads it —\n   * undeclared, no typed caller could style a run (AGL-1323).\n   */\n  sx?: SxProps\n  /**\n   * Sanitized emphasis markup for the run, written by the inline editor's\n   * rich mode (AGL-2557). `children` keeps the plain-text reading of it, and\n   * is what every surface that cannot render markup falls back to.\n   */\n  html?: string\n  /** The text of this run; edited inline on the canvas. */\n  children?: ReactNode\n}\n\n/**\n * One run of text inside a sentence (AGL-1235).\n *\n * The gap this fills: `muiTypography` is `textEditable`, therefore a leaf —\n * `nodeAcceptsChildren` reports false, so no span can be nested inside it.\n * A statement whose argument lives in an emphasised phrase (\"Aglyn commerce\n * is **part of the platform**\") could not be authored at all; the whole line\n * was one flat colour.\n *\n * This is a leaf too, deliberately: the shape that renders correctly is a\n * block container holding SIBLING inline runs, not a nested span. Sibling\n * runs flow and wrap as a single paragraph, so the sentence breaks\n * naturally with the emphasis landing in the right place. Drop a Box as\n * `p`, then one of these per style change.\n */\nconst InlineText = forwardRef<HTMLElement, InlineTextProps>((props, ref) => {\n  const { element, tone, weight, decoration, children, sx, html, ...rest } =\n    props\n  const component = INLINE_TEXT_ELEMENTS.includes(element as InlineTextElement)\n    ? (element as InlineTextElement)\n    : 'span'\n  // Node styles ride the renderer-merged sx; recompose rather than spread\n  // (the stack.ts/link-box.tsx pattern). Writing an `sx` literal after the\n  // props spread would REPLACE the author's styles silently — the defect\n  // class `aglyn/no-sx-after-spread` guards (AGL-1240/1284).\n  const nodeSx = Array.isArray(sx) ? sx : sx ? [sx] : []\n  // A cleared attribute persists as null, so every lookup below must miss\n  // rather than throw; `Record[null]` is simply undefined.\n  const color = TONE_COLOR[tone]\n  const fontWeight = FONT_WEIGHT[weight]\n  return (\n    <MuiBox\n      ref={ref}\n      component={component}\n      {...rest}\n      // Order matters: the baseline first, then the declared attributes,\n      // then the author's node styles last so the Styles panel always wins.\n      sx={[\n        { display: 'inline' },\n        color ? { color } : {},\n        fontWeight ? { fontWeight } : {},\n        DECORATION_SX[decoration] ?? {},\n        ...nodeSx,\n      ]}\n    >\n      {authorHtmlLabel(html) ?? children}\n    </MuiBox>\n  )\n})\nInlineText.displayName = 'AglynInlineText'\n\nexport const schema: Aglyn.ComponentSchema<InlineTextProps> = {\n  $id: ID,\n  pluginId: BUNDLE_ID,\n  displayName: 'Inline Text',\n  description:\n    'One run of text inside a sentence — put several side by side in a ' +\n    'paragraph to emphasise a phrase without breaking the line.',\n  category: Aglyn.ComponentCategory.TEXT,\n  icon: { path: mdiFormatColorText.path, sx: { color: '#057822' } },\n  flags: {\n    // The run IS its text: edited inline on the canvas, like Typography.\n    textEditable: Aglyn.FEATURE_FLAG.ENABLED,\n    richTextEditable: Aglyn.FEATURE_FLAG.ENABLED,\n  },\n  // Emphasis only (AGL-2557), for a different reason than the controls: this\n  // run is not interactive, it is `display: inline`. Every element it may\n  // render as is phrasing content — that is the guarantee INLINE_TEXT_ELEMENTS\n  // exists to make — so a list inside one is a block in an inline box, which\n  // the parser lifts straight back out of the enclosing paragraph. Links stay\n  // with Screen Link, whose job is a resolved target rather than a typed href.\n  richTextCommands: [Aglyn.RICH_TEXT_COMMANDS.EMPHASIS],\n  attributes: [\n    FIELD_TEXT_CONTENT,\n    {\n      name: 'element',\n      label: 'Component',\n      description:\n        'The DOM element this run renders as. `strong` and `em` carry ' +\n        'meaning for screen readers and search engines; `mark` marks a ' +\n        'highlighted phrase; `span` is purely visual.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: INLINE_TEXT_ELEMENTS.map((value) => ({ value, label: value })),\n    },\n    {\n      name: 'tone',\n      label: 'Color',\n      description:\n        \"Palette token for this run. Two-tone text is a muted sentence \" +\n        'with one run set to Primary (or Accent) — theme tokens, so it ' +\n        'still reads correctly in dark mode.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'primary', label: 'Text primary' },\n        { value: 'secondary', label: 'Text muted' },\n        { value: 'disabled', label: 'Text disabled' },\n        { value: 'accent', label: 'Accent' },\n        { value: 'accentAlt', label: 'Accent alternate' },\n        { value: 'success', label: 'Success' },\n        { value: 'warning', label: 'Warning' },\n        { value: 'error', label: 'Error' },\n      ],\n    },\n    {\n      name: 'weight',\n      label: 'Weight',\n      description: 'Font weight for this run only.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'regular', label: 'Regular' },\n        { value: 'medium', label: 'Medium' },\n        { value: 'semibold', label: 'Semi bold' },\n        { value: 'bold', label: 'Bold' },\n      ],\n    },\n    {\n      name: 'decoration',\n      label: 'Underline / strike',\n      description:\n        'Inherit follows the surrounding text, including a link\\'s ' +\n        'underline — an underline PROPAGATES down and cannot be switched ' +\n        'off from inside. None does switch it off, at the cost of the run ' +\n        'no longer breaking across lines, so keep it to a short phrase.',\n      component: Aglyn.FieldComponentType.SELECT,\n      options: [\n        { value: 'inherit', label: 'Inherit' },\n        { value: 'none', label: 'None (does not wrap)' },\n        { value: 'underline', label: 'Underline' },\n        { value: 'lineThrough', label: 'Strikethrough' },\n      ],\n    },\n  ],\n}\n\nexport const presets: Aglyn.PresetSchema[] = [\n  {\n    $id: generatePresetId(ID),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Inline Text',\n    pluginId: BUNDLE_ID,\n    description: 'One run of text inside a sentence',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: schema.icon,\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: { element: 'span', children: 'Inline text' },\n    },\n  },\n  {\n    $id: generatePresetId(ID, 'emphasis'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Emphasised Text',\n    pluginId: BUNDLE_ID,\n    description: 'A phrase picked out of a muted sentence',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: { path: mdiFormatColorHighlight.path, sx: { color: '#057822' } },\n    data: {\n      $id: null,\n      componentId: ID,\n      pluginId: BUNDLE_ID,\n      props: {\n        element: 'strong',\n        tone: 'primary',\n        weight: 'bold',\n        children: 'the emphasised phrase',\n      },\n    },\n  },\n  {\n    // The whole shape in one drop (AGL-1235): the reason the emphasis was\n    // never authored is that assembling it by hand meant a container, three\n    // runs and a colour on each. This is that assembly, ready to retype.\n    $id: generatePresetId(ID, 'statement'),\n    type: Aglyn.NodeType.PRESET,\n    displayName: 'Two-tone Statement',\n    pluginId: BUNDLE_ID,\n    description: 'A muted sentence with one phrase emphasised',\n    category: Aglyn.ComponentCategory.TEXT,\n    icon: { path: mdiFormatColorHighlight.path, sx: { color: '#057822' } },\n    data: {\n      $id: null,\n      // A real `<p>`, not a div: the runs are phrasing content, so the\n      // paragraph is the honest container and screen readers get a\n      // sentence rather than three unrelated fragments.\n      componentId: 'muiBox',\n      pluginId: BUNDLE_ID,\n      props: { component: 'p' },\n      // Node-level sx (AGL-1346) — the record the Styles panel edits.\n      sx: { marginTop: 0, marginRight: 0, marginBottom: 0, marginLeft: 0 },\n      nodes: [\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'span',\n            tone: 'secondary',\n            children: 'Everything you build is ',\n          },\n        },\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'strong',\n            tone: 'primary',\n            weight: 'bold',\n            children: 'part of the platform',\n          },\n        },\n        {\n          $id: null,\n          componentId: ID,\n          pluginId: BUNDLE_ID,\n          props: {\n            element: 'span',\n            tone: 'secondary',\n            children: ', not bolted onto it.',\n          },\n        },\n      ],\n    },\n  },\n]\n\nexport default InlineText\n"],"names":["Aglyn","mdiFormatColorHighlight","mdiFormatColorText","MuiBox","forwardRef","BUNDLE_ID","FIELD_TEXT_CONTENT","authorHtmlLabel","generatePresetId","ID","INLINE_TEXT_ELEMENTS","TONE_COLOR","inherit","undefined","primary","secondary","disabled","accent","accentAlt","success","warning","error","FONT_WEIGHT","regular","medium","semibold","bold","DECORATION_SX","none","display","textDecoration","underline","lineThrough","InlineText","props","ref","element","tone","weight","decoration","children","sx","html","rest","component","includes","nodeSx","Array","isArray","color","fontWeight","displayName","schema","$id","pluginId","description","category","ComponentCategory","TEXT","icon","path","flags","textEditable","FEATURE_FLAG","ENABLED","richTextEditable","richTextCommands","RICH_TEXT_COMMANDS","EMPHASIS","attributes","name","label","FieldComponentType","SELECT","options","map","value","presets","type","NodeType","PRESET","data","componentId","marginTop","marginRight","marginBottom","marginLeft","nodes"],"mappings":"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"}

package/src/lib/components/language-switcher.d.ts

@@ -0,0 +1,35 @@
+/**
+ * @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';
+export declare const ID: Aglyn.ComponentId;
+export interface LanguageSwitcherProps {
+    /** 'text' shows locale codes; 'buttons' renders outlined buttons. */
+    variant?: 'text' | 'buttons';
+    /** Uppercase the locale codes (EN / ES). */
+    uppercase?: boolean;
+}
+/**
+ * Language switcher (AGL-164): renders one link per translation of the
+ * CURRENT screen, resolved from ScreenLinkContext (`localeVariants` +
+ * routing map), so it works inside shared layouts. Shows a placeholder in
+ * the editor when the screen has no variants; renders nothing on the live
+ * site in that case.
+ */
+declare const LanguageSwitcher: import("react").ForwardRefExoticComponent<LanguageSwitcherProps & import("react").RefAttributes<HTMLElement>>;
+export declare const schema: Aglyn.ComponentSchema<LanguageSwitcherProps>;
+export declare const presets: Aglyn.PresetSchema[];
+export default LanguageSwitcher;

package/src/lib/components/language-switcher.js

@@ -0,0 +1,179 @@
+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 } 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 { mdiTranslate } from "@aglyn/shared-data-mdi";
+import { AppLink } from "@aglyn/shared-ui-jsx";
+import Button from "@mui/material/Button";
+import Stack from "@mui/material/Stack";
+import { forwardRef, useContext } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const ID = 'languageSwitcher';
+/**
+ * Language switcher (AGL-164): renders one link per translation of the
+ * CURRENT screen, resolved from ScreenLinkContext (`localeVariants` +
+ * routing map), so it works inside shared layouts. Shows a placeholder in
+ * the editor when the screen has no variants; renders nothing on the live
+ * site in that case.
+ */ const LanguageSwitcher = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { variant, uppercase } = props, rest = _object_without_properties_loose(props, [
+        "variant",
+        "uppercase"
+    ]);
+    // Node styles ride the renderer-merged sx; recompose (stack.ts pattern).
+    const nodeSx = Array.isArray(props['sx']) ? props['sx'] : [
+        props['sx']
+    ];
+    const { screens, localeVariants, currentLocale, suppressNavigation } = useContext(Aglyn.ScreenLinkContext);
+    const entries = Object.entries(localeVariants != null ? localeVariants : {}).filter(([, screenId])=>(screens == null ? void 0 : screens[screenId]) != null);
+    const format = (locale)=>uppercase === false ? locale : locale.toUpperCase();
+    if (!entries.length) {
+        // Editor-only placeholder; invisible on the live site.
+        if (!suppressNavigation) return null;
+        return /*#__PURE__*/ _jsx(Stack, _extends({
+            ref: ref,
+            direction: "row",
+            spacing: 1
+        }, rest, {
+            sx: [
+                {
+                    alignItems: 'center',
+                    border: '1px dashed',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    px: 1.5,
+                    py: 0.5,
+                    color: 'text.secondary',
+                    fontSize: 12,
+                    fontFamily: 'system-ui, sans-serif'
+                },
+                ...nodeSx
+            ],
+            children: 'Language switcher — set screen translations'
+        }));
+    }
+    return /*#__PURE__*/ _jsxs(Stack, _extends({
+        ref: ref,
+        direction: "row",
+        spacing: 0.5
+    }, rest, {
+        sx: [
+            {
+                alignItems: 'center'
+            },
+            ...nodeSx
+        ],
+        children: [
+            currentLocale ? /*#__PURE__*/ _jsx(Button, {
+                size: "small",
+                variant: "text",
+                disabled: true,
+                children: format(currentLocale)
+            }) : null,
+            entries.map(([locale, screenId])=>{
+                const path = screens == null ? void 0 : screens[screenId];
+                const href = path != null ? Aglyn.screenRoutePathToUrl(path) : undefined;
+                if (!href || suppressNavigation) {
+                    return /*#__PURE__*/ _jsx(Button, {
+                        size: "small",
+                        variant: "text",
+                        children: format(locale)
+                    }, locale);
+                }
+                return /*#__PURE__*/ _jsx(AppLink, {
+                    componentVariant: "button",
+                    href: href,
+                    size: "small",
+                    variant: variant === 'buttons' ? 'outlined' : 'text',
+                    children: format(locale)
+                }, locale);
+            })
+        ]
+    }));
+});
+LanguageSwitcher.displayName = 'LanguageSwitcher';
+export const schema = {
+    $id: ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Language Switcher',
+    description: "Links between this screen's translations. It hides itself when there are none.",
+    category: Aglyn.ComponentCategory.NAVIGATION,
+    icon: {
+        path: mdiTranslate.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    flags: {
+        selfClosing: Aglyn.FEATURE_FLAG.ENABLED
+    },
+    attributes: [
+        {
+            name: 'variant',
+            description: 'How the language links render.',
+            component: Aglyn.FieldComponentType.SELECT,
+            label: 'Style',
+            // `text` is half of the declared `'text' | 'buttons'` union and the
+            // value the render already falls back to; as `''` the option was
+            // unpersistable (AGL-1191) and outside its own prop type (AGL-1451).
+            options: [
+                {
+                    value: 'text',
+                    label: 'Text (default)'
+                },
+                {
+                    value: 'buttons',
+                    label: 'Outlined buttons'
+                }
+            ]
+        },
+        {
+            name: 'uppercase',
+            description: 'Show locale codes uppercased (EN, ES).',
+            component: Aglyn.FieldComponentType.CHECKBOX,
+            label: 'Uppercase'
+        }
+    ]
+};
+export const presets = [
+    {
+        $id: generatePresetId(ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Language Switcher',
+        pluginId: BUNDLE_ID,
+        description: 'Links between this screen’s translations',
+        category: Aglyn.ComponentCategory.NAVIGATION,
+        icon: {
+            path: mdiTranslate.path,
+            sx: {
+                color: '#2196f3'
+            }
+        },
+        data: {
+            $id: null,
+            componentId: ID,
+            pluginId: BUNDLE_ID,
+            props: {}
+        }
+    }
+];
+export default LanguageSwitcher;
+
+//# sourceMappingURL=language-switcher.js.map