@aglyn/shared-ui-jsx 1.0.0-beta.229 → 1.0.0-beta.231

package/src/lib/components/searchable-virtual-list.component.d.ts

@@ -0,0 +1,72 @@
+import { type ReactNode } from 'react';
+/** One choice of a list's filter chips. */
+export interface SearchableVirtualListFilterOption {
+    value: string;
+    label: string;
+}
+export interface SearchableVirtualListProps<T> {
+    /** The rows to show, already searched and filtered by the caller. */
+    items: readonly T[];
+    itemKey: (item: T, index: number) => string;
+    renderItem: (item: T, index: number) => ReactNode;
+    /** The search box; the caller decides what a word matches. */
+    search: {
+        value: string;
+        onChange: (value: string) => void;
+        label: string;
+        placeholder?: string;
+    };
+    /**
+     * One row of chips that narrows the list to one choice, with an "All" chip
+     * first. Absent, the list has no chips.
+     */
+    filters?: {
+        label: string;
+        options: readonly SearchableVirtualListFilterOption[];
+        /** The chosen option's value, or `''` for all. */
+        value: string;
+        onChange: (value: string) => void;
+        allLabel?: string;
+    };
+    /** Scrolls with the rows, above them: a pinned section, a heading. */
+    header?: ReactNode;
+    /** A line under the controls, such as how many rows match. */
+    summary?: ReactNode;
+    loading?: boolean;
+    /** Placeholder rows while loading. */
+    loadingRows?: number;
+    /** The height of a placeholder row, in px. */
+    loadingRowHeight?: number;
+    error?: {
+        message: string;
+        onRetry?: () => void;
+    } | null;
+    /** What an empty list says; shown when `items` is empty and nothing is loading. */
+    empty: {
+        label: ReactNode;
+        description?: ReactNode;
+        action?: ReactNode;
+    };
+    /**
+     * The list's height. Absent, it fills its parent, which must give it one:
+     * a flex column with a height, a dialog's content.
+     */
+    height?: number | string;
+    /** The gap between rows, in theme spacing units. */
+    gap?: number;
+}
+/**
+ * A long list a person searches, narrows by a row of chips and scrolls, of
+ * which only the rows on screen are drawn (AGL-3656, first for the font
+ * picker's 1,950 families): the search box, the chips, the list, and its
+ * loading, failed and empty states, in the console's own components.
+ *
+ * The caller owns the words and the chosen chip and hands in the rows they
+ * leave, so the list never decides what a search matches. NOT in the barrel:
+ * subpath-import it (`@aglyn/shared-ui-jsx/components/searchable-virtual-list.component`).
+ */
+export declare function SearchableVirtualList<T>(props: SearchableVirtualListProps<T>): import("react").JSX.Element;
+export declare namespace SearchableVirtualList {
+    var displayName: string;
+}
+export default SearchableVirtualList;

package/src/lib/components/searchable-virtual-list.component.js

