@contractspec/lib.design-system 1.52.0 → 1.54.0

package/dist/components/atoms/Stepper.d.ts

@@ -1,8 +1,8 @@
-import * as react_jsx_runtime6 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 import { StepperProps } from "@contractspec/lib.ui-kit-web/ui/stepper";
 
 //#region src/components/atoms/Stepper.d.ts
-declare function Stepper$1(props: StepperProps): react_jsx_runtime6.JSX.Element;
+declare function Stepper$1(props: StepperProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Stepper$1 as Stepper };
 //# sourceMappingURL=Stepper.d.ts.map

package/dist/components/atoms/Textarea.js

@@ -7,18 +7,12 @@ import { Textarea } from "@contractspec/lib.ui-kit-web/ui/textarea";
 function Textarea$1({ value, defaultValue, onChange, onSubmit, onFocus, onBlur, placeholder, disabled, readOnly, maxLength, name, className, rows, keyboard, ...rest }) {
 	const webKeyboard = mapKeyboardToWeb(keyboard);
 	const handleChange = React.useCallback((e) => onChange?.(e), [onChange]);
-	const handleKeyDown = React.useCallback((e) => {
-		if (e.key === "Enter" && webKeyboard.type !== "search") {
-			if (e.metaKey || e.ctrlKey) onSubmit?.(e);
-		}
-	}, [onSubmit, webKeyboard.type]);
 	return /* @__PURE__ */ jsx(Textarea, {
 		...rest,
 		className,
 		value,
 		defaultValue,
 		onChange: handleChange,
-		onKeyDown: handleKeyDown,
 		onFocus,
 		onBlur,
 		placeholder,

package/dist/components/atoms/Textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"Textarea.js","names":["Textarea","WebTextarea"],"sources":["../../../src/components/atoms/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Textarea as WebTextarea,\n  type TextareaProps as WebTextareaProps,\n} from '@contractspec/lib.ui-kit-web/ui/textarea';\nimport { type KeyboardOptions, mapKeyboardToWeb } from '../../lib/keyboard';\n\ninterface BaseFieldProps {\n  value?: string;\n  defaultValue?: string;\n  // onChange?: (text: string) => void;\n  // onSubmit?: () => void;\n  // onFocus?: () => void;\n  // onBlur?: () => void;\n  placeholder?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  maxLength?: number;\n  name?: string;\n  className?: string;\n  rows?: number;\n  keyboard?: KeyboardOptions;\n}\n\nexport type TextareaProps = WebTextareaProps & BaseFieldProps;\n\n// export type TextareaProps = Omit<\n//   WebTextareaProps,\n//   // 'onChange' | 'value' | 'defaultValue'\n// > &\n//   BaseFieldProps;\n\nexport function Textarea({\n  value,\n  defaultValue,\n  onChange,\n  onSubmit,\n  onFocus,\n  onBlur,\n  placeholder,\n  disabled,\n  readOnly,\n  maxLength,\n  name,\n  className,\n  rows,\n  keyboard,\n  ...rest\n}: TextareaProps) {\n  const webKeyboard = mapKeyboardToWeb(keyboard);\n\n  const handleChange = React.useCallback<\n    React.ChangeEventHandler<HTMLTextAreaElement>\n  >((e) => onChange?.(e), [onChange]);\n\n  const handleKeyDown = React.useCallback<\n    React.KeyboardEventHandler<HTMLTextAreaElement>\n  >(\n    (e) => {\n      if (e.key === 'Enter' && webKeyboard.type !== 'search') {\n        // For textarea, Enter inserts newline; onSubmit could be used with modifier\n        if (e.metaKey || e.ctrlKey) onSubmit?.(e);\n      }\n    },\n    [onSubmit, webKeyboard.type]\n  );\n\n  return (\n    <WebTextarea\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      {...(rest as any)}\n      className={className}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      value={value as any}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      defaultValue={defaultValue as any}\n      onChange={handleChange}\n      onKeyDown={handleKeyDown}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      onFocus={onFocus as any}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      onBlur={onBlur as any}\n      placeholder={placeholder}\n      disabled={disabled}\n      readOnly={readOnly}\n      maxLength={maxLength}\n      name={name}\n      rows={rows}\n      {...webKeyboard}\n    />\n  );\n}\n\nexport default Textarea;\n"],"mappings":";;;;;;AAgCA,SAAgBA,WAAS,EACvB,OACA,cACA,UACA,UACA,SACA,QACA,aACA,UACA,UACA,WACA,MACA,WACA,MACA,UACA,GAAG,QACa;CAChB,MAAM,cAAc,iBAAiB,SAAS;CAE9C,MAAM,eAAe,MAAM,aAExB,MAAM,WAAW,EAAE,EAAE,CAAC,SAAS,CAAC;CAEnC,MAAM,gBAAgB,MAAM,aAGzB,MAAM;AACL,MAAI,EAAE,QAAQ,WAAW,YAAY,SAAS,UAE5C;OAAI,EAAE,WAAW,EAAE,QAAS,YAAW,EAAE;;IAG7C,CAAC,UAAU,YAAY,KAAK,CAC7B;AAED,QACE,oBAACC;EAEC,GAAK;EACM;EAEJ;EAEO;EACd,UAAU;EACV,WAAW;EAEF;EAED;EACK;EACH;EACA;EACC;EACL;EACA;EACN,GAAI;GACJ"}
+{"version":3,"file":"Textarea.js","names":["Textarea","WebTextarea"],"sources":["../../../src/components/atoms/Textarea.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n  Textarea as WebTextarea,\n  type TextareaProps as WebTextareaProps,\n} from '@contractspec/lib.ui-kit-web/ui/textarea';\nimport { type KeyboardOptions, mapKeyboardToWeb } from '../../lib/keyboard';\n\ninterface BaseFieldProps {\n  value?: string;\n  defaultValue?: string;\n  // onChange?: (text: string) => void;\n  // onSubmit?: () => void;\n  // onFocus?: () => void;\n  // onBlur?: () => void;\n  placeholder?: string;\n  disabled?: boolean;\n  readOnly?: boolean;\n  maxLength?: number;\n  name?: string;\n  className?: string;\n  rows?: number;\n  keyboard?: KeyboardOptions;\n}\n\nexport type TextareaProps = WebTextareaProps & BaseFieldProps;\n\n// export type TextareaProps = Omit<\n//   WebTextareaProps,\n//   // 'onChange' | 'value' | 'defaultValue'\n// > &\n//   BaseFieldProps;\n\nexport function Textarea({\n  value,\n  defaultValue,\n  onChange,\n  onSubmit,\n  onFocus,\n  onBlur,\n  placeholder,\n  disabled,\n  readOnly,\n  maxLength,\n  name,\n  className,\n  rows,\n  keyboard,\n  ...rest\n}: TextareaProps) {\n  const webKeyboard = mapKeyboardToWeb(keyboard);\n\n  const handleChange = React.useCallback<\n    React.ChangeEventHandler<HTMLTextAreaElement>\n  >((e) => onChange?.(e), [onChange]);\n\n  // const handleKeyDown = React.useCallback<\n  //   React.KeyboardEventHandler<HTMLTextAreaElement>\n  // >(\n  //   (e) => {\n  //     if (e.key === 'Enter' && webKeyboard.type !== 'search') {\n  //       // For textarea, Enter inserts newline; onSubmit could be used with modifier\n  //       if (e.metaKey || e.ctrlKey) onSubmit?.(e);\n  //     }\n  //   },\n  //   [onSubmit, webKeyboard.type]\n  // );\n\n  return (\n    <WebTextarea\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      {...(rest as any)}\n      className={className}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      value={value as any}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      defaultValue={defaultValue as any}\n      onChange={handleChange}\n      // onKeyDown={handleKeyDown}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      onFocus={onFocus as any}\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      onBlur={onBlur as any}\n      placeholder={placeholder}\n      disabled={disabled}\n      readOnly={readOnly}\n      maxLength={maxLength}\n      name={name}\n      rows={rows}\n      {...webKeyboard}\n    />\n  );\n}\n\nexport default Textarea;\n"],"mappings":";;;;;;AAgCA,SAAgBA,WAAS,EACvB,OACA,cACA,UACA,UACA,SACA,QACA,aACA,UACA,UACA,WACA,MACA,WACA,MACA,UACA,GAAG,QACa;CAChB,MAAM,cAAc,iBAAiB,SAAS;CAE9C,MAAM,eAAe,MAAM,aAExB,MAAM,WAAW,EAAE,EAAE,CAAC,SAAS,CAAC;AAcnC,QACE,oBAACC;EAEC,GAAK;EACM;EAEJ;EAEO;EACd,UAAU;EAGD;EAED;EACK;EACH;EACA;EACC;EACL;EACA;EACN,GAAI;GACJ"}

package/dist/components/data-view/DataViewDetail.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime108 from "react/jsx-runtime";
+import * as react_jsx_runtime109 from "react/jsx-runtime";
 import { DataViewSpec } from "@contractspec/lib.contracts/data-views";
 
 //#region src/components/data-view/DataViewDetail.d.ts
@@ -16,7 +16,7 @@ declare function DataViewDetail({
   className,
   emptyState,
   headerActions
-}: DataViewDetailProps): react_jsx_runtime108.JSX.Element;
+}: DataViewDetailProps): react_jsx_runtime109.JSX.Element;
 //#endregion
 export { DataViewDetail };
 //# sourceMappingURL=DataViewDetail.d.ts.map

package/dist/components/data-view/DataViewDetail.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewDetail.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewDetail.tsx"],"sourcesContent":[],"mappings":";;;;;UAWiB,mBAAA;QACT;QACA;EAFS,SAAA,CAAA,EAAA,MAAA;EACT,UAAA,CAAA,EAGO,KAAA,CAAM,SAHb;EACA,aAAA,CAAA,EAGU,KAAA,CAAM,SAHhB;;AAGgB,iBAGR,cAAA,CAHQ;EAAA,IAAA;EAAA,IAAA;EAAA,SAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EASrB,mBATqB,CAAA,EASF,oBAAA,CAAA,GAAA,CAAA,OATE"}
+{"version":3,"file":"DataViewDetail.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewDetail.tsx"],"sourcesContent":[],"mappings":";;;;;UAYiB,mBAAA;QACT;QACA;EAFS,SAAA,CAAA,EAAA,MAAA;EACT,UAAA,CAAA,EAGO,KAAA,CAAM,SAHb;EACA,aAAA,CAAA,EAGU,KAAA,CAAM,SAHhB;;AAGgB,iBAGR,cAAA,CAHQ;EAAA,IAAA;EAAA,IAAA;EAAA,SAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EASrB,mBATqB,CAAA,EASF,oBAAA,CAAA,GAAA,CAAA,OATE"}

package/dist/components/data-view/DataViewDetail.js

@@ -1,7 +1,9 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
-import { formatValue, getAtPath } from "./utils.js";
+import { MarkdownRenderer } from "../../example-shared-ui/src/MarkdownView.js";
+import "../../example-shared-ui/src/index.js";
+import { DataViewFormattedValue, getAtPath } from "./utils.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -31,9 +33,9 @@ function DataViewDetail({ spec, item, className, emptyState, headerActions }) {
 			children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", {
 				className: "text-foreground text-xl font-semibold",
 				children: spec.meta.title
