@12-apps/ui 6.10.1 → 6.11.1

package/dist/chunk-XBS4HWQU.js

@@ -0,0 +1,131 @@
+import {
+  FilterChips,
+  PALETTE_CARD_SX,
+  PaletteBody,
+  PaletteInput,
+  PaletteScrollArea,
+  Paper,
+  createKeyDownHandler,
+  ghostRemainder
+} from "./chunk-ZZ35CIK7.js";
+
+// src/components/form/SearchPalette/SearchPalette.tsx
+import React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_MAX_ITEMS = 5;
+function resolveOpts(props) {
+  return {
+    maxItems: props.maxItems ?? DEFAULT_MAX_ITEMS,
+    filters: props.filters ?? [],
+    activeFilterIds: props.activeFilterIds ?? [],
+    isLoading: Boolean(props.isLoading),
+    showGhostText: props.showGhostText ?? true,
+    autoFocus: props.autoFocus ?? true
+  };
+}
+function resolveText(props) {
+  return {
+    submitAllLabel: props.submitAllLabel,
+    submitKeyLabel: props.submitKeyLabel,
+    noResultsLabel: props.noResultsLabel,
+    placeholder: props.placeholder,
+    dataTestId: props.dataTestId ?? "search-palette"
+  };
+}
+function SearchPalette(props) {
+  const opts = resolveOpts(props);
+  const text = resolveText(props);
+  const trimmed = props.value.trim();
+  const hasQuery = trimmed.length > 0;
+  const visible = props.items.slice(0, opts.maxItems);
+  const showFooter = Boolean(props.onSubmitAll) && hasQuery;
+  const rowCount = visible.length + (showFooter ? 1 : 0);
+  const footerIndex = showFooter ? visible.length : -1;
+  const [activeIndex, setActiveIndex] = React.useState(0);
+  React.useEffect(() => {
+    setActiveIndex((i) => rowCount === 0 ? 0 : Math.min(i, rowCount - 1));
+  }, [rowCount]);
+  const top = visible[0];
+  const ghost = opts.showGhostText && hasQuery && top ? ghostRemainder(props.getPrimary(top), props.value) : "";
+  const onKeyDown = createKeyDownHandler({
+    rowCount,
+    activeIndex,
+    footerIndex,
+    visible,
+    hasQuery,
+    ghost,
+    top,
+    trimmed,
+    getPrimary: props.getPrimary,
+    onChange: props.onChange,
+    onSelect: props.onSelect,
+    onSubmitAll: props.onSubmitAll,
+    onClose: props.onClose,
+    setActiveIndex
+  });
+  return /* @__PURE__ */ jsxs(
+    Paper,
+    {
+      elevation: 8,
+      className: props.className,
+      "data-testid": text.dataTestId,
+      sx: PALETTE_CARD_SX,
+      children: [
+        /* @__PURE__ */ jsx(
+          PaletteInput,
+          {
+            value: props.value,
+            ghost,
+            isLoading: opts.isLoading,
+            autoFocus: opts.autoFocus,
+            placeholder: text.placeholder,
+            inputAriaLabel: props.inputAriaLabel,
+            hasQuery,
+            onChange: props.onChange,
+            onKeyDown
+          }
+        ),
+        opts.filters.length > 0 && /* @__PURE__ */ jsx(
+          FilterChips,
+          {
+            filters: opts.filters,
+            activeFilterIds: opts.activeFilterIds,
+            onToggleFilter: props.onToggleFilter
+          }
+        ),
+        /* @__PURE__ */ jsx(PaletteScrollArea, { children: /* @__PURE__ */ jsx(
+          PaletteBody,
+          {
+            hasQuery,
+            emptyQueryContent: props.emptyQueryContent,
+            visible,
+            isLoading: opts.isLoading,
+            noResultsLabel: text.noResultsLabel,
+            showFooter,
+            footerIndex,
+            activeIndex,
+            trimmed,
+            submitAllLabel: text.submitAllLabel,
+            submitKeyLabel: text.submitKeyLabel,
+            getKey: props.getKey,
+            getPrimary: props.getPrimary,
+            getSecondary: props.getSecondary,
+            getLead: props.getLead,
+            getTrailing: props.getTrailing,
+            onSelect: props.onSelect,
+            onSubmitAll: props.onSubmitAll,
+            setActiveIndex
+          }
+        ) })
+      ]
+    }
+  );
+}
+SearchPalette.displayName = "SearchPalette";
+var SearchPalette_default = SearchPalette;
+
+export {
+  SearchPalette,
+  SearchPalette_default
+};
+//# sourceMappingURL=chunk-XBS4HWQU.js.map

