@aglyn/plugins-mui 1.0.0-beta.143

package/src/lib/components/tabs.js

@@ -0,0 +1,788 @@
+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 { mdiTab, mdiViewCarousel } from "@aglyn/shared-data-mdi";
+import { AppLink } from "@aglyn/shared-ui-jsx";
+import Box from "@mui/material/Box";
+import MuiTab from "@mui/material/Tab";
+import MuiTabs from "@mui/material/Tabs";
+import Typography from "@mui/material/Typography";
+import { createContext, forwardRef, useContext, useState } from "react";
+import { BUNDLE_ID } from "../constants/bundle-common.js";
+import { dropClearedProps } from "../utils/drop-cleared-props.js";
+import { generatePresetId } from "../utils/generate-preset-id.js";
+// Component ids are persisted in screen documents; never rename.
+export const TABS_ID = 'muiTabs';
+export const TAB_PANEL_ID = 'muiTabPanel';
+/**
+ * How many tabs in a strip can carry a screen link (AGL-1312). The strip is
+ * authored as a free-form label list, so the links have to be flat props —
+ * one per position — and a flat prop needs a name that exists up front.
+ *
+ * Eight is well past any usable navigation row (the marketing content-tabs
+ * row is three) and costs nothing at render: the attributes panel only shows
+ * a link picker for a tab that actually exists, so a two-tab strip shows two.
+ */ export const TAB_LINK_SLOTS = 8;
+/** Prop name carrying the link of the 1-based `position`-th tab. */ export function tabLinkProp(position) {
+    return `tabLink${position}`;
+}
+/**
+ * Splits the authored label list. Newline-separated is the documented
+ * form; commas are accepted because a one-line "A, B, C" is what people
+ * type first.
+ */ export function parseLabels(value) {
+    if (value == null) return [];
+    return String(value).split(/[\n,]/).map((label)=>label.trim()).filter(Boolean);
+}
+/** Stable DOM id fragment for the tab ⇄ panel aria wiring. */ export function labelSlug(label) {
+    return label.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, '') || 'tab';
+}
+/** Case/whitespace-insensitive: authors don't retype labels exactly. */ export function labelsMatch(a, b) {
+    return String(a != null ? a : '').trim().toLowerCase() === String(b != null ? b : '').trim().toLowerCase();
+}
+/**
+ * Which tab the strip opens on, by index into the parsed label list.
+ *
+ * Two rules, in order:
+ *
+ * 1. the tab the author NAMED in `opensOn` (AGL-3164), matched by label with
+ *    the same case/whitespace tolerance panels are matched with;
+ * 2. otherwise the landing tab — the first one WITHOUT a screen link, which
+ *    is how a navigation row says "this is the page you are on" (AGL-1312),
+ *    and which is tab 0 on a strip with no links at all, i.e. exactly what
+ *    this element did before the attribute existed.
+ *
+ * The named tab is refused when it carries a screen link: a linked tab
+ * navigates instead of revealing a panel (AGL-1312), so it is not a tab the
+ * strip can rest on, and opening on it would show the indicator over a panel
+ * nobody can see. It falls back rather than rendering nothing.
+ *
+ * Never returns -1. `landing` is -1 when EVERY tab navigates — the strip
+ * shows no indicator there, but callers still read a label with this index.
+ */ export function openingTabIndex(labels, opensOn, linkIds = []) {
+    const named = labels.findIndex((label, index)=>!linkIds[index] && labelsMatch(label, opensOn));
+    if (named >= 0) return named;
+    const landing = labels.findIndex((_label, index)=>!linkIds[index]);
+    return landing < 0 ? 0 : landing;
+}
+export const TabsContext = /*#__PURE__*/ createContext(undefined);
+/**
+ * Tabs (https://mui.com/material-ui/react-tabs/).
+ *
+ * The strip is authored on the container as a label list, and each Tab
+ * Panel child names the label it belongs to. It does **not** slice its
+ * React children by index: the node renderer hands every component a
+ * single `Branch` fragment rather than one element per child node
+ * (`libs/aglyn-node-renderer`), so an index-based split would silently
+ * put all the content behind the first tab. Matching by label also
+ * survives reordering panels in the hierarchy.
+ *
+ * The strip renders from the author's own list, so it is complete in the
+ * SSR output — no registration pass, no empty-then-filled flash, and it
+ * still reads as a tab list with JavaScript disabled.
+ *
+ * ## Link mode (AGL-1312)
+ *
+ * Any tab may carry a screen link (`tabLink1`…`tabLink8`, by position). A
+ * tab that has one renders as a real anchor — navigable, crawlable,
+ * middle-clickable — because the row it exists for (Blog | Changelog |
+ * Newsroom) is navigation ACROSS screens, which a panel switcher can only
+ * fake with empty panels or a hand-styled row of buttons. The anchor is an
+ * `AppLink`, never a bare `href`: a raw href full-reloads the SPA.
+ *
+ * A tab WITHOUT a link keeps today's behavior exactly, and mixed rows work
+ * — the marketing pattern IS a mixed row, since the tab for the page you
+ * are already on must not link to itself. That unlinked tab is also how the
+ * author says which page this copy of the row is on: the strip lands on it,
+ * so the same three-tab row placed on three screens shows the indicator in
+ * the right place on each, with no "selected tab" attribute to keep in sync
+ * — `opensOn` below is for panel rows and gives way to this one.
+ *
+ * ## Which tab opens (AGL-3164)
+ *
+ * `opensOn` names it, by LABEL. Unset opens the first tab, which is what
+ * every Tabs authored before the attribute existed does; a label that no
+ * longer matches opens the first tab too, rather than nothing. The rule
+ * lives in {@link openingTabIndex} and is mirrored server-side by
+ * `deferLazyPanelNodes` (tenant-runtime), which decides which panel's nodes
+ * reach the page at all — so the tab that opens is the one that was
+ * rendered, and the page does not paint one panel and swap to another.
+ *
+ * **Accessibility.** The row is a `tablist` only while NOTHING in it
+ * navigates. As soon as one tab carries a link the whole strip is marked up
+ * as navigation: a `nav` landmark, no `role="tab"`, no `aria-selected`, and
+ * no roving tab stop (every link is its own tab stop, as in any nav). The
+ * alternative — an `<a href>` wearing `role="tab"` — tells assistive tech
+ * the activation will reveal a panel when it actually loads a page, and a
+ * tablist whose children are not tabs is invalid either way. The tab for
+ * the current screen is marked `aria-current="page"`; tabs that still
+ * switch panels stay buttons and keep their `aria-controls`, which is an
+ * accurate disclosure relationship on its own. The half-applied version of
+ * this — links inside a tablist, or panels still claiming `role="tabpanel"`
+ * with no tablist above them — is what this deliberately avoids.
+ */ const TabsElement = /*#__PURE__*/ forwardRef((rawProps, ref)=>{
+    var _parsed_activeIndex;
+    // Cleared props dropped up front (AGL-1451). The four selects below
+    // already coalesce their own value, but `rest` is spread onto the root
+    // and the per-tab link props are read out of it, so a `null` from the
+    // field's ✕ (AGL-1226) must not survive this far.
+    const props = dropClearedProps(rawProps);
+    const { labels, ariaLabel, orientation, variant, centered, textColor, indicatorColor, ssrPanels, lazyPanels, opensOn, children } = props, rest = _object_without_properties_loose(props, [
+        "labels",
+        "ariaLabel",
+        "orientation",
+        "variant",
+        "centered",
+        "textColor",
+        "indicatorColor",
+        "ssrPanels",
+        "lazyPanels",
+        "opensOn",
+        "children"
+    ]);
+    const { editorInert, suppressNavigation } = Aglyn.useScreenLink(undefined);
+    // Read the routing map directly rather than calling `useScreenLink` per
+    // tab: the number of tabs changes with the label list, and a hook per
+    // list item is a rules-of-hooks violation waiting for the author to add
+    // a fourth tab.
+    const { screens } = useContext(Aglyn.ScreenLinkContext);
+    // Screen ids by tab position, lifted out of `rest` so they can never
+    // reach the DOM as unknown attributes (the nav-menu does the same with
+    // its legacy trigger prop).
+    const linkIds = [];
+    for(let slot = 1; slot <= TAB_LINK_SLOTS; slot += 1){
+        const key = tabLinkProp(slot);
+        const value = rest[key];
+        linkIds.push(typeof value === 'string' && value ? value : undefined);
+        delete rest[key];
+    }
+    const parsed = parseLabels(labels);
+    // Authored links decide the mode, NOT resolved hrefs: the canvas and
+    // preview suppress navigation, and they must still show the element the
+    // page will actually ship (the same rule Screen Link follows).
+    const navMode = parsed.some((_label, index)=>!!linkIds[index]);
+    /**
+     * The tab a navigation row LANDS on is the one with no link: the row is
+     * placed on every screen it names, and on each of those the tab for that
+     * screen is left unlinked, because a page that links to itself helps
+     * nobody. So "first tab with no link" is how the author says "this is
+     * the page you are on" — without a second attribute, and without this
+     * element having to know the current route.
+     *
+     * `-1` means every tab navigates: nothing is current, and the strip
+     * shows no indicator rather than inventing one under the first tab.
+     * With no links at all this is 0, i.e. exactly today's behavior.
+     */ const landing = parsed.findIndex((_label, index)=>!linkIds[index]);
+    // Which tab this strip opens on (AGL-3164): the one the author named,
+    // and otherwise `landing` — so an unset attribute, or one naming a label
+    // that has since been renamed away, behaves exactly as it always did.
+    const opening = openingTabIndex(parsed, opensOn, linkIds);
+    const [active, setActive] = useState(opening);
+    // Once a lazy panel has been opened it stays mounted: re-tabbing between
+    // two plans should not re-render 50 rows each time, and anything the
+    // reader typed or scrolled inside a panel survives a round trip.
+    //
+    // Seeded with the OPENING label, because that panel is open from the
+    // start without anyone clicking it. Leaving it out unmounted the opening
+    // panel the moment the reader moved away — visibly inconsistent with
+    // every other panel they had visited, and caught by the round-trip test.
+    const [opened, setOpened] = useState(()=>{
+        const first = parsed[opening];
+        return new Set(first === undefined ? [] : [
+            first
+        ]);
+    });
+    // A label removed from the list must not leave the strip pointing at
+    // a tab that no longer exists — MUI warns and drops the indicator.
+    //
+    // On the besigner canvas the authored attribute is read every render
+    // instead of the state seeded at mount: `onChange` is inert there, so
+    // nothing else can have moved the selection, and a canvas that kept
+    // showing the tab that was open when the element mounted would make
+    // "Opens on" look like it had done nothing.
+    const chosen = editorInert ? opening : active < parsed.length ? active : 0;
+    // A tab that navigates is never the selected one; if the author has just
+    // given the open tab a link, fall back to one that still has a panel.
+    const activeIndex = linkIds[chosen] && landing >= 0 ? landing : chosen;
+    const resolvedVariant = variant || 'standard';
+    const vertical = orientation === 'vertical';
+    const stripLabel = ariaLabel || 'Tabs';
+    const strip = /*#__PURE__*/ _jsx(MuiTabs, _extends({
+        // No indicator when every tab navigates: there is no selection to
+        // show, and marking one anyway would point at the wrong page.
+        value: parsed.length && landing >= 0 ? activeIndex : false,
+        onChange: editorInert ? undefined : (_event, next)=>{
+            // A navigating tab must not move the selection on its way
+            // out: the indicator would jump to a tab whose panel is
+            // empty while the next page is still loading.
+            if (linkIds[next]) return;
+            setActive(next);
+            const label = parsed[next];
+            if (label !== undefined) {
+                setOpened((prev)=>prev.has(label) ? prev : new Set(prev).add(label));
+            }
+        },
+        orientation: vertical ? 'vertical' : 'horizontal',
+        variant: resolvedVariant,
+        // MUI ignores `centered` on a scrollable strip and warns in dev.
+        centered: resolvedVariant === 'standard' ? !!centered : undefined,
+        textColor: textColor || 'primary',
+        indicatorColor: indicatorColor || 'primary'
+    }, navMode ? {
+        component: 'nav',
+        slotProps: {
+            root: {
+                'aria-label': stripLabel
+            },
+            list: {
+                role: undefined
+            }
+        }
+    } : {
+        'aria-label': stripLabel
+    }, {
+        children: parsed.map((label, index)=>{
+            const slug = labelSlug(label);
+            const key = `${slug}-${index}`;
+            if (!navMode) {
+                return /*#__PURE__*/ _jsx(MuiTab, {
+                    label: label,
+                    id: `tab-${slug}`,
+                    "aria-controls": `tabpanel-${slug}`
+                }, key);
+            }
+            // Suppressed navigation (canvas, preview) keeps the item in the
+            // row but without an href, so a click cannot leave the editor.
+            const href = suppressNavigation ? undefined : Aglyn.resolveScreenHref(screens, linkIds[index]);
+            // An authored target that the routing map does not have: the
+            // screen was unpublished or deleted out from under this row
+            // (AGL-1893). Computed from the MAP, never from `href`, so a
+            // canvas or preview render — where nothing has an href on purpose
+            // — does not paint every working link as dead.
+            const broken = Aglyn.isScreenLinkBroken(screens, linkIds[index]);
+            return /*#__PURE__*/ _jsx(MuiTab, _extends({
+                label: label,
+                id: `tab-${slug}`,
+                // Only a tab that still reveals a panel controls anything.
+                "aria-controls": linkIds[index] ? undefined : `tabpanel-${slug}`
+            }, href ? {
+                component: AppLink,
+                componentVariant: 'naked',
+                href
+            } : null, {
+                /**
+               * A tab whose screen is gone stops being a control (AGL-1893).
+               *
+               * It used to render as a bare `<button>` indistinguishable
+               * from its working neighbours: no href, no `aria-controls`,
+               * and `onChange` returns early on it because the AUTHORED id
+               * is still there — so it looked live, announced live, and did
+               * nothing at all. Live on `/changelog` and `/newsroom` for two
+               * days without anything anywhere saying so.
+               *
+               * Disabled rather than hidden, on purpose:
+               *
+               * - the routing map differs between the render that produced
+               *   an ISR page and the render that hydrates it, and AGL-1268
+               *   settled that a node's ELEMENT must not depend on it —
+               *   removing the tab would make the strip's DOM shape depend
+               *   on it, which is strictly worse than an attribute;
+               * - `MuiTabs` addresses its children by index, so dropping one
+               *   silently repoints `value` at the wrong tab;
+               * - the failure directions are not symmetric. A wrongly
+               *   disabled tab is a dimmed label; a wrongly hidden one is
+               *   navigation that vanished from a customer's site with no
+               *   trace of why.
+               *
+               * Falling through to panel behaviour instead — the other
+               * option AGL-1893 weighed — is not available to this element:
+               * the node renderer hands it ONE `Branch` fragment rather than
+               * per-panel children, so a Tabs container cannot know whether
+               * a panel with this label exists, and on the real `/changelog`
+               * shape it does not.
+               *
+               * `landing`, `opening`, `activeIndex`, `aria-controls` and the
+               * `onChange` guard all still read the AUTHORED id, unchanged.
+               * They must: `deferLazyPanelNodes` computes the opening label
+               * server-side from the raw `tabLink{n}` props and has no
+               * routing map to resolve ids with, so a client that resolved
+               * differently would keep a panel the server withheld.
+               */ disabled: broken && !editorInert ? true : undefined
+            }, Aglyn.brokenScreenLinkProps(broken, !!editorInert), {
+                sx: broken && editorInert ? Aglyn.BROKEN_SCREEN_LINK_SX : undefined,
+                // MUI writes these before spreading the rest, so passing them
+                // undefined is what removes them (see the a11y note above).
+                role: undefined,
+                "aria-selected": undefined,
+                "aria-current": landing >= 0 && index === activeIndex ? 'page' : undefined,
+                // Undo the roving tab stop: in a nav every item is reachable
+                // with Tab, and MUI's arrow-key handler already stands down
+                // because it only moves between `role="tab"` siblings.
+                tabIndex: undefined
+            }), key);
+        })
+    }));
+    return /*#__PURE__*/ _jsx(TabsContext.Provider, {
+        value: {
+            activeLabel: (_parsed_activeIndex = parsed[activeIndex]) != null ? _parsed_activeIndex : '',
+            // Every panel at once on the canvas: a hidden panel cannot be
+            // selected or styled, the same reason Accordion force-expands.
+            showAll: !!editorInert,
+            // Lazy is the default (AGL-1283 option 3); `ssrPanels` is the SEO
+            // escape hatch. The legacy `lazyPanels` opt-in is subsumed: `true`
+            // now means what the default means, and a stored `false` was only
+            // ever the old default, never an author's intent.
+            lazyPanels: !ssrPanels,
+            opened,
+            navMode
+        },
+        children: /*#__PURE__*/ _jsxs(Box, _extends({
+            ref: ref
+        }, rest, {
+            // MERGE, never replace. `sx` written after `{...rest}` silently
+            // discarded whatever the author set on the node — every Tabs on
+            // every site rendered with default MUI styling and no way to
+            // change it, with nothing in the editor to suggest the value had
+            // been dropped (AGL-1284). Vertical orientation still needs the
+            // flex row, so it goes first and the author can override it.
+            sx: [
+                {
+                    display: vertical ? 'flex' : undefined
+                },
+                ...Array.isArray(rest.sx) ? rest.sx : [
+                    rest.sx
+                ]
+            ],
+            children: [
+                strip,
+                children
+            ]
+        }))
+    });
+});
+TabsElement.displayName = 'AglynTabs';
+/**
+ * One tab's content. Outside a Tabs container it renders plainly rather
+ * than disappearing — a panel dragged out of its tabs would otherwise
+ * vanish from the canvas with no explanation.
+ */ export const TabPanelElement = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { label, aglynDeferred, children } = props, rest = _object_without_properties_loose(props, [
+        "label",
+        "aglynDeferred",
+        "children"
+    ]);
+    const context = useContext(TabsContext);
+    const selected = !context || labelsMatch(label, context.activeLabel);
+    const visible = selected || !!(context == null ? void 0 : context.showAll);
+    /**
+   * With `lazyPanels`, an unopened panel renders its wrapper but not its
+   * children — the wrapper stays so the `aria-controls` target and the
+   * tab ⇄ panel wiring still resolve, and so nothing about the accessible
+   * structure depends on whether the reader has clicked yet.
+   *
+   * `opened` is checked as well as `selected` because a panel that has been
+   * visited stays mounted; only the never-opened ones are skipped.
+   */ const mounted = !context || !context.lazyPanels || context.showAll || selected || context.opened.has(String(label != null ? label : ''));
+    /**
+   * In link mode the strip is a nav, not a tablist (AGL-1312), so a panel
+   * has no tablist to belong to and drops the tab-pattern ARIA rather than
+   * claiming half of it. The id stays — the button that still reveals this
+   * panel points `aria-controls` at it, which is a valid relationship on
+   * its own — and an orphan panel (dragged out of its Tabs, no context)
+   * keeps today's markup untouched.
+   */ const navMode = !!(context == null ? void 0 : context.navMode);
+    return /*#__PURE__*/ _jsxs(Box, _extends({
+        ref: ref,
+        role: navMode ? undefined : 'tabpanel',
+        hidden: !visible,
+        id: `tabpanel-${labelSlug(String(label != null ? label : ''))}`,
+        "aria-labelledby": navMode ? undefined : `tab-${labelSlug(String(label != null ? label : ''))}`
+    }, rest, {
+        // Same merge bug as the Tabs container (AGL-1284): the author's `sx`
+        // was dropped, so a panel could not even have its padding changed.
+        // Order matters — the default padding is first so the author can
+        // override it, and the hide rule is LAST so an authored `display`
+        // can never force a deselected panel back on screen.
+        sx: [
+            {
+                p: 2
+            },
+            ...Array.isArray(rest.sx) ? rest.sx : [
+                rest.sx
+            ],
+            ...visible ? [] : [
+                {
+                    display: 'none'
+                }
+            ]
+        ],
+        children: [
+            (context == null ? void 0 : context.showAll) && !selected ? // Canvas only: says which tab this content belongs to, so a
+            // stack of panels is readable and a label typo is obvious.
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                sx: {
+                    display: 'block',
+                    mb: 0.5
+                },
+                children: label ? `Tab: ${label}` : 'Tab: (no label set)'
+            }) : null,
+            mounted ? aglynDeferred && visible ? // Opened, but its nodes are still in flight (AGL-1287). Only while
+            // VISIBLE — a deferred panel nobody has opened must stay silent, or
+            // every unopened tab would render a spinner into the page.
+            //
+            // Deliberately not a skeleton of the content: a withheld subtree can
+            // be a 50-row table or a paragraph, and this component has no way to
+            // know which, so a shaped skeleton would be a guess that flashes
+            // wrong. `role="status"` announces it to a screen reader, which
+            // otherwise gets a panel that is silently empty for seconds.
+            /*#__PURE__*/ _jsx(Typography, {
+                role: "status",
+                variant: "body2",
+                color: "text.secondary",
+                sx: {
+                    display: 'block',
+                    py: 2
+                },
+                children: 'Loading…'
+            }) : children : null
+        ]
+    }));
+});
+TabPanelElement.displayName = 'AglynTabPanel';
+/** `centered` is a standard-strip-only prop; MUI warns when scrollable. */ const STANDARD_ONLY = {
+    when: 'variant',
+    is: 'scrollable',
+    notMatch: true
+};
+/**
+ * Shows a per-tab link picker only once the label list has that many tabs,
+ * so a three-tab strip offers three pickers rather than eight.
+ *
+ * Expressed as a serialisable `pattern` rather than an `is` predicate:
+ * conditions travel with the component schema, and a function in there is a
+ * live grenade the day a schema is cloned or sent across a boundary. An
+ * "item" is a run without a separator that holds something visible, and a
+ * separator run swallows blank lines, so it counts exactly what
+ * `parseLabels` counts.
+ */ export function atLeastLabels(count) {
+    if (count <= 1) return {
+        when: 'labels',
+        isNotEmpty: true
+    };
+    const item = '[^\\n,]*\\S[^\\n,]*';
+    const separator = '[\\n,][\\s,]*';
+    return {
+        when: 'labels',
+        pattern: `(?:${item}${separator}){${count - 1}}${item}`
+    };
+}
+/**
+ * The "Opens on" field's `resolveProps`: its answers are the element's OWN
+ * tab labels, read from the sibling `labels` field as they are typed
+ * (AGL-3164).
+ *
+ * A picker rather than a typed index or a typed label. An index goes on
+ * meaning "the second tab" after a reorder, with nothing on screen to say
+ * the wrong panel now opens; a typed label breaks on a rename and on every
+ * typo in between. Choosing from the list the author has just written is the
+ * only form of this control someone who does not write code can get right,
+ * which is the whole reason it exists instead of the tabs being reordered by
+ * hand to obtain a behavior.
+ *
+ * The answers follow the label list as it is edited because the field's
+ * `condition` names `labels`: data-driven-forms subscribes a conditional
+ * field to its condition's trigger fields, and that subscription is what
+ * re-runs this.
+ *
+ * A stored label the list no longer holds is offered back as its own option,
+ * named as gone. The element itself already falls back to the first tab, so
+ * the page is never broken by one; but a picker that rendered BLANK would
+ * read as "not set", and the author would never learn that the choice they
+ * made has stopped being honoured — the same reason a Screen picker names a
+ * target the host no longer has (AGL-1893).
+ */ export function opensOnFieldProps(_props, field, formOptions) {
+    var _ref;
+    var _formOptions_getFieldState, _formOptions_getFieldState1, _formOptions_getState_values, _formOptions_getState, _formOptions_getState1, _field_input;
+    // The registered field first, the form's values as the fallback: a field
+    // that has not registered yet has no state, and the values are there from
+    // the first render.
+    const authored = (_ref = formOptions == null ? void 0 : (_formOptions_getFieldState1 = formOptions.getFieldState) == null ? void 0 : (_formOptions_getFieldState = _formOptions_getFieldState1.call(formOptions, 'labels')) == null ? void 0 : _formOptions_getFieldState.value) != null ? _ref : formOptions == null ? void 0 : (_formOptions_getState1 = formOptions.getState) == null ? void 0 : (_formOptions_getState = _formOptions_getState1.call(formOptions)) == null ? void 0 : (_formOptions_getState_values = _formOptions_getState.values) == null ? void 0 : _formOptions_getState_values['labels'];
+    const options = parseLabels(authored).map((label)=>({
+            value: label,
+            label
+        }));
+    const stored = field == null ? void 0 : (_field_input = field.input) == null ? void 0 : _field_input.value;
+    if (typeof stored === 'string' && stored.trim() && !options.some((option)=>labelsMatch(option.value, stored))) {
+        options.push({
+            value: stored,
+            label: `${stored} (no longer a tab)`
+        });
+    }
+    return {
+        options
+    };
+}
+/** "1st", "2nd", "3rd", … for the link fields' own descriptions. */ function ordinal(position) {
+    const suffix = position % 10 === 1 && position !== 11 ? 'st' : position % 10 === 2 && position !== 12 ? 'nd' : position % 10 === 3 && position !== 13 ? 'rd' : 'th';
+    return `${position}${suffix}`;
+}
+/**
+ * One Screen picker per tab position (AGL-1312), the same field the Screen
+ * Link element uses — so a tab's target is chosen from the host's screens
+ * and survives a slug rename, and the attributes panel needs no new UI.
+ *
+ * Deliberately NOT paired with a "link mode" switch: a mode select would
+ * need its default to persist, and an `''` option value cannot (AGL-1191 —
+ * the form strips it before save). Carrying a link IS the mode, per tab,
+ * which is also what makes a mixed row expressible at all.
+ */ const TAB_LINK_FIELDS = Array.from({
+    length: TAB_LINK_SLOTS
+}, (_unused, index)=>{
+    const position = index + 1;
+    return {
+        name: tabLinkProp(position),
+        label: `Tab ${position} link`,
+        description: `Screen the ${ordinal(position)} tab navigates to. A tab with a ` + 'link is a real link — it can be opened in a new tab and search ' + 'engines follow it — and it no longer switches panels. Leave it ' + 'unset for a tab that just reveals its own panel, including the ' + 'tab for the page this row is already on.',
+        component: Aglyn.FieldComponentType.SCREEN_SELECT,
+        condition: atLeastLabels(position)
+    };
+});
+export const tabsSchema = {
+    $id: TABS_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Tabs',
+    description: 'Tab strip whose Tab Panel children each name the tab that reveals ' + 'them.',
+    category: Aglyn.ComponentCategory.NAVIGATION,
+    icon: {
+        path: mdiTab.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    restrictChildren: [
+        Aglyn.LinealDirectiveFlag.LIMIT_TO,
+        {
+            components: [
+                TAB_PANEL_ID
+            ]
+        }
+    ],
+    attributes: [
+        {
+            name: 'labels',
+            label: 'Tabs',
+            description: 'One tab label per line. Each Tab Panel below shows under the ' + 'tab whose label it names.',
+            component: Aglyn.FieldComponentType.TEXTAREA
+        },
+        ...TAB_LINK_FIELDS,
+        {
+            name: 'opensOn',
+            label: 'Opens on',
+            description: 'The tab a visitor lands on. Leave it unset and the first tab ' + 'opens, as it always has. Pick from the tabs above rather than ' + 'reordering them — the strip is the design, and which tab opens ' + 'is not. If the tab named here is later renamed or removed, the ' + 'first tab opens again.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // Nothing to choose on a one-tab strip — and naming `labels` is also
+            // what keeps the answers following the list (see opensOnFieldProps).
+            condition: atLeastLabels(2),
+            resolveProps: opensOnFieldProps,
+            // The corner ✕ is the way back to "the first tab": no option could
+            // carry that meaning, since an `''` value is stripped before save
+            // (AGL-1191) and every other value names a real tab.
+            clearable: true
+        },
+        {
+            name: 'orientation',
+            label: 'Orientation',
+            description: 'Vertical puts the strip beside the panels instead of above them.',
+            component: Aglyn.FieldComponentType.SELECT,
+            // Real sentinels throughout this schema rather than deletions
+            // (AGL-1451): each "(default)" here names MUI's OWN value for that
+            // prop — horizontal, standard, primary — so the option is a real
+            // choice an author may want to pin, not a synonym for "unset".
+            // Spelled `''` they could not persist at all (AGL-1191): picking
+            // Horizontal on a vertical strip silently reverted to vertical.
+            options: [
+                {
+                    value: 'horizontal',
+                    label: 'Horizontal (default)'
+                },
+                {
+                    value: 'vertical',
+                    label: 'Vertical'
+                }
+            ]
+        },
+        {
+            name: 'variant',
+            label: 'Variant',
+            description: 'Scrollable keeps long strips usable on small screens; full width ' + 'divides the available space evenly.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'standard',
+                    label: 'Standard (default)'
+                },
+                {
+                    value: 'scrollable',
+                    label: 'Scrollable'
+                },
+                {
+                    value: 'fullWidth',
+                    label: 'Full width'
+                }
+            ]
+        },
+        {
+            name: 'ssrPanels',
+            label: 'Keep every panel in the page source',
+            description: 'Panels are normally built the first time their tab is opened, ' + 'which keeps big tab sets light. Turn this on when panel content ' + 'appears nowhere else on the page and search engines must be able ' + 'to read it — every panel is then rendered into the page source ' + 'up front, which can make a large tab set much heavier.',
+            component: Aglyn.FieldComponentType.SWITCH
+        },
+        {
+            name: 'centered',
+            label: 'Centered?',
+            description: 'Centers the tabs in the strip.',
+            component: Aglyn.FieldComponentType.SWITCH,
+            // MUI ignores centered on a scrollable strip and warns in dev.
+            condition: STANDARD_ONLY
+        },
+        {
+            name: 'textColor',
+            label: 'Text color',
+            description: 'Theme color of the tab labels.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'primary',
+                    label: 'Primary (default)'
+                },
+                {
+                    value: 'secondary',
+                    label: 'Secondary'
+                },
+                {
+                    value: 'inherit',
+                    label: 'Inherit'
+                }
+            ]
+        },
+        {
+            name: 'indicatorColor',
+            label: 'Indicator color',
+            description: 'Theme color of the underline marking the active tab.',
+            component: Aglyn.FieldComponentType.SELECT,
+            options: [
+                {
+                    value: 'primary',
+                    label: 'Primary (default)'
+                },
+                {
+                    value: 'secondary',
+                    label: 'Secondary'
+                }
+            ]
+        },
+        {
+            name: 'ariaLabel',
+            label: 'Accessible label',
+            description: 'Names the row for screen readers. Default "Tabs". Give a row ' + 'whose tabs link to other screens its own name — it becomes a ' + 'navigation landmark, and two landmarks called the same thing are ' + 'no help to anyone.',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+export const tabPanelSchema = {
+    $id: TAB_PANEL_ID,
+    pluginId: BUNDLE_ID,
+    displayName: 'Tab Panel',
+    description: 'The content shown under one tab.',
+    category: Aglyn.ComponentCategory.NAVIGATION,
+    icon: {
+        path: mdiViewCarousel.path,
+        sx: {
+            color: '#2196f3'
+        }
+    },
+    attributes: [
+        {
+            name: 'label',
+            label: 'Shows under tab',
+            description: "The tab label this panel belongs to — type it exactly as it " + 'appears in the Tabs list above (capitalisation is ignored).',
+            component: Aglyn.FieldComponentType.TEXT_FIELD
+        }
+    ]
+};
+const tabPanel = (label, body)=>({
+        $id: null,
+        componentId: TAB_PANEL_ID,
+        pluginId: BUNDLE_ID,
+        props: {
+            label
+        },
+        nodes: [
+            {
+                $id: null,
+                componentId: 'muiTypography',
+                pluginId: BUNDLE_ID,
+                props: {
+                    variant: 'body2',
+                    children: body
+                }
+            }
+        ]
+    });
+export const tabsPresets = [
+    {
+        // Labels and panels ship already matched: the one place this element
+        // can be misconfigured is never hit on the common path.
+        $id: generatePresetId(TABS_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Tabs',
+        pluginId: BUNDLE_ID,
+        description: 'Three tabs with matching panels, ready to edit',
+        category: Aglyn.ComponentCategory.NAVIGATION,
+        icon: tabsSchema.icon,
+        data: {
+            $id: null,
+            componentId: TABS_ID,
+            pluginId: BUNDLE_ID,
+            props: {
+                labels: 'Overview\nDetails\nFAQ'
+            },
+            nodes: [
+                tabPanel('Overview', 'What this is, in a sentence or two.'),
+                tabPanel('Details', 'The specifics that back up the overview.'),
+                tabPanel('FAQ', 'The questions people actually ask.')
+            ]
+        }
+    },
+    {
+        $id: generatePresetId(TAB_PANEL_ID),
+        type: Aglyn.NodeType.PRESET,
+        displayName: 'Tab Panel',
+        pluginId: BUNDLE_ID,
+        description: 'One more panel to add to an existing Tabs element',
+        category: Aglyn.ComponentCategory.NAVIGATION,
+        icon: tabPanelSchema.icon,
+        data: tabPanel('', 'Name the tab this panel belongs to.')
+    }
+];
+export default TabsElement;
+
+//# sourceMappingURL=tabs.js.map