@@ -0,0 +1,212 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { mdiClose, mdiMagnify } from "@aglyn/shared-data-mdi";
+import { Alert, Box, Button, Chip, IconButton, InputAdornment, Skeleton, Stack, TextField, Typography } from "@mui/material";
+import { useCallback } from "react";
+import { Virtuoso } from "react-virtuoso";
+import EmptyState from "./empty-state.component.js";
+import MdiIcon from "./mdi-icon/mdi-icon.js";
+/**
+ * A long list a person searches, narrows by a row of chips and scrolls, of
+ * which only the rows on screen are drawn (AGL-3656, first for the font
+ * picker's 1,950 families): the search box, the chips, the list, and its
+ * loading, failed and empty states, in the console's own components.
+ *
+ * The caller owns the words and the chosen chip and hands in the rows they
+ * leave, so the list never decides what a search matches. NOT in the barrel:
+ * subpath-import it (`@aglyn/shared-ui-jsx/components/searchable-virtual-list.component`).
+ */ export function SearchableVirtualList(props) {
+    var _filters_allLabel;
+    const { items, itemKey, renderItem, search, filters, header, summary, loading = false, loadingRows = 6, loadingRowHeight = 96, error = null, empty, height, gap = 1 } = props;
+    const computeItemKey = useCallback((index)=>itemKey(items[index], index), [
+        itemKey,
+        items
+    ]);
+    const itemContent = useCallback((index)=>/*#__PURE__*/ _jsx(Box, {
+            sx: {
+                pb: gap
+            },
+            children: renderItem(items[index], index)
+        }), [
+        gap,
+        items,
+        renderItem
+    ]);
+    const Header = useCallback(()=>/*#__PURE__*/ _jsx(_Fragment, {
+            children: header != null ? header : null
+        }), [
+        header
+    ]);
+    let body;
+    if (error) {
+        body = /*#__PURE__*/ _jsx(Alert, {
+            severity: "error",
+            action: error.onRetry ? /*#__PURE__*/ _jsx(Button, {
+                color: "inherit",
+                size: "small",
+                onClick: error.onRetry,
+                children: 'Try again'
+            }) : undefined,
+            children: error.message
+        });
+    } else if (loading) {
+        body = /*#__PURE__*/ _jsx(Stack, {
+            spacing: gap,
+            "aria-busy": true,
+            "aria-label": "Loading",
+            children: Array.from({
+                length: loadingRows
+            }, (_, index)=>/*#__PURE__*/ _jsx(Skeleton, {
+                    variant: "rounded",
+                    height: loadingRowHeight
+                }, index))
+        });
+    } else if (!items.length) {
+        body = /*#__PURE__*/ _jsxs(Box, {
+            children: [
+                header,
+                /*#__PURE__*/ _jsx(EmptyState, {
+                    compact: true,
+                    label: empty.label,
+                    description: empty.description,
+                    action: empty.action
+                })
+            ]
+        });
+    } else {
+        body = /*#__PURE__*/ _jsx(Virtuoso, {
+            // Fills the column it is given, or the height it is told.
+            style: height === undefined ? {
+                flex: '1 1 auto',
+                minHeight: 0
+            } : {
+                height: '100%'
+            },
+            totalCount: items.length,
+            computeItemKey: computeItemKey,
+            itemContent: itemContent,
+            components: header ? {
+                Header
+            } : undefined
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 1.5,
+        sx: {
+            minHeight: 0,
+            minWidth: 0,
+            width: '100%',
+            flex: height === undefined ? '1 1 auto' : undefined
+        },
+        children: [
+            /*#__PURE__*/ _jsx(TextField, {
+                size: "small",
+                fullWidth: true,
+                // A text box and not `type="search"`: the browser's own clear
+                // control would sit beside this one.
+                type: "text",
+                label: search.label,
+                placeholder: search.placeholder,
+                value: search.value,
+                onChange: (event)=>search.onChange(event.target.value),
+                slotProps: {
+                    htmlInput: {
+                        inputMode: 'search',
+                        enterKeyHint: 'search'
+                    },
+                    input: {
+                        startAdornment: /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "start",
+                            children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                path: mdiMagnify.path
+                            })
+                        }),
+                        endAdornment: search.value ? /*#__PURE__*/ _jsx(InputAdornment, {
+                            position: "end",
+                            children: /*#__PURE__*/ _jsx(IconButton, {
+                                size: "small",
+                                edge: "end",
+                                "aria-label": "Clear search",
+                                onClick: ()=>search.onChange(''),
+                                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                                    path: mdiClose.path
+                                })
+                            })
+                        }) : undefined
+                    }
+                }
+            }),
+            filters ? /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                spacing: 1,
+                role: "radiogroup",
+                "aria-label": filters.label,
+                sx: {
+                    // One row that scrolls sideways on a phone rather than wrapping
+                    // into a block of chips above a short list.
+                    overflowX: 'auto',
+                    flexWrap: 'nowrap',
+                    pb: 0.5,
+                    scrollbarWidth: 'none',
+                    '& > *': {
+                        flexShrink: 0
+                    }
+                },
+                children: [
+                    {
+                        value: '',
+                        label: (_filters_allLabel = filters.allLabel) != null ? _filters_allLabel : 'All'
+                    },
+                    ...filters.options
+                ].map((option)=>{
+                    const selected = filters.value === option.value;
+                    return /*#__PURE__*/ _jsx(Chip, {
+                        role: "radio",
+                        "aria-checked": selected,
+                        "aria-label": option.label,
+                        label: option.label,
+                        size: "small",
+                        color: selected ? 'primary' : 'default',
+                        variant: selected ? 'filled' : 'outlined',
+                        onClick: ()=>filters.onChange(option.value)
+                    }, option.value || '__all');
+                })
+            }) : null,
+            summary ? /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
+                color: "text.secondary",
+                component: "div",
+                children: summary
+            }) : null,
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    minHeight: 0,
+                    flex: height === undefined ? '1 1 auto' : undefined,
+                    height: height === undefined ? undefined : height,
+                    display: 'flex',
+                    flexDirection: 'column'
+                },
+                children: body
+            })
+        ]
+    });
+}
+SearchableVirtualList.displayName = 'SearchableVirtualList';
+export default SearchableVirtualList;
+
+//# sourceMappingURL=searchable-virtual-list.component.js.map