-			}), /* @__PURE__ */ jsx("p", {
+			}), /* @__PURE__ */ jsx("div", {
 				className: "text-muted-foreground text-sm",
-				children: spec.meta.description
+				children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: spec.meta.description ?? "" })
 			})] }), headerActions]
 		}), /* @__PURE__ */ jsx("div", {
 			className: "flex flex-col gap-6",
@@ -44,9 +46,9 @@ function DataViewDetail({ spec, item, className, emptyState, headerActions }) {
 						className: "text-muted-foreground mb-2 text-sm font-semibold tracking-wide uppercase",
 						children: section.title
 					}) : null,
-					section.description ? /* @__PURE__ */ jsx("p", {
+					section.description ? /* @__PURE__ */ jsx("div", {
 						className: "text-muted-foreground mb-4 text-sm",
-						children: section.description
+						children: /* @__PURE__ */ jsx(MarkdownRenderer, { content: section.description })
 					}) : null,
 					/* @__PURE__ */ jsx("dl", {
 						className: "grid gap-4 md:grid-cols-2",
@@ -61,7 +63,10 @@ function DataViewDetail({ spec, item, className, emptyState, headerActions }) {
 									children: field.label
 								}), /* @__PURE__ */ jsx("dd", {
 									className: "text-foreground text-sm",
-									children: formatValue(value, field.format)
+									children: /* @__PURE__ */ jsx(DataViewFormattedValue, {
+										value,
+										format: field.format
+									})
 								})]
 							}, field.key);
 						})

package/dist/components/data-view/DataViewDetail.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewDetail.js","names":[],"sources":["../../../src/components/data-view/DataViewDetail.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewSpec,\n  DataViewDetailConfig,\n  DataViewField,\n} from '@contractspec/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { getAtPath, formatValue } from './utils';\n\nexport interface DataViewDetailProps {\n  spec: DataViewSpec;\n  item: Record<string, unknown> | null;\n  className?: string;\n  emptyState?: React.ReactNode;\n  headerActions?: React.ReactNode;\n}\n\nexport function DataViewDetail({\n  spec,\n  item,\n  className,\n  emptyState,\n  headerActions,\n}: DataViewDetailProps) {\n  if (spec.view.kind !== 'detail') {\n    throw new Error(\n      `DataViewDetail received view kind \"${spec.view.kind}\", expected \"detail\".`\n    );\n  }\n\n  const view = spec.view as DataViewDetailConfig;\n  const fields = view.fields;\n\n  if (!item) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-foreground text-base font-semibold\">\n            {spec.meta.title}\n          </h3>\n          {headerActions}\n        </div>\n        {emptyState ?? (\n          <div className=\"border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm\">\n            Select a record to view details.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  const sections =\n    view.sections && view.sections.length > 0\n      ? view.sections\n      : [{ fields: fields.map((field) => field.key) }];\n\n  return (\n    <div className={cn('flex w-full flex-col gap-6', className)}>\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-foreground text-xl font-semibold\">\n            {spec.meta.title}\n          </h3>\n          <p className=\"text-muted-foreground text-sm\">\n            {spec.meta.description}\n          </p>\n        </div>\n        {headerActions}\n      </div>\n      <div className=\"flex flex-col gap-6\">\n        {sections.map((section, idx) => (\n          <div\n            key={idx}\n            className=\"border-border bg-card rounded-lg border p-4 shadow-sm\"\n          >\n            {section.title ? (\n              <h4 className=\"text-muted-foreground mb-2 text-sm font-semibold tracking-wide uppercase\">\n                {section.title}\n              </h4>\n            ) : null}\n            {section.description ? (\n              <p className=\"text-muted-foreground mb-4 text-sm\">\n                {section.description}\n              </p>\n            ) : null}\n            <dl className=\"grid gap-4 md:grid-cols-2\">\n              {section.fields.map((fieldKey) => {\n                const field = fieldByKey(fields, fieldKey);\n                if (!field) return null;\n                const value = getAtPath(item, field.dataPath);\n                return (\n                  <div key={field.key} className=\"flex flex-col gap-1\">\n                    <dt className=\"text-muted-foreground/80 text-xs font-semibold uppercase\">\n                      {field.label}\n                    </dt>\n                    <dd className=\"text-foreground text-sm\">\n                      {formatValue(value, field.format)}\n                    </dd>\n                  </div>\n                );\n              })}\n            </dl>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction fieldByKey(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key);\n}\n"],"mappings":";;;;;;;;AAmBA,SAAgB,eAAe,EAC7B,MACA,MACA,WACA,YACA,iBACsB;AACtB,KAAI,KAAK,KAAK,SAAS,SACrB,OAAM,IAAI,MACR,sCAAsC,KAAK,KAAK,KAAK,uBACtD;CAGH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;AAEpB,KAAI,CAAC,KACH,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACJ;IACG,EACL,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;CAIV,MAAM,WACJ,KAAK,YAAY,KAAK,SAAS,SAAS,IACpC,KAAK,WACL,CAAC,EAAE,QAAQ,OAAO,KAAK,UAAU,MAAM,IAAI,EAAE,CAAC;AAEpD,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,qBAAC,oBACC,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACL,oBAAC;IAAE,WAAU;cACV,KAAK,KAAK;KACT,IACA,EACL;IACG,EACN,oBAAC;GAAI,WAAU;aACZ,SAAS,KAAK,SAAS,QACtB,qBAAC;IAEC,WAAU;;KAET,QAAQ,QACP,oBAAC;MAAG,WAAU;gBACX,QAAQ;OACN,GACH;KACH,QAAQ,cACP,oBAAC;MAAE,WAAU;gBACV,QAAQ;OACP,GACF;KACJ,oBAAC;MAAG,WAAU;gBACX,QAAQ,OAAO,KAAK,aAAa;OAChC,MAAM,QAAQ,WAAW,QAAQ,SAAS;AAC1C,WAAI,CAAC,MAAO,QAAO;OACnB,MAAM,QAAQ,UAAU,MAAM,MAAM,SAAS;AAC7C,cACE,qBAAC;QAAoB,WAAU;mBAC7B,oBAAC;SAAG,WAAU;mBACX,MAAM;UACJ,EACL,oBAAC;SAAG,WAAU;mBACX,YAAY,OAAO,MAAM,OAAO;UAC9B;UANG,MAAM,IAOV;QAER;OACC;;MA7BA,IA8BD,CACN;IACE;GACF;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI"}
+{"version":3,"file":"DataViewDetail.js","names":[],"sources":["../../../src/components/data-view/DataViewDetail.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewDetailConfig,\n  DataViewField,\n  DataViewSpec,\n} from '@contractspec/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { DataViewFormattedValue, getAtPath } from './utils';\nimport { MarkdownRenderer } from '@contractspec/lib.example-shared-ui';\n\nexport interface DataViewDetailProps {\n  spec: DataViewSpec;\n  item: Record<string, unknown> | null;\n  className?: string;\n  emptyState?: React.ReactNode;\n  headerActions?: React.ReactNode;\n}\n\nexport function DataViewDetail({\n  spec,\n  item,\n  className,\n  emptyState,\n  headerActions,\n}: DataViewDetailProps) {\n  if (spec.view.kind !== 'detail') {\n    throw new Error(\n      `DataViewDetail received view kind \"${spec.view.kind}\", expected \"detail\".`\n    );\n  }\n\n  const view = spec.view as DataViewDetailConfig;\n  const fields = view.fields;\n\n  if (!item) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-foreground text-base font-semibold\">\n            {spec.meta.title}\n          </h3>\n          {headerActions}\n        </div>\n        {emptyState ?? (\n          <div className=\"border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm\">\n            Select a record to view details.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  const sections =\n    view.sections && view.sections.length > 0\n      ? view.sections\n      : [{ fields: fields.map((field) => field.key) }];\n\n  return (\n    <div className={cn('flex w-full flex-col gap-6', className)}>\n      <div className=\"flex items-center justify-between\">\n        <div>\n          <h3 className=\"text-foreground text-xl font-semibold\">\n            {spec.meta.title}\n          </h3>\n          <div className=\"text-muted-foreground text-sm\">\n            <MarkdownRenderer content={spec.meta.description ?? ''} />\n          </div>\n        </div>\n        {headerActions}\n      </div>\n      <div className=\"flex flex-col gap-6\">\n        {sections.map((section, idx) => (\n          <div\n            key={idx}\n            className=\"border-border bg-card rounded-lg border p-4 shadow-sm\"\n          >\n            {section.title ? (\n              <h4 className=\"text-muted-foreground mb-2 text-sm font-semibold tracking-wide uppercase\">\n                {section.title}\n              </h4>\n            ) : null}\n            {section.description ? (\n              <div className=\"text-muted-foreground mb-4 text-sm\">\n                <MarkdownRenderer content={section.description} />\n              </div>\n            ) : null}\n            <dl className=\"grid gap-4 md:grid-cols-2\">\n              {section.fields.map((fieldKey) => {\n                const field = fieldByKey(fields, fieldKey);\n                if (!field) return null;\n                const value = getAtPath(item, field.dataPath);\n                return (\n                  <div key={field.key} className=\"flex flex-col gap-1\">\n                    <dt className=\"text-muted-foreground/80 text-xs font-semibold uppercase\">\n                      {field.label}\n                    </dt>\n                    <dd className=\"text-foreground text-sm\">\n                      <DataViewFormattedValue\n                        value={value}\n                        format={field.format}\n                      />\n                    </dd>\n                  </div>\n                );\n              })}\n            </dl>\n          </div>\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction fieldByKey(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key);\n}\n"],"mappings":";;;;;;;;;;AAoBA,SAAgB,eAAe,EAC7B,MACA,MACA,WACA,YACA,iBACsB;AACtB,KAAI,KAAK,KAAK,SAAS,SACrB,OAAM,IAAI,MACR,sCAAsC,KAAK,KAAK,KAAK,uBACtD;CAGH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;AAEpB,KAAI,CAAC,KACH,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACJ;IACG,EACL,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;CAIV,MAAM,WACJ,KAAK,YAAY,KAAK,SAAS,SAAS,IACpC,KAAK,WACL,CAAC,EAAE,QAAQ,OAAO,KAAK,UAAU,MAAM,IAAI,EAAE,CAAC;AAEpD,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,qBAAC,oBACC,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACL,oBAAC;IAAI,WAAU;cACb,oBAAC,oBAAiB,SAAS,KAAK,KAAK,eAAe,KAAM;KACtD,IACF,EACL;IACG,EACN,oBAAC;GAAI,WAAU;aACZ,SAAS,KAAK,SAAS,QACtB,qBAAC;IAEC,WAAU;;KAET,QAAQ,QACP,oBAAC;MAAG,WAAU;gBACX,QAAQ;OACN,GACH;KACH,QAAQ,cACP,oBAAC;MAAI,WAAU;gBACb,oBAAC,oBAAiB,SAAS,QAAQ,cAAe;OAC9C,GACJ;KACJ,oBAAC;MAAG,WAAU;gBACX,QAAQ,OAAO,KAAK,aAAa;OAChC,MAAM,QAAQ,WAAW,QAAQ,SAAS;AAC1C,WAAI,CAAC,MAAO,QAAO;OACnB,MAAM,QAAQ,UAAU,MAAM,MAAM,SAAS;AAC7C,cACE,qBAAC;QAAoB,WAAU;mBAC7B,oBAAC;SAAG,WAAU;mBACX,MAAM;UACJ,EACL,oBAAC;SAAG,WAAU;mBACZ,oBAAC;UACQ;UACP,QAAQ,MAAM;WACd;UACC;UATG,MAAM,IAUV;QAER;OACC;;MAhCA,IAiCD,CACN;IACE;GACF;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI"}

package/dist/components/data-view/DataViewList.d.ts

@@ -3,22 +3,22 @@ import * as react_jsx_runtime106 from "react/jsx-runtime";
 import { DataViewSpec } from "@contractspec/lib.contracts/data-views";
 
 //#region src/components/data-view/DataViewList.d.ts
