@cratis/components 1.10.2 → 2.0.1

package/dist/esm/CommandForm/fields/TextAreaField.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAaO,MAAM,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,IAAC,aAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAC,QAAQ,EAAA,CACpB,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAyC,KAAK,CAAC,CAAC,MAAM,CAAC;AACzE,CAAA;;;;"}
+{"version":3,"file":"TextAreaField.js","sources":["../../../../CommandForm/fields/TextAreaField.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;AAiCA;;;;;;;;;;AAUG;MACU,aAAa,GAAG,kBAAkB,CAC3C,CAAC,KAAK,MACFA,GAAA,CAAC,aAAa,EAAA,EACV,KAAK,EAAE,KAAK,CAAC,KAAK,EAClB,QAAQ,EAAE,KAAK,CAAC,QAAQ,EACxB,MAAM,EAAE,KAAK,CAAC,MAAM,EACpB,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,WAAW,EAAE,KAAK,CAAC,WAAW,EAC9B,IAAI,EAAE,KAAK,CAAC,IAAI,IAAI,CAAC,EACrB,IAAI,EAAE,KAAK,CAAC,IAAI,EAChB,SAAS,EAAE,KAAK,CAAC,SAAS,GAAG,CAAA,OAAA,EAAU,KAAK,CAAC,SAAS,CAAA,CAAE,GAAG,QAAQ,EACnE,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,CAC1B,CACL,EACD;AACI,IAAA,YAAY,EAAE,EAAE;IAChB,YAAY,EAAE,CAAC,CAAyC,KAAK,CAAC,CAAC,MAAM,CAAC;AACzE,CAAA;;;;"}

package/dist/esm/Common/CratisComponentsProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { APIOptions } from 'primereact/api';
+export type CratisComponentsConfig = Partial<APIOptions>;
+export interface CratisComponentsProviderProps {
+    value?: CratisComponentsConfig;
+    children: React.ReactNode;
+}
+export declare const cratisDefaults: CratisComponentsConfig;
+export declare const mergeCratisComponentsConfig: (value: CratisComponentsConfig | undefined) => CratisComponentsConfig;
+export declare const CratisComponentsProvider: ({ value, children }: CratisComponentsProviderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=CratisComponentsProvider.d.ts.map

package/dist/esm/Common/CratisComponentsProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CratisComponentsProvider.d.ts","sourceRoot":"","sources":["../../../Common/CratisComponentsProvider.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAQjD,MAAM,MAAM,sBAAsB,GAAG,OAAO,CAAC,UAAU,CAAC,CAAC;AAEzD,MAAM,WAAW,6BAA6B;IAK1C,KAAK,CAAC,EAAE,sBAAsB,CAAC;IAE/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC7B;AAUD,eAAO,MAAM,cAAc,EAAE,sBAA2B,CAAC;AAMzD,eAAO,MAAM,2BAA2B,GAAI,OAAO,sBAAsB,GAAG,SAAS,KAAG,sBACxB,CAAC;AAgBjE,eAAO,MAAM,wBAAwB,GAAI,qBAAqB,6BAA6B,4CAI1F,CAAC"}

package/dist/esm/Common/CratisComponentsProvider.js

@@ -0,0 +1,40 @@
+import { jsx } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { PrimeReactProvider } from 'primereact/api';
+import { merge } from 'ts-deepmerge';
+
+/**
+ * Default configuration applied to every consumer. Intentionally empty today —
+ * reserved for Cratis-wide opinions we may want to ship in the future (for example,
+ * a default pt preset that complements the --cratis-* token layer). Anything added
+ * here is deep-merged with the consumer's `value` so consumer settings always win.
+ *
+ * Exported so specs can verify the merge contract without re-rendering React.
+ */
+const cratisDefaults = {};
+/**
+ * Pure merge of {@link cratisDefaults} and consumer-supplied config. Exposed for
+ * specs; the provider component uses the same logic inside its `useMemo`.
+ */
+const mergeCratisComponentsConfig = (value) => merge(cratisDefaults, value ?? {});
+/**
+ * Single setup point for Cratis Components. Wraps {@link PrimeReactProvider} so the
+ * library can layer Cratis-wide defaults on top of PrimeReact's pass-through and
+ * unstyled mechanisms while still letting the consumer take complete control:
+ *
+ * - Pass `unstyled: true` to disable every PrimeReact base style. The wrappers in
+ *   this package then render structurally only and pick up all visuals from your
+ *   own CSS, Tailwind, or pt definitions.
+ * - Pass `pt` / `ptOptions` to apply global per-component pass-through.
+ *
+ * Consumers who want to talk to PrimeReact directly may still mount
+ * {@link PrimeReactProvider} themselves — this component is an optional convenience,
+ * not a requirement.
+ */
+const CratisComponentsProvider = ({ value, children }) => {
+    const merged = useMemo(() => mergeCratisComponentsConfig(value), [value]);
+    return jsx(PrimeReactProvider, { value: merged, children: children });
+};
+
+export { CratisComponentsProvider, cratisDefaults, mergeCratisComponentsConfig };
+//# sourceMappingURL=CratisComponentsProvider.js.map

package/dist/esm/Common/CratisComponentsProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CratisComponentsProvider.js","sources":["../../../Common/CratisComponentsProvider.tsx"],"sourcesContent":[null],"names":["_jsx"],"mappings":";;;;;AAyBA;;;;;;;AAOG;AACI,MAAM,cAAc,GAA2B;AAEtD;;;AAGG;AACI,MAAM,2BAA2B,GAAG,CAAC,KAAyC,KACjF,KAAK,CAAC,cAAc,EAAE,KAAK,IAAI,EAAE;AAErC;;;;;;;;;;;;;AAaG;AACI,MAAM,wBAAwB,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAiC,KAAI;AAC3F,IAAA,MAAM,MAAM,GAAG,OAAO,CAAyB,MAAM,2BAA2B,CAAC,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC;IAEjG,OAAOA,GAAA,CAAC,kBAAkB,EAAA,EAAC,KAAK,EAAE,MAAM,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAsB;AAC7E;;;;"}

package/dist/esm/Common/ErrorBoundary.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../Common/ErrorBoundary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAExD,UAAU,KAAK;IACX,QAAQ,EAAE,SAAS,CAAC;CACvB;AACD,UAAU,KAAK;IACX,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,KAAK,CAAC;CAChB;AAED,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAC/C,KAAK,EAAE,KAAK,CAGjB;WAEY,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAIpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAahB"}
+{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../Common/ErrorBoundary.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAKxD,UAAU,KAAK;IAEX,QAAQ,EAAE,SAAS,CAAC;CACvB;AAKD,UAAU,KAAK;IAEX,QAAQ,EAAE,OAAO,CAAC;IAElB,KAAK,EAAE,KAAK,CAAC;CAChB;AAmBD,qBAAa,aAAc,SAAQ,SAAS,CAAC,KAAK,EAAE,KAAK,CAAC;IAE/C,KAAK,EAAE,KAAK,CAGjB;WAQY,wBAAwB,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK;IAYpD,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,SAAS;IAIpD,MAAM;CAahB"}

package/dist/esm/Common/ErrorBoundary.js

@@ -1,14 +1,46 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Component } from 'react';
 
+/**
+ * React error boundary that catches errors thrown by its descendants during
+ * render, lifecycle, and constructor calls. On error, it renders a minimal
+ * inline diagnostic (message + stack) so the rest of the application keeps
+ * working instead of crashing the whole tree.
+ *
+ * Wrap the boundary around any subtree whose failure should be isolated:
+ *
+ * ```tsx
+ * <ErrorBoundary>
+ *     <RiskyFeature />
+ * </ErrorBoundary>
+ * ```
+ *
+ * Use one boundary per logical UI region rather than a single root-level one,
+ * so failures stay scoped to the feature that caused them.
+ */
 class ErrorBoundary extends Component {
+    /** Initial state — no error captured. */
     state = {
         hasError: false,
         error: new Error(),
     };
+    /**
+     * React lifecycle hook invoked when a descendant throws. Returns the
+     * next state, which switches the boundary into its fallback render path.
+     *
+     * @param error - The error thrown by the descendant.
+     */
     static getDerivedStateFromError(error) {
         return { hasError: true, error: error };
     }
+    /**
+     * React lifecycle hook invoked alongside {@link getDerivedStateFromError}.
+     * Forwards the error and React's component stack to the console so the
+     * failure is observable in DevTools.
+     *
+     * @param error - The error thrown by the descendant.
+     * @param errorInfo - React-supplied metadata including the component stack.
+     */
     componentDidCatch(error, errorInfo) {
         console.error('Uncaught error:', error, errorInfo);
     }

package/dist/esm/Common/ErrorBoundary.js.map

@@ -1 +1 @@
-{"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAaM,MAAO,aAAc,SAAQ,SAAuB,CAAA;AAC/C,IAAA,KAAK,GAAU;AAClB,QAAA,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB;IAEM,OAAO,wBAAwB,CAAC,KAAY,EAAA;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C;IAEO,iBAAiB,CAAC,KAAY,EAAE,SAAoB,EAAA;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC;IACtD;IAEO,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrB,YAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CAChBC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,OAAA,EAAA,CAAW,EACvCA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAA,CAAK,EACjCA,qBAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAK,CAAA,EAAA,CAC7B;QAEd;AAEA,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACH;;;;"}
+{"version":3,"file":"ErrorBoundary.js","sources":["../../../Common/ErrorBoundary.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;AAuBA;;;;;;;;;;;;;;;;AAgBG;AACG,MAAO,aAAc,SAAQ,SAAuB,CAAA;;AAE/C,IAAA,KAAK,GAAU;AAClB,QAAA,QAAQ,EAAE,KAAK;QACf,KAAK,EAAE,IAAI,KAAK,EAAE;KACrB;AAED;;;;;AAKG;IACI,OAAO,wBAAwB,CAAC,KAAY,EAAA;QAC/C,OAAO,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE;IAC3C;AAEA;;;;;;;AAOG;IACI,iBAAiB,CAAC,KAAY,EAAE,SAAoB,EAAA;QACvD,OAAO,CAAC,KAAK,CAAC,iBAAiB,EAAE,KAAK,EAAE,SAAS,CAAC;IACtD;IAEO,MAAM,GAAA;AACT,QAAA,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE;AACrB,YAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,KAAK,EAAA,QAAA,EAAA,CAChBC,GAAA,CAAA,IAAA,EAAA,EAAI,SAAS,EAAC,cAAc,EAAA,QAAA,EAAA,OAAA,EAAA,CAAW,EACvCA,GAAA,CAAA,GAAA,EAAA,EAAA,QAAA,EAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,EAAA,CAAK,EACjCA,qBAAI,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,KAAK,EAAA,CAAK,CAAA,EAAA,CAC7B;QAEd;AAEA,QAAA,OAAO,IAAI,CAAC,KAAK,CAAC,QAAQ;IAC9B;AACH;;;;"}

package/dist/esm/Common/FormElement.css

@@ -0,0 +1,26 @@
+/* Copyright (c) Cratis. All rights reserved. */
+/* Licensed under the MIT license. See LICENSE file in the project root for full license information. */
+
+.cratis-form-element {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: stretch;
+}
+
+.cratis-form-element__addon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 0.75rem;
+    color: var(--cratis-text-color-secondary);
+    background: var(--cratis-surface-100);
+    border: 1px solid var(--cratis-surface-border);
+    border-right: 0;
+    border-top-left-radius: var(--cratis-border-radius);
+    border-bottom-left-radius: var(--cratis-border-radius);
+}
+
+.cratis-form-element > *:not(.cratis-form-element__addon) {
+    flex: 1 1 auto;
+    min-width: 0;
+}

package/dist/esm/Common/FormElement.d.ts

@@ -1,3 +1,4 @@
+import './FormElement.css';
 export interface FormElementProps {
     children: React.ReactNode;
     icon: React.ReactNode;

package/dist/esm/Common/FormElement.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.d.ts","sourceRoot":"","sources":["../../../Common/FormElement.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,gBAAgB;IAC7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAED,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAWlD,CAAC"}
+{"version":3,"file":"FormElement.d.ts","sourceRoot":"","sources":["../../../Common/FormElement.tsx"],"names":[],"mappings":"AAGA,OAAO,mBAAmB,CAAC;AAK3B,MAAM,WAAW,gBAAgB;IAE7B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAO1B,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;CACzB;AAcD,eAAO,MAAM,WAAW,GAAI,OAAO,gBAAgB,4CAWlD,CAAC"}

package/dist/esm/Common/FormElement.js

@@ -1,7 +1,20 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
+import './FormElement.css';
 
+/**
+ * Lightweight wrapper that places an icon addon to the left of a form input,
+ * styled with the `--cratis-*` token layer (background, border, radius). Use
+ * it to give input fields a leading icon without pulling in PrimeReact's
+ * `InputGroup` chrome.
+ *
+ * ```tsx
+ * <FormElement icon={<i className="pi pi-user" />}>
+ *     <InputText value={name} onChange={…} />
+ * </FormElement>
+ * ```
+ */
 const FormElement = (props) => {
-    return (jsx("div", { className: "flex flex-col md:flex-row gap-3", children: jsxs("div", { className: "p-inputgroup flex-1", children: [jsx("span", { className: "p-inputgroup-addon", children: props.icon }), props.children] }) }));
+    return (jsx("div", { className: "flex flex-col md:flex-row gap-3", children: jsxs("div", { className: "cratis-form-element", children: [jsx("span", { className: "cratis-form-element__addon", children: props.icon }), props.children] }) }));
 };
 
 export { FormElement };

package/dist/esm/Common/FormElement.js.map

@@ -1 +1 @@
-{"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;AAQO,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;IACnD,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAC5CC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAChCD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAC/B,KAAK,CAAC,IAAI,EAAA,CACR,EACN,KAAK,CAAC,QAAQ,CAAA,EAAA,CACb,EAAA,CACJ;AAEd;;;;"}
+{"version":3,"file":"FormElement.js","sources":["../../../Common/FormElement.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;AAoBA;;;;;;;;;;;AAWG;AACI,MAAM,WAAW,GAAG,CAAC,KAAuB,KAAI;IACnD,QACIA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,iCAAiC,EAAA,QAAA,EAC5CC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,qBAAqB,EAAA,QAAA,EAAA,CAChCD,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAC,4BAA4B,EAAA,QAAA,EACvC,KAAK,CAAC,IAAI,EAAA,CACR,EACN,KAAK,CAAC,QAAQ,CAAA,EAAA,CACb,EAAA,CACJ;AAEd;;;;"}

package/dist/esm/Common/Page.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../Common/Page.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,IAAI,GAAI,gDAAwD,SAAS,4CASrF,CAAC"}
+{"version":3,"file":"Page.d.ts","sourceRoot":"","sources":["../../../Common/Page.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlD,MAAM,WAAW,SAAU,SAAQ,cAAc,CAAC,cAAc,CAAC;IAM7D,KAAK,EAAE,MAAM,CAAC;IAOd,SAAS,CAAC,EAAE,OAAO,CAAC;IAGpB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAOrB,KAAK,CAAC,EAAE,OAAO,CAAA;CAClB;AAeD,eAAO,MAAM,IAAI,GAAI,gDAAwD,SAAS,4CASrF,CAAC"}

package/dist/esm/Common/Page.js

@@ -1,5 +1,18 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 
+/**
+ * Top-level page layout primitive. Renders a flex column that fills its parent
+ * vertically, with optional title heading and optional `panel` chrome around
+ * the main content area. Intended as the root element of every routable view.
+ *
+ * ```tsx
+ * <Page title="Authors" showTitle panel>
+ *     <AuthorList />
+ * </Page>
+ * ```
+ *
+ * @param props - {@link PageProps}.
+ */
 const Page = ({ title, showTitle = false, children, panel, ...rest }) => {
     return (jsxs("div", { className: 'flex flex-col h-full flex-1', ...rest, children: [showTitle && jsx("h1", { className: 'text-3xl mt-3 mb-4', children: title }), jsx("main", { className: `overflow-hidden h-full flex flex-col flex-1 ${panel ? 'panel' : ''}`, children: children })] }));
 };

package/dist/esm/Common/Page.js.map

@@ -1 +1 @@
-{"version":3,"file":"Page.js","sources":["../../../Common/Page.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;MAYa,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACtF,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,KAAK,IAAI,EAAA,QAAA,EAAA,CAChD,SAAS,IAAIC,YAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAC7DA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,4CAAA,EAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}
+{"version":3,"file":"Page.js","sources":["../../../Common/Page.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;AAoCA;;;;;;;;;;;;AAYG;MACU,IAAI,GAAG,CAAC,EAAE,KAAK,EAAE,SAAS,GAAG,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAa,KAAI;AACtF,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,6BAA6B,KAAK,IAAI,EAAA,QAAA,EAAA,CAChD,SAAS,IAAIC,YAAI,SAAS,EAAC,oBAAoB,EAAA,QAAA,EAAE,KAAK,EAAA,CAAM,EAC7DA,GAAA,CAAA,MAAA,EAAA,EAAM,SAAS,EAAE,CAAA,4CAAA,EAA+C,KAAK,GAAG,OAAO,GAAG,EAAE,CAAA,CAAE,EAAA,QAAA,EACjF,QAAQ,EAAA,CACN,CAAA,EAAA,CACL;AAEd;;;;"}

package/dist/esm/Common/Tooltip.css

@@ -3,8 +3,8 @@
 
 /* ── Tooltip bubble ──────────────────────────────────────────────────────── */
 .tooltip-bubble {
-    background: var(--surface-100);
-    color: var(--text-color);
-    border: 1px solid var(--surface-border);
+    background: var(--cratis-surface-100);
+    color: var(--cratis-text-color);
+    border: 1px solid var(--cratis-surface-border);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
 }

package/dist/esm/Common/index.d.ts

@@ -1,3 +1,4 @@
+export * from './CratisComponentsProvider';
 export * from './ErrorBoundary';
 export * from './Icon';
 export * from './Page';

package/dist/esm/Common/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Common/index.ts"],"names":[],"mappings":"AAGA,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../Common/index.ts"],"names":[],"mappings":"AAGA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,iBAAiB,CAAC;AAChC,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC"}

package/dist/esm/Common/index.js

@@ -1,3 +1,4 @@
+export { CratisComponentsProvider, cratisDefaults, mergeCratisComponentsConfig } from './CratisComponentsProvider.js';
 export { ErrorBoundary } from './ErrorBoundary.js';
 export { IconDisplay } from './Icon.js';
 export { Page } from './Page.js';

package/dist/esm/Common/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;AAAA;AACA"}
+{"version":3,"file":"index.js","sources":["../../../Common/index.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAAA;AACA"}

package/dist/esm/DataPage/DataPage.d.ts

@@ -1,8 +1,9 @@
 import { ReactNode } from 'react';
 import React from 'react';
 import { MenuItem as PrimeMenuItem } from 'primereact/menuitem';
+import { type MenubarProps } from 'primereact/menubar';
 import { IObservableQueryFor, IQueryFor } from '@cratis/arc/queries';
-import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent, type DataTableProps as PrimeDataTableProps } from 'primereact/datatable';
 import { Constructor } from '@cratis/fundamentals';
 export interface MenuItemProps extends PrimeMenuItem {
     disableOnUnselected?: boolean;
@@ -20,7 +21,7 @@ export interface IDetailsComponentProps<TDataType> {
     item: TDataType;
     onRefresh?: () => void;
 }
-export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType>, TDataType, TArguments> {
+export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType>, TDataType extends object, TArguments> {
     title: string;
     children: ReactNode;
     detailsComponent?: React.FC<IDetailsComponentProps<any>>;
@@ -34,9 +35,17 @@ export interface DataPageProps<TQuery extends IQueryFor<TDataType> | IObservable
     defaultFilters?: DataTableFilterMeta;
     clientFiltering?: boolean;
     onRefresh?(): void;
+    tableClassName?: string;
+    tablePt?: PrimeDataTableProps<TDataType[]>['pt'];
+    tablePtOptions?: PrimeDataTableProps<TDataType[]>['ptOptions'];
+    tableUnstyled?: boolean;
+    menubarClassName?: string;
+    menubarPt?: MenubarProps['pt'];
+    menubarPtOptions?: MenubarProps['ptOptions'];
+    menubarUnstyled?: boolean;
 }
 declare const DataPage: {
-    <TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType, TArguments>, TDataType, TArguments extends object>(props: DataPageProps<TQuery, TDataType, TArguments>): import("react/jsx-runtime").JSX.Element;
+    <TQuery extends IQueryFor<TDataType> | IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataPageProps<TQuery, TDataType, TArguments>): import("react/jsx-runtime").JSX.Element;
     MenuItems: ({ children }: MenuItemsProps) => import("react/jsx-runtime").JSX.Element;
     Columns: ({ children }: ColumnProps) => import("react/jsx-runtime").JSX.Element;
 };

package/dist/esm/DataPage/DataPage.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataPage.d.ts","sourceRoot":"","sources":["../../../DataPage/DataPage.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAW,MAAM,OAAO,CAAC;AAE3C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAEhE,OAAO,EAAE,mBAAmB,EAAE,SAAS,EAAY,MAAM,qBAAqB,CAAC;AAE/E,OAAO,EAAE,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAGhG,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAInD,MAAM,WAAW,aAAc,SAAQ,aAAa;IAChD,mBAAmB,CAAC,EAAE,OAAO,CAAC;CACjC;AAGD,eAAO,MAAM,QAAQ,GAAI,GAAG,aAAa,SAExC,CAAC;AAEF,MAAM,WAAW,cAAc;IAC3B,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,MAAM,WAAW,WAAW;IACxB,QAAQ,EAAE,SAAS,CAAC;CACvB;AAED,eAAO,MAAM,SAAS,GAAI,cAAc,cAAc,4CA0BrD,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,cAAc,WAAW,4CAwBhD,CAAC;AAEF,MAAM,WAAW,sBAAsB,CAAC,SAAS;IAC7C,IAAI,EAAE,SAAS,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;CAC1B;AAoBD,MAAM,WAAW,aAAa,CAAC,MAAM,SAAS,SAAS,CAAC,SAAS,CAAC,GAAG,mBAAmB,CAAC,SAAS,CAAC,EAAE,SAAS,EAAE,UAAU;IAItH,KAAK,EAAE,MAAM,CAAC;IAKd,QAAQ,EAAE,SAAS,CAAC;IAKpB,gBAAgB,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAAC,GAAG,CAAC,CAAC,CAAC;IAKzD,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,GAAG,GAAG,SAAS,GAAG,IAAI,CAAC;IAKnC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC;IAK1E,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAKrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,SAAS,CAAC,IAAI,IAAI,CAAC;CACtB;AAOD,QAAA,MAAM,QAAQ;KAAI,MAAM,SAAS,SAAS,CAAC,SAAS,CAAC,GAAG,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,EAAE,UAAU,SAAS,MAAM,SAAS,aAAa,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC;8BArJrJ,cAAc;4BA4BhB,WAAW;CAqJhD,CAAC;AAKF,OAAO,EAAE,QAAQ,EAAE,CAAC"}
+{"version":3,"file":"DataPage.d.ts","sourceRoot":"","sources":["../../../DataPage/DataPage.tsx"],"names":[],"mappings":"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"}

package/dist/esm/DataPage/DataPage.js

@@ -7,10 +7,22 @@ import { DataTableForObservableQuery } from '../DataTables/DataTableForObservabl
 import { DataTableForQuery } from '../DataTables/DataTableForQuery.js';
 import { Allotment } from 'allotment';
 
+/**
+ * Declarative menu item for use inside `<DataPage.MenuItems>`. Renders nothing
+ * directly; the surrounding {@link MenuItems} component reads its props and
+ * forwards them to the action `Menubar`.
+ */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 const MenuItem = (_) => {
     return null;
 };
+/**
+ * Renders an action `Menubar` at the top of a {@link DataPage}, populated from
+ * `<DataPage.MenuItem>` children. Each menu item's `disableOnUnselected` flag
+ * is automatically honored against the current row selection.
+ *
+ * Use as `<DataPage.MenuItems>` inside a `<DataPage>`.
+ */
 const MenuItems = ({ children }) => {
     const context = useDataPageContext();
     const isDisabled = useMemo(() => {
@@ -29,15 +41,24 @@ const MenuItems = ({ children }) => {
         });
         return menuItems;
     }, [children, context.selectedItem]);
-    return (jsx("div", { className: "px-4 py-2", children: jsx(Menubar, { "aria-label": "Actions", model: items }) }));
+    return (jsx("div", { className: "px-4 py-2", children: jsx(Menubar, { "aria-label": "Actions", model: items, className: context.menubarClassName, pt: context.menubarPt, ptOptions: context.menubarPtOptions, unstyled: context.menubarUnstyled }) }));
 };
+/**
+ * Renders the data table at the body of a {@link DataPage}. Automatically
+ * selects between {@link DataTableForQuery} (snapshot query) and
+ * {@link DataTableForObservableQuery} (real-time observable) based on the
+ * `query` type provided to the surrounding `<DataPage>`.
+ *
+ * Use as `<DataPage.Columns>` inside a `<DataPage>`, with PrimeReact `<Column>`
+ * children defining the table columns.
+ */
 const Columns = ({ children }) => {
     const context = useDataPageContext();
     if (context.query.prototype instanceof QueryFor) {
-        return (jsx(DataTableForQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, children: children }));
+        return (jsx(DataTableForQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, className: context.tableClassName, pt: context.tablePt, ptOptions: context.tablePtOptions, unstyled: context.tableUnstyled, children: children }));
     }
     else {
-        return (jsx(DataTableForObservableQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, children: children }));
+        return (jsx(DataTableForObservableQuery, { ...context, selection: context.selectedItem, onSelectionChange: context.onSelectionChanged, clientFiltering: context.clientFiltering, className: context.tableClassName, pt: context.tablePt, ptOptions: context.tablePtOptions, unstyled: context.tableUnstyled, children: children }));
     }
 };
 const DataPageContext = React.createContext(null);
@@ -49,9 +70,86 @@ function useDataPageContext() {
     return context;
 }
 /**
- * Represents a data driven page with a menu and custom defined columns for the data table.
- * @param props Props for the DataPage component
- * @returns Function to render the DataPage component
+ * A page primitive that combines an action menubar, a query-backed data
+ * table, and an optional details pane into one layout. Designed as the
+ * default rendering for "list view" pages in an Arc app.
+ *
+ * ## What `TQuery` is
+ *
+ * `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
+ * generator from a C# read model query. Two flavors are accepted and
+ * **selected automatically at runtime** based on the class hierarchy:
+ *
+ * - **`IQueryFor<TDataType, TArguments>`** — a snapshot query. Re-fetched
+ *   when `queryArguments` change or when the page is mounted. Rendered
+ *   through {@link DataTableForQuery} internally.
+ * - **`IObservableQueryFor<TDataType, TArguments>`** — a real-time
+ *   subscription. Connects to the backend over WebSocket and re-renders
+ *   automatically whenever the underlying read model changes server-side.
+ *   Rendered through {@link DataTableForObservableQuery} internally.
+ *
+ * You don't pick which inner table to use — `DataPage` inspects the
+ * prototype chain (`context.query.prototype instanceof QueryFor`) and
+ * mounts the correct one.
+ *
+ * ## Declarative composition
+ *
+ * Three children build up the page:
+ *
+ * - **`<DataPage.MenuItems>`** wraps `<DataPage.MenuItem>` elements that
+ *   become the action `Menubar` at the top. Each item declares its `icon`,
+ *   `label`, and `command` (an `onClick` handler). Items can be marked
+ *   `disableOnUnselected` so they automatically grey out until the user
+ *   picks a row — useful for Edit / Delete actions that need a target.
+ *
+ * - **`<DataPage.Columns>`** wraps PrimeReact `<Column>` elements that
+ *   describe the visible columns. The columns themselves are
+ *   PrimeReact's — anything supported by their `DataTable` `<Column>` is
+ *   supported here (sorting, filtering, custom body templates, …).
+ *
+ * - **`detailsComponent`** (optional) is a React component rendered in a
+ *   right-hand pane via Allotment when a row is selected. It receives the
+ *   selected item as `item` and an `onRefresh` callback the parent can
+ *   invoke to ask the page to refetch.
+ *
+ * ## Selection lifecycle
+ *
+ * `DataPage` keeps the current selection in local state and threads it to
+ * the inner table, the menubar (`disableOnUnselected` items follow it),
+ * and the optional details pane. The `onSelectionChange` prop is invoked
+ * after every change if the consumer also needs to react to it.
+ *
+ * ```tsx
+ * <DataPage<AllAuthors, Author, never>
+ *     title="Authors"
+ *     query={AllAuthors}                          // proxy from C#
+ *     detailsComponent={AuthorDetails}>
+ *     <DataPage.MenuItems>
+ *         <DataPage.MenuItem icon={FaPlus}   label="Add"    command={onAdd} />
+ *         <DataPage.MenuItem icon={FaPencil} label="Edit"   command={onEdit}
+ *                            disableOnUnselected />
+ *         <DataPage.MenuItem icon={FaTrash}  label="Delete" command={onDelete}
+ *                            disableOnUnselected />
+ *     </DataPage.MenuItems>
+ *     <DataPage.Columns>
+ *         <Column field="name"  header="Name" sortable />
+ *         <Column field="email" header="Email" />
+ *     </DataPage.Columns>
+ * </DataPage>
+ * ```
+ *
+ * ## Styling
+ *
+ * The inner DataTable and Menubar each have their own per-slot props:
+ * `tablePt` / `tableUnstyled` / `tableClassName` for the table;
+ * `menubarPt` / `menubarUnstyled` / `menubarClassName` for the action
+ * menubar. See the [pass-through cheat sheet](../../Documentation/Styling/pass-through.md)
+ * for the full slot reference.
+ *
+ * @typeParam TQuery - The query class (proxy generated from a C# read model query).
+ * @typeParam TDataType - The row type returned by the query.
+ * @typeParam TArguments - The query's argument object type.
+ * @param props - {@link DataPageProps}.
  */
 const DataPage = (props) => {
     const [selectedItem, setSelectedItem] = React.useState(undefined);

package/dist/esm/DataPage/DataPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataPage.js","sources":["../../../DataPage/DataPage.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}
+{"version":3,"file":"DataPage.js","sources":["../../../DataPage/DataPage.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"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"}

package/dist/esm/DataTables/DataTableForObservableQuery.d.ts

@@ -1,4 +1,5 @@
-import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent } from 'primereact/datatable';
+import { DataTableFilterMeta, DataTableSelectionSingleChangeEvent, type DataTableProps as PrimeDataTableProps } from 'primereact/datatable';
+import { type PaginatorProps } from 'primereact/paginator';
 import { Constructor } from '@cratis/fundamentals';
 import { IObservableQueryFor } from '@cratis/arc/queries';
 import { ReactNode } from 'react';
@@ -13,6 +14,13 @@ export interface DataTableForObservableQueryProps<TQuery extends IObservableQuer
     globalFilterFields?: string[] | undefined;
     defaultFilters?: DataTableFilterMeta;
     clientFiltering?: boolean;
+    className?: string;
+    pt?: PrimeDataTableProps<TDataType[]>['pt'];
+    ptOptions?: PrimeDataTableProps<TDataType[]>['ptOptions'];
+    unstyled?: boolean;
+    paginatorPt?: PaginatorProps['pt'];
+    paginatorPtOptions?: PaginatorProps['ptOptions'];
+    paginatorUnstyled?: boolean;
 }
 export declare const DataTableForObservableQuery: <TQuery extends IObservableQueryFor<TDataType, TArguments>, TDataType extends object, TArguments extends object>(props: DataTableForObservableQueryProps<TQuery, TDataType, TArguments>) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=DataTableForObservableQuery.d.ts.map

package/dist/esm/DataTables/DataTableForObservableQuery.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,MAAM,sBAAsB,CAAC;AAE3G,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAU,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAK/D,MAAM,WAAW,gCAAgC,CAAC,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAI5J,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAKrC,eAAe,CAAC,EAAE,OAAO,CAAC;CAC7B;AASD,eAAO,MAAM,2BAA2B,GAAI,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,gCAAgC,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CAgGjO,CAAC"}
+{"version":3,"file":"DataTableForObservableQuery.d.ts","sourceRoot":"","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAa,mBAAmB,EAAE,mCAAmC,EAAE,KAAK,cAAc,IAAI,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACvJ,OAAO,EAAa,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACtE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,mBAAmB,EAAU,MAAM,qBAAqB,CAAC;AAElE,OAAO,EAAE,SAAS,EAA+B,MAAM,OAAO,CAAC;AAS/D,MAAM,WAAW,gCAAgC,CAAC,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM;IAI5J,QAAQ,CAAC,EAAE,SAAS,CAAC;IAKrB,KAAK,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IAK3B,cAAc,CAAC,EAAE,UAAU,CAAC;IAK5B,YAAY,EAAE,MAAM,CAAC;IAKrB,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAK7B,SAAS,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,IAAI,CAAC;IAKzC,iBAAiB,CAAC,CAAC,KAAK,EAAE,mCAAmC,CAAC,SAAS,EAAE,CAAC,GAAG,IAAI,CAAC;IAKlF,kBAAkB,CAAC,EAAE,MAAM,EAAE,GAAG,SAAS,CAAC;IAK1C,cAAc,CAAC,EAAE,mBAAmB,CAAC;IAKrC,eAAe,CAAC,EAAE,OAAO,CAAC;IAK1B,SAAS,CAAC,EAAE,MAAM,CAAC;IAGnB,EAAE,CAAC,EAAE,mBAAmB,CAAC,SAAS,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAG5C,SAAS,CAAC,EAAE,mBAAmB,CAAC,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC,CAAC;IAG1D,QAAQ,CAAC,EAAE,OAAO,CAAC;IAGnB,WAAW,CAAC,EAAE,cAAc,CAAC,IAAI,CAAC,CAAC;IAGnC,kBAAkB,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAC;IAGjD,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAoED,eAAO,MAAM,2BAA2B,GAAI,MAAM,SAAS,mBAAmB,CAAC,SAAS,EAAE,UAAU,CAAC,EAAE,SAAS,SAAS,MAAM,EAAE,UAAU,SAAS,MAAM,EAAE,OAAO,gCAAgC,CAAC,MAAM,EAAE,SAAS,EAAE,UAAU,CAAC,4CAuGjO,CAAC"}

package/dist/esm/DataTables/DataTableForObservableQuery.js

@@ -7,9 +7,68 @@ import { useState, useRef, useEffect } from 'react';
 
 const paging = new Paging(0, 20);
 /**
- * Represents a DataTable for a query.
- * @param props Props for the component
- * @returns Function to render the DataTableForQuery component
+ * A paged data table bound to a Cratis Arc **observable** query
+ * (`IObservableQueryFor<TDataType, TArguments>`). Subscribes via
+ * `useObservableQueryWithPaging` from `@cratis/arc.react/queries`, which
+ * opens a WebSocket connection to the backend and re-renders the table
+ * automatically whenever the underlying read model changes server-side.
+ *
+ * ## What `TQuery` is
+ *
+ * `TQuery` is the auto-generated TypeScript class produced by the Arc proxy
+ * generator from a C# read model's static observable query method (one
+ * that returns `ISubject<TDataType>` on the backend). The proxy hooks the
+ * WebSocket subscription up; you only deal with the resulting React data.
+ *
+ * ## What's unique
+ *
+ * - **Real-time updates**: server-side projection writes flow into the
+ *   table within the same render cycle, with no manual polling or refresh
+ *   button. The connection re-subscribes automatically when
+ *   `queryArguments` change.
+ * - **Resize-aware scrollable height**: the wrapper observes its container
+ *   via `ResizeObserver` and adjusts the inner DataTable height to fit,
+ *   so the table behaves correctly inside flex layouts (it never overflows
+ *   beyond its parent or shrinks below 200px).
+ * - **Lazy paging + optional client filtering**: same modes as
+ *   {@link DataTableForQuery}, but the page is re-issued through the
+ *   observable subscription when the user pages.
+ *
+ * Use {@link DataTableForQuery} for snapshot queries that don't need live
+ * updates. Use {@link DataPage} for a higher-level layout that combines
+ * this table with a menubar, selection, and a details pane.
+ *
+ * ## Children
+ *
+ * Children are PrimeReact `<Column>` elements — same as
+ * {@link DataTableForQuery}.
+ *
+ * ```tsx
+ * import { DataTableForObservableQuery } from '@cratis/components/DataTables';
+ * import { Column } from 'primereact/column';
+ * import { ActiveSessions } from './ActiveSessions';   // proxy from C#
+ *
+ * <DataTableForObservableQuery
+ *     query={ActiveSessions}
+ *     emptyMessage="No active sessions">
+ *     <Column field="userName"  header="User" />
+ *     <Column field="startedAt" header="Started" />
+ * </DataTableForObservableQuery>
+ * ```
+ *
+ * Rows appear and disappear in this table as users log in / log out
+ * server-side — no manual refresh required.
+ *
+ * ## Styling
+ *
+ * Identical to {@link DataTableForQuery}: `pt` / `ptOptions` / `unstyled` /
+ * `className` target the inner DataTable; `paginatorPt` and friends target
+ * the inner Paginator. See [pass-through cheat sheet](../../Documentation/Styling/pass-through.md).
+ *
+ * @typeParam TQuery - The observable query class (proxy generated from C# `IObservableQueryFor`).
+ * @typeParam TDataType - The row type returned by the query.
+ * @typeParam TArguments - The query's argument object type.
+ * @param props - {@link DataTableForObservableQueryProps}.
  */
 const DataTableForObservableQuery = (props) => {
     const [filters, setFilters] = useState(props.defaultFilters ?? {});
@@ -56,8 +115,8 @@ const DataTableForObservableQuery = (props) => {
             display: 'flex',
             flexDirection: 'column',
             height: '100%',
-            border: '1px solid var(--surface-border)',
-            borderRadius: 'var(--border-radius)',
+            border: '1px solid var(--cratis-surface-border)',
+            borderRadius: 'var(--cratis-border-radius)',
             overflow: 'hidden'
         }, children: [jsx("div", { style: { height: `${tableHeight}px`, overflow: 'hidden' }, children: jsx(DataTable, { value: result.data, lazy: !isClientFiltering, rows: paging.pageSize, totalRecords: totalRecords, scrollable: true, scrollHeight: '100%', selectionMode: 'single', selection: props.selection, onSelectionChange: props.onSelectionChange, dataKey: props.dataKey, filters: filters, filterDisplay: 'menu', onFilter: (e) => {
                         setFilters(e.filters);
@@ -65,7 +124,7 @@ const DataTableForObservableQuery = (props) => {
                             const filteredValue = e.filteredValue;
                             setFilteredTotal(filteredValue ? filteredValue.length : undefined);
                         }
-                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--surface-border)' }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page) }) }))] }));
+                    }, globalFilterFields: props.globalFilterFields, emptyMessage: props.emptyMessage, className: props.className, pt: props.pt, ptOptions: props.ptOptions, unstyled: props.unstyled, children: props.children }) }), result.paging.totalItems > 0 && (jsx("div", { style: { borderTop: '1px solid var(--cratis-surface-border)' }, children: jsx(Paginator, { first: result.paging.page * paging.pageSize, rows: paging.pageSize, totalRecords: result.paging.totalItems, onPageChange: (e) => setPage(e.page), pt: props.paginatorPt, ptOptions: props.paginatorPtOptions, unstyled: props.paginatorUnstyled }) }))] }));
 };
 
 export { DataTableForObservableQuery };

package/dist/esm/DataTables/DataTableForObservableQuery.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AAiEA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAEhC;;;;AAIG;AACI,MAAM,2BAA2B,GAAG,CAAiH,KAAsE,KAAI;AAClO,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC;IACjF,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,4BAA4B,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AACnG,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,GAAG,CAAC;AAC3D,IAAA,MAAM,UAAU,GAAG,MAAM,CAA4C,SAAS,CAAC;AAC/E,IAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,eAAe,KAAK,IAAI;AACxD,IAAA,MAAM,YAAY,GAAG,iBAAiB,IAAI,aAAa,KAAK,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU;IAEhH,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAE3B,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AAClD,YAAA,IAAI,UAAU,CAAC,OAAO,EAAE;AACpB,gBAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC;YACpC;AAEA,YAAA,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AACjC,gBAAA,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;AACzB,oBAAA,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM;AAChD,oBAAA,IAAI,eAAe,GAAG,CAAC,EAAE;AACrB,wBAAA,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7D,wBAAA,MAAM,gBAAgB,GAAG,eAAe,GAAG,eAAe,GAAG,CAAC;wBAC9D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,GAAG,CAAC;wBAEjD,cAAc,CAAC,UAAU,IAAG;4BACxB,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,EAAE;AACtC,gCAAA,OAAO,SAAS;4BACpB;AACA,4BAAA,OAAO,UAAU;AACrB,wBAAA,CAAC,CAAC;oBACN;gBACJ;YACJ,CAAC,EAAE,EAAE,CAAC;AACV,QAAA,CAAC,CAAC;AAEF,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAE5C,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,UAAU,CAAC,OAAO,EAAE;AACpB,gBAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC;YACpC;YACA,cAAc,CAAC,UAAU,EAAE;AAC/B,QAAA,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;AAE9B,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;AACH,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,iCAAiC;AACzC,YAAA,YAAY,EAAE,sBAAsB;AACpC,YAAA,QAAQ,EAAE;AACb,SAAA,EAAA,QAAA,EAAA,CACDC,aAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAA,QAAA,EAC1DA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAE,CAAC,iBAAiB,EACxB,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAA,IAAA,EACV,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAI;AACZ,wBAAA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;wBACrB,IAAI,iBAAiB,EAAE;AACnB,4BAAA,MAAM,aAAa,GAAG,CAAC,CAAC,aAAsC;AAC9D,4BAAA,gBAAgB,CAAC,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC;wBACtE;AACJ,oBAAA,CAAC,EACD,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAAA,QAAA,EAC/B,KAAK,CAAC,QAAQ,EAAA,CACP,GACV,EACL,MAAM,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,KACzBA,aAAK,KAAK,EAAE,EAAE,SAAS,EAAE,iCAAiC,EAAE,YACxDA,GAAA,CAAC,SAAS,IACN,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,YAAY,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EAAA,CACtC,GACA,CACT,CAAA,EAAA,CACC;AAEd;;;;"}
+{"version":3,"file":"DataTableForObservableQuery.js","sources":["../../../DataTables/DataTableForObservableQuery.tsx"],"sourcesContent":[null],"names":["_jsxs","_jsx"],"mappings":";;;;;;;AA4FA,MAAM,MAAM,GAAG,IAAI,MAAM,CAAC,CAAC,EAAE,EAAE,CAAC;AAEhC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA+DG;AACI,MAAM,2BAA2B,GAAG,CAAiH,KAAsE,KAAI;AAClO,IAAA,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAsB,KAAK,CAAC,cAAc,IAAI,EAAE,CAAC;IACvF,MAAM,CAAC,aAAa,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAqB,SAAS,CAAC;IACjF,MAAM,CAAC,MAAM,IAAI,OAAO,CAAC,GAAG,4BAA4B,CAAC,KAAK,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,cAAc,CAAC;AACnG,IAAA,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAS,GAAG,CAAC;AAC3D,IAAA,MAAM,UAAU,GAAG,MAAM,CAA4C,SAAS,CAAC;AAC/E,IAAA,MAAM,iBAAiB,GAAG,KAAK,CAAC,eAAe,KAAK,IAAI;AACxD,IAAA,MAAM,YAAY,GAAG,iBAAiB,IAAI,aAAa,KAAK,SAAS,GAAG,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU;IAEhH,SAAS,CAAC,MAAK;QACX,IAAI,CAAC,YAAY,CAAC,OAAO;YAAE;QAE3B,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,KAAI;AAClD,YAAA,IAAI,UAAU,CAAC,OAAO,EAAE;AACpB,gBAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC;YACpC;AAEA,YAAA,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,MAAK;AACjC,gBAAA,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE;AACzB,oBAAA,MAAM,eAAe,GAAG,KAAK,CAAC,WAAW,CAAC,MAAM;AAChD,oBAAA,IAAI,eAAe,GAAG,CAAC,EAAE;AACrB,wBAAA,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,GAAG,EAAE,GAAG,CAAC;AAC7D,wBAAA,MAAM,gBAAgB,GAAG,eAAe,GAAG,eAAe,GAAG,CAAC;wBAC9D,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,gBAAgB,EAAE,GAAG,CAAC;wBAEjD,cAAc,CAAC,UAAU,IAAG;4BACxB,IAAI,IAAI,CAAC,GAAG,CAAC,SAAS,GAAG,UAAU,CAAC,GAAG,CAAC,EAAE;AACtC,gCAAA,OAAO,SAAS;4BACpB;AACA,4BAAA,OAAO,UAAU;AACrB,wBAAA,CAAC,CAAC;oBACN;gBACJ;YACJ,CAAC,EAAE,EAAE,CAAC;AACV,QAAA,CAAC,CAAC;AAEF,QAAA,cAAc,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,CAAC;AAE5C,QAAA,OAAO,MAAK;AACR,YAAA,IAAI,UAAU,CAAC,OAAO,EAAE;AACpB,gBAAA,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC;YACpC;YACA,cAAc,CAAC,UAAU,EAAE;AAC/B,QAAA,CAAC;IACL,CAAC,EAAE,CAAC,MAAM,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC;AAE9B,IAAA,QACIA,IAAA,CAAA,KAAA,EAAA,EACI,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE;AACH,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,QAAQ;AACvB,YAAA,MAAM,EAAE,MAAM;AACd,YAAA,MAAM,EAAE,wCAAwC;AAChD,YAAA,YAAY,EAAE,6BAA6B;AAC3C,YAAA,QAAQ,EAAE;AACb,SAAA,EAAA,QAAA,EAAA,CACDC,aAAK,KAAK,EAAE,EAAE,MAAM,EAAE,CAAA,EAAG,WAAW,CAAA,EAAA,CAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAA,QAAA,EAC1DA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,IAA2B,EACzC,IAAI,EAAE,CAAC,iBAAiB,EACxB,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAA,IAAA,EACV,YAAY,EAAC,MAAM,EACnB,aAAa,EAAC,QAAQ,EACtB,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,iBAAiB,EAAE,KAAK,CAAC,iBAAiB,EAC1C,OAAO,EAAE,KAAK,CAAC,OAAO,EACtB,OAAO,EAAE,OAAO,EAChB,aAAa,EAAC,MAAM,EACpB,QAAQ,EAAE,CAAC,CAAC,KAAI;AACZ,wBAAA,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC;wBACrB,IAAI,iBAAiB,EAAE;AACnB,4BAAA,MAAM,aAAa,GAAG,CAAC,CAAC,aAAsC;AAC9D,4BAAA,gBAAgB,CAAC,aAAa,GAAG,aAAa,CAAC,MAAM,GAAG,SAAS,CAAC;wBACtE;AACJ,oBAAA,CAAC,EACD,kBAAkB,EAAE,KAAK,CAAC,kBAAkB,EAC5C,YAAY,EAAE,KAAK,CAAC,YAAY,EAChC,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,EAAE,EAAE,KAAK,CAAC,EAAE,EACZ,SAAS,EAAE,KAAK,CAAC,SAAS,EAC1B,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAA,QAAA,EACvB,KAAK,CAAC,QAAQ,EAAA,CACP,EAAA,CACV,EACL,MAAM,CAAC,MAAM,CAAC,UAAU,GAAG,CAAC,KACzBA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,SAAS,EAAE,wCAAwC,EAAE,YAC/DA,GAAA,CAAC,SAAS,EAAA,EACN,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,IAAI,GAAG,MAAM,CAAC,QAAQ,EAC3C,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,YAAY,EAAE,MAAM,CAAC,MAAM,CAAC,UAAU,EACtC,YAAY,EAAE,CAAC,CAAC,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,EACpC,EAAE,EAAE,KAAK,CAAC,WAAW,EACrB,SAAS,EAAE,KAAK,CAAC,kBAAkB,EACnC,QAAQ,EAAE,KAAK,CAAC,iBAAiB,EAAA,CACnC,EAAA,CACA,CACT,CAAA,EAAA,CACC;AAEd;;;;"}