@corensystem/coren-ui 1.0.0-next.20260924.75108.887a9c2

package/dist/form-layout.mjs

@@ -0,0 +1,90 @@
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+//#region src/form-layout.tsx
+const formLayoutVariants = cva("wwc:w-full", {
+	variants: {
+		layout: {
+			vertical: "wwc:space-y-6",
+			horizontal: "wwc:space-y-4",
+			inline: "wwc:flex wwc:flex-wrap wwc:gap-4 wwc:items-end"
+		},
+		size: {
+			sm: "wwc:max-w-sm",
+			md: "wwc:max-w-md",
+			lg: "wwc:max-w-lg",
+			xl: "wwc:max-w-xl",
+			full: "wwc:max-w-full"
+		}
+	},
+	defaultVariants: {
+		layout: "vertical",
+		size: "full"
+	}
+});
+/** Layout container for forms with consistent spacing and sizing. */
+const FormLayout = React.forwardRef(({ className, layout, size, children, ...props }, ref) => /* @__PURE__ */ jsx("form", {
+	ref,
+	className: cn(formLayoutVariants({
+		layout,
+		size
+	}), className),
+	...props,
+	children
+}));
+FormLayout.displayName = "FormLayout";
+/** Grouped section within a form. */
+const FormSection = React.forwardRef(({ className, title, description, children, ...props }, ref) => /* @__PURE__ */ jsxs("fieldset", {
+	ref,
+	className: cn("wwc:space-y-4 wwc:border-0 wwc:p-0 wwc:m-0", className),
+	...props,
+	children: [(title || description) && /* @__PURE__ */ jsxs("div", {
+		className: "wwc:space-y-1",
+		children: [title && /* @__PURE__ */ jsx("legend", {
+			className: "wwc:text-base wwc:font-semibold wwc:text-foreground",
+			children: title
+		}), description && /* @__PURE__ */ jsx("p", {
+			className: "wwc:text-sm wwc:text-muted-foreground",
+			children: description
+		})]
+	}), /* @__PURE__ */ jsx("div", {
+		className: "wwc:space-y-4",
+		children
+	})]
+}));
+FormSection.displayName = "FormSection";
+/** Row within a form for grouping fields horizontally. */
+const FormRow = React.forwardRef(({ className, columns = 2, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:grid wwc:gap-4", {
+			1: "wwc:grid-cols-1",
+			2: "wwc:grid-cols-1 wwc:sm:grid-cols-2",
+			3: "wwc:grid-cols-1 wwc:sm:grid-cols-2 wwc:lg:grid-cols-3",
+			4: "wwc:grid-cols-1 wwc:sm:grid-cols-2 wwc:lg:grid-cols-4"
+		}[columns], className),
+		...props,
+		children
+	});
+});
+FormRow.displayName = "FormRow";
+/** Container for form action buttons. */
+const FormActions = React.forwardRef(({ className, align = "right", children, ...props }, ref) => {
+	return /* @__PURE__ */ jsx("div", {
+		ref,
+		className: cn("wwc:flex wwc:items-center wwc:gap-3 wwc:pt-4 wwc:border-t wwc:border-border", {
+			left: "wwc:justify-start",
+			center: "wwc:justify-center",
+			right: "wwc:justify-end",
+			between: "wwc:justify-between"
+		}[align], className),
+		...props,
+		children
+	});
+});
+FormActions.displayName = "FormActions";
+//#endregion
+export { FormActions, FormLayout, FormRow, FormSection, formLayoutVariants };
+
+//# sourceMappingURL=form-layout.mjs.map