-interface DataViewListProps {
+interface DataViewListProps<TItem = Record<string, unknown>> {
   spec: DataViewSpec;
-  items: Record<string, unknown>[];
+  items: readonly TItem[];
   className?: string;
-  renderActions?: (item: Record<string, unknown>) => React.ReactNode;
-  onSelect?: (item: Record<string, unknown>) => void;
+  renderActions?: (item: TItem) => React.ReactNode;
+  onSelect?: (item: TItem) => void;
   emptyState?: React.ReactNode;
 }
-declare function DataViewList({
+declare function DataViewList<TItem = Record<string, unknown>>({
   spec,
   items,
   className,
   renderActions,
   onSelect,
   emptyState
-}: DataViewListProps): react_jsx_runtime106.JSX.Element;
+}: DataViewListProps<TItem>): react_jsx_runtime106.JSX.Element;
 //#endregion
 export { DataViewList };
 //# sourceMappingURL=DataViewList.d.ts.map

package/dist/components/data-view/DataViewList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewList.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":[],"mappings":";;;;;UAWiB,iBAAA;QACT;SACC;EAFQ,SAAA,CAAA,EAAA,MAAA;EACT,aAAA,CAAA,EAAA,CAAA,IAAA,EAGiB,MAHjB,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAG6C,KAAA,CAAM,SAHnD;EACC,QAAA,CAAA,EAAA,CAAA,IAAA,EAGW,MAHX,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAEgB,UAAA,CAAA,EAEV,KAAA,CAAM,SAFI;;AACL,iBAIJ,YAAA,CAJI;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAWjB,iBAXiB,CAAA,EAWA,oBAAA,CAAA,GAAA,CAAA,OAXA"}
+{"version":3,"file":"DataViewList.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":[],"mappings":";;;;;UAWiB,0BAA0B;QACnC;kBACU;EAFD,SAAA,CAAA,EAAA,MAAA;EAA0B,aAAA,CAAA,EAAA,CAAA,IAAA,EAIlB,KAJkB,EAAA,GAIR,KAAA,CAAM,SAJE;EACnC,QAAA,CAAA,EAAA,CAAA,IAAA,EAIY,KAJZ,EAAA,GAAA,IAAA;EACU,UAAA,CAAA,EAIH,KAAA,CAAM,SAJH;;AAEuB,iBAKzB,YALyB,CAAA,QAKJ,MALI,CAAA,MAAA,EAAA,OAAA,CAAA,CAAA,CAAA;EAAA,IAAA;EAAA,KAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA;AAAA,CAAA,EAYtC,iBAZsC,CAYpB,KAZoB,CAAA,CAAA,EAYd,oBAAA,CAAA,GAAA,CAAA,OAZc"}

package/dist/components/data-view/DataViewList.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
-import { formatValue, getAtPath } from "./utils.js";
+import { DisplayValue } from "./DataViewTable.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -20,43 +20,50 @@ function DataViewList({ spec, items, className, renderActions, onSelect, emptySt
 	});
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex w-full flex-col gap-4", className),
-		children: items.map((item, idx) => /* @__PURE__ */ jsxs("button", {
-			type: "button",
-			className: cn("border-muted bg-card hover:border-primary/40 focus-visible:border-primary focus-visible:ring-primary/40 flex w-full flex-col gap-2 rounded-lg border p-4 text-left shadow-sm transition hover:shadow-md focus-visible:ring-2 focus-visible:outline-none", view.layout === "compact" && "md:flex-row md:items-center md:gap-4"),
-			onClick: () => onSelect?.(item),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: "flex flex-1 flex-col gap-1",
-				children: [primaryField ? /* @__PURE__ */ jsx("span", {
-					className: "text-foreground text-base font-medium",
-					children: displayValue(item, fields, primaryField)
-				}) : null, /* @__PURE__ */ jsx("div", {
-					className: "text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-sm",
-					children: secondaryFieldKeys(view, primaryField).map((fieldKey) => /* @__PURE__ */ jsxs("span", {
-						className: "flex items-center gap-1.5",
-						children: [/* @__PURE__ */ jsx("span", {
-							className: "text-foreground/80 font-medium",
-							children: fieldLabel(fields, fieldKey)
-						}), /* @__PURE__ */ jsx("span", { children: displayValue(item, fields, fieldKey) })]
-					}, fieldKey))
-				})]
-			}), renderActions ? /* @__PURE__ */ jsx("div", {
-				className: "flex shrink-0 items-center gap-2",
-				children: renderActions(item)
-			}) : null]
-		}, idx))
+		children: items.map((item, idx) => {
+			const record = toRecord(item);
+			return /* @__PURE__ */ jsxs("button", {
+				type: "button",
+				className: cn("border-muted bg-card hover:border-primary/40 focus-visible:border-primary focus-visible:ring-primary/40 flex w-full flex-col gap-2 rounded-lg border p-4 text-left shadow-sm transition hover:shadow-md focus-visible:ring-2 focus-visible:outline-none", view.layout === "compact" && "md:flex-row md:items-center md:gap-4"),
+				onClick: () => onSelect?.(item),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-1 flex-col gap-1",
+					children: [primaryField ? /* @__PURE__ */ jsx("span", {
+						className: "text-foreground text-base font-medium",
+						children: /* @__PURE__ */ jsx(DisplayValue, {
+							item: record,
+							fields,
+							fieldKey: primaryField
+						})
+					}) : null, /* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-sm",
+						children: secondaryFieldKeys(view, primaryField).map((fieldKey) => /* @__PURE__ */ jsxs("span", {
+							className: "flex items-center gap-1.5",
+							children: [/* @__PURE__ */ jsx("span", {
+								className: "text-foreground/80 font-medium",
+								children: fieldLabel(fields, fieldKey)
+							}), /* @__PURE__ */ jsx("span", { children: /* @__PURE__ */ jsx(DisplayValue, {
+								item: record,
+								fields,
+								fieldKey
+							}) })]
+						}, fieldKey))
+					})]
+				}), renderActions ? /* @__PURE__ */ jsx("div", {
+					className: "flex shrink-0 items-center gap-2",
+					children: renderActions(item)
+				}) : null]
+			}, idx);
+		})
 	});
 }
+function toRecord(value) {
+	if (value && typeof value === "object") return value;
+	return {};
+}
 function fieldLabel(fields, key) {
 	return fields.find((field) => field.key === key)?.label ?? key;
 }
