@arqel-dev/ui 0.16.0 → 0.18.0

package/dist/chunk-YEPQWAD6.js

@@ -0,0 +1,275 @@
+import { Button } from './chunk-H23VX3RR.js';
+import { cn } from './chunk-B7ULUJVO.js';
+import { useArqelTranslations, useArqelLocale } from '@arqel-dev/react/utils';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+
+function TableFilters({
+  filters,
+  values,
+  onChange,
+  onClearAll,
+  className
+}) {
+  const t = useArqelTranslations();
+  if (filters.length === 0) return null;
+  const activeCount = filters.reduce((acc, f) => {
+    const v = values[f.name];
+    return v !== void 0 && v !== null && v !== "" ? acc + 1 : acc;
+  }, 0);
+  return /* @__PURE__ */ jsxs("fieldset", { className: cn("flex flex-wrap items-end gap-2 border-0 p-0", className), children: [
+    /* @__PURE__ */ jsx("legend", { className: "sr-only", children: t("table.filters.legend", "Filters") }),
+    filters.map((filter) => /* @__PURE__ */ jsx(
+      FilterControl,
+      {
+        filter,
+        value: values[filter.name],
+        onChange: (v) => onChange(filter.name, v)
+      },
+      filter.name
+    )),
+    activeCount > 0 && onClearAll && /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "sm", onClick: onClearAll, children: t("table.filters.clear", `Clear filters (${activeCount})`, { count: activeCount }) })
+  ] });
+}
+function FilterControl({
+  filter,
+  value,
+  onChange
+}) {
+  switch (filter.type) {
+    case "select":
+      return /* @__PURE__ */ jsx(SelectFilter, { filter, value, onChange });
+    case "multiSelect":
+      return /* @__PURE__ */ jsx(MultiSelectFilter, { filter, value, onChange });
+    case "text":
+      return /* @__PURE__ */ jsx(TextFilter, { filter, value, onChange });
+    case "ternary":
+      return /* @__PURE__ */ jsx(TernaryFilter, { filter, value, onChange });
+    case "dateRange":
+    case "scope":
+      return null;
+  }
+}
+function controlClasses() {
+  return cn(
+    // 44px touch target on mobile (WCAG 2.5.5); dense 36px on >=md.
+    "h-11 rounded-sm border border-[var(--input)] md:h-9",
+    "bg-background px-3 text-sm",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+  );
+}
+function SelectFilter({
+  filter,
+  value,
+  onChange
+}) {
+  const t = useArqelTranslations();
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: controlClasses(),
+        value: value === void 0 || value === null ? "" : String(value),
+        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value),
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "", children: t("table.filters.all", "All") }),
+          filter.props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+        ]
+      }
+    )
+  ] });
+}
+function MultiSelectFilter({
+  filter,
+  value,
+  onChange
+}) {
+  const arr = Array.isArray(value) ? value : [];
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        multiple: true,
+        className: cn(controlClasses(), "h-auto min-h-11 py-1 md:min-h-[2.25rem]"),
+        value: arr.map(String),
+        onChange: (e) => {
+          const next = Array.from(e.target.selectedOptions, (o) => o.value);
+          onChange(next.length === 0 ? null : next);
+        },
+        children: filter.props.options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+      }
+    )
+  ] });
+}
+function TextFilter({
+  filter,
+  value,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        type: "text",
+        className: controlClasses(),
+        value: typeof value === "string" ? value : "",
+        onChange: (e) => onChange(e.target.value === "" ? null : e.target.value)
+      }
+    )
+  ] });
+}
+function TernaryFilter({
+  filter,
+  value,
+  onChange
+}) {
+  const t = useArqelTranslations();
+  const current = value === void 0 || value === null ? "all" : String(value);
+  return /* @__PURE__ */ jsxs("label", { className: "flex flex-col gap-1 text-xs text-muted-foreground", children: [
+    filter.label ?? filter.name,
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        className: controlClasses(),
+        value: current,
+        onChange: (e) => {
+          const v = e.target.value;
+          onChange(v === "all" ? null : v);
+        },
+        children: [
+          /* @__PURE__ */ jsx("option", { value: "all", children: filter.props.allLabel ?? t("table.filters.all", "All") }),
+          /* @__PURE__ */ jsx("option", { value: "true", children: filter.props.trueLabel ?? t("table.filters.yes", "Yes") }),
+          /* @__PURE__ */ jsx("option", { value: "false", children: filter.props.falseLabel ?? t("table.filters.no", "No") })
+        ]
+      }
+    )
+  ] });
+}
+function TablePagination({
+  meta,
+  onPageChange,
+  onPerPageChange,
+  perPageOptions = [10, 25, 50, 100],
+  className
+}) {
+  const t = useArqelTranslations();
+  const locale = useArqelLocale();
+  const numberFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);
+  const fromRaw = (meta.currentPage - 1) * meta.perPage + 1;
+  const toRaw = Math.min(meta.currentPage * meta.perPage, meta.total);
+  const from = numberFormatter.format(fromRaw);
+  const to = numberFormatter.format(toRaw);
+  const total = numberFormatter.format(meta.total);
+  const isFirst = meta.currentPage <= 1;
+  const isLast = meta.currentPage >= meta.lastPage;
+  return /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      className: cn(
+        "flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2 text-sm",
+        className
+      ),
+      "aria-label": t("table.pagination.label", "Pagination"),
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: meta.total === 0 ? t("table.empty", "No records found.") : t(
+          "table.pagination.showing",
+          // Fallback is rendered verbatim when the key is missing, so it must
+          // already carry the interpolated values (the replacements map only
+          // applies to a resolved dictionary string).
+          `Showing ${from} to ${to} of ${total} results`,
+          { from, to, total }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+          onPerPageChange && /* @__PURE__ */ jsxs("label", { className: "flex items-center gap-1 text-xs text-muted-foreground", children: [
+            t("table.per_page", "Per page"),
+            /* @__PURE__ */ jsx(
+              "select",
+              {
+                className: "h-11 rounded-sm border border-[var(--input)] bg-background px-2 md:h-8",
+                value: meta.perPage,
+                onChange: (e) => onPerPageChange(Number(e.target.value)),
+                children: perPageOptions.map((n) => /* @__PURE__ */ jsx("option", { value: n, children: n }, n))
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-11 md:h-8",
+              disabled: isFirst,
+              onClick: () => onPageChange(meta.currentPage - 1),
+              "aria-label": t("table.pagination.previous_page", "Previous page"),
+              children: t("table.pagination.previous", "Prev")
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { className: "text-xs text-muted-foreground", children: [
+            numberFormatter.format(meta.currentPage),
+            " / ",
+            numberFormatter.format(meta.lastPage)
+          ] }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "outline",
+              size: "sm",
+              className: "h-11 md:h-8",
+              disabled: isLast,
+              onClick: () => onPageChange(meta.currentPage + 1),
+              "aria-label": t("table.pagination.next_page", "Next page"),
+              children: t("table.pagination.next", "Next")
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function TableToolbar({
+  search,
+  filters,
+  selectedCount = 0,
+  bulkActions,
+  onClearSelection,
+  className
+}) {
+  const t = useArqelTranslations();
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-3 px-3 py-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-end gap-2", children: [
+      search,
+      filters
+    ] }),
+    selectedCount > 0 && /* @__PURE__ */ jsxs(
+      "section",
+      {
+        className: "flex flex-wrap items-center gap-2 rounded-sm border border-border bg-muted px-3 py-2",
+        "aria-label": t("table.bulk.label", "Bulk actions"),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: t("table.bulk.selected", "{one} :count selected|{other} :count selected", {
+            count: selectedCount
+          }) }),
+          /* @__PURE__ */ jsxs("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: [
+            bulkActions,
+            onClearSelection && /* @__PURE__ */ jsx(
+              "button",
+              {
+                type: "button",
+                className: "text-sm text-muted-foreground hover:underline",
+                onClick: onClearSelection,
+                children: t("table.bulk.clear", "Clear")
+              }
+            )
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { TableFilters, TablePagination, TableToolbar };
+//# sourceMappingURL=chunk-YEPQWAD6.js.map
+//# sourceMappingURL=chunk-YEPQWAD6.js.map

package/dist/chunk-YEPQWAD6.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/table/TableFilters.tsx","../src/table/TablePagination.tsx","../src/table/TableToolbar.tsx"],"names":["useArqelTranslations","jsxs","jsx"],"mappings":"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","file":"chunk-YEPQWAD6.js","sourcesContent":["/**\n * `<TableFilters>` — renders one input per `FilterSchema` and emits\n * a single `onChange(name, value)` callback. Active values render as\n * dismissible chips so users can read state without re-opening menus.\n *\n * Phase 1 covers the four most-used filter types (select, multiSelect,\n * text, ternary). dateRange / scope land alongside FieldRenderer in\n * UI-004, where the date primitives ship.\n */\n\nimport { useArqelTranslations } from '@arqel-dev/react/utils';\nimport type {\n  FilterSchema,\n  MultiSelectFilterSchema,\n  SelectFilterSchema,\n  TernaryFilterSchema,\n  TextFilterSchema,\n} from '@arqel-dev/types/tables';\nimport { Button } from '../action/Button.js';\nimport { cn } from '../utils/cn.js';\n\nexport interface TableFiltersProps {\n  filters: FilterSchema[];\n  values: Record<string, unknown>;\n  onChange: (name: string, value: unknown) => void;\n  onClearAll?: (() => void) | undefined;\n  className?: string | undefined;\n}\n\nexport function TableFilters({\n  filters,\n  values,\n  onChange,\n  onClearAll,\n  className,\n}: TableFiltersProps) {\n  const t = useArqelTranslations();\n  if (filters.length === 0) return null;\n\n  const activeCount = filters.reduce((acc, f) => {\n    const v = values[f.name];\n    return v !== undefined && v !== null && v !== '' ? acc + 1 : acc;\n  }, 0);\n\n  return (\n    <fieldset className={cn('flex flex-wrap items-end gap-2 border-0 p-0', className)}>\n      <legend className=\"sr-only\">{t('table.filters.legend', 'Filters')}</legend>\n      {filters.map((filter) => (\n        <FilterControl\n          key={filter.name}\n          filter={filter}\n          value={values[filter.name]}\n          onChange={(v) => onChange(filter.name, v)}\n        />\n      ))}\n      {activeCount > 0 && onClearAll && (\n        <Button variant=\"ghost\" size=\"sm\" onClick={onClearAll}>\n          {t('table.filters.clear', `Clear filters (${activeCount})`, { count: activeCount })}\n        </Button>\n      )}\n    </fieldset>\n  );\n}\n\nfunction FilterControl({\n  filter,\n  value,\n  onChange,\n}: {\n  filter: FilterSchema;\n  value: unknown;\n  onChange: (value: unknown) => void;\n}) {\n  switch (filter.type) {\n    case 'select':\n      return <SelectFilter filter={filter} value={value} onChange={onChange} />;\n    case 'multiSelect':\n      return <MultiSelectFilter filter={filter} value={value} onChange={onChange} />;\n    case 'text':\n      return <TextFilter filter={filter} value={value} onChange={onChange} />;\n    case 'ternary':\n      return <TernaryFilter filter={filter} value={value} onChange={onChange} />;\n    case 'dateRange':\n    case 'scope':\n      return null;\n  }\n}\n\nfunction controlClasses() {\n  return cn(\n    // 44px touch target on mobile (WCAG 2.5.5); dense 36px on >=md.\n    'h-11 rounded-sm border border-[var(--input)] md:h-9',\n    'bg-background px-3 text-sm',\n    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',\n  );\n}\n\nfunction SelectFilter({\n  filter,\n  value,\n  onChange,\n}: {\n  filter: SelectFilterSchema;\n  value: unknown;\n  onChange: (value: unknown) => void;\n}) {\n  const t = useArqelTranslations();\n  return (\n    <label className=\"flex flex-col gap-1 text-xs text-muted-foreground\">\n      {filter.label ?? filter.name}\n      <select\n        className={controlClasses()}\n        value={value === undefined || value === null ? '' : String(value)}\n        onChange={(e) => onChange(e.target.value === '' ? null : e.target.value)}\n      >\n        <option value=\"\">{t('table.filters.all', 'All')}</option>\n        {filter.props.options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n    </label>\n  );\n}\n\nfunction MultiSelectFilter({\n  filter,\n  value,\n  onChange,\n}: {\n  filter: MultiSelectFilterSchema;\n  value: unknown;\n  onChange: (value: unknown) => void;\n}) {\n  const arr = Array.isArray(value) ? (value as Array<string | number>) : [];\n  return (\n    <label className=\"flex flex-col gap-1 text-xs text-muted-foreground\">\n      {filter.label ?? filter.name}\n      <select\n        multiple\n        className={cn(controlClasses(), 'h-auto min-h-11 py-1 md:min-h-[2.25rem]')}\n        value={arr.map(String)}\n        onChange={(e) => {\n          const next = Array.from(e.target.selectedOptions, (o) => o.value);\n          onChange(next.length === 0 ? null : next);\n        }}\n      >\n        {filter.props.options.map((opt) => (\n          <option key={opt.value} value={opt.value}>\n            {opt.label}\n          </option>\n        ))}\n      </select>\n    </label>\n  );\n}\n\nfunction TextFilter({\n  filter,\n  value,\n  onChange,\n}: {\n  filter: TextFilterSchema;\n  value: unknown;\n  onChange: (value: unknown) => void;\n}) {\n  return (\n    <label className=\"flex flex-col gap-1 text-xs text-muted-foreground\">\n      {filter.label ?? filter.name}\n      <input\n        type=\"text\"\n        className={controlClasses()}\n        value={typeof value === 'string' ? value : ''}\n        onChange={(e) => onChange(e.target.value === '' ? null : e.target.value)}\n      />\n    </label>\n  );\n}\n\nfunction TernaryFilter({\n  filter,\n  value,\n  onChange,\n}: {\n  filter: TernaryFilterSchema;\n  value: unknown;\n  onChange: (value: unknown) => void;\n}) {\n  const t = useArqelTranslations();\n  const current = value === undefined || value === null ? 'all' : String(value);\n  return (\n    <label className=\"flex flex-col gap-1 text-xs text-muted-foreground\">\n      {filter.label ?? filter.name}\n      <select\n        className={controlClasses()}\n        value={current}\n        onChange={(e) => {\n          const v = e.target.value;\n          onChange(v === 'all' ? null : v);\n        }}\n      >\n        <option value=\"all\">{filter.props.allLabel ?? t('table.filters.all', 'All')}</option>\n        <option value=\"true\">{filter.props.trueLabel ?? t('table.filters.yes', 'Yes')}</option>\n        <option value=\"false\">{filter.props.falseLabel ?? t('table.filters.no', 'No')}</option>\n      </select>\n    </label>\n  );\n}\n","/**\n * `<TablePagination>` — prev/next + range + per-page picker.\n *\n * Stateless: parent owns `currentPage` / `perPage` and handles transitions\n * (typically via Inertia `router.get` with `preserveState: true`).\n */\n\nimport { useArqelLocale, useArqelTranslations } from '@arqel-dev/react/utils';\nimport type { PaginationMeta } from '@arqel-dev/types/resources';\nimport { useMemo } from 'react';\nimport { Button } from '../action/Button.js';\nimport { cn } from '../utils/cn.js';\n\nexport interface TablePaginationProps {\n  meta: PaginationMeta;\n  onPageChange: (page: number) => void;\n  onPerPageChange?: ((perPage: number) => void) | undefined;\n  perPageOptions?: number[];\n  className?: string;\n}\n\nexport function TablePagination({\n  meta,\n  onPageChange,\n  onPerPageChange,\n  perPageOptions = [10, 25, 50, 100],\n  className,\n}: TablePaginationProps) {\n  const t = useArqelTranslations();\n  const locale = useArqelLocale();\n  const numberFormatter = useMemo(() => new Intl.NumberFormat(locale), [locale]);\n  const fromRaw = (meta.currentPage - 1) * meta.perPage + 1;\n  const toRaw = Math.min(meta.currentPage * meta.perPage, meta.total);\n  // Interpolated counts are locale number-grouped (12,345 / 12.345) before they\n  // reach the translator, whose applyReplacements does plain String() substitution.\n  const from = numberFormatter.format(fromRaw);\n  const to = numberFormatter.format(toRaw);\n  const total = numberFormatter.format(meta.total);\n  const isFirst = meta.currentPage <= 1;\n  const isLast = meta.currentPage >= meta.lastPage;\n\n  return (\n    <nav\n      className={cn(\n        'flex flex-wrap items-center justify-between gap-2 border-t border-border px-3 py-2 text-sm',\n        className,\n      )}\n      aria-label={t('table.pagination.label', 'Pagination')}\n    >\n      <span className=\"text-muted-foreground\">\n        {meta.total === 0\n          ? t('table.empty', 'No records found.')\n          : t(\n              'table.pagination.showing',\n              // Fallback is rendered verbatim when the key is missing, so it must\n              // already carry the interpolated values (the replacements map only\n              // applies to a resolved dictionary string).\n              `Showing ${from} to ${to} of ${total} results`,\n              { from, to, total },\n            )}\n      </span>\n      <div className=\"flex items-center gap-2\">\n        {onPerPageChange && (\n          <label className=\"flex items-center gap-1 text-xs text-muted-foreground\">\n            {t('table.per_page', 'Per page')}\n            {/* 44px touch target on mobile (WCAG 2.5.5); dense 32px on >=md. */}\n            <select\n              className=\"h-11 rounded-sm border border-[var(--input)] bg-background px-2 md:h-8\"\n              value={meta.perPage}\n              onChange={(e) => onPerPageChange(Number(e.target.value))}\n            >\n              {perPageOptions.map((n) => (\n                <option key={n} value={n}>\n                  {n}\n                </option>\n              ))}\n            </select>\n          </label>\n        )}\n        {/* Buttons use size=\"sm\" (h-8) for the dense desktop bar; the responsive\n            h-11 override lifts them to a 44px touch target below md. */}\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-11 md:h-8\"\n          disabled={isFirst}\n          onClick={() => onPageChange(meta.currentPage - 1)}\n          aria-label={t('table.pagination.previous_page', 'Previous page')}\n        >\n          {t('table.pagination.previous', 'Prev')}\n        </Button>\n        <span className=\"text-xs text-muted-foreground\">\n          {numberFormatter.format(meta.currentPage)} / {numberFormatter.format(meta.lastPage)}\n        </span>\n        <Button\n          variant=\"outline\"\n          size=\"sm\"\n          className=\"h-11 md:h-8\"\n          disabled={isLast}\n          onClick={() => onPageChange(meta.currentPage + 1)}\n          aria-label={t('table.pagination.next_page', 'Next page')}\n        >\n          {t('table.pagination.next', 'Next')}\n        </Button>\n      </div>\n    </nav>\n  );\n}\n","/**\n * `<TableToolbar>` — search input + filters + bulk-action bar slot.\n *\n * The bulk-action bar appears only when `selectedCount > 0`. ResourceIndex\n * passes `bulkActions` rendered as a row of buttons; the toolbar just\n * positions them.\n */\n\nimport { useArqelTranslations } from '@arqel-dev/react/utils';\nimport type { ReactNode } from 'react';\nimport { cn } from '../utils/cn.js';\n\nexport interface TableToolbarProps {\n  search?: ReactNode;\n  filters?: ReactNode;\n  selectedCount?: number;\n  bulkActions?: ReactNode;\n  onClearSelection?: (() => void) | undefined;\n  className?: string;\n}\n\nexport function TableToolbar({\n  search,\n  filters,\n  selectedCount = 0,\n  bulkActions,\n  onClearSelection,\n  className,\n}: TableToolbarProps) {\n  const t = useArqelTranslations();\n  return (\n    <div className={cn('flex flex-col gap-3 px-3 py-3', className)}>\n      <div className=\"flex flex-wrap items-end gap-2\">\n        {search}\n        {filters}\n      </div>\n      {selectedCount > 0 && (\n        <section\n          className=\"flex flex-wrap items-center gap-2 rounded-sm border border-border bg-muted px-3 py-2\"\n          aria-label={t('table.bulk.label', 'Bulk actions')}\n        >\n          <span className=\"text-sm font-medium\">\n            {t('table.bulk.selected', '{one} :count selected|{other} :count selected', {\n              count: selectedCount,\n            })}\n          </span>\n          <div className=\"ml-auto flex flex-wrap items-center gap-2\">\n            {bulkActions}\n            {onClearSelection && (\n              <button\n                type=\"button\"\n                className=\"text-sm text-muted-foreground hover:underline\"\n                onClick={onClearSelection}\n              >\n                {t('table.bulk.clear', 'Clear')}\n              </button>\n            )}\n          </div>\n        </section>\n      )}\n    </div>\n  );\n}\n"]}

package/dist/index.d.ts

@@ -5,7 +5,7 @@ export { F as FieldComponent, a as FieldRenderer, b as FieldRendererProps, c as
 export { CommandPalette, CommandPaletteProps, PaletteCommand } from './palette.js';
 export { Alert, AlertDescription, AlertTitle, Badge, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Input, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Skeleton, Textarea, badgeVariants } from './primitives.js';
 export { ResourceIndex, ResourceIndexUIProps } from './resource.js';
-export { A as AppShell, a as AppShellProps, b as AppShellVariant, F as Footer, c as FooterProps, M as MainContent, d as MainContentMaxWidth, e as MainContentProps, S as Sidebar, f as SidebarProps, T as Topbar, g as TopbarProps, U as UserMenu, h as UserMenuProps } from './UserMenu-B5XbC_Gy.js';
+export { A as AppShell, a as AppShellProps, b as AppShellVariant, F as Footer, c as FooterProps, M as MainContent, d as MainContentMaxWidth, e as MainContentProps, S as Sidebar, f as SidebarProps, T as Topbar, g as TopbarProps, U as UserMenu, h as UserMenuProps } from './UserMenu-QlwvvZRU.js';
 export { D as DataTable, a as DataTableProps, b as DataTableRecord, T as TableFilters, c as TableFiltersProps, d as TablePagination, e as TablePaginationProps, f as TableToolbar, g as TableToolbarProps } from './TableToolbar-POLdlSgC.js';
 export { BreadcrumbItem, Breadcrumbs, BreadcrumbsProps, EmptyState, EmptyStateProps, ErrorState, ErrorStateProps, LoadingSkeleton, LoadingSkeletonProps, PageHeader, PageHeaderProps, SkeletonVariant } from './utility.js';
 export { c as cn } from './cn-By8XWiSA.js';

package/dist/index.js

@@ -1,14 +1,18 @@
-export { Breadcrumbs, EmptyState, ErrorState, LoadingSkeleton } from './chunk-SK6H7ARE.js';
+export { Breadcrumbs, EmptyState, LoadingSkeleton } from './chunk-3E66JNQO.js';
+export { ErrorState } from './chunk-53J74IYR.js';
 export { StatCard, WidgetWrapper } from './chunk-WMOBLT3Z.js';
-export { Alert, AlertDescription, AlertTitle, Badge, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Textarea, badgeVariants } from './chunk-K7QY56XN.js';
+export { Alert, AlertDescription, AlertTitle, Checkbox, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Textarea } from './chunk-D2MUCHFN.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-6YGRTXEL.js';
 export { PageHeader } from './chunk-MXUXMHOK.js';
-export { AppShell, Footer, MainContent, Sidebar, Topbar, UserMenu } from './chunk-X2X6YDOX.js';
+export { AppShell, Footer, MainContent, Sidebar, Topbar, UserMenu } from './chunk-EXA6DWLB.js';
 export { CommandPalette } from './chunk-HNUUZEOL.js';
-export { Input, Separator, Skeleton } from './chunk-R4BOUU6Y.js';
-export { ResourceIndex } from './chunk-EG2DASKR.js';
-export { DataTable, TableFilters, TablePagination, TableToolbar } from './chunk-S5UNPCMQ.js';
+export { Badge, Input, Separator, Skeleton, badgeVariants } from './chunk-U4MPY2XT.js';
+export { ResourceIndex } from './chunk-KGAY2AZH.js';
+export { TableFilters, TablePagination, TableToolbar } from './chunk-YEPQWAD6.js';
+export { DataTable } from './chunk-JKD6SE75.js';
 import './chunk-RMPOR2YZ.js';
-export { ActionButton, ActionFormModal, ActionMenu, ConfirmDialog } from './chunk-SLLTFOOS.js';
+export { ActionButton, ActionFormModal, ActionMenu } from './chunk-7NGUPQON.js';
+export { ConfirmDialog } from './chunk-DO3PRGVV.js';
 import './chunk-VKZY6J6G.js';
 export { FormActions } from './chunk-MZMYV43C.js';
 export { FieldRenderer, FormRenderer, clearFieldRegistry, getFieldComponent, registerField } from './chunk-CMNZLA32.js';

package/dist/pages.d.ts

@@ -64,6 +64,31 @@ declare function ArqelEditPage<TRecord extends RecordType = RecordType>(): JSX.E
 
 declare function ArqelIndexPage<TRecord extends RecordType = RecordType>(): JSX.Element;
 
+/**
+ * Default Inertia page for `arqel::notifications`.
+ *
+ * Renders the paginated notification history emitted by
+ * `Arqel\Core\Http\Controllers\NotificationController::index`
+ * (`{ history: paginator, filter: 'all' | 'unread' }`). The page-prop
+ * is named `history` — *not* `notifications` — because `notifications`
+ * is already a shared Inertia prop (`{unread_count, recent}`, see
+ * `HandleArqelInertiaRequests`) consumed by the `<NotificationBell>`
+ * mounted on every page's topbar. Reusing that key here would let this
+ * page's paginator silently overwrite the shared prop and break the
+ * bell (see branch review, milestone 0.19).
+ *
+ * The paginator serializes each item as `{id, type, data, read_at,
+ * created_at}` — same shape as the `notifications.recent` array the
+ * `<NotificationBell>` dropdown consumes, so titles/bodies follow the
+ * same `data.title` / `data.body` convention.
+ *
+ * Per-item actions do scoped Inertia visits (`only: ['history']` for
+ * mark-as-read, a plain reload for delete) so the list refreshes
+ * without a full page navigation.
+ */
+
+declare function ArqelNotificationsPage(): JSX.Element;
+
 /**
  * Default Inertia page for `arqel::show`.
  *
@@ -101,4 +126,4 @@ type LazyPage = () => Promise<{
 }>;
 declare const arqelPages: Record<string, LazyPage>;
 
-export { ArqelCreatePage, ArqelDashboardPage, ArqelEditPage, ArqelIndexPage, ArqelShowPage, arqelPages };
+export { ArqelCreatePage, ArqelDashboardPage, ArqelEditPage, ArqelIndexPage, ArqelNotificationsPage, ArqelShowPage, arqelPages };

package/dist/pages.js

@@ -1,15 +1,20 @@
+export { ArqelNotificationsPage } from './chunk-CH7YLELO.js';
 export { ArqelShowPage } from './chunk-Q7WGPKUN.js';
 export { ArqelDashboardPage } from './chunk-3VSDQCFO.js';
-export { ArqelEditPage } from './chunk-YQ6KXR3U.js';
-export { ArqelIndexPage } from './chunk-X4ZFKOPX.js';
+export { ArqelEditPage } from './chunk-WKIYS2FQ.js';
+export { ArqelIndexPage } from './chunk-DOQUHQND.js';
 import './chunk-YYQ45W25.js';
 export { ArqelCreatePage } from './chunk-IO6RMVUF.js';
+import './chunk-53J74IYR.js';
 import './chunk-WMOBLT3Z.js';
+import './chunk-6YGRTXEL.js';
 import './chunk-MXUXMHOK.js';
-import './chunk-EG2DASKR.js';
-import './chunk-S5UNPCMQ.js';
+import './chunk-KGAY2AZH.js';
+import './chunk-YEPQWAD6.js';
+import './chunk-JKD6SE75.js';
 import './chunk-RMPOR2YZ.js';
-import './chunk-SLLTFOOS.js';
+import './chunk-7NGUPQON.js';
+import './chunk-DO3PRGVV.js';
 import './chunk-VKZY6J6G.js';
 import './chunk-MZMYV43C.js';
 import './chunk-CMNZLA32.js';
@@ -18,11 +23,12 @@ import './chunk-B7ULUJVO.js';
 
 // src/pages/index.ts
 var arqelPages = {
-  "arqel::index": () => import('./ArqelIndexPage-J2EUV2PI.js'),
+  "arqel::index": () => import('./ArqelIndexPage-ZAVCCM6V.js'),
   "arqel::create": () => import('./ArqelCreatePage-UZAHV4DK.js'),
-  "arqel::edit": () => import('./ArqelEditPage-RRYFYOTC.js'),
+  "arqel::edit": () => import('./ArqelEditPage-7OFWPULE.js'),
   "arqel::show": () => import('./ArqelShowPage-TVCJAV2F.js'),
-  "arqel::dashboard": () => import('./ArqelDashboardPage-Z5R4XSH4.js')
+  "arqel::dashboard": () => import('./ArqelDashboardPage-Z5R4XSH4.js'),
+  "arqel::notifications": () => import('./ArqelNotificationsPage-MBJBYFHW.js')
 };
 
 export { arqelPages };

package/dist/pages.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/pages/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;AA0BO,IAAM,UAAA,GAAuC;AAAA,EAClD,cAAA,EAAgB,MACd,OAAO,8BAAqB,CAAA;AAAA,EAC9B,eAAA,EAAiB,MACf,OAAO,+BAAsB,CAAA;AAAA,EAC/B,aAAA,EAAe,MAAM,OAAO,6BAAoB,CAAA;AAAA,EAChD,aAAA,EAAe,MAAM,OAAO,6BAAoB,CAAA;AAAA,EAChD,kBAAA,EAAoB,MAClB,OAAO,kCAAyB;AACpC","file":"pages.js","sourcesContent":["/**\n * Built-in Inertia page registry for `arqel::*`.\n *\n * `createArqelApp({ pages })` from `@arqel-dev/react/inertia` accepts\n * one or more `PageRegistry` records — merge `arqelPages` first so\n * user-defined pages can override per-resource:\n *\n * ```ts\n * import { arqelPages } from '@arqel-dev/ui/pages';\n * import { createArqelApp } from '@arqel-dev/react/inertia';\n *\n * const userPages = import.meta.glob('./Pages/**\\/*.tsx');\n *\n * createArqelApp({\n *   pages: { ...arqelPages, ...userPages },\n * });\n * ```\n *\n * Names match what `ResourceController` emits via\n * `Inertia::render('arqel::index', ...)`.\n */\n\nimport type { ComponentType } from 'react';\n\ntype LazyPage = () => Promise<{ default: ComponentType<unknown> }>;\n\nexport const arqelPages: Record<string, LazyPage> = {\n  'arqel::index': () =>\n    import('./ArqelIndexPage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::create': () =>\n    import('./ArqelCreatePage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::edit': () => import('./ArqelEditPage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::show': () => import('./ArqelShowPage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::dashboard': () =>\n    import('./ArqelDashboardPage.js') as Promise<{ default: ComponentType<unknown> }>,\n};\n\nexport { default as ArqelCreatePage } from './ArqelCreatePage.js';\nexport { default as ArqelDashboardPage } from './ArqelDashboardPage.js';\nexport { default as ArqelEditPage } from './ArqelEditPage.js';\nexport { default as ArqelIndexPage } from './ArqelIndexPage.js';\nexport { default as ArqelShowPage } from './ArqelShowPage.js';\n"]}
+{"version":3,"sources":["../src/pages/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AA0BO,IAAM,UAAA,GAAuC;AAAA,EAClD,cAAA,EAAgB,MACd,OAAO,8BAAqB,CAAA;AAAA,EAC9B,eAAA,EAAiB,MACf,OAAO,+BAAsB,CAAA;AAAA,EAC/B,aAAA,EAAe,MAAM,OAAO,6BAAoB,CAAA;AAAA,EAChD,aAAA,EAAe,MAAM,OAAO,6BAAoB,CAAA;AAAA,EAChD,kBAAA,EAAoB,MAClB,OAAO,kCAAyB,CAAA;AAAA,EAClC,sBAAA,EAAwB,MACtB,OAAO,sCAA6B;AACxC","file":"pages.js","sourcesContent":["/**\n * Built-in Inertia page registry for `arqel::*`.\n *\n * `createArqelApp({ pages })` from `@arqel-dev/react/inertia` accepts\n * one or more `PageRegistry` records — merge `arqelPages` first so\n * user-defined pages can override per-resource:\n *\n * ```ts\n * import { arqelPages } from '@arqel-dev/ui/pages';\n * import { createArqelApp } from '@arqel-dev/react/inertia';\n *\n * const userPages = import.meta.glob('./Pages/**\\/*.tsx');\n *\n * createArqelApp({\n *   pages: { ...arqelPages, ...userPages },\n * });\n * ```\n *\n * Names match what `ResourceController` emits via\n * `Inertia::render('arqel::index', ...)`.\n */\n\nimport type { ComponentType } from 'react';\n\ntype LazyPage = () => Promise<{ default: ComponentType<unknown> }>;\n\nexport const arqelPages: Record<string, LazyPage> = {\n  'arqel::index': () =>\n    import('./ArqelIndexPage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::create': () =>\n    import('./ArqelCreatePage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::edit': () => import('./ArqelEditPage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::show': () => import('./ArqelShowPage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::dashboard': () =>\n    import('./ArqelDashboardPage.js') as Promise<{ default: ComponentType<unknown> }>,\n  'arqel::notifications': () =>\n    import('./ArqelNotificationsPage.js') as Promise<{ default: ComponentType<unknown> }>,\n};\n\nexport { default as ArqelCreatePage } from './ArqelCreatePage.js';\nexport { default as ArqelDashboardPage } from './ArqelDashboardPage.js';\nexport { default as ArqelEditPage } from './ArqelEditPage.js';\nexport { default as ArqelIndexPage } from './ArqelIndexPage.js';\nexport { default as ArqelNotificationsPage } from './ArqelNotificationsPage.js';\nexport { default as ArqelShowPage } from './ArqelShowPage.js';\n"]}

package/dist/primitives.js

@@ -1,5 +1,6 @@
-export { Alert, AlertDescription, AlertTitle, Badge, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Textarea, badgeVariants } from './chunk-K7QY56XN.js';
-export { Input, Separator, Skeleton } from './chunk-R4BOUU6Y.js';
+export { Alert, AlertDescription, AlertTitle, Checkbox, Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle, Label, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Textarea } from './chunk-D2MUCHFN.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from './chunk-6YGRTXEL.js';
+export { Badge, Input, Separator, Skeleton, badgeVariants } from './chunk-U4MPY2XT.js';
 import './chunk-B7ULUJVO.js';
 //# sourceMappingURL=primitives.js.map
 //# sourceMappingURL=primitives.js.map

package/dist/resource.js

@@ -1,5 +1,6 @@
-export { ResourceIndex } from './chunk-EG2DASKR.js';
-import './chunk-S5UNPCMQ.js';
+export { ResourceIndex } from './chunk-KGAY2AZH.js';
+import './chunk-YEPQWAD6.js';
+import './chunk-JKD6SE75.js';
 import './chunk-RMPOR2YZ.js';
 import './chunk-H23VX3RR.js';
 import './chunk-B7ULUJVO.js';

package/dist/shell.d.ts

@@ -1,9 +1,43 @@
-export { A as AppShell, a as AppShellProps, b as AppShellVariant, F as Footer, c as FooterProps, M as MainContent, d as MainContentMaxWidth, e as MainContentProps, S as Sidebar, f as SidebarProps, T as Topbar, g as TopbarProps, U as UserMenu, h as UserMenuProps } from './UserMenu-B5XbC_Gy.js';
-import { TenantSummary } from '@arqel-dev/types/tenant';
+export { A as AppShell, a as AppShellProps, b as AppShellVariant, F as Footer, c as FooterProps, M as MainContent, d as MainContentMaxWidth, e as MainContentProps, S as Sidebar, f as SidebarProps, T as Topbar, g as TopbarProps, U as UserMenu, h as UserMenuProps } from './UserMenu-QlwvvZRU.js';
 import { JSX } from 'react';
+import { NotificationItem } from '@arqel-dev/types/inertia';
+import { TenantSummary } from '@arqel-dev/types/tenant';
 import 'react/jsx-runtime';
 import '@arqel-dev/hooks';
 
+/**
+ * `<NotificationBell>` — database-notifications trigger for the Topbar
+ * `notifications` slot.
+ *
+ * Reads the shared `notifications` prop (`NotificationPayload | null`,
+ * see `HandleArqelInertiaRequests`) via `usePage()`. Mounts a bell icon
+ * with an unread-count `Badge` (shown only when `unread_count > 0`) and
+ * a `DropdownMenu` listing the `recent` notifications. Marking a single
+ * notification read, or all of them, does a scoped Inertia partial
+ * reload (`only: ['notifications']`) — no full page reload.
+ */
+
+interface NotificationBellProps {
+    className?: string;
+}
+declare function NotificationBell({ className }: NotificationBellProps): JSX.Element;
+
+/**
+ * `<NotificationList>` — renders the `recent` notifications inside the
+ * `<NotificationBell>` dropdown content.
+ *
+ * Extracted from `NotificationBell` so it can be exercised directly in
+ * tests without depending on Radix `DropdownMenu` mounting its portal
+ * content in jsdom.
+ */
+
+interface NotificationListProps {
+    items: ReadonlyArray<NotificationItem>;
+    emptyLabel: string;
+    onItemClick: (item: NotificationItem) => void;
+}
+declare function NotificationList({ items, emptyLabel, onItemClick, }: NotificationListProps): JSX.Element;
+
 /**
  * `<TenantSwitcher>` — dropdown that lists tenants the user can
  * access and dispatches `POST /admin/tenants/{id}/switch` via
@@ -27,4 +61,4 @@ interface TenantSwitcherProps {
 }
 declare function TenantSwitcher({ current, available, switchUrl, }: TenantSwitcherProps): JSX.Element | null;
 
-export { TenantSwitcher, type TenantSwitcherProps };
+export { NotificationBell, type NotificationBellProps, NotificationList, type NotificationListProps, TenantSwitcher, type TenantSwitcherProps };