package/dist/form-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-layout.mjs","names":[],"sources":["../src/form-layout.tsx"],"sourcesContent":["import {cn} from \"@corensystem/coren-utils\";\nimport {type VariantProps, cva} from \"class-variance-authority\";\nimport * as React from \"react\";\n\nconst formLayoutVariants = cva(\"wwc:w-full\", {\n\tvariants: {\n\t\tlayout: {\n\t\t\tvertical: \"wwc:space-y-6\",\n\t\t\thorizontal: \"wwc:space-y-4\",\n\t\t\tinline: \"wwc:flex wwc:flex-wrap wwc:gap-4 wwc:items-end\",\n\t\t},\n\t\tsize: {\n\t\t\tsm: \"wwc:max-w-sm\",\n\t\t\tmd: \"wwc:max-w-md\",\n\t\t\tlg: \"wwc:max-w-lg\",\n\t\t\txl: \"wwc:max-w-xl\",\n\t\t\tfull: \"wwc:max-w-full\",\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tlayout: \"vertical\",\n\t\tsize: \"full\",\n\t},\n});\n\nexport interface FormLayoutProps\n\textends React.FormHTMLAttributes<HTMLFormElement>, VariantProps<typeof formLayoutVariants> {}\n\n/** Layout container for forms with consistent spacing and sizing. */\nconst FormLayout = React.forwardRef<HTMLFormElement, FormLayoutProps>(\n\t({className, layout, size, children, ...props}, ref) => (\n\t\t<form ref={ref} className={cn(formLayoutVariants({layout, size}), className)} {...props}>\n\t\t\t{children}\n\t\t</form>\n\t),\n);\nFormLayout.displayName = \"FormLayout\";\n\nexport interface FormSectionProps extends React.HTMLAttributes<HTMLFieldSetElement> {\n\t/** Section title */\n\ttitle?: string;\n\t/** Section description */\n\tdescription?: string;\n}\n\n/** Grouped section within a form. */\nconst FormSection = React.forwardRef<HTMLFieldSetElement, FormSectionProps>(\n\t({className, title, description, children, ...props}, ref) => (\n\t\t<fieldset ref={ref} className={cn(\"wwc:space-y-4 wwc:border-0 wwc:p-0 wwc:m-0\", className)} {...props}>\n\t\t\t{(title || description) && (\n\t\t\t\t<div className=\"wwc:space-y-1\">\n\t\t\t\t\t{title && <legend className=\"wwc:text-base wwc:font-semibold wwc:text-foreground\">{title}</legend>}\n\t\t\t\t\t{description && <p className=\"wwc:text-sm wwc:text-muted-foreground\">{description}</p>}\n\t\t\t\t</div>\n\t\t\t)}\n\t\t\t<div className=\"wwc:space-y-4\">{children}</div>\n\t\t</fieldset>\n\t),\n);\nFormSection.displayName = \"FormSection\";\n\nexport interface FormRowProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Number of columns (for horizontal layouts) */\n\tcolumns?: 1 | 2 | 3 | 4;\n}\n\n/** Row within a form for grouping fields horizontally. */\nconst FormRow = React.forwardRef<HTMLDivElement, FormRowProps>(({className, columns = 2, children, ...props}, ref) => {\n\tconst gridCols = {\n\t\t1: \"wwc:grid-cols-1\",\n\t\t2: \"wwc:grid-cols-1 wwc:sm:grid-cols-2\",\n\t\t3: \"wwc:grid-cols-1 wwc:sm:grid-cols-2 wwc:lg:grid-cols-3\",\n\t\t4: \"wwc:grid-cols-1 wwc:sm:grid-cols-2 wwc:lg:grid-cols-4\",\n\t};\n\n\treturn (\n\t\t<div ref={ref} className={cn(\"wwc:grid wwc:gap-4\", gridCols[columns], className)} {...props}>\n\t\t\t{children}\n\t\t</div>\n\t);\n});\nFormRow.displayName = \"FormRow\";\n\nexport interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {\n\t/** Alignment of actions */\n\talign?: \"left\" | \"center\" | \"right\" | \"between\";\n}\n\n/** Container for form action buttons. */\nconst FormActions = React.forwardRef<HTMLDivElement, FormActionsProps>(\n\t({className, align = \"right\", children, ...props}, ref) => {\n\t\tconst alignClasses = {\n\t\t\tleft: \"wwc:justify-start\",\n\t\t\tcenter: \"wwc:justify-center\",\n\t\t\tright: \"wwc:justify-end\",\n\t\t\tbetween: \"wwc:justify-between\",\n\t\t};\n\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={ref}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"wwc:flex wwc:items-center wwc:gap-3 wwc:pt-4 wwc:border-t wwc:border-border\",\n\t\t\t\t\talignClasses[align],\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</div>\n\t\t);\n\t},\n);\nFormActions.displayName = \"FormActions\";\n\nexport {FormLayout, FormSection, FormRow, FormActions, formLayoutVariants};\n"],"mappings":";;;;;AAIA,MAAM,qBAAqB,IAAI,cAAc;CAC5C,UAAU;EACT,QAAQ;GACP,UAAU;GACV,YAAY;GACZ,QAAQ;EACT;EACA,MAAM;GACL,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,MAAM;EACP;CACD;CACA,iBAAiB;EAChB,QAAQ;EACR,MAAM;CACP;AACD,CAAC;;AAMD,MAAM,aAAa,MAAM,YACvB,EAAC,WAAW,QAAQ,MAAM,UAAU,GAAG,SAAQ,QAC/C,oBAAC,QAAD;CAAW;CAAK,WAAW,GAAG,mBAAmB;EAAC;EAAQ;CAAI,CAAC,GAAG,SAAS;CAAG,GAAI;CAChF;AACI,CAAA,CAER;AACA,WAAW,cAAc;;AAUzB,MAAM,cAAc,MAAM,YACxB,EAAC,WAAW,OAAO,aAAa,UAAU,GAAG,SAAQ,QACrD,qBAAC,YAAD;CAAe;CAAK,WAAW,GAAG,8CAA8C,SAAS;CAAG,GAAI;CAAhG,UAAA,EACG,SAAS,gBACV,qBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,SAAS,oBAAC,UAAD;GAAQ,WAAU;GAAuD,UAAA;EAAc,CAAA,GAChG,eAAe,oBAAC,KAAD;GAAG,WAAU;GAAyC,UAAA;EAAe,CAAA,CACjF;CAEN,CAAA,GAAA,oBAAC,OAAD;EAAK,WAAU;EAAiB;CAAc,CAAA,CACrC;AAEZ,CAAA,CAAA;AACA,YAAY,cAAc;;AAQ1B,MAAM,UAAU,MAAM,YAA0C,EAAC,WAAW,UAAU,GAAG,UAAU,GAAG,SAAQ,QAAQ;CAQrH,OACC,oBAAC,OAAD;EAAU;EAAK,WAAW,GAAG,sBAAsB;GAPnD,GAAG;GACH,GAAG;GACH,GAAG;GACH,GAAG;EAIuD,EAAE,UAAU,SAAS;EAAG,GAAI;EACpF;CACG,CAAA;AAEP,CAAC;AACD,QAAQ,cAAc;;AAQtB,MAAM,cAAc,MAAM,YACxB,EAAC,WAAW,QAAQ,SAAS,UAAU,GAAG,SAAQ,QAAQ;CAQ1D,OACC,oBAAC,OAAD;EACM;EACL,WAAW,GACV,+EACA;GAXF,MAAM;GACN,QAAQ;GACR,OAAO;GACP,SAAS;EAQI,EAAE,QACb,SACD;EACA,GAAI;EAEH;CACG,CAAA;AAEP,CACD;AACA,YAAY,cAAc"}