package/dist/chunk-XBS4HWQU.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/SearchPalette/SearchPalette.tsx"],"sourcesContent":["import React from 'react';\n\nimport {\n  createKeyDownHandler,\n  FilterChips,\n  ghostRemainder,\n  PALETTE_CARD_SX,\n  PaletteBody,\n  PaletteInput,\n  PaletteScrollArea,\n  Paper,\n} from './SearchPalette.parts';\nimport type { SearchPaletteProps } from './SearchPalette.types';\n\n/**\n * A Gmail-style search palette (FUT-168): a single card with a search input,\n * a toggleable filter-chip row, a compact list of rich result rows (leading\n * image/avatar/icon + primary/secondary + trailing), and a \"see all results\"\n * footer. Fully app-agnostic — every label, filter, and row field is supplied\n * by the host through accessors, so it drops into any surface.\n *\n * Keyboard: ↑/↓ move the active row across the results and the footer, Enter\n * selects it (row → `onSelect`, footer → `onSubmitAll`), Esc calls `onClose`,\n * and Tab/→ accepts the inline ghost completion of the top result.\n *\n * Presentational pieces + the keydown builder live in `SearchPalette.parts`.\n */\n\nconst DEFAULT_MAX_ITEMS = 5;\n\n/** Non-string option defaults (numbers / flags / arrays). */\nfunction resolveOpts<T>(props: SearchPaletteProps<T>): {\n  maxItems: number;\n  filters: NonNullable<SearchPaletteProps<T>['filters']>;\n  activeFilterIds: string[];\n  isLoading: boolean;\n  showGhostText: boolean;\n  autoFocus: boolean;\n} {\n  return {\n    maxItems: props.maxItems ?? DEFAULT_MAX_ITEMS,\n    filters: props.filters ?? [],\n    activeFilterIds: props.activeFilterIds ?? [],\n    isLoading: Boolean(props.isLoading),\n    showGhostText: props.showGhostText ?? true,\n    autoFocus: props.autoFocus ?? true,\n  };\n}\n\n/** String / label defaults. */\nfunction resolveText<T>(props: SearchPaletteProps<T>): {\n  submitAllLabel: (q: string) => string;\n  submitKeyLabel: string;\n  noResultsLabel: string;\n  placeholder: string;\n  dataTestId: string;\n} {\n  return {\n    submitAllLabel: props.submitAllLabel,\n    submitKeyLabel: props.submitKeyLabel,\n    noResultsLabel: props.noResultsLabel,\n    placeholder: props.placeholder,\n    dataTestId: props.dataTestId ?? 'search-palette',\n  };\n}\n\nexport function SearchPalette<T>(props: SearchPaletteProps<T>): React.JSX.Element {\n  const opts = resolveOpts(props);\n  const text = resolveText(props);\n\n  const trimmed = props.value.trim();\n  const hasQuery = trimmed.length > 0;\n  const visible = props.items.slice(0, opts.maxItems);\n  const showFooter = Boolean(props.onSubmitAll) && hasQuery;\n  const rowCount = visible.length + (showFooter ? 1 : 0);\n  const footerIndex = showFooter ? visible.length : -1;\n\n  const [activeIndex, setActiveIndex] = React.useState(0);\n  // Keep the active row in range as results change (typing, filtering).\n  React.useEffect(() => {\n    setActiveIndex((i) => (rowCount === 0 ? 0 : Math.min(i, rowCount - 1)));\n  }, [rowCount]);\n\n  const top = visible[0];\n  const ghost =\n    opts.showGhostText && hasQuery && top ? ghostRemainder(props.getPrimary(top), props.value) : '';\n\n  const onKeyDown = createKeyDownHandler<T>({\n    rowCount,\n    activeIndex,\n    footerIndex,\n    visible,\n    hasQuery,\n    ghost,\n    top,\n    trimmed,\n    getPrimary: props.getPrimary,\n    onChange: props.onChange,\n    onSelect: props.onSelect,\n    onSubmitAll: props.onSubmitAll,\n    onClose: props.onClose,\n    setActiveIndex,\n  });\n\n  return (\n    <Paper\n      elevation={8}\n      className={props.className}\n      data-testid={text.dataTestId}\n      sx={PALETTE_CARD_SX}\n    >\n      <PaletteInput\n        value={props.value}\n        ghost={ghost}\n        isLoading={opts.isLoading}\n        autoFocus={opts.autoFocus}\n        placeholder={text.placeholder}\n        inputAriaLabel={props.inputAriaLabel}\n        hasQuery={hasQuery}\n        onChange={props.onChange}\n        onKeyDown={onKeyDown}\n      />\n      {opts.filters.length > 0 && (\n        <FilterChips\n          filters={opts.filters}\n          activeFilterIds={opts.activeFilterIds}\n          onToggleFilter={props.onToggleFilter}\n        />\n      )}\n      <PaletteScrollArea>\n        <PaletteBody<T>\n          hasQuery={hasQuery} emptyQueryContent={props.emptyQueryContent} visible={visible}\n          isLoading={opts.isLoading} noResultsLabel={text.noResultsLabel} showFooter={showFooter}\n          footerIndex={footerIndex} activeIndex={activeIndex} trimmed={trimmed}\n          submitAllLabel={text.submitAllLabel} submitKeyLabel={text.submitKeyLabel}\n          getKey={props.getKey} getPrimary={props.getPrimary}\n          getSecondary={props.getSecondary} getLead={props.getLead} getTrailing={props.getTrailing}\n          onSelect={props.onSelect} onSubmitAll={props.onSubmitAll} setActiveIndex={setActiveIndex}\n        />\n      </PaletteScrollArea>\n    </Paper>\n  );\n}\n\nSearchPalette.displayName = 'SearchPalette';\n\nexport default SearchPalette;\n"],"mappings":"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","names":[]}

package/dist/chunk-XCBQXSTR.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-XCBQXSTR.js.map

package/dist/chunk-XCBQXSTR.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-XDWNHACB.js

@@ -0,0 +1,64 @@
+import {
+  Text
+} from "./chunk-R52HJAYO.js";
+
+// src/components/data-display/DescriptionItem/DescriptionItem.tsx
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FLEX_ALIGN = { start: "flex-start", center: "center", end: "flex-end" };
+var containerSx = (isHorizontal, align) => ({
+  display: "flex",
+  flexDirection: isHorizontal ? "row" : "column",
+  alignItems: isHorizontal ? "center" : FLEX_ALIGN[align],
+  gap: isHorizontal ? 1 : 0,
+  // `alignItems` places the two boxes; `textAlign` handles a label or value
+  // that WRAPS, whose second line would otherwise fall back to flush-left
+  // inside a box the alignment had already centred.
+  textAlign: align
+});
+var labelStyle = (isHorizontal) => ({
+  textTransform: "uppercase",
+  marginBottom: isHorizontal ? 0 : "0.25rem",
+  minWidth: isHorizontal ? "fit-content" : void 0,
+  flexShrink: isHorizontal ? 0 : void 0
+});
+var makeTestId = (dataTestId) => (suffix) => dataTestId ? `${dataTestId}-${suffix}` : `description-item-${suffix}`;
+var DescriptionItem = ({
+  label,
+  value,
+  orientation = "vertical",
+  align = "start",
+  className,
+  "data-testid": dataTestId
+}) => {
+  const isHorizontal = orientation === "horizontal";
+  const testId = makeTestId(dataTestId);
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      className,
+      sx: containerSx(isHorizontal, align),
+      "data-testid": dataTestId || "description-item",
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "caption",
+            size: "xs",
+            color: "secondary",
+            style: labelStyle(isHorizontal),
+            "data-testid": testId("label"),
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(Box, { "data-testid": testId("value"), children: typeof value === "string" || typeof value === "number" ? /* @__PURE__ */ jsx(Text, { variant: "body", size: "sm", weight: "semibold", children: value }) : value })
+      ]
+    }
+  );
+};
+DescriptionItem.displayName = "DescriptionItem";
+
+export {
+  DescriptionItem
+};
+//# sourceMappingURL=chunk-XDWNHACB.js.map

