@burojs/ui-shadcn 0.4.0 → 0.5.0

package/dist/shell-DxhlsPwm.cjs

@@ -0,0 +1,271 @@
+const require_use_theme = require("./use-theme-DFlpXils.cjs");
+const require_dialog = require("./dialog-DRNUq9EA.cjs");
+let _burojs_react = require("@burojs/react");
+let _tabler_icons_react = require("@tabler/icons-react");
+let react = require("react");
+react = require_use_theme.__toESM(react, 1);
+let react_jsx_runtime = require("react/jsx-runtime");
+let class_variance_authority = require("class-variance-authority");
+let _radix_ui_react_dialog = require("@radix-ui/react-dialog");
+_radix_ui_react_dialog = require_use_theme.__toESM(_radix_ui_react_dialog, 1);
+//#region src/primitives/sheet.tsx
+const Sheet = _radix_ui_react_dialog.Root;
+const SheetTrigger = _radix_ui_react_dialog.Trigger;
+const SheetClose = _radix_ui_react_dialog.Close;
+const SheetPortal = _radix_ui_react_dialog.Portal;
+const SheetOverlay = react.forwardRef(({ className, ...props }, ref) => (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Overlay, {
+	className: require_use_theme.cn("fixed inset-0 z-50 bg-overlay/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-[var(--duration-panel)] ease-[var(--ease-overlay)]", className),
+	...props,
+	ref
+}));
+SheetOverlay.displayName = _radix_ui_react_dialog.Overlay.displayName;
+const sheetVariants = (0, class_variance_authority.cva)("fixed z-50 gap-4 bg-background text-foreground p-6 shadow-lg duration-[var(--duration-panel)] ease-[var(--ease-overlay)] data-[state=open]:animate-in data-[state=closed]:animate-out", {
+	variants: { side: {
+		top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+		bottom: "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+		left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+		right: "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm"
+	} },
+	defaultVariants: { side: "right" }
+});
+const SheetContent = react.forwardRef(({ side = "right", className, children, showClose = true, ...props }, ref) => {
+	const t = (0, _burojs_react.useOptionalT)();
+	return (0, react_jsx_runtime.jsxs)(SheetPortal, { children: [(0, react_jsx_runtime.jsx)(SheetOverlay, {}), (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Content, {
+		ref,
+		className: require_use_theme.cn(sheetVariants({ side }), className),
+		...props,
+		children: [children, showClose && (0, react_jsx_runtime.jsxs)(_radix_ui_react_dialog.Close, {
+			className: "absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary",
+			children: [(0, react_jsx_runtime.jsx)(_tabler_icons_react.IconX, { className: "h-4 w-4" }), (0, react_jsx_runtime.jsx)("span", {
+				className: "sr-only",
+				children: t("actions.close", { defaultValue: "Close" })
+			})]
+		})]
+	})] });
+});
+SheetContent.displayName = _radix_ui_react_dialog.Content.displayName;
+function SheetHeader({ className, ...props }) {
+	return (0, react_jsx_runtime.jsx)("div", {
+		className: require_use_theme.cn("flex flex-col space-y-2 text-center sm:text-left", className),
+		...props
+	});
+}
+SheetHeader.displayName = "SheetHeader";
+function SheetFooter({ className, ...props }) {
+	return (0, react_jsx_runtime.jsx)("div", {
+		className: require_use_theme.cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
+		...props
+	});
+}
+SheetFooter.displayName = "SheetFooter";
+const SheetTitle = react.forwardRef(({ className, ...props }, ref) => (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Title, {
+	ref,
+	className: require_use_theme.cn("text-lg font-semibold text-foreground", className),
+	...props
+}));
+SheetTitle.displayName = _radix_ui_react_dialog.Title.displayName;
+const SheetDescription = react.forwardRef(({ className, ...props }, ref) => (0, react_jsx_runtime.jsx)(_radix_ui_react_dialog.Description, {
+	ref,
+	className: require_use_theme.cn("text-sm text-muted-foreground", className),
+	...props
+}));
+SheetDescription.displayName = _radix_ui_react_dialog.Description.displayName;
+//#endregion
+//#region src/ui-presentations/shell.tsx
+const OwnTitleContext = (0, react.createContext)(false);
+function focusOwnHeading(event) {
+	const container = event.currentTarget;
+	if (!(container instanceof HTMLElement)) return;
+	const heading = container.querySelector("[data-buro-overlay-heading]");
+	if (!(heading instanceof HTMLElement)) return;
+	event.preventDefault();
+	heading.focus();
+}
+function WrappedDialogContent({ wrapper, copy, children }) {
+	return wrapper ? (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)(require_dialog.DialogHeader, { children: [(0, react_jsx_runtime.jsx)(require_dialog.DialogTitle, { children: copy.title }), (0, react_jsx_runtime.jsx)(require_dialog.DialogDescription, {
+		className: copy.description === void 0 ? "sr-only" : void 0,
+		children: copy.description ?? ""
+	})] }), children] }) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		(0, react_jsx_runtime.jsx)(require_dialog.DialogTitle, {
+			className: "sr-only",
+			children: copy.title
+		}),
+		(0, react_jsx_runtime.jsx)(require_dialog.DialogDescription, {
+			className: "sr-only",
+			children: copy.description ?? ""
+		}),
+		children
+	] });
+}
+function WrappedSheetContent({ wrapper, copy, children }) {
+	return wrapper ? (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [(0, react_jsx_runtime.jsxs)(SheetHeader, { children: [(0, react_jsx_runtime.jsx)(SheetTitle, { children: copy.title }), (0, react_jsx_runtime.jsx)(SheetDescription, {
+		className: copy.description === void 0 ? "sr-only" : void 0,
+		children: copy.description ?? ""
+	})] }), children] }) : (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		(0, react_jsx_runtime.jsx)(SheetTitle, {
+			className: "sr-only",
+			children: copy.title
+		}),
+		(0, react_jsx_runtime.jsx)(SheetDescription, {
+			className: "sr-only",
+			children: copy.description ?? ""
+		}),
+		children
+	] });
+}
+function useFocusRestoration() {
+	const returnFocus = (0, react.useRef)(typeof document === "undefined" || !(document.activeElement instanceof HTMLElement) ? null : document.activeElement);
+	(0, react.useEffect)(() => () => {
+		const element = returnFocus.current;
+		queueMicrotask(() => {
+			if (element?.isConnected && element !== document.body) {
+				element.focus();
+				return;
+			}
+			const main = document.querySelector("main");
+			if (main === null) return;
+			if (!main.hasAttribute("tabindex")) main.setAttribute("tabindex", "-1");
+			main.focus();
+		});
+	}, []);
+}
+function keepForPopover(event) {
+	const target = event.target;
+	if (target instanceof Element && target.closest("[data-buro-popover]") !== null) event.preventDefault();
+}
+const REDUCED_MOTION = "motion-reduce:animate-none motion-reduce:transition-none";
+function DialogPresentationShell({ dismiss, wrapper, copy, ownTitle = false, children }) {
+	useFocusRestoration();
+	return (0, react_jsx_runtime.jsx)(require_dialog.Dialog, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) dismiss();
+		},
+		children: ownTitle ? (0, react_jsx_runtime.jsx)(require_dialog.DialogContent, {
+			className: `flex max-h-[85vh] flex-col ${REDUCED_MOTION}`,
+			overlayClassName: REDUCED_MOTION,
+			showClose: wrapper,
+			"aria-describedby": void 0,
+			"aria-modal": "true",
+			onOpenAutoFocus: focusOwnHeading,
+			onPointerDownOutside: keepForPopover,
+			children: (0, react_jsx_runtime.jsx)(OwnTitleContext.Provider, {
+				value: true,
+				children
+			})
+		}) : (0, react_jsx_runtime.jsx)(require_dialog.DialogContent, {
+			className: REDUCED_MOTION,
+			overlayClassName: REDUCED_MOTION,
+			showClose: wrapper,
+			"aria-modal": "true",
+			onPointerDownOutside: keepForPopover,
+			children: (0, react_jsx_runtime.jsx)(WrappedDialogContent, {
+				wrapper,
+				copy,
+				children
+			})
+		})
+	});
+}
+function SheetPresentationShell({ dismiss, wrapper, copy, ownTitle = false, children }) {
+	useFocusRestoration();
+	return (0, react_jsx_runtime.jsx)(Sheet, {
+		open: true,
+		onOpenChange: (open) => {
+			if (!open) dismiss();
+		},
+		children: ownTitle ? (0, react_jsx_runtime.jsx)(SheetContent, {
+			side: "right",
+			className: `flex flex-col sm:max-w-xl ${REDUCED_MOTION}`,
+			showClose: wrapper,
+			"aria-describedby": void 0,
+			"aria-modal": "true",
+			onOpenAutoFocus: focusOwnHeading,
+			onPointerDownOutside: keepForPopover,
+			children: (0, react_jsx_runtime.jsx)(OwnTitleContext.Provider, {
+				value: true,
+				children
+			})
+		}) : (0, react_jsx_runtime.jsx)(SheetContent, {
+			side: "right",
+			className: `sm:max-w-xl ${REDUCED_MOTION}`,
+			showClose: wrapper,
+			"aria-modal": "true",
+			onPointerDownOutside: keepForPopover,
+			children: (0, react_jsx_runtime.jsx)(WrappedSheetContent, {
+				wrapper,
+				copy,
+				children
+			})
+		})
+	});
+}
+//#endregion
+Object.defineProperty(exports, "DialogPresentationShell", {
+	enumerable: true,
+	get: function() {
+		return DialogPresentationShell;
+	}
+});
+Object.defineProperty(exports, "OwnTitleContext", {
+	enumerable: true,
+	get: function() {
+		return OwnTitleContext;
+	}
+});
+Object.defineProperty(exports, "Sheet", {
+	enumerable: true,
+	get: function() {
+		return Sheet;
+	}
+});
+Object.defineProperty(exports, "SheetClose", {
+	enumerable: true,
+	get: function() {
+		return SheetClose;
+	}
+});
+Object.defineProperty(exports, "SheetContent", {
+	enumerable: true,
+	get: function() {
+		return SheetContent;
+	}
+});
+Object.defineProperty(exports, "SheetDescription", {
+	enumerable: true,
+	get: function() {
+		return SheetDescription;
+	}
+});
+Object.defineProperty(exports, "SheetFooter", {
+	enumerable: true,
+	get: function() {
+		return SheetFooter;
+	}
+});
+Object.defineProperty(exports, "SheetHeader", {
+	enumerable: true,
+	get: function() {
+		return SheetHeader;
+	}
+});
+Object.defineProperty(exports, "SheetPresentationShell", {
+	enumerable: true,
+	get: function() {
+		return SheetPresentationShell;
+	}
+});
+Object.defineProperty(exports, "SheetTitle", {
+	enumerable: true,
+	get: function() {
+		return SheetTitle;
+	}
+});
+Object.defineProperty(exports, "SheetTrigger", {
+	enumerable: true,
+	get: function() {
+		return SheetTrigger;
+	}
+});
+
+//# sourceMappingURL=shell-DxhlsPwm.cjs.map