-function fieldByKey(fields, key) {
-	return fields.find((field) => field.key === key);
-}
-function displayValue(item, fields, key) {
-	const field = fieldByKey(fields, key);
-	if (!field) return "";
-	return formatValue(getAtPath(item, field.dataPath), field.format);
-}
 function secondaryFieldKeys(view, primaryField) {
 	if (view.secondaryFields?.length) return view.secondaryFields;
 	return view.fields.map((field) => field.key).filter((key) => key !== primaryField);

package/dist/components/data-view/DataViewList.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewList.js","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewSpec,\n  DataViewListConfig,\n  DataViewField,\n} from '@contractspec/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { getAtPath, formatValue } from './utils';\n\nexport interface DataViewListProps {\n  spec: DataViewSpec;\n  items: Record<string, unknown>[];\n  className?: string;\n  renderActions?: (item: Record<string, unknown>) => React.ReactNode;\n  onSelect?: (item: Record<string, unknown>) => void;\n  emptyState?: React.ReactNode;\n}\n\nexport function DataViewList({\n  spec,\n  items,\n  className,\n  renderActions,\n  onSelect,\n  emptyState,\n}: DataViewListProps) {\n  if (spec.view.kind !== 'list') {\n    throw new Error(\n      `DataViewList received view kind \"${spec.view.kind}\", expected \"list\".`\n    );\n  }\n  const view = spec.view as DataViewListConfig;\n  const fields = view.fields;\n  const primaryField =\n    view.primaryField ??\n    fields.find((field) => field.key === view.primaryField)?.key ??\n    fields[0]?.key;\n\n  if (!items.length) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        {emptyState ?? (\n          <div className=\"border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm\">\n            No records available.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-4', className)}>\n      {items.map((item, idx) => (\n        <button\n          type=\"button\"\n          key={idx}\n          className={cn(\n            'border-muted bg-card hover:border-primary/40 focus-visible:border-primary focus-visible:ring-primary/40 flex w-full flex-col gap-2 rounded-lg border p-4 text-left shadow-sm transition hover:shadow-md focus-visible:ring-2 focus-visible:outline-none',\n            view.layout === 'compact' && 'md:flex-row md:items-center md:gap-4'\n          )}\n          onClick={() => onSelect?.(item)}\n        >\n          <div className=\"flex flex-1 flex-col gap-1\">\n            {primaryField ? (\n              <span className=\"text-foreground text-base font-medium\">\n                {displayValue(item, fields, primaryField)}\n              </span>\n            ) : null}\n            <div className=\"text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-sm\">\n              {secondaryFieldKeys(view, primaryField).map((fieldKey) => (\n                <span key={fieldKey} className=\"flex items-center gap-1.5\">\n                  <span className=\"text-foreground/80 font-medium\">\n                    {fieldLabel(fields, fieldKey)}\n                  </span>\n                  <span>{displayValue(item, fields, fieldKey)}</span>\n                </span>\n              ))}\n            </div>\n          </div>\n          {renderActions ? (\n            <div className=\"flex shrink-0 items-center gap-2\">\n              {renderActions(item)}\n            </div>\n          ) : null}\n        </button>\n      ))}\n    </div>\n  );\n}\n\nfunction fieldLabel(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key)?.label ?? key;\n}\n\nfunction fieldByKey(fields: DataViewField[], key?: string) {\n  return fields.find((field) => field.key === key);\n}\n\nfunction displayValue(\n  item: Record<string, unknown>,\n  fields: DataViewField[],\n  key: string\n) {\n  const field = fieldByKey(fields, key);\n  if (!field) return '';\n  const value = getAtPath(item, field.dataPath);\n  return formatValue(value, field.format);\n}\n\nfunction secondaryFieldKeys(view: DataViewListConfig, primaryField?: string) {\n  if (view.secondaryFields?.length) return view.secondaryFields;\n  return view.fields\n    .map((field) => field.key)\n    .filter((key) => key !== primaryField);\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,aAAa,EAC3B,MACA,OACA,WACA,eACA,UACA,cACoB;AACpB,KAAI,KAAK,KAAK,SAAS,OACrB,OAAM,IAAI,MACR,oCAAoC,KAAK,KAAK,KAAK,qBACpD;CAEH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;CACpB,MAAM,eACJ,KAAK,gBACL,OAAO,MAAM,UAAU,MAAM,QAAQ,KAAK,aAAa,EAAE,OACzD,OAAO,IAAI;AAEb,KAAI,CAAC,MAAM,OACT,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;AAIV,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,MAAM,KAAK,MAAM,QAChB,qBAAC;GACC,MAAK;GAEL,WAAW,GACT,2PACA,KAAK,WAAW,aAAa,uCAC9B;GACD,eAAe,WAAW,KAAK;cAE/B,qBAAC;IAAI,WAAU;eACZ,eACC,oBAAC;KAAK,WAAU;eACb,aAAa,MAAM,QAAQ,aAAa;MACpC,GACL,MACJ,oBAAC;KAAI,WAAU;eACZ,mBAAmB,MAAM,aAAa,CAAC,KAAK,aAC3C,qBAAC;MAAoB,WAAU;iBAC7B,oBAAC;OAAK,WAAU;iBACb,WAAW,QAAQ,SAAS;QACxB,EACP,oBAAC,oBAAM,aAAa,MAAM,QAAQ,SAAS,GAAQ;QAJ1C,SAKJ,CACP;MACE;KACF,EACL,gBACC,oBAAC;IAAI,WAAU;cACZ,cAAc,KAAK;KAChB,GACJ;KA5BC,IA6BE,CACT;GACE;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI,EAAE,SAAS;;AAG7D,SAAS,WAAW,QAAyB,KAAc;AACzD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI;;AAGlD,SAAS,aACP,MACA,QACA,KACA;CACA,MAAM,QAAQ,WAAW,QAAQ,IAAI;AACrC,KAAI,CAAC,MAAO,QAAO;AAEnB,QAAO,YADO,UAAU,MAAM,MAAM,SAAS,EACnB,MAAM,OAAO;;AAGzC,SAAS,mBAAmB,MAA0B,cAAuB;AAC3E,KAAI,KAAK,iBAAiB,OAAQ,QAAO,KAAK;AAC9C,QAAO,KAAK,OACT,KAAK,UAAU,MAAM,IAAI,CACzB,QAAQ,QAAQ,QAAQ,aAAa"}
+{"version":3,"file":"DataViewList.js","names":[],"sources":["../../../src/components/data-view/DataViewList.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewField,\n  DataViewListConfig,\n  DataViewSpec,\n} from '@contractspec/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { DisplayValue } from './DataViewTable';\n\nexport interface DataViewListProps<TItem = Record<string, unknown>> {\n  spec: DataViewSpec;\n  items: readonly TItem[];\n  className?: string;\n  renderActions?: (item: TItem) => React.ReactNode;\n  onSelect?: (item: TItem) => void;\n  emptyState?: React.ReactNode;\n}\n\nexport function DataViewList<TItem = Record<string, unknown>>({\n  spec,\n  items,\n  className,\n  renderActions,\n  onSelect,\n  emptyState,\n}: DataViewListProps<TItem>) {\n  if (spec.view.kind !== 'list') {\n    throw new Error(\n      `DataViewList received view kind \"${spec.view.kind}\", expected \"list\".`\n    );\n  }\n  const view = spec.view as DataViewListConfig;\n  const fields = view.fields;\n  const primaryField =\n    view.primaryField ??\n    fields.find((field) => field.key === view.primaryField)?.key ??\n    fields[0]?.key;\n\n  if (!items.length) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        {emptyState ?? (\n          <div className=\"border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm\">\n            No records available.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-4', className)}>\n      {items.map((item, idx) => {\n        const record = toRecord(item);\n        return (\n          <button\n            type=\"button\"\n            key={idx}\n            className={cn(\n              'border-muted bg-card hover:border-primary/40 focus-visible:border-primary focus-visible:ring-primary/40 flex w-full flex-col gap-2 rounded-lg border p-4 text-left shadow-sm transition hover:shadow-md focus-visible:ring-2 focus-visible:outline-none',\n              view.layout === 'compact' &&\n                'md:flex-row md:items-center md:gap-4'\n            )}\n            onClick={() => onSelect?.(item)}\n          >\n            <div className=\"flex flex-1 flex-col gap-1\">\n              {primaryField ? (\n                <span className=\"text-foreground text-base font-medium\">\n                  <DisplayValue\n                    item={record}\n                    fields={fields}\n                    fieldKey={primaryField}\n                  />\n                </span>\n              ) : null}\n              <div className=\"text-muted-foreground flex flex-wrap gap-x-4 gap-y-1 text-sm\">\n                {secondaryFieldKeys(view, primaryField).map((fieldKey) => (\n                  <span key={fieldKey} className=\"flex items-center gap-1.5\">\n                    <span className=\"text-foreground/80 font-medium\">\n                      {fieldLabel(fields, fieldKey)}\n                    </span>\n                    <span>\n                      <DisplayValue\n                        item={record}\n                        fields={fields}\n                        fieldKey={fieldKey}\n                      />\n                    </span>\n                  </span>\n                ))}\n              </div>\n            </div>\n            {renderActions ? (\n              <div className=\"flex shrink-0 items-center gap-2\">\n                {renderActions(item)}\n              </div>\n            ) : null}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n\nfunction toRecord(value: unknown): Record<string, unknown> {\n  if (value && typeof value === 'object') {\n    return value as Record<string, unknown>;\n  }\n  return {};\n}\n\nfunction fieldLabel(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key)?.label ?? key;\n}\n\nfunction secondaryFieldKeys(view: DataViewListConfig, primaryField?: string) {\n  if (view.secondaryFields?.length) return view.secondaryFields;\n  return view.fields\n    .map((field) => field.key)\n    .filter((key) => key !== primaryField);\n}\n"],"mappings":";;;;;;;;AAoBA,SAAgB,aAA8C,EAC5D,MACA,OACA,WACA,eACA,UACA,cAC2B;AAC3B,KAAI,KAAK,KAAK,SAAS,OACrB,OAAM,IAAI,MACR,oCAAoC,KAAK,KAAK,KAAK,qBACpD;CAEH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;CACpB,MAAM,eACJ,KAAK,gBACL,OAAO,MAAM,UAAU,MAAM,QAAQ,KAAK,aAAa,EAAE,OACzD,OAAO,IAAI;AAEb,KAAI,CAAC,MAAM,OACT,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;AAIV,QACE,oBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;YACxD,MAAM,KAAK,MAAM,QAAQ;GACxB,MAAM,SAAS,SAAS,KAAK;AAC7B,UACE,qBAAC;IACC,MAAK;IAEL,WAAW,GACT,2PACA,KAAK,WAAW,aACd,uCACH;IACD,eAAe,WAAW,KAAK;eAE/B,qBAAC;KAAI,WAAU;gBACZ,eACC,oBAAC;MAAK,WAAU;gBACd,oBAAC;OACC,MAAM;OACE;OACR,UAAU;QACV;OACG,GACL,MACJ,oBAAC;MAAI,WAAU;gBACZ,mBAAmB,MAAM,aAAa,CAAC,KAAK,aAC3C,qBAAC;OAAoB,WAAU;kBAC7B,oBAAC;QAAK,WAAU;kBACb,WAAW,QAAQ,SAAS;SACxB,EACP,oBAAC,oBACC,oBAAC;QACC,MAAM;QACE;QACE;SACV,GACG;SAVE,SAWJ,CACP;OACE;MACF,EACL,gBACC,oBAAC;KAAI,WAAU;eACZ,cAAc,KAAK;MAChB,GACJ;MAvCC,IAwCE;IAEX;GACE;;AAIV,SAAS,SAAS,OAAyC;AACzD,KAAI,SAAS,OAAO,UAAU,SAC5B,QAAO;AAET,QAAO,EAAE;;AAGX,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI,EAAE,SAAS;;AAG7D,SAAS,mBAAmB,MAA0B,cAAuB;AAC3E,KAAI,KAAK,iBAAiB,OAAQ,QAAO,KAAK;AAC9C,QAAO,KAAK,OACT,KAAK,UAAU,MAAM,IAAI,CACzB,QAAQ,QAAQ,QAAQ,aAAa"}

package/dist/components/data-view/DataViewRenderer.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime62 from "react/jsx-runtime";
 import { DataViewSpec } from "@contractspec/lib.contracts/data-views";
 
 //#region src/components/data-view/DataViewRenderer.d.ts
@@ -42,7 +42,7 @@ declare function DataViewRenderer({
   onFilterChange,
   pagination,
   onPageChange
-}: DataViewRendererProps): react_jsx_runtime0.JSX.Element;
+}: DataViewRendererProps): react_jsx_runtime62.JSX.Element;
 //#endregion
 export { DataViewRenderer };
 //# sourceMappingURL=DataViewRenderer.d.ts.map

package/dist/components/data-view/DataViewRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewRenderer.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewRenderer.tsx"],"sourcesContent":[],"mappings":";;;;;UAqBiB,qBAAA;QACT;UACE;EAFO,IAAA,CAAA,EAGR,MAHQ,CAAA,MAAA,EAAA,OAAqB,CAAA,GAAA,IAAA;EAC9B,SAAA,CAAA,EAAA,MAAA;EACE,aAAA,CAAA,EAAA,CAAA,IAAA,EAGe,MAHf,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAG2C,KAAA,CAAM,SAHjD;EACD,QAAA,CAAA,EAAA,CAAA,IAAA,EAGW,MAHX,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAEgB,UAAA,CAAA,EAAA,CAAA,IAAA,EAEH,MAFG,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAA4B,aAAM,CAAA,EAGzC,KAAA,CAAM,SAHmC;EACvC,UAAA,CAAA,EAGL,KAAA,CAAM,SAHD;EACE,MAAA,CAAA,EAGX,KAAA,CAAM,SAHK;EACJ,MAAM,CAAA,EAAA,MAAA;EACT,cAAM,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACV,OAAM,CAAA,EAKL,MALK,CAAA,MAAA,EAAA,OAAA,CAAA;EAKL,cAAA,CAAA,EAAA,CAAA,OAAA,EACiB,MADjB,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EACiB,UAAA,CAAA,EAAA;IAAM,IAAA,EAAA,MAAA;IAWnB,QAAA,EAAA,MAAgB;IAC9B,KAAA,EAAA,MAAA;EACA,CAAA;EACA,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;AAEA,iBALc,gBAAA,CAKd;EAAA,IAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,aAAA;EAAA,UAAA;EAAA,MAAA;EAAA,MAAA;EAAA,cAAA;EAAA,OAAA;EAAA,cAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EAYC,qBAZD,CAAA,EAYsB,kBAAA,CAAA,GAAA,CAAA,OAZtB"}
+{"version":3,"file":"DataViewRenderer.d.ts","names":[],"sources":["../../../src/components/data-view/DataViewRenderer.tsx"],"sourcesContent":[],"mappings":";;;;;UAqBiB,qBAAA;QACT;UACE;EAFO,IAAA,CAAA,EAGR,MAHQ,CAAA,MAAA,EAAA,OAAqB,CAAA,GAAA,IAAA;EAC9B,SAAA,CAAA,EAAA,MAAA;EACE,aAAA,CAAA,EAAA,CAAA,IAAA,EAGe,MAHf,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAG2C,KAAA,CAAM,SAHjD;EACD,QAAA,CAAA,EAAA,CAAA,IAAA,EAGW,MAHX,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAEgB,UAAA,CAAA,EAAA,CAAA,IAAA,EAEH,MAFG,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EAA4B,aAAM,CAAA,EAGzC,KAAA,CAAM,SAHmC;EACvC,UAAA,CAAA,EAGL,KAAA,CAAM,SAHD;EACE,MAAA,CAAA,EAGX,KAAA,CAAM,SAHK;EACJ,MAAM,CAAA,EAAA,MAAA;EACT,cAAM,CAAA,EAAA,CAAA,KAAA,EAAA,MAAA,EAAA,GAAA,IAAA;EACV,OAAM,CAAA,EAKL,MALK,CAAA,MAAA,EAAA,OAAA,CAAA;EAKL,cAAA,CAAA,EAAA,CAAA,OAAA,EACiB,MADjB,CAAA,MAAA,EAAA,OAAA,CAAA,EAAA,GAAA,IAAA;EACiB,UAAA,CAAA,EAAA;IAAM,IAAA,EAAA,MAAA;IAWnB,QAAA,EAAA,MAAgB;IAC9B,KAAA,EAAA,MAAA;EACA,CAAA;EACA,YAAA,CAAA,EAAA,CAAA,IAAA,EAAA,MAAA,EAAA,GAAA,IAAA;;AAEA,iBALc,gBAAA,CAKd;EAAA,IAAA;EAAA,KAAA;EAAA,IAAA;EAAA,SAAA;EAAA,aAAA;EAAA,QAAA;EAAA,UAAA;EAAA,aAAA;EAAA,UAAA;EAAA,MAAA;EAAA,MAAA;EAAA,cAAA;EAAA,OAAA;EAAA,cAAA;EAAA,UAAA;EAAA;AAAA,CAAA,EAYC,qBAZD,CAAA,EAYsB,mBAAA,CAAA,GAAA,CAAA,OAZtB"}

package/dist/components/data-view/DataViewRenderer.js

@@ -1,8 +1,8 @@
 'use client';
 
 import { FiltersToolbar } from "../molecules/FiltersToolbar.js";
-import { DataViewList } from "./DataViewList.js";
 import { DataViewTable } from "./DataViewTable.js";
+import { DataViewList } from "./DataViewList.js";
 import { DataViewDetail } from "./DataViewDetail.js";
 import * as React from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/components/data-view/DataViewTable.js

@@ -1,7 +1,7 @@
 'use client';
 
 import { cn } from "../../lib/utils.js";
-import { formatValue, getAtPath } from "./utils.js";
+import { DataViewFormattedValue, getAtPath } from "./utils.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -59,7 +59,11 @@ function DataViewTable({ spec, items, className, onRowClick, emptyState, headerA
 							onClick: () => onRowClick?.(item),
 							children: columns.map((column) => /* @__PURE__ */ jsx("td", {
 								className: cn("text-foreground px-4 py-3", alignmentClass(column.align)),
-								children: displayValue(item, fields, column.field)
+								children: /* @__PURE__ */ jsx(DisplayValue, {
+									item,
+									fields,
+									fieldKey: column.field
+								})
 							}, column.field))
 						}, rowIdx))
 					})]