package/dist/chunk-XHLLSKKY.js

@@ -0,0 +1,149 @@
+import {
+  CategoryHeadRow,
+  CategorySectionHeading,
+  SubcategoryRow
+} from "./chunk-THYO66RE.js";
+import {
+  emptySx,
+  listSx,
+  skeletonSx
+} from "./chunk-5WN6ZIAH.js";
+import {
+  categoryCheckState
+} from "./chunk-DVTCZR3K.js";
+
+// src/components/form/CategorySelect/CategoryPanelList.tsx
+import { Box, Button, Skeleton } from "@mui/material";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var SENTENCE_CASE = { textTransform: "none" };
+var SKELETON_ROWS = 6;
+function LoadingRows() {
+  return /* @__PURE__ */ jsx(Fragment, { children: Array.from({ length: SKELETON_ROWS }, (_unused, index) => /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", sx: skeletonSx }, index)) });
+}
+function EmptyCatalogue({
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-empty-catalogue`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.emptyTitle }),
+    /* @__PURE__ */ jsx("p", { children: copy.purpose }),
+    onCreateCategory && /* @__PURE__ */ jsx(Button, { variant: "contained", size: "small", sx: SENTENCE_CASE, onClick: () => onCreateCategory(), children: copy.createCategory })
+  ] });
+}
+function NoResults({
+  query,
+  onClearQuery,
+  onCreateCategory,
+  dataTestId,
+  copy
+}) {
+  return /* @__PURE__ */ jsxs(Box, { sx: emptySx, "data-testid": `${dataTestId}-no-results`, children: [
+    /* @__PURE__ */ jsx("strong", { children: copy.noResults.title(query) }),
+    /* @__PURE__ */ jsx("p", { children: copy.noResults.hint }),
+    /* @__PURE__ */ jsxs(Box, { sx: { display: "flex", gap: "6px", justifyContent: "center" }, children: [
+      /* @__PURE__ */ jsx(Button, { variant: "outlined", size: "small", sx: SENTENCE_CASE, onClick: onClearQuery, children: copy.noResults.clearSearch }),
+      onCreateCategory && /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "contained",
+          size: "small",
+          sx: SENTENCE_CASE,
+          "data-testid": `${dataTestId}-create`,
+          onClick: () => onCreateCategory(query.trim()),
+          children: copy.noResults.create(query.trim())
+        }
+      )
+    ] })
+  ] });
+}
+function CategoryGroupRows({
+  group,
+  props
+}) {
+  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;
+  const categoryId = group.category.id;
+  const expanded = props.isExpanded(categoryId);
+  const asHeading = single && !allowParentSelection;
+  const selectedCount = group.subcategories.filter((sub) => draft.has(sub.id)).length;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    asHeading ? /* @__PURE__ */ jsx(CategorySectionHeading, { option: group.category, query }) : /* @__PURE__ */ jsx(
+      CategoryHeadRow,
+      {
+        option: group.category,
+        query,
+        expanded,
+        active: rowIds[activeIndex] === categoryId,
+        sheet,
+        checkState: allowParentSelection ? categoryCheckState(group, draft) : void 0,
+        selectedCount,
+        showCounts: props.showCounts,
+        onToggleExpanded: () => props.onToggleExpanded(categoryId),
+        onActivate: () => props.onActivateCategory(group),
+        dataTestId: props.dataTestId,
+        copy: props.copy
+      }
+    ),
+    (expanded || asHeading) && group.subcategories.map((sub) => /* @__PURE__ */ jsx(
+      SubcategoryRow,
+      {
+        option: sub,
+        query,
+        selected: draft.has(sub.id),
+        active: rowIds[activeIndex] === sub.id,
+        sheet,
+        single,
+        showCounts: props.showCounts,
+        onActivate: () => props.onActivateSubcategory(sub.id),
+        dataTestId: props.dataTestId
+      },
+      sub.id
+    ))
+  ] });
+}
+function CategoryPanelList(props) {
+  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;
+  const body = () => {
+    if (loading) return /* @__PURE__ */ jsx(LoadingRows, {});
+    if (groups.length === 0 && query.trim().length > 0) {
+      return /* @__PURE__ */ jsx(
+        NoResults,
+        {
+          copy,
+          query,
+          onClearQuery: props.onClearQuery,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    if (groups.length === 0) {
+      return /* @__PURE__ */ jsx(
+        EmptyCatalogue,
+        {
+          copy,
+          onCreateCategory: props.onCreateCategory,
+          dataTestId
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(Fragment, { children: groups.map((group) => /* @__PURE__ */ jsx(CategoryGroupRows, { group, props }, group.category.id)) });
+  };
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      ref: listRef,
+      role: "listbox",
+      "aria-multiselectable": props.single ? void 0 : true,
+      tabIndex: -1,
+      "data-testid": `${dataTestId}-list`,
+      sx: listSx(sheet),
+      children: body()
+    }
+  );
+}
+
+export {
+  CategoryPanelList
+};
+//# sourceMappingURL=chunk-XHLLSKKY.js.map

package/dist/chunk-XHLLSKKY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/form/CategorySelect/CategoryPanelList.tsx"],"sourcesContent":["'use client';\n\nimport type { CategorySelectCopy } from \"../../../copy\";\nimport { Box, Button, Skeleton } from '@mui/material';\n\nimport { categoryCheckState } from './category-tree';\nimport {\n  CategoryHeadRow,\n  CategorySectionHeading,\n  SubcategoryRow,\n} from './CategoryRows';\nimport { emptySx, listSx, skeletonSx } from './CategorySelect.styles';\nimport type { CategoryGroup } from './CategorySelect.types';\n\n/** The design sets these labels in sentence case, not MUI's default caps. */\nconst SENTENCE_CASE = { textTransform: 'none' } as const;\n\n/** How many skeleton rows stand in for the catalogue while it loads. */\nconst SKELETON_ROWS = 6;\n\ninterface PanelListProps {\n  /** The words this panel renders. REQUIRED — no default copy. */\n  copy: CategorySelectCopy;\n  groups: CategoryGroup[];\n  query: string;\n  draft: ReadonlySet<string>;\n  rowIds: string[];\n  activeIndex: number;\n  sheet: boolean;\n  single: boolean;\n  loading: boolean;\n  showCounts: boolean;\n  allowParentSelection: boolean;\n  isExpanded: (categoryId: string) => boolean;\n  onToggleExpanded: (categoryId: string) => void;\n  onActivateCategory: (group: CategoryGroup) => void;\n  onActivateSubcategory: (id: string) => void;\n  onClearQuery: () => void;\n  onCreateCategory?: (name?: string) => void;\n  listRef: React.RefObject<HTMLDivElement | null>;\n  dataTestId: string;\n}\n\nfunction LoadingRows(): React.JSX.Element {\n  return (\n    <>\n      {Array.from({ length: SKELETON_ROWS }, (_unused, index) => (\n        <Skeleton key={index} variant=\"rounded\" sx={skeletonSx} />\n      ))}\n    </>\n  );\n}\n\n/** No categories exist at all — an onboarding moment, not an error. */\nfunction EmptyCatalogue({\n  onCreateCategory,\n  dataTestId,\n  copy,\n}: {\n  onCreateCategory?: (name?: string) => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}): React.JSX.Element {\n  return (\n    <Box sx={emptySx} data-testid={`${dataTestId}-empty-catalogue`}>\n      <strong>{copy.emptyTitle}</strong>\n      <p>{copy.purpose}</p>\n      {onCreateCategory && (\n        <Button variant=\"contained\" size=\"small\" sx={SENTENCE_CASE} onClick={() => onCreateCategory()}>\n          {copy.createCategory}\n        </Button>\n      )}\n    </Box>\n  );\n}\n\n/** The search found nothing — offer creation, or the way back. */\nfunction NoResults({\n  query,\n  onClearQuery,\n  onCreateCategory,\n  dataTestId,\n  copy,\n}: {\n  query: string;\n  onClearQuery: () => void;\n  onCreateCategory?: (name?: string) => void;\n  dataTestId: string;\n  copy: CategorySelectCopy;\n}): React.JSX.Element {\n  return (\n    <Box sx={emptySx} data-testid={`${dataTestId}-no-results`}>\n      <strong>{copy.noResults.title(query)}</strong>\n      <p>{copy.noResults.hint}</p>\n      <Box sx={{ display: 'flex', gap: '6px', justifyContent: 'center' }}>\n        <Button variant=\"outlined\" size=\"small\" sx={SENTENCE_CASE} onClick={onClearQuery}>\n          {copy.noResults.clearSearch}\n        </Button>\n        {onCreateCategory && (\n          <Button\n            variant=\"contained\"\n            size=\"small\"\n            sx={SENTENCE_CASE}\n            data-testid={`${dataTestId}-create`}\n            onClick={() => onCreateCategory(query.trim())}\n          >\n            {copy.noResults.create(query.trim())}\n          </Button>\n        )}\n      </Box>\n    </Box>\n  );\n}\n\n/** One group: its heading or head row, then whichever children are visible. */\nfunction CategoryGroupRows({\n  group,\n  props,\n}: {\n  group: CategoryGroup;\n  props: PanelListProps;\n}): React.JSX.Element {\n  const { draft, query, single, allowParentSelection, rowIds, activeIndex, sheet } = props;\n  const categoryId = group.category.id;\n  const expanded = props.isExpanded(categoryId);\n  const asHeading = single && !allowParentSelection;\n  const selectedCount = group.subcategories.filter((sub) => draft.has(sub.id)).length;\n\n  return (\n    <>\n      {asHeading ? (\n        <CategorySectionHeading option={group.category} query={query} />\n      ) : (\n        <CategoryHeadRow\n          option={group.category}\n          query={query}\n          expanded={expanded}\n          active={rowIds[activeIndex] === categoryId}\n          sheet={sheet}\n          checkState={\n            allowParentSelection ? categoryCheckState(group, draft) : undefined\n          }\n          selectedCount={selectedCount}\n          showCounts={props.showCounts}\n          onToggleExpanded={() => props.onToggleExpanded(categoryId)}\n          onActivate={() => props.onActivateCategory(group)}\n          dataTestId={props.dataTestId}\n          copy={props.copy}\n        />\n      )}\n      {(expanded || asHeading) &&\n        group.subcategories.map((sub) => (\n          <SubcategoryRow\n            key={sub.id}\n            option={sub}\n            query={query}\n            selected={draft.has(sub.id)}\n            active={rowIds[activeIndex] === sub.id}\n            sheet={sheet}\n            single={single}\n            showCounts={props.showCounts}\n            onActivate={() => props.onActivateSubcategory(sub.id)}\n            dataTestId={props.dataTestId}\n          />\n        ))}\n    </>\n  );\n}\n\n/** The scrolling body of the panel, including its three non-list states. */\nexport function CategoryPanelList(props: PanelListProps): React.JSX.Element {\n  const { groups, loading, query, listRef, sheet, dataTestId, copy } = props;\n\n  const body = (): React.JSX.Element => {\n    if (loading) return <LoadingRows />;\n    if (groups.length === 0 && query.trim().length > 0) {\n      return (\n        <NoResults copy={copy}\n          query={query}\n          onClearQuery={props.onClearQuery}\n          onCreateCategory={props.onCreateCategory}\n          dataTestId={dataTestId}\n        />\n      );\n    }\n    if (groups.length === 0) {\n      return (\n        <EmptyCatalogue copy={copy}\n          onCreateCategory={props.onCreateCategory}\n          dataTestId={dataTestId}\n        />\n      );\n    }\n    return (\n      <>\n        {groups.map((group) => (\n          <CategoryGroupRows key={group.category.id} group={group} props={props} />\n        ))}\n      </>\n    );\n  };\n\n  return (\n    <Box\n      ref={listRef}\n      role=\"listbox\"\n      aria-multiselectable={props.single ? undefined : true}\n      tabIndex={-1}\n      data-testid={`${dataTestId}-list`}\n      sx={listSx(sheet)}\n    >\n      {body()}\n    </Box>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-XLUADX33.js

@@ -0,0 +1 @@
+//# sourceMappingURL=chunk-XLUADX33.js.map

package/dist/chunk-XLUADX33.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/dist/chunk-XNAATHFY.js

@@ -0,0 +1,106 @@
+import {
+  MapCoordinates,
+  MapMarkers
+} from "./chunk-UF2WLQ6K.js";
+import {
+  MapLayers
+} from "./chunk-RPGTRJQP.js";
+import {
+  StaticMapView
+} from "./chunk-VFBFI4AG.js";
+import {
+  glassStyles,
+  resolveMapPreviewProps
+} from "./chunk-KJ5LUG36.js";
+import {
+  useMapPreview
+} from "./chunk-PQECNGDE.js";
+
+// src/components/data-display/MapPreview/MapPreview.tsx
+import { alpha, Box, Paper, styled, useTheme } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var MapContainer = styled(Paper)(({ theme }) => ({
+  position: "relative",
+  width: "100%",
+  borderRadius: theme.shape.borderRadius * 2,
+  overflow: "hidden",
+  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,
+  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`
+}));
+var MapWrapper = styled(Box)(({ height }) => ({
+  width: "100%",
+  height,
+  position: "relative"
+}));
+var cursorFor = (grabbing, interactive) => {
+  if (grabbing) return "grabbing";
+  return interactive ? "grab" : "default";
+};
+var MapPreview = (componentProps) => {
+  const props = resolveMapPreviewProps(componentProps);
+  const theme = useTheme();
+  const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);
+  const height = controls.isFullscreen ? "100vh" : props.height;
+  const grabbing = pointer.isDragging || pointer.isPanning;
+  return /* @__PURE__ */ jsx(
+    MapContainer,
+    {
+      ref: containerRef,
+      elevation: props.variant === "glass" ? 0 : 2,
+      "data-testid": "map-preview-container",
+      role: "img",
+      "aria-label": `Map preview centered at ${view.markerPosition.lat.toFixed(4)}, ${view.markerPosition.lng.toFixed(4)} with zoom level ${view.zoom}`,
+      tabIndex: 0,
+      "aria-live": "polite",
+      "aria-atomic": "true",
+      sx: glassStyles(props.variant, theme),
+      children: /* @__PURE__ */ jsxs(
+        MapWrapper,
+        {
+          height,
+          onClick: handleMapClick,
+          onMouseDown: pointer.handleMouseDown,
+          onMouseMove: pointer.handleMouseMove,
+          onMouseUp: pointer.handleMouseUp,
+          onMouseLeave: pointer.handleMouseUp,
+          style: {
+            cursor: cursorFor(grabbing, props.interactive),
+            transition: props.animated ? "all 0.3s ease" : "none"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              StaticMapView,
+              {
+                height,
+                zoom: view.zoom,
+                mapType: view.mapType,
+                marker: props.marker && props.markers.length === 0,
+                markerPosition: view.markerPosition,
+                panOffset: view.panOffset
+              }
+            ),
+            /* @__PURE__ */ jsx(MapMarkers, { markers: props.markers, centre: view.markerPosition, animated: props.animated }),
+            /* @__PURE__ */ jsx(
+              MapLayers,
+              {
+                settings: props,
+                zoom: view.zoom,
+                mapType: view.mapType,
+                search,
+                controls
+              }
+            ),
+            /* @__PURE__ */ jsx(MapCoordinates, { position: view.markerPosition, zoom: view.zoom })
+          ]
+        }
+      )
+    }
+  );
+};
+var MapPreview_default = MapPreview;
+
+export {
+  MapPreview,
+  MapPreview_default
+};
+//# sourceMappingURL=chunk-XNAATHFY.js.map