package/dist/shell-DxhlsPwm.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"shell-DxhlsPwm.cjs","names":["SheetPrimitive","React","cn","cva","useOptionalT","IconX","createContext","DialogHeader","DialogTitle","DialogDescription","useRef","Dialog","DialogContent"],"sources":["../src/primitives/sheet.tsx","../src/ui-presentations/shell.tsx"],"sourcesContent":["'use client';\nimport { useOptionalT } from '@burojs/react';\n\nimport * as React from 'react';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { IconX } from '@tabler/icons-react';\nimport { cn } from '../lib/cn.js';\n\nconst Sheet = SheetPrimitive.Root;\nconst SheetTrigger = SheetPrimitive.Trigger;\nconst SheetClose = SheetPrimitive.Close;\nconst SheetPortal = SheetPrimitive.Portal;\n\nexport type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>;\n\nconst SheetOverlay = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Overlay>,\n  SheetOverlayProps\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Overlay\n    className={cn(\n      'fixed inset-0 z-50 bg-overlay/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 duration-[var(--duration-panel)] ease-[var(--ease-overlay)]',\n      className,\n    )}\n    {...props}\n    ref={ref}\n  />\n));\nSheetOverlay.displayName = SheetPrimitive.Overlay.displayName;\n\nconst sheetVariants = cva(\n  'fixed z-50 gap-4 bg-background text-foreground p-6 shadow-lg duration-[var(--duration-panel)] ease-[var(--ease-overlay)] data-[state=open]:animate-in data-[state=closed]:animate-out',\n  {\n    variants: {\n      side: {\n        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',\n        bottom:\n          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',\n        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',\n        right:\n          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm',\n      },\n    },\n    defaultVariants: {\n      side: 'right',\n    },\n  },\n);\n\nexport interface SheetContentProps\n  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,\n    VariantProps<typeof sheetVariants> {\n  /** Whether the standard visual close button is rendered. Defaults to true. */\n  showClose?: boolean;\n}\n\nconst SheetContent = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Content>,\n  SheetContentProps\n>(({ side = 'right', className, children, showClose = true, ...props }, ref) => {\n  const t = useOptionalT();\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Content\n        ref={ref}\n        className={cn(sheetVariants({ side }), className)}\n        {...props}\n      >\n        {children}\n        {showClose && (\n          <SheetPrimitive.Close className=\"absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-secondary\">\n            <IconX className=\"h-4 w-4\" />\n            <span className=\"sr-only\">{t('actions.close', { defaultValue: 'Close' })}</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Content>\n    </SheetPortal>\n  );\n});\nSheetContent.displayName = SheetPrimitive.Content.displayName;\n\nexport type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;\n\nfunction SheetHeader({ className, ...props }: SheetHeaderProps) {\n  return (\n    <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />\n  );\n}\nSheetHeader.displayName = 'SheetHeader';\n\nexport type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;\n\nfunction SheetFooter({ className, ...props }: SheetFooterProps) {\n  return (\n    <div\n      className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}\n      {...props}\n    />\n  );\n}\nSheetFooter.displayName = 'SheetFooter';\n\nexport type SheetTitleProps = React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>;\n\nconst SheetTitle = React.forwardRef<React.ElementRef<typeof SheetPrimitive.Title>, SheetTitleProps>(\n  ({ className, ...props }, ref) => (\n    <SheetPrimitive.Title\n      ref={ref}\n      className={cn('text-lg font-semibold text-foreground', className)}\n      {...props}\n    />\n  ),\n);\nSheetTitle.displayName = SheetPrimitive.Title.displayName;\n\nexport type SheetDescriptionProps = React.ComponentPropsWithoutRef<\n  typeof SheetPrimitive.Description\n>;\n\nconst SheetDescription = React.forwardRef<\n  React.ElementRef<typeof SheetPrimitive.Description>,\n  SheetDescriptionProps\n>(({ className, ...props }, ref) => (\n  <SheetPrimitive.Description\n    ref={ref}\n    className={cn('text-sm text-muted-foreground', className)}\n    {...props}\n  />\n));\nSheetDescription.displayName = SheetPrimitive.Description.displayName;\n\nexport {\n  Sheet,\n  SheetTrigger,\n  SheetContent,\n  SheetHeader,\n  SheetFooter,\n  SheetTitle,\n  SheetDescription,\n  SheetClose,\n};\n","import { createContext, useEffect, useRef, type ReactNode } from 'react';\nimport {\n  Dialog,\n  DialogContent,\n  DialogDescription,\n  DialogHeader,\n  DialogTitle,\n} from '../primitives/dialog.js';\nimport {\n  Sheet,\n  SheetContent,\n  SheetDescription,\n  SheetHeader,\n  SheetTitle,\n} from '../primitives/sheet.js';\n\nexport interface PresentationCopy {\n  readonly title: string;\n  readonly description?: string;\n}\n\ninterface PresentationShellProps {\n  readonly dismiss: () => void;\n  readonly wrapper: boolean;\n  readonly copy: PresentationCopy;\n  /**\n   * The presented component renders the overlay's title itself, as the Radix `Title` (a quick\n   * entry's record title, plan ruling 2): the shell renders no title and no description, and\n   * focus moves to the element marked `data-buro-overlay-heading` on open.\n   */\n  readonly ownTitle?: boolean;\n  readonly children: ReactNode;\n}\n\n/**\n * @internal True inside a kit shell asked for `ownTitle`: the presented component may render the\n * Radix `Title` (an app's host, which may not be a Radix dialog at all, leaves it `false`).\n */\nexport const OwnTitleContext = createContext(false);\n\n/** On open, focus the presented component's own heading instead of the first tabbable. */\nfunction focusOwnHeading(event: Event): void {\n  const container = event.currentTarget;\n  if (!(container instanceof HTMLElement)) return;\n  const heading = container.querySelector('[data-buro-overlay-heading]');\n  if (!(heading instanceof HTMLElement)) return;\n  event.preventDefault();\n  heading.focus();\n}\n\nfunction WrappedDialogContent({\n  wrapper,\n  copy,\n  children,\n}: Pick<PresentationShellProps, 'wrapper' | 'copy' | 'children'>) {\n  return wrapper ? (\n    <>\n      <DialogHeader>\n        <DialogTitle>{copy.title}</DialogTitle>\n        <DialogDescription className={copy.description === undefined ? 'sr-only' : undefined}>\n          {copy.description ?? ''}\n        </DialogDescription>\n      </DialogHeader>\n      {children}\n    </>\n  ) : (\n    <>\n      <DialogTitle className=\"sr-only\">{copy.title}</DialogTitle>\n      <DialogDescription className=\"sr-only\">{copy.description ?? ''}</DialogDescription>\n      {children}\n    </>\n  );\n}\n\nfunction WrappedSheetContent({\n  wrapper,\n  copy,\n  children,\n}: Pick<PresentationShellProps, 'wrapper' | 'copy' | 'children'>) {\n  return wrapper ? (\n    <>\n      <SheetHeader>\n        <SheetTitle>{copy.title}</SheetTitle>\n        <SheetDescription className={copy.description === undefined ? 'sr-only' : undefined}>\n          {copy.description ?? ''}\n        </SheetDescription>\n      </SheetHeader>\n      {children}\n    </>\n  ) : (\n    <>\n      <SheetTitle className=\"sr-only\">{copy.title}</SheetTitle>\n      <SheetDescription className=\"sr-only\">{copy.description ?? ''}</SheetDescription>\n      {children}\n    </>\n  );\n}\n\nfunction useFocusRestoration(): void {\n  // Capture before Radix moves focus into the portal. The host may be removed\n  // immediately after `dismiss`, so defer restoration until Radix cleanup has\n  // completed its own focus handling.\n  const returnFocus = useRef<HTMLElement | null>(\n    typeof document === 'undefined' || !(document.activeElement instanceof HTMLElement)\n      ? null\n      : document.activeElement,\n  );\n  useEffect(\n    () => () => {\n      const element = returnFocus.current;\n      queueMicrotask(() => {\n        // The opener is gone (its row was deleted, say): the nearest surviving landmark instead\n        // (spec 4.12), never the document body.\n        if (element?.isConnected && element !== document.body) {\n          element.focus();\n          return;\n        }\n        const main = document.querySelector<HTMLElement>('main');\n        if (main === null) return;\n        if (!main.hasAttribute('tabindex')) main.setAttribute('tabindex', '-1');\n        main.focus();\n      });\n    },\n    [],\n  );\n}\n\n/**\n * A pointer down inside a popover (a peek) is not outside the overlay. The popover is a React\n * sibling of the sheet or dialog (`<UIPresentations>` renders every presentation side by side),\n * and Radix decides \"inside\" by the React tree, so without this a click on a peek's title — which\n * pushes into this sheet — would first dismiss it (or ask about its dirty form).\n */\nfunction keepForPopover(event: { readonly target: EventTarget | null; preventDefault(): void }) {\n  const target = event.target;\n  if (target instanceof Element && target.closest('[data-buro-popover]') !== null)\n    event.preventDefault();\n}\n\n/** No slide and no fade under `prefers-reduced-motion` (spec 4.12). */\nconst REDUCED_MOTION = 'motion-reduce:animate-none motion-reduce:transition-none';\n\n/** Shared Radix lifecycle shell for a centered temporary presentation. */\nexport function DialogPresentationShell({\n  dismiss,\n  wrapper,\n  copy,\n  ownTitle = false,\n  children,\n}: PresentationShellProps) {\n  useFocusRestoration();\n  return (\n    <Dialog\n      open\n      onOpenChange={(open) => {\n        if (!open) dismiss();\n      }}\n    >\n      {ownTitle ? (\n        <DialogContent\n          className={`flex max-h-[85vh] flex-col ${REDUCED_MOTION}`}\n          overlayClassName={REDUCED_MOTION}\n          showClose={wrapper}\n          aria-describedby={undefined}\n          aria-modal=\"true\"\n          onOpenAutoFocus={focusOwnHeading}\n          onPointerDownOutside={keepForPopover}\n        >\n          <OwnTitleContext.Provider value={true}>{children}</OwnTitleContext.Provider>\n        </DialogContent>\n      ) : (\n        <DialogContent\n          className={REDUCED_MOTION}\n          overlayClassName={REDUCED_MOTION}\n          showClose={wrapper}\n          aria-modal=\"true\"\n          onPointerDownOutside={keepForPopover}\n        >\n          <WrappedDialogContent wrapper={wrapper} copy={copy}>\n            {children}\n          </WrappedDialogContent>\n        </DialogContent>\n      )}\n    </Dialog>\n  );\n}\n\n/** Shared Radix lifecycle shell for a right-hand temporary presentation. */\nexport function SheetPresentationShell({\n  dismiss,\n  wrapper,\n  copy,\n  ownTitle = false,\n  children,\n}: PresentationShellProps) {\n  useFocusRestoration();\n  return (\n    <Sheet\n      open\n      onOpenChange={(open) => {\n        if (!open) dismiss();\n      }}\n    >\n      {ownTitle ? (\n        <SheetContent\n          side=\"right\"\n          className={`flex flex-col sm:max-w-xl ${REDUCED_MOTION}`}\n          showClose={wrapper}\n          aria-describedby={undefined}\n          aria-modal=\"true\"\n          onOpenAutoFocus={focusOwnHeading}\n          onPointerDownOutside={keepForPopover}\n        >\n          <OwnTitleContext.Provider value={true}>{children}</OwnTitleContext.Provider>\n        </SheetContent>\n      ) : (\n        <SheetContent\n          side=\"right\"\n          className={`sm:max-w-xl ${REDUCED_MOTION}`}\n          showClose={wrapper}\n          aria-modal=\"true\"\n          onPointerDownOutside={keepForPopover}\n        >\n          <WrappedSheetContent wrapper={wrapper} copy={copy}>\n            {children}\n          </WrappedSheetContent>\n        </SheetContent>\n      )}\n    </Sheet>\n  );\n}\n"],"mappings":"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"}