package/dist/form.d.mts

@@ -0,0 +1,29 @@
+import { LabelProps } from "./label.mjs";
+import * as React from "react";
+import { ControllerProps, FieldPath, FieldValues } from "react-hook-form";
+//#region src/form.d.ts
+/** React Hook Form integration with Zod validation and composable form field components. */
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>({ children, watch, getValues, getErrors, getFieldState, setError, clearErrors, setValue, setValues, trigger, formState, resetField, reset, resetDefaultValues, handleSubmit, unregister, control, register, setFocus, subscribe }: import("react-hook-form").FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
+declare const useFormField: () => {
+  invalid: boolean;
+  isDirty: boolean;
+  isTouched: boolean;
+  isValidating: boolean;
+  error?: import("react-hook-form").FieldError | undefined;
+  id: string;
+  name: string;
+  formItemId: string;
+  formDescriptionId: string;
+  formMessageId: string;
+};
+declare const FormItem: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React.ForwardRefExoticComponent<Omit<LabelProps & React.RefAttributes<HTMLLabelElement>, "ref"> & React.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLElement> & {
+  children?: React.ReactNode;
+} & React.RefAttributes<HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;
+declare const FormDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+//# sourceMappingURL=form.d.mts.map

package/dist/form.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.mts","names":[],"sources":["../src/form.tsx"],"mappings":";;;;;cAiBM,OAAI,qBAAA,aAAA,gBAAA,qBAAA,gBAAA,UAAA,OAAA,WAAA,WAAA,eAAA,UAAA,aAAA,UAAA,WAAA,SAAA,WAAA,YAAA,OAAA,oBAAA,cAAA,YAAA,SAAA,UAAA,UAAA,uCAAA,kBAAA,cAAA,UAAA,wBAAA,MAAA,IAAA;cAWJ,YACL,qBAAqB,cAAc,aACnC,cAAc,UAAU,gBAAgB,UAAU,oBACjD,SAEC,gBAAgB,cAAc,uCAAM,IAAA;cAQjC;;;;;;;;;;;;cA6BA,UAAQ,MAAA,0BAAA,MAAA,eAAA,kBAAA,MAAA,cAAA;cAaR,WAAS,MAAA,0BAAA,KAAA,aAAA,MAAA,cAAA,4BAAA,MAAA,cAAA;cAUT,aAAW,MAAA,0BAAA,KAAA,MAAA,eAAA;;IAchB,MAAA,cAAA,uBAAA,MAAA,cAAA;cAGK,iBAAe,MAAA,0BAAA,MAAA,eAAA,wBAAA,MAAA,cAAA;cAgBf,aAAW,MAAA,0BAAA,MAAA,eAAA,wBAAA,MAAA,cAAA"}

package/dist/form.mjs

@@ -0,0 +1,93 @@
+import { Label } from "./label.mjs";
+import { cn } from "@corensystem/coren-utils";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+import { Slot } from "@radix-ui/react-slot";
+import { Controller, FormProvider, useFormContext } from "react-hook-form";
+//#region src/form.tsx
+/** React Hook Form integration with Zod validation and composable form field components. */
+const Form = FormProvider;
+const FormFieldContext = React.createContext({});
+const FormField = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(FormFieldContext.Provider, {
+		value: { name: props.name },
+		children: /* @__PURE__ */ jsx(Controller, { ...props })
+	});
+};
+const useFormField = () => {
+	const fieldContext = React.useContext(FormFieldContext);
+	const itemContext = React.useContext(FormItemContext);
+	const { getFieldState, formState } = useFormContext();
+	const fieldState = getFieldState(fieldContext.name, formState);
+	if (!fieldContext) throw new Error("useFormField should be used within <FormField>");
+	const { id } = itemContext;
+	return {
+		id,
+		name: fieldContext.name,
+		formItemId: `${id}-form-item`,
+		formDescriptionId: `${id}-form-item-description`,
+		formMessageId: `${id}-form-item-message`,
+		...fieldState
+	};
+};
+const FormItemContext = React.createContext({});
+const FormItem = React.forwardRef(({ className, ...props }, ref) => {
+	const id = React.useId();
+	return /* @__PURE__ */ jsx(FormItemContext.Provider, {
+		value: { id },
+		children: /* @__PURE__ */ jsx("div", {
+			ref,
+			className: cn("wwc:space-y-2", className),
+			...props
+		})
+	});
+});
+FormItem.displayName = "FormItem";
+const FormLabel = React.forwardRef(({ className, ...props }, ref) => {
+	const { error, formItemId } = useFormField();
+	return /* @__PURE__ */ jsx(Label, {
+		ref,
+		className: cn(error && "wwc:text-destructive", className),
+		htmlFor: formItemId,
+		...props
+	});
+});
+FormLabel.displayName = "FormLabel";
+const FormControl = React.forwardRef(({ ...props }, ref) => {
+	const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+	return /* @__PURE__ */ jsx(Slot, {
+		ref,
+		id: formItemId,
+		"aria-describedby": !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`,
+		"aria-invalid": !!error,
+		...props
+	});
+});
+FormControl.displayName = "FormControl";
+const FormDescription = React.forwardRef(({ className, ...props }, ref) => {
+	const { formDescriptionId } = useFormField();
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		id: formDescriptionId,
+		className: cn("wwc:text-sm wwc:text-muted-foreground", className),
+		...props
+	});
+});
+FormDescription.displayName = "FormDescription";
+const FormMessage = React.forwardRef(({ className, children, ...props }, ref) => {
+	const { error, formMessageId } = useFormField();
+	const body = error ? String(error?.message) : children;
+	if (!body) return null;
+	return /* @__PURE__ */ jsx("p", {
+		ref,
+		id: formMessageId,
+		className: cn("wwc:text-sm wwc:font-medium wwc:text-destructive", className),
+		...props,
+		children: body
+	});
+});
+FormMessage.displayName = "FormMessage";
+//#endregion
+export { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, useFormField };
+
+//# sourceMappingURL=form.mjs.map

package/dist/form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.mjs","names":[],"sources":["../src/form.tsx"],"sourcesContent":["import type * as LabelPrimitive from \"@radix-ui/react-label\";\n\nimport {cn} from \"@corensystem/coren-utils\";\nimport {Slot} from \"@radix-ui/react-slot\";\nimport * as React from \"react\";\nimport {\n\tController,\n\ttype ControllerProps,\n\ttype FieldPath,\n\ttype FieldValues,\n\tFormProvider,\n\tuseFormContext,\n} from \"react-hook-form\";\n\nimport {Label} from \"./label\";\n\n/** React Hook Form integration with Zod validation and composable form field components. */\nconst Form = FormProvider;\n\ntype FormFieldContextValue<\n\tTFieldValues extends FieldValues = FieldValues,\n\tTName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n> = {\n\tname: TName;\n};\n\nconst FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);\n\nconst FormField = <\n\tTFieldValues extends FieldValues = FieldValues,\n\tTName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,\n>({\n\t...props\n}: ControllerProps<TFieldValues, TName>) => {\n\treturn (\n\t\t<FormFieldContext.Provider value={{name: props.name}}>\n\t\t\t<Controller {...props} />\n\t\t</FormFieldContext.Provider>\n\t);\n};\n\nconst useFormField = () => {\n\tconst fieldContext = React.useContext(FormFieldContext);\n\tconst itemContext = React.useContext(FormItemContext);\n\tconst {getFieldState, formState} = useFormContext();\n\n\tconst fieldState = getFieldState(fieldContext.name, formState);\n\n\tif (!fieldContext) {\n\t\tthrow new Error(\"useFormField should be used within <FormField>\");\n\t}\n\n\tconst {id} = itemContext;\n\n\treturn {\n\t\tid,\n\t\tname: fieldContext.name,\n\t\tformItemId: `${id}-form-item`,\n\t\tformDescriptionId: `${id}-form-item-description`,\n\t\tformMessageId: `${id}-form-item-message`,\n\t\t...fieldState,\n\t};\n};\n\ntype FormItemContextValue = {\n\tid: string;\n};\n\nconst FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);\n\nconst FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(\n\t({className, ...props}, ref) => {\n\t\tconst id = React.useId();\n\n\t\treturn (\n\t\t\t<FormItemContext.Provider value={{id}}>\n\t\t\t\t<div ref={ref} className={cn(\"wwc:space-y-2\", className)} {...props} />\n\t\t\t</FormItemContext.Provider>\n\t\t);\n\t},\n);\nFormItem.displayName = \"FormItem\";\n\nconst FormLabel = React.forwardRef<\n\tReact.ElementRef<typeof LabelPrimitive.Root>,\n\tReact.ComponentPropsWithoutRef<typeof Label>\n>(({className, ...props}, ref) => {\n\tconst {error, formItemId} = useFormField();\n\n\treturn <Label ref={ref} className={cn(error && \"wwc:text-destructive\", className)} htmlFor={formItemId} {...props} />;\n});\nFormLabel.displayName = \"FormLabel\";\n\nconst FormControl = React.forwardRef<React.ElementRef<typeof Slot>, React.ComponentPropsWithoutRef<typeof Slot>>(\n\t({...props}, ref) => {\n\t\tconst {error, formItemId, formDescriptionId, formMessageId} = useFormField();\n\n\t\treturn (\n\t\t\t<Slot\n\t\t\t\tref={ref}\n\t\t\t\tid={formItemId}\n\t\t\t\taria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}\n\t\t\t\taria-invalid={!!error}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nFormControl.displayName = \"FormControl\";\n\nconst FormDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n\t({className, ...props}, ref) => {\n\t\tconst {formDescriptionId} = useFormField();\n\n\t\treturn (\n\t\t\t<p\n\t\t\t\tref={ref}\n\t\t\t\tid={formDescriptionId}\n\t\t\t\tclassName={cn(\"wwc:text-sm wwc:text-muted-foreground\", className)}\n\t\t\t\t{...props}\n\t\t\t/>\n\t\t);\n\t},\n);\nFormDescription.displayName = \"FormDescription\";\n\nconst FormMessage = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(\n\t({className, children, ...props}, ref) => {\n\t\tconst {error, formMessageId} = useFormField();\n\t\tconst body = error ? String(error?.message) : children;\n\n\t\tif (!body) {\n\t\t\treturn null;\n\t\t}\n\n\t\treturn (\n\t\t\t<p\n\t\t\t\tref={ref}\n\t\t\t\tid={formMessageId}\n\t\t\t\tclassName={cn(\"wwc:text-sm wwc:font-medium wwc:text-destructive\", className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{body}\n\t\t\t</p>\n\t\t);\n\t},\n);\nFormMessage.displayName = \"FormMessage\";\n\nexport {useFormField, Form, FormItem, FormLabel, FormControl, FormDescription, FormMessage, FormField};\n"],"mappings":";;;;;;;;AAiBA,MAAM,OAAO;AASb,MAAM,mBAAmB,MAAM,cAAqC,CAAC,CAA0B;AAE/F,MAAM,aAGJ,EACD,GAAG,YACwC;CAC3C,OACC,oBAAC,iBAAiB,UAAlB;EAA2B,OAAO,EAAC,MAAM,MAAM,KAAI;EAClD,UAAA,oBAAC,YAAD,EAAY,GAAI,MAAQ,CAAA;CACE,CAAA;AAE7B;AAEA,MAAM,qBAAqB;CAC1B,MAAM,eAAe,MAAM,WAAW,gBAAgB;CACtD,MAAM,cAAc,MAAM,WAAW,eAAe;CACpD,MAAM,EAAC,eAAe,cAAa,eAAe;CAElD,MAAM,aAAa,cAAc,aAAa,MAAM,SAAS;CAE7D,IAAI,CAAC,cACJ,MAAM,IAAI,MAAM,gDAAgD;CAGjE,MAAM,EAAC,OAAM;CAEb,OAAO;EACN;EACA,MAAM,aAAa;EACnB,YAAY,GAAG,GAAG;EAClB,mBAAmB,GAAG,GAAG;EACzB,eAAe,GAAG,GAAG;EACrB,GAAG;CACJ;AACD;AAMA,MAAM,kBAAkB,MAAM,cAAoC,CAAC,CAAyB;AAE5F,MAAM,WAAW,MAAM,YACrB,EAAC,WAAW,GAAG,SAAQ,QAAQ;CAC/B,MAAM,KAAK,MAAM,MAAM;CAEvB,OACC,oBAAC,gBAAgB,UAAjB;EAA0B,OAAO,EAAC,GAAE;EACnC,UAAA,oBAAC,OAAD;GAAU;GAAK,WAAW,GAAG,iBAAiB,SAAS;GAAG,GAAI;EAAQ,CAAA;CAC7C,CAAA;AAE5B,CACD;AACA,SAAS,cAAc;AAEvB,MAAM,YAAY,MAAM,YAGrB,EAAC,WAAW,GAAG,SAAQ,QAAQ;CACjC,MAAM,EAAC,OAAO,eAAc,aAAa;CAEzC,OAAO,oBAAC,OAAD;EAAY;EAAK,WAAW,GAAG,SAAS,wBAAwB,SAAS;EAAG,SAAS;EAAY,GAAI;CAAQ,CAAA;AACrH,CAAC;AACD,UAAU,cAAc;AAExB,MAAM,cAAc,MAAM,YACxB,EAAC,GAAG,SAAQ,QAAQ;CACpB,MAAM,EAAC,OAAO,YAAY,mBAAmB,kBAAiB,aAAa;CAE3E,OACC,oBAAC,MAAD;EACM;EACL,IAAI;EACJ,oBAAkB,CAAC,QAAQ,GAAG,sBAAsB,GAAG,kBAAkB,GAAG;EAC5E,gBAAc,CAAC,CAAC;EAChB,GAAI;CACJ,CAAA;AAEH,CACD;AACA,YAAY,cAAc;AAE1B,MAAM,kBAAkB,MAAM,YAC5B,EAAC,WAAW,GAAG,SAAQ,QAAQ;CAC/B,MAAM,EAAC,sBAAqB,aAAa;CAEzC,OACC,oBAAC,KAAD;EACM;EACL,IAAI;EACJ,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;CACJ,CAAA;AAEH,CACD;AACA,gBAAgB,cAAc;AAE9B,MAAM,cAAc,MAAM,YACxB,EAAC,WAAW,UAAU,GAAG,SAAQ,QAAQ;CACzC,MAAM,EAAC,OAAO,kBAAiB,aAAa;CAC5C,MAAM,OAAO,QAAQ,OAAO,OAAO,OAAO,IAAI;CAE9C,IAAI,CAAC,MACJ,OAAO;CAGR,OACC,oBAAC,KAAD;EACM;EACL,IAAI;EACJ,WAAW,GAAG,oDAAoD,SAAS;EAC3E,GAAI;EAEH,UAAA;CACC,CAAA;AAEL,CACD;AACA,YAAY,cAAc"}

package/dist/fragment-viewer/cinematic.d.mts

@@ -0,0 +1,76 @@
+import * as OBC from "@thatopen/components";
+import * as THREE from "three";
+import * as OBF from "@thatopen/components-front";
+//#region src/fragment-viewer/cinematic.d.ts
+/**
+ * Cinematic mode — sun-lit shading for the building, over a pixel-identical grid and background.
+ *
+ * The look that reads as "3D and beautiful" is a sun that casts shadows, ambient occlusion for contact
+ * darkening, and ACES filmic tone mapping. But the grid and background must stay exactly what the normal
+ * viewer shows — no tone mapping, no AO, no glow — for both a white and a dark app background.
+ *
+ * How it stays pixel-identical (verified against the installed three r182 + SDK source):
+ *  - That Open keeps rendering the normal frame to the canvas every tick (renderer stays enabled). That
+ *    frame IS the untouched grid + background.
+ *  - On `world.onAfterUpdate` we render ONLY the building through an effect chain into an off-screen HDR
+ *    buffer (RenderPass → GTAO), build a white-on-black silhouette mask, then draw a fullscreen quad over
+ *    the canvas that applies ACES + sRGB to the building and **discards every non-building pixel**. Grid
+ *    and background pixels are therefore never written — byte-identical, by construction.
+ *  - Global renderer colour state (`toneMapping`, `outputColorSpace`) is never touched: three forces
+ *    linear/no-tone-map when rendering into a target, so the building buffer is linear HDR and the quad
+ *    does the one and only ACES+sRGB encode itself.
+ *
+ * Two deliberate limitations of keeping the grid untouched: no ground/cast shadow (it would darken the
+ * grid — the building self-shadows only), and no outward bloom halo (it would tint the grid/sky).
+ *
+ * Everything is built on enable and fully freed on disable, so it costs nothing (memory or frame time)
+ * while off.
+ */
+interface CinematicOptions {
+  /** ACES exposure applied to the building in the composite. */
+  exposure?: number;
+}
+type World = OBC.SimpleWorld<OBC.SimpleScene, OBC.OrthoPerspectiveCamera, OBF.PostproductionRenderer>;
+export declare class Cinematic {
+  private readonly world;
+  private exposure;
+  private enabled;
+  private hooked;
+  private grid;
+  private composer;
+  private renderPass;
+  private gtaoPass;
+  private maskRT;
+  private whiteMaterial;
+  private compositeMaterial;
+  private fsQuad;
+  private sunLight;
+  private ambientLight;
+  private saved;
+  /** Tracks the camera projection so the GTAO material's PERSPECTIVE_CAMERA define can be refreshed
+   *  when the viewer toggles perspective↔orthographic (the SDK bakes it once at construction). */
+  private lastCameraIsPerspective;
+  constructor(world: World, options?: CinematicOptions);
+  get active(): boolean;
+  /** Turn cinematic mode on. `modelBox` frames the sun's shadow camera; `grid` is hidden per sub-render. */
+  enable(modelBox: THREE.Box3 | null, grid: THREE.Object3D | null): void;
+  /** Turn it off: restore every mutation and free every GPU resource (no idle VRAM). */
+  disable(): void;
+  resize(): void;
+  dispose(): void;
+  private canvasSize;
+  private saveState;
+  /** Enable the shadow map and re-balance the lights so the building isn't flat under ACES. Global
+   *  colour state (tone mapping / output colour space / background) is intentionally left untouched —
+   *  the grid + background must render exactly as normal, and only the building buffer is tone-mapped. */
+  private configureShadowsAndLights;
+  /** Flag full-detail (MeshLambert) meshes to cast + receive self-shadows; exclude the LOD shader (no
+   *  depth program) and the grid. Run per-frame because zoom streams new meshes. */
+  private flagMeshes;
+  private buildComposer;
+  private render;
+  private disposeComposer;
+  private restoreState;
+}
+//#endregion
+//# sourceMappingURL=cinematic.d.mts.map

package/dist/fragment-viewer/cinematic.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cinematic.d.mts","names":[],"sources":["../../src/fragment-viewer/cinematic.ts"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;UAiCU;;EAET;;KA+CI,QAAQ,IAAI,YAAY,IAAI,aAAa,IAAI,wBAAwB,IAAI;qBAcjE;mBACK;UACT;UAEA;UACA;UACA;UAGA;UACA;UACA;UACA;UACA;UACA;UACA;UAGA;UACA;UAEA;;;UAWA;EAEI,YAAA,OAAO,OAAO,UAAS;MAK/B;;EAKJ,OAAO,UAAU,MAAM,aAAa,MAAM,MAAM;;EAkBhD;EAUA;EAQA;UAMQ;UAYA;;;;UAsBA;;;UAiEA;UAiBA;UAyDA;UAmEA;UAmBA"}