package/dist/chunk-XNAATHFY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/data-display/MapPreview/MapPreview.tsx"],"sourcesContent":["import { alpha, Box, Paper, styled, useTheme } from '@mui/material';\nimport type { FC } from 'react';\nimport React from 'react';\n\nimport { glassStyles, resolveMapPreviewProps } from './MapPreview.helpers';\nimport type { MapPreviewProps } from './MapPreview.types';\nimport { MapLayers } from './MapLayers';\nimport { MapCoordinates, MapMarkers } from './MapMarkers';\nimport { StaticMapView } from './StaticMapView';\nimport { useMapPreview } from './useMapPreview';\n\n// Kept module-local: styled() components cannot be exported across a module\n// boundary here without tripping TS2742.\nconst MapContainer = styled(Paper)(({ theme }) => ({\n  position: 'relative',\n  width: '100%',\n  borderRadius: theme.shape.borderRadius * 2,\n  overflow: 'hidden',\n  background: `linear-gradient(135deg, ${alpha(theme.palette.background.paper, 0.9)} 0%, ${alpha(theme.palette.background.paper, 0.8)} 100%)`,\n  border: `1px solid ${alpha(theme.palette.divider, 0.18)}`,\n}));\n\nconst MapWrapper = styled(Box)<{ height: string }>(({ height }) => ({\n  width: '100%',\n  height,\n  position: 'relative',\n}));\n\nconst cursorFor = (grabbing: boolean, interactive: boolean): string => {\n  if (grabbing) return 'grabbing';\n  return interactive ? 'grab' : 'default';\n};\n\nexport const MapPreview: FC<MapPreviewProps> = (componentProps) => {\n  const props = resolveMapPreviewProps(componentProps);\n  const theme = useTheme();\n  const { containerRef, view, controls, pointer, search, handleMapClick } = useMapPreview(props);\n\n  const height = controls.isFullscreen ? '100vh' : props.height;\n  const grabbing = pointer.isDragging || pointer.isPanning;\n\n  return (\n    <MapContainer\n      ref={containerRef}\n      elevation={props.variant === 'glass' ? 0 : 2}\n      data-testid=\"map-preview-container\"\n      role=\"img\"\n      aria-label={`Map preview centered at ${view.markerPosition.lat.toFixed(4)}, ${view.markerPosition.lng.toFixed(4)} with zoom level ${view.zoom}`}\n      tabIndex={0}\n      aria-live=\"polite\"\n      aria-atomic=\"true\"\n      sx={glassStyles(props.variant, theme)}\n    >\n      <MapWrapper\n        height={height}\n        onClick={handleMapClick}\n        onMouseDown={pointer.handleMouseDown}\n        onMouseMove={pointer.handleMouseMove}\n        onMouseUp={pointer.handleMouseUp}\n        onMouseLeave={pointer.handleMouseUp}\n        style={{\n          cursor: cursorFor(grabbing, props.interactive),\n          transition: props.animated ? 'all 0.3s ease' : 'none',\n        }}\n      >\n        <StaticMapView\n          height={height}\n          zoom={view.zoom}\n          mapType={view.mapType}\n          // The built-in centre marker steps aside for an explicit marker list.\n          marker={props.marker && props.markers.length === 0}\n          markerPosition={view.markerPosition}\n          panOffset={view.panOffset}\n        />\n\n        <MapMarkers markers={props.markers} centre={view.markerPosition} animated={props.animated} />\n\n        <MapLayers\n          settings={props}\n          zoom={view.zoom}\n          mapType={view.mapType}\n          search={search}\n          controls={controls}\n        />\n\n        <MapCoordinates position={view.markerPosition} zoom={view.zoom} />\n      </MapWrapper>\n    </MapContainer>\n  );\n};\n\nexport default MapPreview;\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA,SAAS,OAAO,KAAK,OAAO,QAAQ,gBAAgB;AAqD9C,SAYE,KAZF;AAxCN,IAAM,eAAe,OAAO,KAAK,EAAE,CAAC,EAAE,MAAM,OAAO;AAAA,EACjD,UAAU;AAAA,EACV,OAAO;AAAA,EACP,cAAc,MAAM,MAAM,eAAe;AAAA,EACzC,UAAU;AAAA,EACV,YAAY,2BAA2B,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC,QAAQ,MAAM,MAAM,QAAQ,WAAW,OAAO,GAAG,CAAC;AAAA,EACnI,QAAQ,aAAa,MAAM,MAAM,QAAQ,SAAS,IAAI,CAAC;AACzD,EAAE;AAEF,IAAM,aAAa,OAAO,GAAG,EAAsB,CAAC,EAAE,OAAO,OAAO;AAAA,EAClE,OAAO;AAAA,EACP;AAAA,EACA,UAAU;AACZ,EAAE;AAEF,IAAM,YAAY,CAAC,UAAmB,gBAAiC;AACrE,MAAI,SAAU,QAAO;AACrB,SAAO,cAAc,SAAS;AAChC;AAEO,IAAM,aAAkC,CAAC,mBAAmB;AACjE,QAAM,QAAQ,uBAAuB,cAAc;AACnD,QAAM,QAAQ,SAAS;AACvB,QAAM,EAAE,cAAc,MAAM,UAAU,SAAS,QAAQ,eAAe,IAAI,cAAc,KAAK;AAE7F,QAAM,SAAS,SAAS,eAAe,UAAU,MAAM;AACvD,QAAM,WAAW,QAAQ,cAAc,QAAQ;AAE/C,SACE;AAAA,IAAC;AAAA;AAAA,MACC,KAAK;AAAA,MACL,WAAW,MAAM,YAAY,UAAU,IAAI;AAAA,MAC3C,eAAY;AAAA,MACZ,MAAK;AAAA,MACL,cAAY,2BAA2B,KAAK,eAAe,IAAI,QAAQ,CAAC,CAAC,KAAK,KAAK,eAAe,IAAI,QAAQ,CAAC,CAAC,oBAAoB,KAAK,IAAI;AAAA,MAC7I,UAAU;AAAA,MACV,aAAU;AAAA,MACV,eAAY;AAAA,MACZ,IAAI,YAAY,MAAM,SAAS,KAAK;AAAA,MAEpC;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,SAAS;AAAA,UACT,aAAa,QAAQ;AAAA,UACrB,aAAa,QAAQ;AAAA,UACrB,WAAW,QAAQ;AAAA,UACnB,cAAc,QAAQ;AAAA,UACtB,OAAO;AAAA,YACL,QAAQ,UAAU,UAAU,MAAM,WAAW;AAAA,YAC7C,YAAY,MAAM,WAAW,kBAAkB;AAAA,UACjD;AAAA,UAEA;AAAA;AAAA,cAAC;AAAA;AAAA,gBACC;AAAA,gBACA,MAAM,KAAK;AAAA,gBACX,SAAS,KAAK;AAAA,gBAEd,QAAQ,MAAM,UAAU,MAAM,QAAQ,WAAW;AAAA,gBACjD,gBAAgB,KAAK;AAAA,gBACrB,WAAW,KAAK;AAAA;AAAA,YAClB;AAAA,YAEA,oBAAC,cAAW,SAAS,MAAM,SAAS,QAAQ,KAAK,gBAAgB,UAAU,MAAM,UAAU;AAAA,YAE3F;AAAA,cAAC;AAAA;AAAA,gBACC,UAAU;AAAA,gBACV,MAAM,KAAK;AAAA,gBACX,SAAS,KAAK;AAAA,gBACd;AAAA,gBACA;AAAA;AAAA,YACF;AAAA,YAEA,oBAAC,kBAAe,UAAU,KAAK,gBAAgB,MAAM,KAAK,MAAM;AAAA;AAAA;AAAA,MAClE;AAAA;AAAA,EACF;AAEJ;AAEA,IAAO,qBAAQ;","names":[]}