package/dist/skeleton-U2noefj5.js

@@ -0,0 +1,13 @@
+import { l as cn } from "./use-theme-dnE3Od3I.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/primitives/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return jsx("div", {
+		className: cn("animate-pulse rounded-md bg-muted", className),
+		...props
+	});
+}
+//#endregion
+export { Skeleton as t };
+
+//# sourceMappingURL=skeleton-U2noefj5.js.map

package/dist/skeleton-U2noefj5.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-U2noefj5.js","names":[],"sources":["../src/primitives/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn } from '../lib/cn.js';\n\nfunction Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;\n}\n\nexport { Skeleton };\n"],"mappings":";;;AAKA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA+C;CAC/E,OAAO,IAAC,OAAD;EAAK,WAAW,GAAG,qCAAqC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF"}

package/dist/skeleton-_1gP7wan.cjs

@@ -0,0 +1,18 @@
+const require_use_theme = require("./use-theme-DFlpXils.cjs");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/primitives/skeleton.tsx
+function Skeleton({ className, ...props }) {
+	return (0, react_jsx_runtime.jsx)("div", {
+		className: require_use_theme.cn("animate-pulse rounded-md bg-muted", className),
+		...props
+	});
+}
+//#endregion
+Object.defineProperty(exports, "Skeleton", {
+	enumerable: true,
+	get: function() {
+		return Skeleton;
+	}
+});
+
+//# sourceMappingURL=skeleton-_1gP7wan.cjs.map