package/src/lib/components/searchable-virtual-list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/searchable-virtual-list.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport { mdiClose, mdiMagnify } from '@aglyn/shared-data-mdi'\nimport {\n  Alert,\n  Box,\n  Button,\n  Chip,\n  IconButton,\n  InputAdornment,\n  Skeleton,\n  Stack,\n  TextField,\n  Typography,\n} from '@mui/material'\nimport { type ReactNode, useCallback } from 'react'\nimport { Virtuoso } from 'react-virtuoso'\nimport EmptyState from './empty-state.component'\nimport MdiIcon from './mdi-icon/mdi-icon'\n\n/** One choice of a list's filter chips. */\nexport interface SearchableVirtualListFilterOption {\n  value: string\n  label: string\n}\n\nexport interface SearchableVirtualListProps<T> {\n  /** The rows to show, already searched and filtered by the caller. */\n  items: readonly T[]\n  itemKey: (item: T, index: number) => string\n  renderItem: (item: T, index: number) => ReactNode\n  /** The search box; the caller decides what a word matches. */\n  search: {\n    value: string\n    onChange: (value: string) => void\n    label: string\n    placeholder?: string\n  }\n  /**\n   * One row of chips that narrows the list to one choice, with an \"All\" chip\n   * first. Absent, the list has no chips.\n   */\n  filters?: {\n    label: string\n    options: readonly SearchableVirtualListFilterOption[]\n    /** The chosen option's value, or `''` for all. */\n    value: string\n    onChange: (value: string) => void\n    allLabel?: string\n  }\n  /** Scrolls with the rows, above them: a pinned section, a heading. */\n  header?: ReactNode\n  /** A line under the controls, such as how many rows match. */\n  summary?: ReactNode\n  loading?: boolean\n  /** Placeholder rows while loading. */\n  loadingRows?: number\n  /** The height of a placeholder row, in px. */\n  loadingRowHeight?: number\n  error?: { message: string; onRetry?: () => void } | null\n  /** What an empty list says; shown when `items` is empty and nothing is loading. */\n  empty: { label: ReactNode; description?: ReactNode; action?: ReactNode }\n  /**\n   * The list's height. Absent, it fills its parent, which must give it one:\n   * a flex column with a height, a dialog's content.\n   */\n  height?: number | string\n  /** The gap between rows, in theme spacing units. */\n  gap?: number\n}\n\n/**\n * A long list a person searches, narrows by a row of chips and scrolls, of\n * which only the rows on screen are drawn (AGL-3656, first for the font\n * picker's 1,950 families): the search box, the chips, the list, and its\n * loading, failed and empty states, in the console's own components.\n *\n * The caller owns the words and the chosen chip and hands in the rows they\n * leave, so the list never decides what a search matches. NOT in the barrel:\n * subpath-import it (`@aglyn/shared-ui-jsx/components/searchable-virtual-list.component`).\n */\nexport function SearchableVirtualList<T>(props: SearchableVirtualListProps<T>) {\n  const {\n    items,\n    itemKey,\n    renderItem,\n    search,\n    filters,\n    header,\n    summary,\n    loading = false,\n    loadingRows = 6,\n    loadingRowHeight = 96,\n    error = null,\n    empty,\n    height,\n    gap = 1,\n  } = props\n  const computeItemKey = useCallback(\n    (index: number) => itemKey(items[index] as T, index),\n    [itemKey, items],\n  )\n  const itemContent = useCallback(\n    (index: number) => (\n      <Box sx={{ pb: gap }}>{renderItem(items[index] as T, index)}</Box>\n    ),\n    [gap, items, renderItem],\n  )\n  const Header = useCallback(() => <>{header ?? null}</>, [header])\n\n  let body: ReactNode\n  if (error) {\n    body = (\n      <Alert\n        severity=\"error\"\n        action={\n          error.onRetry ? (\n            <Button color=\"inherit\" size=\"small\" onClick={error.onRetry}>\n              {'Try again'}\n            </Button>\n          ) : undefined\n        }\n      >\n        {error.message}\n      </Alert>\n    )\n  } else if (loading) {\n    body = (\n      <Stack spacing={gap} aria-busy aria-label=\"Loading\">\n        {Array.from({ length: loadingRows }, (_, index) => (\n          <Skeleton key={index} variant=\"rounded\" height={loadingRowHeight} />\n        ))}\n      </Stack>\n    )\n  } else if (!items.length) {\n    body = (\n      <Box>\n        {header}\n        <EmptyState compact label={empty.label} description={empty.description} action={empty.action} />\n      </Box>\n    )\n  } else {\n    body = (\n      <Virtuoso\n        // Fills the column it is given, or the height it is told.\n        style={height === undefined ? { flex: '1 1 auto', minHeight: 0 } : { height: '100%' }}\n        totalCount={items.length}\n        computeItemKey={computeItemKey}\n        itemContent={itemContent}\n        components={header ? { Header } : undefined}\n      />\n    )\n  }\n\n  return (\n    <Stack\n      spacing={1.5}\n      sx={{ minHeight: 0, minWidth: 0, width: '100%', flex: height === undefined ? '1 1 auto' : undefined }}\n    >\n      <TextField\n        size=\"small\"\n        fullWidth\n        // A text box and not `type=\"search\"`: the browser's own clear\n        // control would sit beside this one.\n        type=\"text\"\n        label={search.label}\n        placeholder={search.placeholder}\n        value={search.value}\n        onChange={(event) => search.onChange(event.target.value)}\n        slotProps={{\n          htmlInput: { inputMode: 'search', enterKeyHint: 'search' },\n          input: {\n            startAdornment: (\n              <InputAdornment position=\"start\">\n                <MdiIcon path={mdiMagnify.path} />\n              </InputAdornment>\n            ),\n            endAdornment: search.value ? (\n              <InputAdornment position=\"end\">\n                <IconButton\n                  size=\"small\"\n                  edge=\"end\"\n                  aria-label=\"Clear search\"\n                  onClick={() => search.onChange('')}\n                >\n                  <MdiIcon path={mdiClose.path} />\n                </IconButton>\n              </InputAdornment>\n            ) : undefined,\n          },\n        }}\n      />\n      {filters ? (\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          role=\"radiogroup\"\n          aria-label={filters.label}\n          sx={{\n            // One row that scrolls sideways on a phone rather than wrapping\n            // into a block of chips above a short list.\n            overflowX: 'auto',\n            flexWrap: 'nowrap',\n            pb: 0.5,\n            scrollbarWidth: 'none',\n            '& > *': { flexShrink: 0 },\n          }}\n        >\n          {[{ value: '', label: filters.allLabel ?? 'All' }, ...filters.options].map((option) => {\n            const selected = filters.value === option.value\n            return (\n              <Chip\n                key={option.value || '__all'}\n                role=\"radio\"\n                aria-checked={selected}\n                aria-label={option.label}\n                label={option.label}\n                size=\"small\"\n                color={selected ? 'primary' : 'default'}\n                variant={selected ? 'filled' : 'outlined'}\n                onClick={() => filters.onChange(option.value)}\n              />\n            )\n          })}\n        </Stack>\n      ) : null}\n      {summary ? (\n        <Typography variant=\"caption\" color=\"text.secondary\" component=\"div\">\n          {summary}\n        </Typography>\n      ) : null}\n      <Box\n        sx={{\n          minHeight: 0,\n          flex: height === undefined ? '1 1 auto' : undefined,\n          height: height === undefined ? undefined : height,\n          display: 'flex',\n          flexDirection: 'column',\n        }}\n      >\n        {body}\n      </Box>\n    </Stack>\n  )\n}\nSearchableVirtualList.displayName = 'SearchableVirtualList'\n\nexport default SearchableVirtualList\n"],"names":["mdiClose","mdiMagnify","Alert","Box","Button","Chip","IconButton","InputAdornment","Skeleton","Stack","TextField","Typography","useCallback","Virtuoso","EmptyState","MdiIcon","SearchableVirtualList","props","filters","items","itemKey","renderItem","search","header","summary","loading","loadingRows","loadingRowHeight","error","empty","height","gap","computeItemKey","index","itemContent","sx","pb","Header","body","severity","action","onRetry","color","size","onClick","undefined","message","spacing","aria-busy","aria-label","Array","from","length","_","variant","compact","label","description","style","flex","minHeight","totalCount","components","minWidth","width","fullWidth","type","placeholder","value","onChange","event","target","slotProps","htmlInput","inputMode","enterKeyHint","input","startAdornment","position","path","endAdornment","edge","direction","role","overflowX","flexWrap","scrollbarWidth","flexShrink","allLabel","options","map","option","selected","aria-checked","component","display","flexDirection","displayName"],"mappings":"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"}

package/src/lib/components/site-live-notice.component.d.ts

@@ -0,0 +1,39 @@
+/**
+ * @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.
+ */
+export declare const SITE_LIVE_NOTICE_TITLE = "Your site is live";
+export declare const SITE_LIVE_NOTICE_BODY = "Your pages are published, and anyone can visit your site now.";
+export interface SiteLiveNoticeProps {
+    /** The site's public address; without one the notice says it is live and offers only the pages. */
+    liveUrl: string | null;
+    /** The console's page list for the site, where the pages are edited. */
+    pagesHref: string | null;
+    /** The heading's level, for the page or dialog it sits in. */
+    headingComponent?: 'h1' | 'h2' | 'h3';
+}
+/**
+ * What a person sees the moment their site goes live: that it is live, the
+ * address visitors use, and the two things to do next — look at it, or edit
+ * its pages. Shared by every path that publishes a new site (the starter, the
+ * guided AI start) so a site goes live in the same words whichever way it
+ * was made.
+ *
+ * It exists because nothing said so. A starter site is published the moment
+ * it is chosen, and a person who was never told read their analytics window
+ * ("14 days") as a countdown to launch.
+ */
+export declare function SiteLiveNotice({ liveUrl, pagesHref, headingComponent }: SiteLiveNoticeProps): import("react").JSX.Element;
+export default SiteLiveNotice;

package/src/lib/components/site-live-notice.component.js

@@ -0,0 +1,95 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import Link from "@mui/material/Link";
+import Stack from "@mui/material/Stack";
+import Typography from "@mui/material/Typography";
+import AppLink from "./app-link.js";
+export const SITE_LIVE_NOTICE_TITLE = 'Your site is live';
+export const SITE_LIVE_NOTICE_BODY = 'Your pages are published, and anyone can visit your site now.';
+/**
+ * What a person sees the moment their site goes live: that it is live, the
+ * address visitors use, and the two things to do next — look at it, or edit
+ * its pages. Shared by every path that publishes a new site (the starter, the
+ * guided AI start) so a site goes live in the same words whichever way it
+ * was made.
+ *
+ * It exists because nothing said so. A starter site is published the moment
+ * it is chosen, and a person who was never told read their analytics window
+ * ("14 days") as a countdown to launch.
+ */ export function SiteLiveNotice({ liveUrl, pagesHref, headingComponent = 'h2' }) {
+    return /*#__PURE__*/ _jsxs(Stack, {
+        spacing: 2,
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                children: [
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h5",
+                        component: headingComponent,
+                        children: SITE_LIVE_NOTICE_TITLE
+                    }),
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "body1",
+                        color: "text.secondary",
+                        children: SITE_LIVE_NOTICE_BODY
+                    }),
+                    liveUrl ? /*#__PURE__*/ _jsx(Link, {
+                        href: liveUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        variant: "body1",
+                        sx: {
+                            wordBreak: 'break-all'
+                        },
+                        children: liveUrl.replace(/^https?:\/\//, '')
+                    }) : null
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: {
+                    xs: 'column',
+                    sm: 'row'
+                },
+                spacing: 2,
+                children: [
+                    liveUrl ? // The live site, in a tab of its own: the console stays where it is.
+                    /*#__PURE__*/ _jsx(Button, {
+                        variant: "contained",
+                        size: "large",
+                        component: "a",
+                        href: liveUrl,
+                        target: "_blank",
+                        rel: "noopener noreferrer",
+                        children: 'View your site'
+                    }) : null,
+                    pagesHref ? /*#__PURE__*/ _jsx(Button, {
+                        variant: liveUrl ? 'outlined' : 'contained',
+                        size: "large",
+                        component: AppLink,
+                        href: pagesHref,
+                        children: 'Edit your pages'
+                    }) : null
+                ]
+            })
+        ]
+    });
+}
+export default SiteLiveNotice;
+
+//# sourceMappingURL=site-live-notice.component.js.map