package/dist/chunk-XPHTCJER.js

@@ -0,0 +1,167 @@
+import {
+  SettingsSectionHeader
+} from "./chunk-KIVTQAI5.js";
+import {
+  SettingsSectionChips
+} from "./chunk-TFTGMFW7.js";
+import {
+  TOUCH_TARGET,
+  atLeastRail,
+  displayAcrossRail
+} from "./chunk-S7KQOZ7X.js";
+
+// src/components/layout/SettingsLayout/SettingsPanel.tsx
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { Box } from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+function BackLink({
+  href,
+  label,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      component: linkComponent,
+      href,
+      "aria-label": label,
+      "data-testid": `${testIdPrefix}-back`,
+      sx: (theme) => ({
+        ...displayAcrossRail(theme, breakpoint, "inline-flex", "none"),
+        alignItems: "center",
+        gap: 0.5,
+        minHeight: TOUCH_TARGET,
+        pr: 1,
+        textDecoration: "none",
+        color: "text.secondary",
+        font: "inherit",
+        fontSize: "0.875rem"
+      }),
+      children: [
+        /* @__PURE__ */ jsx(ChevronLeftIcon, { fontSize: "small" }),
+        label
+      ]
+    }
+  );
+}
+function PanelBack({
+  href,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  breakpoint,
+  linkComponent,
+  testIdPrefix
+}) {
+  if (sectionTitle === void 0) {
+    return /* @__PURE__ */ jsx(
+      BackLink,
+      {
+        href,
+        label: backLabel,
+        breakpoint,
+        linkComponent,
+        testIdPrefix
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    SettingsSectionHeader,
+    {
+      href,
+      backLabel,
+      title: sectionTitle,
+      description: sectionDescription,
+      breakpoint,
+      linkComponent,
+      testIdPrefix
+    }
+  );
+}
+function panelSx(breakpoint, hideOnNarrow, fillHeight) {
+  return (theme) => ({
+    display: hideOnNarrow ? "none" : "block",
+    flex: "1 1 auto",
+    minWidth: 0,
+    width: "100%",
+    [atLeastRail(theme, breakpoint)]: {
+      ...hideOnNarrow ? { display: "block" } : {},
+      ...fillHeight ? {
+        height: "100%",
+        minHeight: 0,
+        overflowY: "auto",
+        overscrollBehavior: "contain"
+      } : {}
+    }
+  });
+}
+function SettingsPanel({
+  inSection,
+  hideOnNarrow,
+  breakpoint,
+  indexHref,
+  backLabel,
+  sectionTitle,
+  sectionDescription,
+  ariaLabel,
+  sectionChips,
+  activeItemId,
+  linkComponent,
+  onSelectItem,
+  testIdPrefix,
+  fillHeight = false,
+  children
+}) {
+  const showBack = inSection && indexHref !== void 0 && linkComponent !== void 0;
+  const showChips = inSection && sectionChips !== void 0 && sectionChips.length > 0;
+  return /* @__PURE__ */ jsxs(
+    Box,
+    {
+      "data-testid": `${testIdPrefix}-panel`,
+      sx: panelSx(breakpoint, hideOnNarrow, fillHeight),
+      children: [
+        showBack ? /* @__PURE__ */ jsx(
+          PanelBack,
+          {
+            href: indexHref,
+            backLabel,
+            sectionTitle,
+            sectionDescription,
+            breakpoint,
+            linkComponent,
+            testIdPrefix
+          }
+        ) : null,
+        showChips ? /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: (theme) => ({
+              ...displayAcrossRail(theme, breakpoint, "block", "none"),
+              mb: 1,
+              minWidth: 0
+            }),
+            children: /* @__PURE__ */ jsx(
+              SettingsSectionChips,
+              {
+                items: sectionChips,
+                activeItemId,
+                ariaLabel,
+                linkComponent,
+                onSelectItem,
+                testIdPrefix
+              }
+            )
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+}
+
+export {
+  SettingsPanel
+};
+//# sourceMappingURL=chunk-XPHTCJER.js.map