package/dist/skeleton-_1gP7wan.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton-_1gP7wan.cjs","names":["cn"],"sources":["../src/primitives/skeleton.tsx"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport { cn } from '../lib/cn.js';\n\nfunction Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {\n  return <div className={cn('animate-pulse rounded-md bg-muted', className)} {...props} />;\n}\n\nexport { Skeleton };\n"],"mappings":";;;AAKA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA+C;CAC/E,QAAO,GAAA,kBAAA,IAAA,CAAC,OAAD;EAAK,WAAWA,kBAAAA,GAAG,qCAAqC,SAAS;EAAG,GAAI;CAAQ,CAAA;AACzF"}

package/dist/styles.css

@@ -89,7 +89,7 @@
    *     exactly this reason and read as two data points; it wasn't.)
    *   - red text on a 10%-red tint over --background
    *     (`bg-destructive/10 text-destructive` — badges, banners, inline
-   *     errors; see forms/declarative-form.tsx, resource/resource-form.tsx,
+   *     errors; see forms/declarative-form.tsx, record/record-screen.tsx,
    *     auth/login-form.tsx, resource/list-error-state.tsx,
    *     resource/tab-body.tsx, document-show-banner.tsx and others):
    *                                                                  4.74:1
@@ -129,7 +129,7 @@
    * `warning` would visibly change what's on screen once tasks 4-5 wire
    * these up, which is exactly the kind of silent drift this contract
    * exists to prevent. The one deliberate MERGE going the other way:
-   * `resource-form.tsx`'s yellow-500 draft-banner collapses into `warning`
+   * `record/record-screen.tsx`'s yellow-500 draft-banner collapses into `warning`
    * (amber) — Tailwind's own OKLCH hue distance from amber-500 is 16°
    * (amber↔yellow) vs 22.5° for both amber↔orange and sky↔blue, and L/C are
    * nearly identical (76.9%/0.188 vs 79.5%/0.184) — this reads as accidental
@@ -145,7 +145,7 @@
    * badge was the only context that existed when task 3 measured them. Task
    * 4 initially reused the name `-foreground` for that tinted-text value
    * too, and it broke at the one real filled-surface site that exists
-   * today: `resource-wizard.tsx`'s completed-step circle
+   * then: the old create wizard's completed-step circle
    * (`bg-success text-success-foreground`) rendered dark-green-on-green at
    * 2.19:1 — *worse* than the `text-white` it replaced. Split into two
    * names so the shape (`bg-<x> text-<x>-foreground`) means the same thing
@@ -153,11 +153,11 @@
    *   `--<severity>-foreground` — shadcn's meaning, restored: text on a
    *     SOLID `bg-<severity>` fill. Near-white, reproducing what the
    *     wizard's literal `text-white` actually rendered (`rgb(255, 255,