@@ -75,10 +79,13 @@ function fieldLabel(fields, key) {
 function fieldByKey(fields, key) {
 	return fields.find((field) => field.key === key);
 }
-function displayValue(item, fields, key) {
-	const field = fieldByKey(fields, key);
+function DisplayValue({ item, fields, fieldKey }) {
+	const field = fieldByKey(fields, fieldKey);
 	if (!field) return "";
-	return formatValue(getAtPath(item, field.dataPath), field.format);
+	return /* @__PURE__ */ jsx(DataViewFormattedValue, {
+		value: getAtPath(item, field.dataPath),
+		format: field.format
+	});
 }
 function alignmentClass(align) {
 	switch (align) {
@@ -89,5 +96,5 @@ function alignmentClass(align) {
 }
 
 //#endregion
-export { DataViewTable };
+export { DataViewTable, DisplayValue };
 //# sourceMappingURL=DataViewTable.js.map

package/dist/components/data-view/DataViewTable.js.map

@@ -1 +1 @@
-{"version":3,"file":"DataViewTable.js","names":[],"sources":["../../../src/components/data-view/DataViewTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewSpec,\n  DataViewTableConfig,\n  DataViewField,\n} from '@contractspec/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { getAtPath, formatValue } from './utils';\n\nexport interface DataViewTableProps {\n  spec: DataViewSpec;\n  items: Record<string, unknown>[];\n  className?: string;\n  onRowClick?: (item: Record<string, unknown>) => void;\n  emptyState?: React.ReactNode;\n  headerActions?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nexport function DataViewTable({\n  spec,\n  items,\n  className,\n  onRowClick,\n  emptyState,\n  headerActions,\n  footer,\n}: DataViewTableProps) {\n  if (spec.view.kind !== 'table') {\n    throw new Error(\n      `DataViewTable received view kind \"${spec.view.kind}\", expected \"table\".`\n    );\n  }\n\n  const view = spec.view as DataViewTableConfig;\n  const fields = view.fields;\n  const columns =\n    view.columns?.map((column) => ({\n      ...column,\n      label: column.label ?? fieldLabel(fields, column.field),\n    })) ??\n    fields.map((field) => ({\n      field: field.key,\n      label: field.label,\n      align: 'left' as const,\n    }));\n\n  if (!items.length) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-foreground text-base font-semibold\">\n            {spec.meta.title}\n          </h3>\n          {headerActions}\n        </div>\n        {emptyState ?? (\n          <div className=\"border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm\">\n            No records available.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-4', className)}>\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-foreground text-base font-semibold\">\n          {spec.meta.title}\n        </h3>\n        {headerActions}\n      </div>\n      <div className=\"border-border bg-card overflow-x-auto rounded-lg border shadow-sm\">\n        <table\n          className={cn(\n            'divide-border min-w-full divide-y text-sm',\n            view.density === 'compact' ? 'text-sm' : 'text-base'\n          )}\n        >\n          <thead className=\"bg-muted/50\">\n            <tr>\n              {columns.map((column, columnIdx) => (\n                <th\n                  key={`${column.field}.${columnIdx}`}\n                  scope=\"col\"\n                  className={cn(\n                    'text-muted-foreground px-4 py-3 text-left font-semibold',\n                    alignmentClass(column.align)\n                  )}\n                >\n                  {column.label}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody className=\"divide-border bg-background divide-y\">\n            {items.map((item, rowIdx) => (\n              <tr\n                key={rowIdx}\n                className={cn(\n                  onRowClick &&\n                    'hover:bg-muted/30 cursor-pointer transition-colors'\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((column) => (\n                  <td\n                    key={column.field}\n                    className={cn(\n                      'text-foreground px-4 py-3',\n                      alignmentClass(column.align)\n                    )}\n                  >\n                    {displayValue(item, fields, column.field)}\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      {footer}\n    </div>\n  );\n}\n\nfunction fieldLabel(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key)?.label ?? key;\n}\n\nfunction fieldByKey(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key);\n}\n\nfunction displayValue(\n  item: Record<string, unknown>,\n  fields: DataViewField[],\n  key: string\n) {\n  const field = fieldByKey(fields, key);\n  if (!field) return '';\n  const value = getAtPath(item, field.dataPath);\n  return formatValue(value, field.format);\n}\n\nfunction alignmentClass(\n  align: 'left' | 'center' | 'right' | undefined\n): string | undefined {\n  switch (align) {\n    case 'center':\n      return 'text-center';\n    case 'right':\n      return 'text-right';\n    default:\n      return 'text-left';\n  }\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,cAAc,EAC5B,MACA,OACA,WACA,YACA,YACA,eACA,UACqB;AACrB,KAAI,KAAK,KAAK,SAAS,QACrB,OAAM,IAAI,MACR,qCAAqC,KAAK,KAAK,KAAK,sBACrD;CAGH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;CACpB,MAAM,UACJ,KAAK,SAAS,KAAK,YAAY;EAC7B,GAAG;EACH,OAAO,OAAO,SAAS,WAAW,QAAQ,OAAO,MAAM;EACxD,EAAE,IACH,OAAO,KAAK,WAAW;EACrB,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO;EACR,EAAE;AAEL,KAAI,CAAC,MAAM,OACT,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACJ;IACG,EACL,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;AAIV,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;;GACzD,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eACX,KAAK,KAAK;MACR,EACJ;KACG;GACN,oBAAC;IAAI,WAAU;cACb,qBAAC;KACC,WAAW,GACT,6CACA,KAAK,YAAY,YAAY,YAAY,YAC1C;gBAED,oBAAC;MAAM,WAAU;gBACf,oBAAC,kBACE,QAAQ,KAAK,QAAQ,cACpB,oBAAC;OAEC,OAAM;OACN,WAAW,GACT,2DACA,eAAe,OAAO,MAAM,CAC7B;iBAEA,OAAO;SAPH,GAAG,OAAO,MAAM,GAAG,YAQrB,CACL,GACC;OACC,EACR,oBAAC;MAAM,WAAU;gBACd,MAAM,KAAK,MAAM,WAChB,oBAAC;OAEC,WAAW,GACT,cACE,qDACH;OACD,eAAe,aAAa,KAAK;iBAEhC,QAAQ,KAAK,WACZ,oBAAC;QAEC,WAAW,GACT,6BACA,eAAe,OAAO,MAAM,CAC7B;kBAEA,aAAa,MAAM,QAAQ,OAAO,MAAM;UANpC,OAAO,MAOT,CACL;SAjBG,OAkBF,CACL;OACI;MACF;KACJ;GACL;;GACG;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI,EAAE,SAAS;;AAG7D,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI;;AAGlD,SAAS,aACP,MACA,QACA,KACA;CACA,MAAM,QAAQ,WAAW,QAAQ,IAAI;AACrC,KAAI,CAAC,MAAO,QAAO;AAEnB,QAAO,YADO,UAAU,MAAM,MAAM,SAAS,EACnB,MAAM,OAAO;;AAGzC,SAAS,eACP,OACoB;AACpB,SAAQ,OAAR;EACE,KAAK,SACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,QACE,QAAO"}
+{"version":3,"file":"DataViewTable.js","names":[],"sources":["../../../src/components/data-view/DataViewTable.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type {\n  DataViewField,\n  DataViewSpec,\n  DataViewTableConfig,\n} from '@contractspec/lib.contracts/data-views';\nimport { cn } from '../../lib/utils';\nimport { DataViewFormattedValue, getAtPath } from './utils';\n\nexport interface DataViewTableProps {\n  spec: DataViewSpec;\n  items: Record<string, unknown>[];\n  className?: string;\n  onRowClick?: (item: Record<string, unknown>) => void;\n  emptyState?: React.ReactNode;\n  headerActions?: React.ReactNode;\n  footer?: React.ReactNode;\n}\n\nexport function DataViewTable({\n  spec,\n  items,\n  className,\n  onRowClick,\n  emptyState,\n  headerActions,\n  footer,\n}: DataViewTableProps) {\n  if (spec.view.kind !== 'table') {\n    throw new Error(\n      `DataViewTable received view kind \"${spec.view.kind}\", expected \"table\".`\n    );\n  }\n\n  const view = spec.view as DataViewTableConfig;\n  const fields = view.fields;\n  const columns =\n    view.columns?.map((column) => ({\n      ...column,\n      label: column.label ?? fieldLabel(fields, column.field),\n    })) ??\n    fields.map((field) => ({\n      field: field.key,\n      label: field.label,\n      align: 'left' as const,\n    }));\n\n  if (!items.length) {\n    return (\n      <div className={cn('flex w-full flex-col gap-4', className)}>\n        <div className=\"flex items-center justify-between\">\n          <h3 className=\"text-foreground text-base font-semibold\">\n            {spec.meta.title}\n          </h3>\n          {headerActions}\n        </div>\n        {emptyState ?? (\n          <div className=\"border-muted-foreground/40 text-muted-foreground rounded-md border border-dashed p-8 text-center text-sm\">\n            No records available.\n          </div>\n        )}\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn('flex w-full flex-col gap-4', className)}>\n      <div className=\"flex items-center justify-between\">\n        <h3 className=\"text-foreground text-base font-semibold\">\n          {spec.meta.title}\n        </h3>\n        {headerActions}\n      </div>\n      <div className=\"border-border bg-card overflow-x-auto rounded-lg border shadow-sm\">\n        <table\n          className={cn(\n            'divide-border min-w-full divide-y text-sm',\n            view.density === 'compact' ? 'text-sm' : 'text-base'\n          )}\n        >\n          <thead className=\"bg-muted/50\">\n            <tr>\n              {columns.map((column, columnIdx) => (\n                <th\n                  key={`${column.field}.${columnIdx}`}\n                  scope=\"col\"\n                  className={cn(\n                    'text-muted-foreground px-4 py-3 text-left font-semibold',\n                    alignmentClass(column.align)\n                  )}\n                >\n                  {column.label}\n                </th>\n              ))}\n            </tr>\n          </thead>\n          <tbody className=\"divide-border bg-background divide-y\">\n            {items.map((item, rowIdx) => (\n              <tr\n                key={rowIdx}\n                className={cn(\n                  onRowClick &&\n                    'hover:bg-muted/30 cursor-pointer transition-colors'\n                )}\n                onClick={() => onRowClick?.(item)}\n              >\n                {columns.map((column) => (\n                  <td\n                    key={column.field}\n                    className={cn(\n                      'text-foreground px-4 py-3',\n                      alignmentClass(column.align)\n                    )}\n                  >\n                    <DisplayValue\n                      item={item}\n                      fields={fields}\n                      fieldKey={column.field}\n                    />\n                  </td>\n                ))}\n              </tr>\n            ))}\n          </tbody>\n        </table>\n      </div>\n      {footer}\n    </div>\n  );\n}\n\nfunction fieldLabel(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key)?.label ?? key;\n}\n\nfunction fieldByKey(fields: DataViewField[], key: string) {\n  return fields.find((field) => field.key === key);\n}\n\nexport function DisplayValue({\n  item,\n  fields,\n  fieldKey,\n}: {\n  item: Record<string, unknown>;\n  fields: DataViewField[];\n  fieldKey: string;\n}) {\n  const field = fieldByKey(fields, fieldKey);\n  if (!field) return '';\n  const value = getAtPath(item, field.dataPath);\n  return <DataViewFormattedValue value={value} format={field.format} />;\n}\n\nfunction alignmentClass(\n  align: 'left' | 'center' | 'right' | undefined\n): string | undefined {\n  switch (align) {\n    case 'center':\n      return 'text-center';\n    case 'right':\n      return 'text-right';\n    default:\n      return 'text-left';\n  }\n}\n"],"mappings":";;;;;;;;AAqBA,SAAgB,cAAc,EAC5B,MACA,OACA,WACA,YACA,YACA,eACA,UACqB;AACrB,KAAI,KAAK,KAAK,SAAS,QACrB,OAAM,IAAI,MACR,qCAAqC,KAAK,KAAK,KAAK,sBACrD;CAGH,MAAM,OAAO,KAAK;CAClB,MAAM,SAAS,KAAK;CACpB,MAAM,UACJ,KAAK,SAAS,KAAK,YAAY;EAC7B,GAAG;EACH,OAAO,OAAO,SAAS,WAAW,QAAQ,OAAO,MAAM;EACxD,EAAE,IACH,OAAO,KAAK,WAAW;EACrB,OAAO,MAAM;EACb,OAAO,MAAM;EACb,OAAO;EACR,EAAE;AAEL,KAAI,CAAC,MAAM,OACT,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;aACzD,qBAAC;GAAI,WAAU;cACb,oBAAC;IAAG,WAAU;cACX,KAAK,KAAK;KACR,EACJ;IACG,EACL,cACC,oBAAC;GAAI,WAAU;aAA2G;IAEpH;GAEJ;AAIV,QACE,qBAAC;EAAI,WAAW,GAAG,8BAA8B,UAAU;;GACzD,qBAAC;IAAI,WAAU;eACb,oBAAC;KAAG,WAAU;eACX,KAAK,KAAK;MACR,EACJ;KACG;GACN,oBAAC;IAAI,WAAU;cACb,qBAAC;KACC,WAAW,GACT,6CACA,KAAK,YAAY,YAAY,YAAY,YAC1C;gBAED,oBAAC;MAAM,WAAU;gBACf,oBAAC,kBACE,QAAQ,KAAK,QAAQ,cACpB,oBAAC;OAEC,OAAM;OACN,WAAW,GACT,2DACA,eAAe,OAAO,MAAM,CAC7B;iBAEA,OAAO;SAPH,GAAG,OAAO,MAAM,GAAG,YAQrB,CACL,GACC;OACC,EACR,oBAAC;MAAM,WAAU;gBACd,MAAM,KAAK,MAAM,WAChB,oBAAC;OAEC,WAAW,GACT,cACE,qDACH;OACD,eAAe,aAAa,KAAK;iBAEhC,QAAQ,KAAK,WACZ,oBAAC;QAEC,WAAW,GACT,6BACA,eAAe,OAAO,MAAM,CAC7B;kBAED,oBAAC;SACO;SACE;SACR,UAAU,OAAO;UACjB;UAVG,OAAO,MAWT,CACL;SArBG,OAsBF,CACL;OACI;MACF;KACJ;GACL;;GACG;;AAIV,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI,EAAE,SAAS;;AAG7D,SAAS,WAAW,QAAyB,KAAa;AACxD,QAAO,OAAO,MAAM,UAAU,MAAM,QAAQ,IAAI;;AAGlD,SAAgB,aAAa,EAC3B,MACA,QACA,YAKC;CACD,MAAM,QAAQ,WAAW,QAAQ,SAAS;AAC1C,KAAI,CAAC,MAAO,QAAO;AAEnB,QAAO,oBAAC;EAAuB,OADjB,UAAU,MAAM,MAAM,SAAS;EACA,QAAQ,MAAM;GAAU;;AAGvE,SAAS,eACP,OACoB;AACpB,SAAQ,OAAR;EACE,KAAK,SACH,QAAO;EACT,KAAK,QACH,QAAO;EACT,QACE,QAAO"}

package/dist/components/data-view/utils.js

@@ -1,6 +1,10 @@
 'use client';
 
-//#region src/components/data-view/utils.ts
+import { MarkdownRenderer } from "../../example-shared-ui/src/MarkdownView.js";
+import "../../example-shared-ui/src/index.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/components/data-view/utils.tsx
 function getAtPath(source, path) {
 	if (!source) return void 0;
 	if (!path) return source;
@@ -12,7 +16,7 @@ function getAtPath(source, path) {
 	}
 	return current;
 }
-function formatValue(value, format) {
+function DataViewFormattedValue({ value, format }) {
 	if (value == null) return "";
 	switch (format) {
 		case "boolean": return value ? "Yes" : "No";
@@ -26,7 +30,10 @@ function formatValue(value, format) {
 			dateStyle: "medium",
 			timeStyle: "short"
 		});
-		default: return String(value);
+		case "markdown": return /* @__PURE__ */ jsx(MarkdownRenderer, { content: value });
+		default:
+			console.log("format value", value, format);
+			return String(value);
 	}
 }
 function formatDate(value, options) {
@@ -39,5 +46,5 @@ function formatDate(value, options) {
 }
 
 //#endregion
-export { formatValue, getAtPath };
+export { DataViewFormattedValue, getAtPath };
 //# sourceMappingURL=utils.js.map

package/dist/components/data-view/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/data-view/utils.ts"],"sourcesContent":["'use client';\n\nexport function getAtPath(\n  source: Record<string, unknown> | undefined,\n  path: string\n): unknown {\n  if (!source) return undefined;\n  if (!path) return source;\n  const segments = path\n    .replace(/\\[(\\d+)\\]/g, '.$1')\n    .split('.')\n    .filter(Boolean);\n\n  let current: unknown = source;\n  for (const segment of segments) {\n    if (\n      current == null ||\n      (typeof current !== 'object' && !Array.isArray(current))\n    )\n      return undefined;\n    current = (current as Record<string, unknown>)[segment];\n  }\n  return current;\n}\n\nexport function formatValue(value: unknown, format?: string): string {\n  if (value == null) return '';\n  switch (format) {\n    case 'boolean':\n      return value ? 'Yes' : 'No';\n    case 'currency':\n      return typeof value === 'number'\n        ? new Intl.NumberFormat(undefined, {\n            style: 'currency',\n            currency: 'USD',\n          }).format(value)\n        : String(value);\n    case 'percentage':\n      return typeof value === 'number'\n        ? `${(value * 100).toFixed(1)}%`\n        : String(value);\n    case 'date':\n      return formatDate(value, {\n        dateStyle: 'medium',\n      });\n    case 'dateTime':\n      return formatDate(value, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      });\n    default:\n      return String(value);\n  }\n}\n\nfunction formatDate(\n  value: unknown,\n  options: Intl.DateTimeFormatOptions\n): string {\n  if (value instanceof Date) {\n    return new Intl.DateTimeFormat(undefined, options).format(value);\n  }\n  if (typeof value === 'string' || typeof value === 'number') {\n    const date = new Date(value);\n    if (!Number.isNaN(date.getTime())) {\n      return new Intl.DateTimeFormat(undefined, options).format(date);\n    }\n  }\n  return String(value ?? '');\n}\n"],"mappings":";;;AAEA,SAAgB,UACd,QACA,MACS;AACT,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;CAClB,MAAM,WAAW,KACd,QAAQ,cAAc,MAAM,CAC5B,MAAM,IAAI,CACV,OAAO,QAAQ;CAElB,IAAI,UAAmB;AACvB,MAAK,MAAM,WAAW,UAAU;AAC9B,MACE,WAAW,QACV,OAAO,YAAY,YAAY,CAAC,MAAM,QAAQ,QAAQ,CAEvD,QAAO;AACT,YAAW,QAAoC;;AAEjD,QAAO;;AAGT,SAAgB,YAAY,OAAgB,QAAyB;AACnE,KAAI,SAAS,KAAM,QAAO;AAC1B,SAAQ,QAAR;EACE,KAAK,UACH,QAAO,QAAQ,QAAQ;EACzB,KAAK,WACH,QAAO,OAAO,UAAU,WACpB,IAAI,KAAK,aAAa,QAAW;GAC/B,OAAO;GACP,UAAU;GACX,CAAC,CAAC,OAAO,MAAM,GAChB,OAAO,MAAM;EACnB,KAAK,aACH,QAAO,OAAO,UAAU,WACpB,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC,KAC5B,OAAO,MAAM;EACnB,KAAK,OACH,QAAO,WAAW,OAAO,EACvB,WAAW,UACZ,CAAC;EACJ,KAAK,WACH,QAAO,WAAW,OAAO;GACvB,WAAW;GACX,WAAW;GACZ,CAAC;EACJ,QACE,QAAO,OAAO,MAAM;;;AAI1B,SAAS,WACP,OACA,SACQ;AACR,KAAI,iBAAiB,KACnB,QAAO,IAAI,KAAK,eAAe,QAAW,QAAQ,CAAC,OAAO,MAAM;AAElE,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,MAAM,OAAO,IAAI,KAAK,MAAM;AAC5B,MAAI,CAAC,OAAO,MAAM,KAAK,SAAS,CAAC,CAC/B,QAAO,IAAI,KAAK,eAAe,QAAW,QAAQ,CAAC,OAAO,KAAK;;AAGnE,QAAO,OAAO,SAAS,GAAG"}
+{"version":3,"file":"utils.js","names":[],"sources":["../../../src/components/data-view/utils.tsx"],"sourcesContent":["'use client';\n\nimport { MarkdownRenderer } from '@contractspec/lib.example-shared-ui';\nimport type { DataViewFieldFormat } from '@contractspec/lib.contracts';\n\nexport function getAtPath(\n  source: Record<string, unknown> | undefined,\n  path: string\n): unknown {\n  if (!source) return undefined;\n  if (!path) return source;\n  const segments = path\n    .replace(/\\[(\\d+)\\]/g, '.$1')\n    .split('.')\n    .filter(Boolean);\n\n  let current: unknown = source;\n  for (const segment of segments) {\n    if (\n      current == null ||\n      (typeof current !== 'object' && !Array.isArray(current))\n    )\n      return undefined;\n    current = (current as Record<string, unknown>)[segment];\n  }\n  return current;\n}\n\nexport function DataViewFormattedValue({\n  value,\n  format,\n}: {\n  value: unknown;\n  format?: DataViewFieldFormat;\n}) {\n  if (value == null) return '';\n  switch (format) {\n    case 'boolean':\n      return value ? 'Yes' : 'No';\n    case 'currency':\n      return typeof value === 'number'\n        ? new Intl.NumberFormat(undefined, {\n            style: 'currency',\n            currency: 'USD',\n          }).format(value)\n        : String(value);\n    case 'percentage':\n      return typeof value === 'number'\n        ? `${(value * 100).toFixed(1)}%`\n        : String(value);\n    case 'date':\n      return formatDate(value, {\n        dateStyle: 'medium',\n      });\n    case 'dateTime':\n      return formatDate(value, {\n        dateStyle: 'medium',\n        timeStyle: 'short',\n      });\n    case 'markdown':\n      return <MarkdownRenderer content={value as string} />;\n    default:\n      console.log('format value', value, format);\n      return String(value);\n  }\n}\n\nfunction formatDate(\n  value: unknown,\n  options: Intl.DateTimeFormatOptions\n): string {\n  if (value instanceof Date) {\n    return new Intl.DateTimeFormat(undefined, options).format(value);\n  }\n  if (typeof value === 'string' || typeof value === 'number') {\n    const date = new Date(value);\n    if (!Number.isNaN(date.getTime())) {\n      return new Intl.DateTimeFormat(undefined, options).format(date);\n    }\n  }\n  return String(value ?? '');\n}\n"],"mappings":";;;;;;;AAKA,SAAgB,UACd,QACA,MACS;AACT,KAAI,CAAC,OAAQ,QAAO;AACpB,KAAI,CAAC,KAAM,QAAO;CAClB,MAAM,WAAW,KACd,QAAQ,cAAc,MAAM,CAC5B,MAAM,IAAI,CACV,OAAO,QAAQ;CAElB,IAAI,UAAmB;AACvB,MAAK,MAAM,WAAW,UAAU;AAC9B,MACE,WAAW,QACV,OAAO,YAAY,YAAY,CAAC,MAAM,QAAQ,QAAQ,CAEvD,QAAO;AACT,YAAW,QAAoC;;AAEjD,QAAO;;AAGT,SAAgB,uBAAuB,EACrC,OACA,UAIC;AACD,KAAI,SAAS,KAAM,QAAO;AAC1B,SAAQ,QAAR;EACE,KAAK,UACH,QAAO,QAAQ,QAAQ;EACzB,KAAK,WACH,QAAO,OAAO,UAAU,WACpB,IAAI,KAAK,aAAa,QAAW;GAC/B,OAAO;GACP,UAAU;GACX,CAAC,CAAC,OAAO,MAAM,GAChB,OAAO,MAAM;EACnB,KAAK,aACH,QAAO,OAAO,UAAU,WACpB,IAAI,QAAQ,KAAK,QAAQ,EAAE,CAAC,KAC5B,OAAO,MAAM;EACnB,KAAK,OACH,QAAO,WAAW,OAAO,EACvB,WAAW,UACZ,CAAC;EACJ,KAAK,WACH,QAAO,WAAW,OAAO;GACvB,WAAW;GACX,WAAW;GACZ,CAAC;EACJ,KAAK,WACH,QAAO,oBAAC,oBAAiB,SAAS,QAAmB;EACvD;AACE,WAAQ,IAAI,gBAAgB,OAAO,OAAO;AAC1C,UAAO,OAAO,MAAM;;;AAI1B,SAAS,WACP,OACA,SACQ;AACR,KAAI,iBAAiB,KACnB,QAAO,IAAI,KAAK,eAAe,QAAW,QAAQ,CAAC,OAAO,MAAM;AAElE,KAAI,OAAO,UAAU,YAAY,OAAO,UAAU,UAAU;EAC1D,MAAM,OAAO,IAAI,KAAK,MAAM;AAC5B,MAAI,CAAC,OAAO,MAAM,KAAK,SAAS,CAAC,CAC/B,QAAO,IAAI,KAAK,eAAe,QAAW,QAAQ,CAAC,OAAO,KAAK;;AAGnE,QAAO,OAAO,SAAS,GAAG"}

package/dist/components/marketing/MarketingComparisonSection.d.ts

@@ -1,6 +1,6 @@
 import { MarketingSectionPadding, MarketingSectionTone } from "./MarketingSection.js";
 import * as React from "react";
-import * as react_jsx_runtime37 from "react/jsx-runtime";
+import * as react_jsx_runtime27 from "react/jsx-runtime";
 
 //#region src/components/marketing/MarketingComparisonSection.d.ts
 interface ComparisonColumn {
@@ -24,7 +24,7 @@ declare function MarketingComparisonSection({
   right,
   tone,
   padding
-}: MarketingComparisonSectionProps): react_jsx_runtime37.JSX.Element;
+}: MarketingComparisonSectionProps): react_jsx_runtime27.JSX.Element;
 //#endregion
 export { MarketingComparisonSection };
 //# sourceMappingURL=MarketingComparisonSection.d.ts.map

package/dist/components/molecules/CodeBlock/CodeBlock.d.ts

@@ -1,5 +1,5 @@
 import { CodeBlockProps } from "./types.js";
-import * as react_jsx_runtime115 from "react/jsx-runtime";
+import * as react_jsx_runtime119 from "react/jsx-runtime";
 
 //#region src/components/molecules/CodeBlock/CodeBlock.d.ts
 declare function CodeBlock({
@@ -11,7 +11,7 @@ declare function CodeBlock({
   onCopy,
   className,
   ...props
-}: CodeBlockProps): react_jsx_runtime115.JSX.Element;
+}: CodeBlockProps): react_jsx_runtime119.JSX.Element;
 //#endregion
 export { CodeBlock };
 //# sourceMappingURL=CodeBlock.d.ts.map

package/dist/components/molecules/EntityCard.js

@@ -130,7 +130,6 @@ function EntityCard({ cardTitle, cardSubtitle, icon, iconTone = "default", iconS
 		try {
 			const { HoverPreview } = (init_HoverPreview(), __toCommonJS(HoverPreview_exports));
 			return /* @__PURE__ */ jsx(HoverPreview, {
-				className: "bg-red-500",
 				trigger: cardContent,
 				content: preview
 			});

package/dist/components/molecules/EntityCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"EntityCard.js","names":[],"sources":["../../../src/components/molecules/EntityCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { ChevronDown } from 'lucide-react';\n\nconst entityCardVariants = cva(\n  'transition-all duration-200 hover:shadow-md group',\n  {\n    variants: {\n      emphasis: {\n        default: '',\n        subtle: 'border-muted/60 bg-muted/20',\n        strong: 'border-primary/50 bg-primary/5',\n        accentGradient:\n          'border-transparent bg-gradient-to-br from-primary/10 via-background to-secondary/10 ring-1 ring-primary/20',\n      },\n      density: {\n        compact: 'p-3',\n        comfortable: 'p-4 md:p-5',\n      },\n      interactive: {\n        true: 'cursor-pointer hover:scale-[1.02] transform-gpu hover:border-primary/40',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      emphasis: 'default',\n      density: 'comfortable',\n      interactive: false,\n    },\n  }\n);\n\nconst iconContainerVariants = cva(\n  'flex shrink-0 items-center justify-center rounded-lg',\n  {\n    variants: {\n      size: {\n        sm: 'h-8 w-8',\n        md: 'h-10 w-10',\n        lg: 'h-12 w-12',\n      },\n      tone: {\n        default: 'bg-muted text-muted-foreground',\n        primary: 'bg-primary/10 text-primary',\n        success: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n        warning: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',\n        info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n        danger: 'bg-red-500/10 text-red-600 dark:text-red-400',\n      },\n    },\n    defaultVariants: { size: 'md', tone: 'default' },\n  }\n);\n\nexport type EntityCardIconTone =\n  | 'default'\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'danger';\n\nexport type EntityCardProps = React.ComponentProps<typeof Card> &\n  VariantProps<typeof entityCardVariants> & {\n    cardTitle: React.ReactNode;\n    cardSubtitle?: React.ReactNode;\n    /** Icon element to display on the left */\n    icon?: React.ReactNode;\n    /** Icon container styling */\n    iconTone?: EntityCardIconTone;\n    iconSize?: 'sm' | 'md' | 'lg';\n    chips?: React.ReactNode; // right-aligned small chips\n    meta?: React.ReactNode; // rows of icon+text data\n    footer?: React.ReactNode; // actions area\n    href?: string; // optional link wrapper\n    contentClassName?: string;\n    preview?: React.ReactNode; // hover preview content\n    /** Expandable content section */\n    expandableContent?: React.ReactNode;\n    /** Default expanded state */\n    defaultExpanded?: boolean;\n  };\n\nexport function EntityCard({\n  cardTitle,\n  cardSubtitle,\n  icon,\n  iconTone = 'default',\n  iconSize = 'md',\n  chips,\n  meta,\n  footer,\n  emphasis,\n  density,\n  interactive,\n  className,\n  contentClassName,\n  href,\n  preview,\n  expandableContent,\n  defaultExpanded = false,\n  onClick,\n  ...cardProps\n}: EntityCardProps) {\n  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);\n  const Wrapper: React.ElementType = href ? 'a' : 'div';\n  const isInteractive = interactive ?? !!(onClick || href);\n\n  const handleExpandClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setIsExpanded(!isExpanded);\n  };\n\n  const cardContent = (\n    <Card\n      className={cn(\n        entityCardVariants({ emphasis, interactive: isInteractive }),\n        className\n      )}\n      onClick={onClick}\n      {...cardProps}\n    >\n      <CardContent\n        className={cn(entityCardVariants({ density }), contentClassName)}\n      >\n        <div className=\"space-y-3\">\n          <div className=\"flex items-start gap-3\">\n            {icon && (\n              <div\n                className={iconContainerVariants({\n                  size: iconSize,\n                  tone: iconTone,\n                })}\n              >\n                {icon}\n              </div>\n            )}\n            <div className=\"flex flex-1 items-start justify-between gap-2\">\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"group-hover:text-primary truncate text-lg font-medium transition-colors\">\n                  {cardTitle}\n                </div>\n                {cardSubtitle && (\n                  <div className=\"text-muted-foreground text-sm\">\n                    {cardSubtitle}\n                  </div>\n                )}\n              </div>\n              <div className=\"inline-flex shrink-0 items-center gap-2\">\n                {chips}\n                {expandableContent && (\n                  <button\n                    type=\"button\"\n                    onClick={handleExpandClick}\n                    className=\"hover:bg-muted rounded-md p-1 transition-colors\"\n                    aria-expanded={isExpanded}\n                    aria-label={isExpanded ? 'Collapse' : 'Expand'}\n                  >\n                    <ChevronDown\n                      className={cn(\n                        'text-muted-foreground h-4 w-4 transition-transform duration-200',\n                        isExpanded && 'rotate-180'\n                      )}\n                    />\n                  </button>\n                )}\n              </div>\n            </div>\n          </div>\n          {meta && <div className=\"space-y-1\">{meta}</div>}\n          {expandableContent && (\n            <div\n              className={cn(\n                'overflow-hidden transition-all duration-200',\n                isExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'\n              )}\n            >\n              <div className=\"border-border/50 border-t pt-2\">\n                {expandableContent}\n              </div>\n            </div>\n          )}\n          {footer && (\n            <div className=\"flex items-center justify-between pt-1\">\n              {footer}\n            </div>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  );\n\n  const maybePreview = (() => {\n    if (!preview) return cardContent;\n    try {\n      /* eslint-disable @typescript-eslint/no-require-imports */\n      const { HoverPreview } =\n        require('./HoverPreview') as typeof import('./HoverPreview');\n      /* eslint-enable @typescript-eslint/no-require-imports */\n      return (\n        <HoverPreview\n          className=\"bg-red-500\"\n          trigger={cardContent}\n          content={preview}\n        />\n      );\n    } catch {\n      return cardContent;\n    }\n  })();\n\n  return (\n    <Wrapper href={href} className={href ? 'block' : undefined}>\n      {maybePreview}\n    </Wrapper>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAQA,MAAM,qBAAqB,IACzB,qDACA;CACE,UAAU;EACR,UAAU;GACR,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,gBACE;GACH;EACD,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,aAAa;GACX,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,aAAa;EACd;CACF,CACF;AAED,MAAM,wBAAwB,IAC5B,wDACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,MAAM;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,MAAM;GACN,QAAQ;GACT;EACF;CACD,iBAAiB;EAAE,MAAM;EAAM,MAAM;EAAW;CACjD,CACF;AA+BD,SAAgB,WAAW,EACzB,WACA,cACA,MACA,WAAW,WACX,WAAW,MACX,OACA,MACA,QACA,UACA,SACA,aACA,WACA,kBACA,MACA,SACA,mBACA,kBAAkB,OAClB,SACA,GAAG,aACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,gBAAgB;CACnE,MAAM,UAA6B,OAAO,MAAM;CAChD,MAAM,gBAAgB,eAAe,CAAC,EAAE,WAAW;CAEnD,MAAM,qBAAqB,MAAwB;AACjD,IAAE,iBAAiB;AACnB,gBAAc,CAAC,WAAW;;CAG5B,MAAM,cACJ,oBAAC;EACC,WAAW,GACT,mBAAmB;GAAE;GAAU,aAAa;GAAe,CAAC,EAC5D,UACD;EACQ;EACT,GAAI;YAEJ,oBAAC;GACC,WAAW,GAAG,mBAAmB,EAAE,SAAS,CAAC,EAAE,iBAAiB;aAEhE,qBAAC;IAAI,WAAU;;KACb,qBAAC;MAAI,WAAU;iBACZ,QACC,oBAAC;OACC,WAAW,sBAAsB;QAC/B,MAAM;QACN,MAAM;QACP,CAAC;iBAED;QACG,EAER,qBAAC;OAAI,WAAU;kBACb,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAI,WAAU;mBACZ;UACG,EACL,gBACC,oBAAC;SAAI,WAAU;mBACZ;UACG;SAEJ,EACN,qBAAC;QAAI,WAAU;mBACZ,OACA,qBACC,oBAAC;SACC,MAAK;SACL,SAAS;SACT,WAAU;SACV,iBAAe;SACf,cAAY,aAAa,aAAa;mBAEtC,oBAAC,eACC,WAAW,GACT,mEACA,cAAc,aACf,GACD;UACK;SAEP;QACF;OACF;KACL,QAAQ,oBAAC;MAAI,WAAU;gBAAa;OAAW;KAC/C,qBACC,oBAAC;MACC,WAAW,GACT,+CACA,aAAa,yBAAyB,oBACvC;gBAED,oBAAC;OAAI,WAAU;iBACZ;QACG;OACF;KAEP,UACC,oBAAC;MAAI,WAAU;gBACZ;OACG;;KAEJ;IACM;GACT;CAGT,MAAM,sBAAsB;AAC1B,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI;GAEF,MAAM,EAAE;AAGR,UACE,oBAAC;IACC,WAAU;IACV,SAAS;IACT,SAAS;KACT;UAEE;AACN,UAAO;;KAEP;AAEJ,QACE,oBAAC;EAAc;EAAM,WAAW,OAAO,UAAU;YAC9C;GACO"}
+{"version":3,"file":"EntityCard.js","names":[],"sources":["../../../src/components/molecules/EntityCard.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { Card, CardContent } from '@contractspec/lib.ui-kit-web/ui/card';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { cn } from '@contractspec/lib.ui-kit-web/ui/utils';\nimport { ChevronDown } from 'lucide-react';\n\nconst entityCardVariants = cva(\n  'transition-all duration-200 hover:shadow-md group',\n  {\n    variants: {\n      emphasis: {\n        default: '',\n        subtle: 'border-muted/60 bg-muted/20',\n        strong: 'border-primary/50 bg-primary/5',\n        accentGradient:\n          'border-transparent bg-gradient-to-br from-primary/10 via-background to-secondary/10 ring-1 ring-primary/20',\n      },\n      density: {\n        compact: 'p-3',\n        comfortable: 'p-4 md:p-5',\n      },\n      interactive: {\n        true: 'cursor-pointer hover:scale-[1.02] transform-gpu hover:border-primary/40',\n        false: '',\n      },\n    },\n    defaultVariants: {\n      emphasis: 'default',\n      density: 'comfortable',\n      interactive: false,\n    },\n  }\n);\n\nconst iconContainerVariants = cva(\n  'flex shrink-0 items-center justify-center rounded-lg',\n  {\n    variants: {\n      size: {\n        sm: 'h-8 w-8',\n        md: 'h-10 w-10',\n        lg: 'h-12 w-12',\n      },\n      tone: {\n        default: 'bg-muted text-muted-foreground',\n        primary: 'bg-primary/10 text-primary',\n        success: 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400',\n        warning: 'bg-amber-500/10 text-amber-600 dark:text-amber-400',\n        info: 'bg-blue-500/10 text-blue-600 dark:text-blue-400',\n        danger: 'bg-red-500/10 text-red-600 dark:text-red-400',\n      },\n    },\n    defaultVariants: { size: 'md', tone: 'default' },\n  }\n);\n\nexport type EntityCardIconTone =\n  | 'default'\n  | 'primary'\n  | 'success'\n  | 'warning'\n  | 'info'\n  | 'danger';\n\nexport type EntityCardProps = React.ComponentProps<typeof Card> &\n  VariantProps<typeof entityCardVariants> & {\n    cardTitle: React.ReactNode;\n    cardSubtitle?: React.ReactNode;\n    /** Icon element to display on the left */\n    icon?: React.ReactNode;\n    /** Icon container styling */\n    iconTone?: EntityCardIconTone;\n    iconSize?: 'sm' | 'md' | 'lg';\n    chips?: React.ReactNode; // right-aligned small chips\n    meta?: React.ReactNode; // rows of icon+text data\n    footer?: React.ReactNode; // actions area\n    href?: string; // optional link wrapper\n    contentClassName?: string;\n    preview?: React.ReactNode; // hover preview content\n    /** Expandable content section */\n    expandableContent?: React.ReactNode;\n    /** Default expanded state */\n    defaultExpanded?: boolean;\n  };\n\nexport function EntityCard({\n  cardTitle,\n  cardSubtitle,\n  icon,\n  iconTone = 'default',\n  iconSize = 'md',\n  chips,\n  meta,\n  footer,\n  emphasis,\n  density,\n  interactive,\n  className,\n  contentClassName,\n  href,\n  preview,\n  expandableContent,\n  defaultExpanded = false,\n  onClick,\n  ...cardProps\n}: EntityCardProps) {\n  const [isExpanded, setIsExpanded] = React.useState(defaultExpanded);\n  const Wrapper: React.ElementType = href ? 'a' : 'div';\n  const isInteractive = interactive ?? !!(onClick || href);\n\n  const handleExpandClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setIsExpanded(!isExpanded);\n  };\n\n  const cardContent = (\n    <Card\n      className={cn(\n        entityCardVariants({ emphasis, interactive: isInteractive }),\n        className\n      )}\n      onClick={onClick}\n      {...cardProps}\n    >\n      <CardContent\n        className={cn(entityCardVariants({ density }), contentClassName)}\n      >\n        <div className=\"space-y-3\">\n          <div className=\"flex items-start gap-3\">\n            {icon && (\n              <div\n                className={iconContainerVariants({\n                  size: iconSize,\n                  tone: iconTone,\n                })}\n              >\n                {icon}\n              </div>\n            )}\n            <div className=\"flex flex-1 items-start justify-between gap-2\">\n              <div className=\"min-w-0 flex-1\">\n                <div className=\"group-hover:text-primary truncate text-lg font-medium transition-colors\">\n                  {cardTitle}\n                </div>\n                {cardSubtitle && (\n                  <div className=\"text-muted-foreground text-sm\">\n                    {cardSubtitle}\n                  </div>\n                )}\n              </div>\n              <div className=\"inline-flex shrink-0 items-center gap-2\">\n                {chips}\n                {expandableContent && (\n                  <button\n                    type=\"button\"\n                    onClick={handleExpandClick}\n                    className=\"hover:bg-muted rounded-md p-1 transition-colors\"\n                    aria-expanded={isExpanded}\n                    aria-label={isExpanded ? 'Collapse' : 'Expand'}\n                  >\n                    <ChevronDown\n                      className={cn(\n                        'text-muted-foreground h-4 w-4 transition-transform duration-200',\n                        isExpanded && 'rotate-180'\n                      )}\n                    />\n                  </button>\n                )}\n              </div>\n            </div>\n          </div>\n          {meta && <div className=\"space-y-1\">{meta}</div>}\n          {expandableContent && (\n            <div\n              className={cn(\n                'overflow-hidden transition-all duration-200',\n                isExpanded ? 'max-h-96 opacity-100' : 'max-h-0 opacity-0'\n              )}\n            >\n              <div className=\"border-border/50 border-t pt-2\">\n                {expandableContent}\n              </div>\n            </div>\n          )}\n          {footer && (\n            <div className=\"flex items-center justify-between pt-1\">\n              {footer}\n            </div>\n          )}\n        </div>\n      </CardContent>\n    </Card>\n  );\n\n  const maybePreview = (() => {\n    if (!preview) return cardContent;\n    try {\n      /* eslint-disable @typescript-eslint/no-require-imports */\n      const { HoverPreview } =\n        require('./HoverPreview') as typeof import('./HoverPreview');\n      /* eslint-enable @typescript-eslint/no-require-imports */\n      return <HoverPreview trigger={cardContent} content={preview} />;\n    } catch {\n      return cardContent;\n    }\n  })();\n\n  return (\n    <Wrapper href={href} className={href ? 'block' : undefined}>\n      {maybePreview}\n    </Wrapper>\n  );\n}\n"],"mappings":";;;;;;;;;;;;AAQA,MAAM,qBAAqB,IACzB,qDACA;CACE,UAAU;EACR,UAAU;GACR,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,gBACE;GACH;EACD,SAAS;GACP,SAAS;GACT,aAAa;GACd;EACD,aAAa;GACX,MAAM;GACN,OAAO;GACR;EACF;CACD,iBAAiB;EACf,UAAU;EACV,SAAS;EACT,aAAa;EACd;CACF,CACF;AAED,MAAM,wBAAwB,IAC5B,wDACA;CACE,UAAU;EACR,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACL;EACD,MAAM;GACJ,SAAS;GACT,SAAS;GACT,SAAS;GACT,SAAS;GACT,MAAM;GACN,QAAQ;GACT;EACF;CACD,iBAAiB;EAAE,MAAM;EAAM,MAAM;EAAW;CACjD,CACF;AA+BD,SAAgB,WAAW,EACzB,WACA,cACA,MACA,WAAW,WACX,WAAW,MACX,OACA,MACA,QACA,UACA,SACA,aACA,WACA,kBACA,MACA,SACA,mBACA,kBAAkB,OAClB,SACA,GAAG,aACe;CAClB,MAAM,CAAC,YAAY,iBAAiB,MAAM,SAAS,gBAAgB;CACnE,MAAM,UAA6B,OAAO,MAAM;CAChD,MAAM,gBAAgB,eAAe,CAAC,EAAE,WAAW;CAEnD,MAAM,qBAAqB,MAAwB;AACjD,IAAE,iBAAiB;AACnB,gBAAc,CAAC,WAAW;;CAG5B,MAAM,cACJ,oBAAC;EACC,WAAW,GACT,mBAAmB;GAAE;GAAU,aAAa;GAAe,CAAC,EAC5D,UACD;EACQ;EACT,GAAI;YAEJ,oBAAC;GACC,WAAW,GAAG,mBAAmB,EAAE,SAAS,CAAC,EAAE,iBAAiB;aAEhE,qBAAC;IAAI,WAAU;;KACb,qBAAC;MAAI,WAAU;iBACZ,QACC,oBAAC;OACC,WAAW,sBAAsB;QAC/B,MAAM;QACN,MAAM;QACP,CAAC;iBAED;QACG,EAER,qBAAC;OAAI,WAAU;kBACb,qBAAC;QAAI,WAAU;mBACb,oBAAC;SAAI,WAAU;mBACZ;UACG,EACL,gBACC,oBAAC;SAAI,WAAU;mBACZ;UACG;SAEJ,EACN,qBAAC;QAAI,WAAU;mBACZ,OACA,qBACC,oBAAC;SACC,MAAK;SACL,SAAS;SACT,WAAU;SACV,iBAAe;SACf,cAAY,aAAa,aAAa;mBAEtC,oBAAC,eACC,WAAW,GACT,mEACA,cAAc,aACf,GACD;UACK;SAEP;QACF;OACF;KACL,QAAQ,oBAAC;MAAI,WAAU;gBAAa;OAAW;KAC/C,qBACC,oBAAC;MACC,WAAW,GACT,+CACA,aAAa,yBAAyB,oBACvC;gBAED,oBAAC;OAAI,WAAU;iBACZ;QACG;OACF;KAEP,UACC,oBAAC;MAAI,WAAU;gBACZ;OACG;;KAEJ;IACM;GACT;CAGT,MAAM,sBAAsB;AAC1B,MAAI,CAAC,QAAS,QAAO;AACrB,MAAI;GAEF,MAAM,EAAE;AAGR,UAAO,oBAAC;IAAa,SAAS;IAAa,SAAS;KAAW;UACzD;AACN,UAAO;;KAEP;AAEJ,QACE,oBAAC;EAAc;EAAM,WAAW,OAAO,UAAU;YAC9C;GACO"}

package/dist/components/molecules/HoverPreview.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime51 from "react/jsx-runtime";
+import * as react_jsx_runtime46 from "react/jsx-runtime";
 
 //#region src/components/molecules/HoverPreview.d.ts
 interface HoverPreviewProps {
@@ -15,7 +15,7 @@ declare function HoverPreview({
   align,
   sideOffset,
   className
-}: HoverPreviewProps): react_jsx_runtime51.JSX.Element;
+}: HoverPreviewProps): react_jsx_runtime46.JSX.Element;
 //#endregion
 export { HoverPreview };
 //# sourceMappingURL=HoverPreview.d.ts.map