package/src/lib/components/site-live-notice.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/site-live-notice.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport Button from '@mui/material/Button'\nimport Link from '@mui/material/Link'\nimport Stack from '@mui/material/Stack'\nimport Typography from '@mui/material/Typography'\nimport AppLink from './app-link'\n\nexport const SITE_LIVE_NOTICE_TITLE = 'Your site is live'\nexport const SITE_LIVE_NOTICE_BODY = 'Your pages are published, and anyone can visit your site now.'\n\nexport interface SiteLiveNoticeProps {\n  /** The site's public address; without one the notice says it is live and offers only the pages. */\n  liveUrl: string | null\n  /** The console's page list for the site, where the pages are edited. */\n  pagesHref: string | null\n  /** The heading's level, for the page or dialog it sits in. */\n  headingComponent?: 'h1' | 'h2' | 'h3'\n}\n\n/**\n * What a person sees the moment their site goes live: that it is live, the\n * address visitors use, and the two things to do next — look at it, or edit\n * its pages. Shared by every path that publishes a new site (the starter, the\n * guided AI start) so a site goes live in the same words whichever way it\n * was made.\n *\n * It exists because nothing said so. A starter site is published the moment\n * it is chosen, and a person who was never told read their analytics window\n * (\"14 days\") as a countdown to launch.\n */\nexport function SiteLiveNotice({ liveUrl, pagesHref, headingComponent = 'h2' }: SiteLiveNoticeProps) {\n  return (\n    <Stack spacing={2}>\n      <Stack spacing={0.5}>\n        <Typography variant=\"h5\" component={headingComponent}>\n          {SITE_LIVE_NOTICE_TITLE}\n        </Typography>\n        <Typography variant=\"body1\" color=\"text.secondary\">\n          {SITE_LIVE_NOTICE_BODY}\n        </Typography>\n        {liveUrl ? (\n          <Link href={liveUrl} target=\"_blank\" rel=\"noopener noreferrer\" variant=\"body1\" sx={{ wordBreak: 'break-all' }}>\n            {liveUrl.replace(/^https?:\\/\\//, '')}\n          </Link>\n        ) : null}\n      </Stack>\n      <Stack direction={{ xs: 'column', sm: 'row' }} spacing={2}>\n        {liveUrl ? (\n          // The live site, in a tab of its own: the console stays where it is.\n          <Button variant=\"contained\" size=\"large\" component=\"a\" href={liveUrl} target=\"_blank\" rel=\"noopener noreferrer\">\n            {'View your site'}\n          </Button>\n        ) : null}\n        {pagesHref ? (\n          <Button variant={liveUrl ? 'outlined' : 'contained'} size=\"large\" component={AppLink} href={pagesHref}>\n            {'Edit your pages'}\n          </Button>\n        ) : null}\n      </Stack>\n    </Stack>\n  )\n}\n\nexport default SiteLiveNotice\n"],"names":["Button","Link","Stack","Typography","AppLink","SITE_LIVE_NOTICE_TITLE","SITE_LIVE_NOTICE_BODY","SiteLiveNotice","liveUrl","pagesHref","headingComponent","spacing","variant","component","color","href","target","rel","sx","wordBreak","replace","direction","xs","sm","size"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,OAAOA,YAAY,uBAAsB;AACzC,OAAOC,UAAU,qBAAoB;AACrC,OAAOC,WAAW,sBAAqB;AACvC,OAAOC,gBAAgB,2BAA0B;AACjD,OAAOC,aAAa,gBAAY;AAEhC,OAAO,MAAMC,yBAAyB,oBAAmB;AACzD,OAAO,MAAMC,wBAAwB,gEAA+D;AAWpG;;;;;;;;;;CAUC,GACD,OAAO,SAASC,eAAe,EAAEC,OAAO,EAAEC,SAAS,EAAEC,mBAAmB,IAAI,EAAuB;IACjG,qBACE,MAACR;QAAMS,SAAS;;0BACd,MAACT;gBAAMS,SAAS;;kCACd,KAACR;wBAAWS,SAAQ;wBAAKC,WAAWH;kCACjCL;;kCAEH,KAACF;wBAAWS,SAAQ;wBAAQE,OAAM;kCAC/BR;;oBAEFE,wBACC,KAACP;wBAAKc,MAAMP;wBAASQ,QAAO;wBAASC,KAAI;wBAAsBL,SAAQ;wBAAQM,IAAI;4BAAEC,WAAW;wBAAY;kCACzGX,QAAQY,OAAO,CAAC,gBAAgB;yBAEjC;;;0BAEN,MAAClB;gBAAMmB,WAAW;oBAAEC,IAAI;oBAAUC,IAAI;gBAAM;gBAAGZ,SAAS;;oBACrDH,UACC,qEAAqE;kCACrE,KAACR;wBAAOY,SAAQ;wBAAYY,MAAK;wBAAQX,WAAU;wBAAIE,MAAMP;wBAASQ,QAAO;wBAASC,KAAI;kCACvF;yBAED;oBACHR,0BACC,KAACT;wBAAOY,SAASJ,UAAU,aAAa;wBAAagB,MAAK;wBAAQX,WAAWT;wBAASW,MAAMN;kCACzF;yBAED;;;;;AAIZ;AAEA,eAAeF,eAAc"}

package/src/lib/components/status-chip.component.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+/**
+ * What a status says about the thing it labels. The five tones are the
+ * theme's own palette roles, so a status reads the same in every card.
+ */
+export type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
+export interface StatusChipProps {
+    label: string;
+    tone?: StatusTone;
+    /** An icon before the label, such as an `MdiIcon`. */
+    icon?: ReactElement;
+    /** Outlined for a quiet status beside other content; filled to stand out. */
+    variant?: 'filled' | 'outlined';
+    'data-testid'?: string;
+}
+/**
+ * A record's state as a small chip — On, Connected, Needs attention
+ * (AGL-3637). Plugins mapped each status to a hand-picked MUI `Chip` color
+ * per card, and the same state came out in different colors on different
+ * cards; a tone names what the state means and the theme picks the color.
+ */
+export declare function StatusChip(props: StatusChipProps): import("react").JSX.Element;
+export declare namespace StatusChip {
+    var displayName: string;
+}
+export default StatusChip;

package/src/lib/components/status-chip.component.js

@@ -0,0 +1,48 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { _ as _extends } from "@swc/helpers/_/_extends";
+import { jsx as _jsx } from "react/jsx-runtime";
+import Chip from "@mui/material/Chip";
+const TONE_COLOR = {
+    neutral: 'default',
+    info: 'info',
+    success: 'success',
+    warning: 'warning',
+    error: 'error'
+};
+/**
+ * A record's state as a small chip — On, Connected, Needs attention
+ * (AGL-3637). Plugins mapped each status to a hand-picked MUI `Chip` color
+ * per card, and the same state came out in different colors on different
+ * cards; a tone names what the state means and the theme picks the color.
+ */ export function StatusChip(props) {
+    const { label, tone = 'neutral', icon, variant = 'filled' } = props;
+    return /*#__PURE__*/ _jsx(Chip, _extends({
+        size: "small",
+        label: label,
+        color: TONE_COLOR[tone],
+        variant: variant
+    }, icon ? {
+        icon
+    } : {}, {
+        "data-testid": props['data-testid']
+    }));
+}
+StatusChip.displayName = 'StatusChip';
+export default StatusChip;
+
+//# sourceMappingURL=status-chip.component.js.map

package/src/lib/components/status-chip.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/status-chip.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n'use client'\n\nimport Chip, { type ChipProps } from '@mui/material/Chip'\nimport type { ReactElement } from 'react'\n\n/**\n * What a status says about the thing it labels. The five tones are the\n * theme's own palette roles, so a status reads the same in every card.\n */\nexport type StatusTone = 'neutral' | 'info' | 'success' | 'warning' | 'error'\n\nconst TONE_COLOR: Readonly<Record<StatusTone, ChipProps['color']>> = {\n  neutral: 'default',\n  info: 'info',\n  success: 'success',\n  warning: 'warning',\n  error: 'error',\n}\n\nexport interface StatusChipProps {\n  label: string\n  tone?: StatusTone\n  /** An icon before the label, such as an `MdiIcon`. */\n  icon?: ReactElement\n  /** Outlined for a quiet status beside other content; filled to stand out. */\n  variant?: 'filled' | 'outlined'\n  'data-testid'?: string\n}\n\n/**\n * A record's state as a small chip — On, Connected, Needs attention\n * (AGL-3637). Plugins mapped each status to a hand-picked MUI `Chip` color\n * per card, and the same state came out in different colors on different\n * cards; a tone names what the state means and the theme picks the color.\n */\nexport function StatusChip(props: StatusChipProps) {\n  const { label, tone = 'neutral', icon, variant = 'filled' } = props\n  return (\n    <Chip\n      size=\"small\"\n      label={label}\n      color={TONE_COLOR[tone]}\n      variant={variant}\n      {...(icon ? { icon } : {})}\n      data-testid={props['data-testid']}\n    />\n  )\n}\nStatusChip.displayName = 'StatusChip'\n\nexport default StatusChip\n"],"names":["Chip","TONE_COLOR","neutral","info","success","warning","error","StatusChip","props","label","tone","icon","variant","size","color","data-testid","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GACD;;;AAEA,OAAOA,UAA8B,qBAAoB;AASzD,MAAMC,aAA+D;IACnEC,SAAS;IACTC,MAAM;IACNC,SAAS;IACTC,SAAS;IACTC,OAAO;AACT;AAYA;;;;;CAKC,GACD,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,KAAK,EAAEC,OAAO,SAAS,EAAEC,IAAI,EAAEC,UAAU,QAAQ,EAAE,GAAGJ;IAC9D,qBACE,KAACR;QACCa,MAAK;QACLJ,OAAOA;QACPK,OAAOb,UAAU,CAACS,KAAK;QACvBE,SAASA;OACJD,OAAO;QAAEA;IAAK,IAAI,CAAC;QACxBI,eAAaP,KAAK,CAAC,cAAc;;AAGvC;AACAD,WAAWS,WAAW,GAAG;AAEzB,eAAeT,WAAU"}

package/src/lib/const/list-filter-sentence.d.ts

@@ -14,27 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import type { ListFilterField } from './list-filter';
-import type { ListFilterClause, ListFilterOption } from './list-grid-filter';
-/**
- * How an operator reads on a chip or in a sentence — "Owner is Dana",
- * "Created on or after 1 Jan". One map so every list that shows its
- * clauses back spells them the same way; an operator nothing here names
- * is shown as itself rather than hidden.
- */
-export declare function listFilterOperatorLabel(op: string): string;
-export declare const listFilterDay: (raw: string) => Date;
-/**
- * How a clause reads as a sentence — "Owner is Dana", "Created on or after
- * 1 Jan", "Reason is any of Bounced, Complained": its header, its operator,
- * and its value by the label of the option it names.
- *
- * ONE wording, used by the chips over a list and by the notices that say a
- * clause was not applied (`listQueryRefusals`), so the two cannot describe
- * the same clause differently.
- */
-export declare function listFilterClauseSentence(clause: ListFilterClause, context: {
-    fields: readonly ListFilterField[];
-    headers?: Readonly<Record<string, string>>;
-    options?: Readonly<Record<string, readonly ListFilterOption[]>>;
-}): string;
+export * from '@aglyn/shared-util-tools/list-query/list-filter-sentence';