-   *     255)`) — the only filled-surface severity site that exists today.
+   *     255)`) — the only filled-surface severity site that existed then
+   *     (the wizard was removed in P1b+P1c; none remains).
    *     Not repeated in `.dark`: the fill itself (`--success` etc.) doesn't
    *     vary by mode either (see below), so neither does its contrasting
-   *     text. Only `--success-foreground` has a live consumer right now;
-   *     the other six carry the same value for symmetry within the family,
+   *     text. All seven carry the same value for symmetry within the family,
    *     unverified against a real filled site of their own — see task 4's
    *     fix-round report.
    *   `--<severity>-emphasis` — task 3's original measurement, renamed,
@@ -335,8 +335,8 @@
    * line-height than v3 did. Task 7's computed-style gate caught exactly
    * one instance of this (the command palette's `text-[10px]` kbd chips,
    * nested in `text-xs`, went 16px -> 13.3333px) but the mechanism is
-   * general, not particular to kbd — `resource-form.tsx`,
-   * `resource-show.tsx`, `file.tsx` and others carry `text-[10px]`/
+   * general, not particular to kbd — `record/record-screen.tsx`,
+   * `record/record-screen.tsx`, `file.tsx` and others carry `text-[10px]`/
    * `text-[11px]` on routes this gate doesn't cover, and would have drifted
    * silently. Pinning every named size actually used in this kit
    * (`grep -rE 'text-(xs|sm|base|lg|xl|2xl|3xl)\b' packages/ui-shadcn/src`,
@@ -700,7 +700,7 @@
    * inherits whatever cursor its ancestor set instead of being pinned —
    * real nestings exist (clickable rows in `resource-list.tsx`,
    * `relation-picker-dialog.tsx`, `<summary className="cursor-pointer">`
-   * in `resource-form.tsx` and `list-error-state.tsx`), and any disabled
+   * in `record/record-screen.tsx` and `list-error-state.tsx`), and any disabled
    * input without an explicit `disabled:cursor-not-allowed` loses v3's
    * behaviour too. */
   :disabled {
@@ -798,3 +798,235 @@ html {
     background: transparent;
   }
 }
+
+/*
+ * The record-screen styling contract (P1b+P1c section 9). Every rule keys off
+ * the `data-buro-*` attributes the renderer writes, never a utility class, so
+ * an application restyles a screen without a custom frame. Container queries
+ * only: a 380px sheet on a 1280px page lays out like a phone.
+ */
+@layer components {
+  :root {
+    --buro-grid-min: 16rem;
+    --buro-grid-max-columns: 3;
+    --buro-node-gap: 0.75rem;
+    --buro-node-min: 12rem;
+    --buro-size-sm: 10rem;
+    --buro-size-md: 16rem;
+    --buro-size-lg: 24rem;
+    /* The second level of rhythm: between blocks and field groups, never between two fields. */
+    --buro-section-gap: 1.5rem;
+  }
+
+  /* The header too: the fields of its `header` slot lay out by its width, as the body's do. A
+     form's and a page's body likewise, or a form would take its layout from whatever encloses it
+     (beside-labels in a panel, stacked in a dialog). */
+  [data-buro-region="record-header"],
+  [data-buro-region="form-body"],
+  [data-buro-region="page-body"],
+  [data-buro-region="record-body"],
+  [data-buro-region="panel-body"],
+  [data-buro-region="tab-panel"],
+  [data-buro-region="step-panel"],
+  [data-buro-node="grid"] {
+    container-type: inline-size;
+  }
+
+  /*
+   * In a form a panel's or a step's body is a fieldset (P6-17): the user-agent border, padding,
+   * margin and min-content inline size would let a wide grid or table overflow its panel.
+   */
+  [data-buro-region="panel-body"]:where(fieldset),
+  [data-buro-region="step-panel"]:where(fieldset) {
+    min-inline-size: 0;
+    border: 0;
+    padding: 0;
+    margin: 0;
+  }
+
+  /* An author `display` rule outranks the user-agent `[hidden]` rule. */
+  [data-buro-node][hidden],
+  [data-buro-region][hidden] {
+    /* biome-ignore lint/complexity/noImportantStyles: the spec's rule — an author display on a node must not outrank [hidden] */
+    display: none !important;
+  }
+
+  /* A pending node keeps its box; only its skeleton shows. */
+  [data-buro-state="pending"] {
+    visibility: hidden;
+  }
+  [data-buro-state="pending"] [data-buro-skeleton] {
+    visibility: visible;
+  }
+
+  [data-buro-node="stack"],
+  [data-buro-region="panel-body"],
+  [data-buro-region="tab-panel"],
+  [data-buro-region="step-panel"] {
+    display: flex;
+    flex-direction: column;
+    gap: var(--buro-node-gap);
+  }
+
+  /*
+   * A section container's children are field groups (`data-buro-group="fields"`, drawn by the
+   * renderer around each run of consecutive fields) and blocks, so a block stands apart from the
+   * fields around it while two fields stay at `--buro-node-gap`. Authored stacks, rows and grids
+   * keep `--buro-node-gap`.
+   */
+  [data-buro-node="stack"][data-buro-slot],
+  [data-buro-region="record-body"] > [data-buro-node="stack"],
+  [data-buro-region="form-body"] > [data-buro-node="stack"],
+  [data-buro-region="page-body"] > [data-buro-node="stack"],
+  [data-buro-region="panel-body"],
+  [data-buro-region="tab-panel"],
+  [data-buro-region="step-panel"] {
+    gap: var(--buro-section-gap);
+  }
+
+  /* The record header is set off from the body by a rule... */
+  [data-buro-region="record-header"] {
+    padding-block-end: 1rem;
+    border-block-end: 1px solid var(--border);
+  }
+  /* ...unless the body opens with tabs: the tab strip already separates, a second line would not. */
+  [data-buro-region="record-header"]:has(
+    ~ [data-buro-region="record-body"]
+      > [data-buro-node="stack"]
+      > [data-buro-node="tabs"]:first-child,
+    ~ *
+      [data-buro-region="record-body"]
+      > [data-buro-node="stack"]
+      > [data-buro-node="tabs"]:first-child
+  ) {
+    padding-block-end: 0;
+    border-block-end: 0;
+  }
+
+  [data-buro-node="grid"] {
+    display: grid;
+    gap: var(--buro-node-gap);
+    grid-template-columns: repeat(
+        auto-fill,
+        minmax(
+          max(
+            min(var(--buro-grid-min), 100%),
+            calc(100% / var(--buro-grid-max-columns) - var(--buro-node-gap))
+          ),
+          1fr
+        )
+      );
+  }
+  [data-buro-node="grid"] > [data-buro-size="full"] {
+    grid-column: 1 / -1;
+  }
+  @container (min-width: 29rem) {
+    [data-buro-node="grid"] > [data-buro-size="lg"] {
+      grid-column: span 2;
+    }
+  }
+
+  [data-buro-node="row"] {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--buro-node-gap);
+  }
+  [data-buro-node="row"] > [data-buro-node] {
+    flex: 1 1 var(--buro-size-md);
+    min-width: min(var(--buro-node-min), 100%);
+  }
+  [data-buro-node="row"] > [data-buro-size="sm"] {
+    flex-basis: var(--buro-size-sm);
+    min-width: min(var(--buro-size-sm), 100%);
+  }
+  [data-buro-node="row"] > [data-buro-size="lg"] {
+    flex-basis: var(--buro-size-lg);
+    min-width: min(var(--buro-size-lg), 100%);
+  }
+  [data-buro-node="row"] > [data-buro-size="full"] {
+    flex-basis: 100%;
+  }
+  [data-buro-node="row"] > [data-buro-weight="2"] {
+    flex-grow: 2;
+  }
+  [data-buro-node="row"] > [data-buro-weight="3"] {
+    flex-grow: 3;
+  }
+  [data-buro-node="row"] > [data-buro-weight="4"] {
+    flex-grow: 4;
+  }
+
+  /* `buro:facts` in its grid view: as many tiles a row as fit at `--buro-size-sm` each. */
+  [data-buro-facts="grid"] {
+    display: grid;
+    gap: var(--buro-node-gap);
+    grid-template-columns: repeat(auto-fill, minmax(min(var(--buro-size-sm), 100%), 1fr));
+  }
+
+  [data-buro-node="panel"] {
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    border: 1px solid var(--border);
+    border-radius: var(--radius);
+    padding: 1rem;
+  }
+  [data-buro-region="panel-title"] {
+    display: flex;
+    align-items: center;
+    gap: 0.25rem;
+  }
+  [data-buro-node="panel"][data-buro-tone="info"] {
+    border-color: var(--info, var(--border));
+  }
+  [data-buro-node="panel"][data-buro-tone="success"] {
+    border-color: var(--success, var(--border));
+  }
+  [data-buro-node="panel"][data-buro-tone="warning"] {
+    border-color: var(--warning, var(--border));
+  }
+  [data-buro-node="panel"][data-buro-tone="destructive"] {
+    border-color: var(--destructive);
+  }
+  /* A panel inside steps or tabs is a section of its parent, not a card of its own. */
+  [data-buro-node="steps"] > [data-buro-node="panel"] {
+    border-width: 0 0 1px;
+    border-radius: 0;
+    padding: 0 0 1rem;
+  }
+
+  /*
+   * One field geometry in show, in a grid and in a form (visual-quality spec, finding 2): a leaf
+   * is its label, its control, then any message line (`field-message`). Narrow, the label sits
+   * above the value; from 36rem a single-column leaf puts it in a label column no wider than
+   * `--buro-size-sm`, and messages stay under the control.
+   */
+  [data-buro-node="field"] {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr);
+    gap: 0.375rem 1rem;
+    align-items: baseline;
+  }
+  @container (min-width: 36rem) {
+    [data-buro-node="field"]:not([data-buro-size="full"]) {
+      /* The label column is never narrower than its content: a one-word label and its 24px
+         help button did not fit in a narrow label column, and the button covered the label's
+         last letters (REF-41). A longer label still wraps at its spaces. */
+      grid-template-columns: minmax(min-content, var(--buro-size-sm)) minmax(0, 1fr);
+    }
+    [data-buro-node="field"]:not([data-buro-size="full"]) > :nth-child(n + 3) {
+      grid-column: 2;
+    }
+  }
+  /* In a grid cell or a row the label is always above the value: the cell is the column. */
+  /* (Outranks the container rules above by one attribute: the `:is()` parent.) */
+  :is([data-buro-node="grid"], [data-buro-node="row"])
+  > [data-buro-node="field"]:not([data-buro-size="full"]) {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  :is([data-buro-node="grid"], [data-buro-node="row"])
+    > [data-buro-node="field"]:not([data-buro-size="full"])
+    > :nth-child(n + 3) {
+    grid-column: auto;
+  }
+}