@classic-homes/theme-react 0.1.52 → 0.1.53

package/dist/index.mjs

@@ -39,9 +39,9 @@ var buttonVariants = cva(
   }
 );
 var Button = React.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+  ({ className, variant, size, asChild = false, children, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props });
+    return /* @__PURE__ */ jsx(Comp, { className: cn(buttonVariants({ variant, size, className })), ref, ...props, children });
   }
 );
 Button.displayName = "Button";
@@ -50,8 +50,8 @@ Button.displayName = "Button";
 import * as React2 from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var Card = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-    "div",
+  ({ className, as: Component = "div", ...props }, ref) => /* @__PURE__ */ jsx2(
+    Component,
     {
       ref,
       className: cn(
@@ -68,8 +68,8 @@ var CardHeader = React2.forwardRef(
 );
 CardHeader.displayName = "CardHeader";
 var CardTitle = React2.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx2(
-    "h3",
+  ({ className, as: Component = "h3", ...props }, ref) => /* @__PURE__ */ jsx2(
+    Component,
     {
       ref,
       className: cn("text-2xl font-semibold leading-none tracking-tight", className),
@@ -93,13 +93,32 @@ CardFooter.displayName = "CardFooter";
 import * as React3 from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var Input = React3.forwardRef(
-  ({ className, type, ...props }, ref) => {
+  ({
+    className,
+    type,
+    "aria-invalid": ariaInvalid,
+    required,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!props["aria-label"] && !props["aria-labelledby"] && !props.id) {
+        console.warn(
+          "Input: Missing accessible label. Provide aria-label, aria-labelledby, or associate with a Label using id/htmlFor for WCAG compliance."
+        );
+      }
+    }
     return /* @__PURE__ */ jsx3(
       "input",
       {
         type,
+        "aria-invalid": ariaInvalid,
+        "aria-required": required,
+        "aria-describedby": ariaDescribedBy,
+        required,
         className: cn(
           "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          ariaInvalid === true || ariaInvalid === "true" ? "border-destructive focus-visible:ring-destructive" : "",
           className
         ),
         ref,
@@ -111,7 +130,57 @@ var Input = React3.forwardRef(
 Input.displayName = "Input";
 
 // src/components/PasswordInput.tsx
+import * as React5 from "react";
+
+// src/hooks/useAnnounce.ts
 import * as React4 from "react";
+function useAnnounce(defaultOptions) {
+  const [message, setMessage] = React4.useState("");
+  const [politeness, setPoliteness] = React4.useState(
+    defaultOptions?.politeness ?? "polite"
+  );
+  const clearTimeoutRef = React4.useRef(null);
+  const clear = React4.useCallback(() => {
+    setMessage("");
+    if (clearTimeoutRef.current) {
+      clearTimeout(clearTimeoutRef.current);
+      clearTimeoutRef.current = null;
+    }
+  }, []);
+  const announce = React4.useCallback(
+    (newMessage, options) => {
+      if (clearTimeoutRef.current) {
+        clearTimeout(clearTimeoutRef.current);
+      }
+      if (options?.politeness) {
+        setPoliteness(options.politeness);
+      }
+      setMessage(newMessage);
+      const delay = options?.clearDelay ?? defaultOptions?.clearDelay ?? 1e3;
+      if (delay > 0) {
+        clearTimeoutRef.current = setTimeout(() => {
+          setMessage("");
+        }, delay);
+      }
+    },
+    [defaultOptions?.clearDelay]
+  );
+  React4.useEffect(() => {
+    return () => {
+      if (clearTimeoutRef.current) {
+        clearTimeout(clearTimeoutRef.current);
+      }
+    };
+  }, []);
+  return {
+    announce,
+    message,
+    politeness,
+    clear
+  };
+}
+
+// src/components/PasswordInput.tsx
 import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var EyeIcon = () => /* @__PURE__ */ jsxs(
   "svg",
@@ -124,6 +193,8 @@ var EyeIcon = () => /* @__PURE__ */ jsxs(
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
     children: [
       /* @__PURE__ */ jsx4("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
       /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "3" })
@@ -141,20 +212,48 @@ var EyeOffIcon = () => /* @__PURE__ */ jsx4(
     strokeWidth: 2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
     children: /* @__PURE__ */ jsx4("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24M1 1l22 22" })
   }
 );
-var PasswordInput = React4.forwardRef(
-  ({ className, disabled, showLabel = "Show password", hideLabel = "Hide password", ...props }, ref) => {
-    const [showPassword, setShowPassword] = React4.useState(false);
+var PasswordInput = React5.forwardRef(
+  ({
+    className,
+    disabled,
+    showLabel = "Show password",
+    hideLabel = "Hide password",
+    visibleAnnouncement = "Password is now visible",
+    hiddenAnnouncement = "Password is now hidden",
+    id,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ...props
+  }, ref) => {
+    const [showPassword, setShowPassword] = React5.useState(false);
+    const { announce, message, politeness } = useAnnounce();
+    if (process.env.NODE_ENV !== "production") {
+      if (!ariaLabel && !ariaLabelledBy && !id) {
+        console.warn(
+          "PasswordInput: Missing accessible label. Provide aria-label, aria-labelledby, or an id to associate with a Label element for WCAG compliance."
+        );
+      }
+    }
     const toggleVisibility = () => {
-      setShowPassword((prev) => !prev);
+      setShowPassword((prev) => {
+        const newState = !prev;
+        announce(newState ? visibleAnnouncement : hiddenAnnouncement);
+        return newState;
+      });
     };
     return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
       /* @__PURE__ */ jsx4(
         "input",
         {
           type: showPassword ? "text" : "password",
+          id,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledBy,
           className: cn(
             "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 pr-10 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
             className
@@ -168,35 +267,37 @@ var PasswordInput = React4.forwardRef(
         "button",
         {
           type: "button",
-          className: "absolute right-0 top-0 h-10 w-10 flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-r-md disabled:pointer-events-none disabled:opacity-50",
+          className: "absolute right-0 top-0 h-11 w-11 -mr-0.5 -mt-0.5 flex items-center justify-center text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background rounded-r-md disabled:pointer-events-none disabled:opacity-50",
           onClick: toggleVisibility,
           disabled,
           "aria-label": showPassword ? hideLabel : showLabel,
+          "aria-pressed": showPassword,
           children: showPassword ? /* @__PURE__ */ jsx4(EyeOffIcon, {}) : /* @__PURE__ */ jsx4(EyeIcon, {})
         }
-      )
+      ),
+      /* @__PURE__ */ jsx4("div", { role: "status", "aria-live": politeness, "aria-atomic": "true", className: "sr-only", children: message })
     ] });
   }
 );
 PasswordInput.displayName = "PasswordInput";
 
 // src/components/Label.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import * as LabelPrimitive from "@radix-ui/react-label";
 import { cva as cva2 } from "class-variance-authority";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var labelVariants = cva2(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 );
-var Label = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx5(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
 Label.displayName = LabelPrimitive.Root.displayName;
 
 // src/components/Badge.tsx
-import * as React6 from "react";
+import * as React7 from "react";
 import { cva as cva3 } from "class-variance-authority";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
 var badgeVariants = cva3(
-  "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border border-border px-2.5 py-0.5 text-xs font-semibold transition-colors",
   {
     variants: {
       variant: {
@@ -211,15 +312,28 @@ var badgeVariants = cva3(
     }
   }
 );
-var Badge = React6.forwardRef(
-  ({ className, variant, ...props }, ref) => {
-    return /* @__PURE__ */ jsx6(
+var Badge = React7.forwardRef(
+  ({ className, variant, live, label, children, ...props }, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (live && !label) {
+        console.warn(
+          'Badge: When using live={true} for dynamic content, consider providing a label prop for better screen reader context (e.g., label="unread notifications" for a count badge).'
+        );
+      }
+    }
+    return /* @__PURE__ */ jsxs2(
       "div",
       {
         ref,
-        role: "status",
+        role: live ? "status" : void 0,
+        "aria-live": live ? "polite" : void 0,
+        "aria-atomic": live ? "true" : void 0,
         className: cn(badgeVariants({ variant }), className),
-        ...props
+        ...props,
+        children: [
+          children,
+          label && /* @__PURE__ */ jsx6("span", { className: "sr-only", children: label })
+        ]
       }
     );
   }
@@ -227,81 +341,123 @@ var Badge = React6.forwardRef(
 Badge.displayName = "Badge";
 
 // src/components/Separator.tsx
-import * as React7 from "react";
+import * as React8 from "react";
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
 import { jsx as jsx7 } from "react/jsx-runtime";
-var Separator = React7.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx7(
-  SeparatorPrimitive.Root,
-  {
-    ref,
-    decorative,
-    orientation,
-    className: cn(
-      "shrink-0 bg-border",
-      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
-      className
-    ),
-    ...props
+var Separator = React8.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => {
+  if (process.env.NODE_ENV !== "production") {
+    if (!decorative && !props["aria-label"]) {
+      console.warn(
+        "Separator: Non-decorative separators (decorative={false}) should have an aria-label to describe the content they separate."
+      );
+    }
   }
-));
+  return /* @__PURE__ */ jsx7(
+    SeparatorPrimitive.Root,
+    {
+      ref,
+      decorative,
+      orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  );
+});
 Separator.displayName = SeparatorPrimitive.Root.displayName;
 
 // src/components/Switch.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import * as SwitchPrimitives from "@radix-ui/react-switch";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var SwitchRoot = SwitchPrimitives.Root;
 var SwitchThumb = SwitchPrimitives.Thumb;
-var Switch = React8.forwardRef(
-  ({ className, size = "default", ...props }, ref) => /* @__PURE__ */ jsx8(
-    SwitchRoot,
-    {
-      className: cn(
-        "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
-        size === "default" && "h-7 w-12",
-        size === "sm" && "h-5 w-9",
-        className
-      ),
-      ref,
-      ...props,
-      children: /* @__PURE__ */ jsx8(
-        SwitchThumb,
-        {
-          className: cn(
-            "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
-            size === "default" && "h-5 w-5 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5",
-            size === "sm" && "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-          )
-        }
-      )
+var Switch = React9.forwardRef(
+  ({
+    className,
+    size = "default",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    ...props
+  }, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!ariaLabel && !ariaLabelledBy && !props.id) {
+        console.warn(
+          "Switch: Missing accessible label. Provide aria-label, aria-labelledby, or associate with a Label using id/htmlFor for WCAG compliance."
+        );
+      }
     }
-  )
+    return /* @__PURE__ */ jsx8(
+      SwitchRoot,
+      {
+        className: cn(
+          "peer inline-flex shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+          size === "default" && "h-7 w-12",
+          size === "sm" && "h-5 w-9",
+          className
+        ),
+        ref,
+        "aria-label": ariaLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        ...props,
+        children: /* @__PURE__ */ jsx8(
+          SwitchThumb,
+          {
+            className: cn(
+              "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+              size === "default" && "h-5 w-5 data-[state=checked]:translate-x-[22px] data-[state=unchecked]:translate-x-0.5",
+              size === "sm" && "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+            )
+          }
+        )
+      }
+    );
+  }
 );
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
 // src/components/Avatar.tsx
-import * as React9 from "react";
+import * as React10 from "react";
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { jsx as jsx9 } from "react/jsx-runtime";
-var Avatar = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
-  AvatarPrimitive.Root,
-  {
-    ref,
-    className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
-    ...props
+var Avatar = React10.forwardRef(
+  ({ className, name, "aria-label": ariaLabel, ...props }, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (!ariaLabel && !name) {
+        console.warn(
+          'Avatar: Missing accessible text. Provide either a "name" prop or "aria-label" for screen reader users.'
+        );
+      }
+    }
+    const computedAriaLabel = ariaLabel ?? (name ? `Avatar for ${name}` : void 0);
+    return /* @__PURE__ */ jsx9(
+      AvatarPrimitive.Root,
+      {
+        ref,
+        "aria-label": computedAriaLabel,
+        className: cn("relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full", className),
+        ...props
+      }
+    );
   }
-));
+);
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var AvatarImage = React10.forwardRef(({ className, alt, ...props }, ref) => /* @__PURE__ */ jsx9(
   AvatarPrimitive.Image,
   {
     ref,
+    alt,
     className: cn("aspect-square h-full w-full object-cover", className),
     ...props
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var AvatarFallback = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -315,9 +471,9 @@ var AvatarFallback = React9.forwardRef(({ className, ...props }, ref) => /* @__P
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/components/Dialog.tsx
-import * as React10 from "react";
+import * as React11 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs3 } from "react/jsx-runtime";
 var PrimitiveOverlay = DialogPrimitive.Overlay;
 var PrimitiveContent = DialogPrimitive.Content;
 var PrimitiveTitle = DialogPrimitive.Title;
@@ -326,7 +482,7 @@ var Dialog = DialogPrimitive.Root;
 var DialogTrigger = DialogPrimitive.Trigger;
 var DialogPortal = DialogPrimitive.Portal;
 var DialogClose = DialogPrimitive.Close;
-var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var DialogOverlay = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   PrimitiveOverlay,
   {
     ref,
@@ -338,7 +494,7 @@ var DialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
-var DialogContent = React10.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs2(DialogPortal, { children: [
+var DialogContent = React11.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs3(DialogPortal, { children: [
   /* @__PURE__ */ jsx10(DialogOverlay, {}),
   /* @__PURE__ */ jsx10(
     PrimitiveContent,
@@ -364,7 +520,7 @@ var DialogFooter = ({ className, ...props }) => /* @__PURE__ */ jsx10(
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var DialogTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   PrimitiveTitle,
   {
     ref,
@@ -373,7 +529,7 @@ var DialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
+var DialogDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx10(
   PrimitiveDescription,
   {
     ref,
@@ -384,9 +540,9 @@ var DialogDescription = React10.forwardRef(({ className, ...props }, ref) => /*
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
 // src/components/PageHeader.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { cva as cva4 } from "class-variance-authority";
-import { jsx as jsx11, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 var pageHeaderContainerVariants = cva4("", {
   variants: {
     variant: {
@@ -435,25 +591,34 @@ var pageHeaderActionsVariants = cva4("flex gap-4", {
     variant: "default"
   }
 });
-var PageHeader = React11.forwardRef(
-  ({ className, variant, title, subtitle, actions, ...props }, ref) => /* @__PURE__ */ jsxs3(
-    "header",
-    {
-      ref,
-      className: cn(pageHeaderContainerVariants({ variant }), className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx11("h1", { className: pageHeaderTitleVariants({ variant }), children: title }),
-        subtitle && /* @__PURE__ */ jsx11("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
-        actions && /* @__PURE__ */ jsx11("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
-      ]
+var PageHeader = React12.forwardRef(
+  ({ className, variant, title, subtitle, actions, as: Heading = "h1", ...props }, ref) => {
+    if (process.env.NODE_ENV !== "production") {
+      if (Heading === "h1") {
+        console.warn(
+          'PageHeader: Using as="h1" (the default). Ensure there is only one h1 per page for proper document structure. Consider as="h2" for secondary headers.'
+        );
+      }
     }
-  )
+    return /* @__PURE__ */ jsxs4(
+      "header",
+      {
+        ref,
+        className: cn(pageHeaderContainerVariants({ variant }), className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx11(Heading, { className: pageHeaderTitleVariants({ variant }), children: title }),
+          subtitle && /* @__PURE__ */ jsx11("p", { className: pageHeaderSubtitleVariants({ variant }), children: subtitle }),
+          actions && /* @__PURE__ */ jsx11("div", { className: pageHeaderActionsVariants({ variant }), children: actions })
+        ]
+      }
+    );
+  }
 );
 PageHeader.displayName = "PageHeader";
 
 // src/components/DataPanel.tsx
-import * as React12 from "react";
+import * as React13 from "react";
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
 import {
   DEFAULT_PANEL_STATE,
@@ -479,7 +644,7 @@ import {
   calculateDetachedPositionFromPinned,
   getPinnedPullTransform
 } from "@classic-homes/data-panel-core";
-import { Fragment, jsx as jsx12, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, jsxs as jsxs5 } from "react/jsx-runtime";
 var DropdownTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownContent = DropdownMenuPrimitive.Content;
 var DropdownLabel = DropdownMenuPrimitive.Label;
@@ -494,28 +659,28 @@ function useDataPanel(options = {}) {
     constraints = {}
   } = options;
   const resolvedConstraints = { ...DEFAULT_CONSTRAINTS, ...constraints };
-  const [persistedState] = React12.useState(() => {
+  const [persistedState] = React13.useState(() => {
     if (persistKey && typeof window !== "undefined") {
       return loadPanelState(persistKey);
     }
     return null;
   });
-  const [mode, setMode] = React12.useState(persistedState?.mode ?? initialMode);
-  const [edge, setEdge] = React12.useState(persistedState?.edge ?? initialEdge);
-  const [isExpanded, setIsExpanded] = React12.useState(
+  const [mode, setMode] = React13.useState(persistedState?.mode ?? initialMode);
+  const [edge, setEdge] = React13.useState(persistedState?.edge ?? initialEdge);
+  const [isExpanded, setIsExpanded] = React13.useState(
     persistedState?.isExpanded ?? initialExpanded
   );
-  const [detachedPosition, setDetachedPosition] = React12.useState(
+  const [detachedPosition, setDetachedPosition] = React13.useState(
     persistedState?.detachedPosition ?? DEFAULT_PANEL_STATE.detachedPosition
   );
-  const [detachedSize, setDetachedSize] = React12.useState(
+  const [detachedSize, setDetachedSize] = React13.useState(
     persistedState?.detachedSize ?? DEFAULT_PANEL_STATE.detachedSize
   );
-  const [pinnedSize, setPinnedSize] = React12.useState(
+  const [pinnedSize, setPinnedSize] = React13.useState(
     persistedState?.pinnedSize ?? DEFAULT_PANEL_STATE.pinnedSize
   );
-  const saveTimeoutRef = React12.useRef(null);
-  const debouncedSave = React12.useCallback(() => {
+  const saveTimeoutRef = React13.useRef(null);
+  const debouncedSave = React13.useCallback(() => {
     if (!persistKey) return;
     if (saveTimeoutRef.current) {
       clearTimeout(saveTimeoutRef.current);
@@ -533,7 +698,7 @@ function useDataPanel(options = {}) {
       });
     }, 300);
   }, [persistKey, mode, edge, isExpanded, detachedPosition, detachedSize, pinnedSize]);
-  const handleSetMode = React12.useCallback(
+  const handleSetMode = React13.useCallback(
     (newMode) => {
       setMode(newMode);
       if (newMode === "detached" && typeof window !== "undefined" && detachedPosition.x === DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === DEFAULT_PANEL_STATE.detachedPosition.y) {
@@ -544,7 +709,7 @@ function useDataPanel(options = {}) {
     },
     [detachedPosition, detachedSize]
   );
-  const handleSetDetachedPosition = React12.useCallback(
+  const handleSetDetachedPosition = React13.useCallback(
     (position) => {
       if (typeof window === "undefined") {
         setDetachedPosition(position);
@@ -556,13 +721,13 @@ function useDataPanel(options = {}) {
     },
     [detachedSize]
   );
-  const handleSetDetachedSize = React12.useCallback(
+  const handleSetDetachedSize = React13.useCallback(
     (size) => {
       setDetachedSize(constrainSize(size, resolvedConstraints));
     },
     [resolvedConstraints]
   );
-  const handleSetPinnedSize = React12.useCallback(
+  const handleSetPinnedSize = React13.useCallback(
     (size) => {
       if (typeof window === "undefined") {
         setPinnedSize(size);
@@ -576,7 +741,7 @@ function useDataPanel(options = {}) {
     },
     [edge, resolvedConstraints]
   );
-  React12.useEffect(() => {
+  React13.useEffect(() => {
     debouncedSave();
   }, [debouncedSave]);
   return {
@@ -609,7 +774,7 @@ var ChevronUpIcon = () => /* @__PURE__ */ jsx12(
     children: /* @__PURE__ */ jsx12("path", { d: "m18 15-6-6-6 6" })
   }
 );
-var MoreVerticalIcon = () => /* @__PURE__ */ jsxs4(
+var MoreVerticalIcon = () => /* @__PURE__ */ jsxs5(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -628,7 +793,7 @@ var MoreVerticalIcon = () => /* @__PURE__ */ jsxs4(
     ]
   }
 );
-var CloseIcon = () => /* @__PURE__ */ jsxs4(
+var CloseIcon = () => /* @__PURE__ */ jsxs5(
   "svg",
   {
     xmlns: "http://www.w3.org/2000/svg",
@@ -652,10 +817,11 @@ var edgeLabels = {
   top: "Pin to top",
   bottom: "Pin to bottom"
 };
-var DataPanelHeader = React12.forwardRef(
+var DataPanelHeader = React13.forwardRef(
   ({
     title,
     subtitle,
+    titleId,
     mode,
     edge,
     isExpanded,
@@ -670,7 +836,7 @@ var DataPanelHeader = React12.forwardRef(
     className,
     draggable = false
   }, ref) => {
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "div",
       {
         ref,
@@ -681,11 +847,11 @@ var DataPanelHeader = React12.forwardRef(
         ),
         "data-panel-header": true,
         children: [
-          /* @__PURE__ */ jsx12("div", { className: "flex flex-col min-w-0 flex-1", children: headerContent ? headerContent : /* @__PURE__ */ jsxs4(Fragment, { children: [
-            title && /* @__PURE__ */ jsx12("h3", { className: "text-sm font-semibold leading-none truncate", children: title }),
+          /* @__PURE__ */ jsx12("div", { className: "flex flex-col min-w-0 flex-1", children: headerContent ? headerContent : /* @__PURE__ */ jsxs5(Fragment, { children: [
+            title && /* @__PURE__ */ jsx12("h3", { id: titleId, className: "text-sm font-semibold leading-none truncate", children: title }),
             subtitle && /* @__PURE__ */ jsx12("p", { className: "text-xs text-muted-foreground mt-1 truncate", children: subtitle })
           ] }) }),
-          /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-1 shrink-0", children: [
+          /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 shrink-0", children: [
             headerActions,
             /* @__PURE__ */ jsx12(
               "button",
@@ -698,7 +864,7 @@ var DataPanelHeader = React12.forwardRef(
                 children: /* @__PURE__ */ jsx12("span", { className: cn("transition-transform", !isExpanded && "rotate-180"), children: /* @__PURE__ */ jsx12(ChevronUpIcon, {}) })
               }
             ),
-            !disableModeSwitch && /* @__PURE__ */ jsxs4(DropdownMenuPrimitive.Root, { children: [
+            !disableModeSwitch && /* @__PURE__ */ jsxs5(DropdownMenuPrimitive.Root, { children: [
               /* @__PURE__ */ jsx12(DropdownTrigger, { asChild: true, children: /* @__PURE__ */ jsx12(
                 "button",
                 {
@@ -708,7 +874,7 @@ var DataPanelHeader = React12.forwardRef(
                   children: /* @__PURE__ */ jsx12(MoreVerticalIcon, {})
                 }
               ) }),
-              /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs4(
+              /* @__PURE__ */ jsx12(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsxs5(
                 DropdownContent,
                 {
                   className: "z-50 min-w-[8rem] overflow-hidden rounded-md border border-border bg-popover p-1 text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95",
@@ -716,7 +882,7 @@ var DataPanelHeader = React12.forwardRef(
                   align: "end",
                   children: [
                     /* @__PURE__ */ jsx12(DropdownLabel, { className: "px-2 py-1.5 text-sm font-semibold", children: "Panel Position" }),
-                    ["left", "right", "top", "bottom"].map((e) => /* @__PURE__ */ jsxs4(
+                    ["left", "right", "top", "bottom"].map((e) => /* @__PURE__ */ jsxs5(
                       DropdownItem,
                       {
                         className: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
@@ -732,7 +898,7 @@ var DataPanelHeader = React12.forwardRef(
                       e
                     )),
                     /* @__PURE__ */ jsx12(DropdownSeparator, { className: "-mx-1 my-1 h-px bg-muted" }),
-                    /* @__PURE__ */ jsxs4(
+                    /* @__PURE__ */ jsxs5(
                       DropdownItem,
                       {
                         className: "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground",
@@ -764,13 +930,22 @@ var DataPanelHeader = React12.forwardRef(
   }
 );
 DataPanelHeader.displayName = "DataPanelHeader";
-var DataPanelContent = React12.forwardRef(
-  ({ children, className }, ref) => {
-    return /* @__PURE__ */ jsx12("div", { ref, className: cn("flex-1 overflow-auto p-4", className), children });
+var DataPanelContent = React13.forwardRef(
+  ({ children, className, "aria-label": ariaLabel = "Panel content" }, ref) => {
+    return /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref,
+        role: "region",
+        "aria-label": ariaLabel,
+        className: cn("flex-1 overflow-auto p-4", className),
+        children
+      }
+    );
   }
 );
 DataPanelContent.displayName = "DataPanelContent";
-var DataPanelFooter = React12.forwardRef(
+var DataPanelFooter = React13.forwardRef(
   ({ actions = [], footerContent, footerActions, className }, ref) => {
     if (!footerContent && actions.length === 0 && !footerActions) {
       return null;
@@ -787,7 +962,7 @@ var DataPanelFooter = React12.forwardRef(
           "flex items-center justify-end gap-2 border-t border-border bg-muted/30 px-4 py-3",
           className
         ),
-        children: footerContent ? footerContent : /* @__PURE__ */ jsxs4(Fragment, { children: [
+        children: footerContent ? footerContent : /* @__PURE__ */ jsxs5(Fragment, { children: [
           footerActions,
           actions.map((action, index) => /* @__PURE__ */ jsx12(
             Button,
@@ -806,7 +981,7 @@ var DataPanelFooter = React12.forwardRef(
   }
 );
 DataPanelFooter.displayName = "DataPanelFooter";
-var DataPanelTab = React12.forwardRef(
+var DataPanelTab = React13.forwardRef(
   ({ title = "Panel", edge, onClick, className }, ref) => {
     const positionClasses = {
       left: "left-0 top-1/2 -translate-y-1/2 rounded-r-md border-l-0",
@@ -821,7 +996,7 @@ var DataPanelTab = React12.forwardRef(
       top: "rotate-180",
       bottom: ""
     }[edge];
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs5(
       "button",
       {
         ref,
@@ -843,7 +1018,186 @@ var DataPanelTab = React12.forwardRef(
   }
 );
 DataPanelTab.displayName = "DataPanelTab";
-var DataPanel = React12.forwardRef(
+var KEYBOARD_RESIZE_STEP = 10;
+var KEYBOARD_RESIZE_STEP_LARGE = 50;
+function ResizeHandles({
+  mode,
+  edge,
+  detachedSize,
+  pinnedSize,
+  onResizeStart,
+  onSizeChange,
+  onPinnedSizeChange,
+  constraints
+}) {
+  const handleDetachedKeyDown = React13.useCallback(
+    (e, handle) => {
+      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;
+      let newSize = { ...detachedSize };
+      let handled = false;
+      switch (e.key) {
+        case "ArrowUp":
+          if (handle.includes("top")) {
+            newSize.height = Math.max(constraints.minHeight || 200, detachedSize.height + step);
+            handled = true;
+          } else if (handle.includes("bottom")) {
+            newSize.height = Math.max(constraints.minHeight || 200, detachedSize.height - step);
+            handled = true;
+          }
+          break;
+        case "ArrowDown":
+          if (handle.includes("top")) {
+            newSize.height = Math.max(constraints.minHeight || 200, detachedSize.height - step);
+            handled = true;
+          } else if (handle.includes("bottom")) {
+            newSize.height = Math.min(constraints.maxHeight || 800, detachedSize.height + step);
+            handled = true;
+          }
+          break;
+        case "ArrowLeft":
+          if (handle.includes("left")) {
+            newSize.width = Math.max(constraints.minWidth || 280, detachedSize.width + step);
+            handled = true;
+          } else if (handle.includes("right")) {
+            newSize.width = Math.max(constraints.minWidth || 280, detachedSize.width - step);
+            handled = true;
+          }
+          break;
+        case "ArrowRight":
+          if (handle.includes("left")) {
+            newSize.width = Math.max(constraints.minWidth || 280, detachedSize.width - step);
+            handled = true;
+          } else if (handle.includes("right")) {
+            newSize.width = Math.min(constraints.maxWidth || 600, detachedSize.width + step);
+            handled = true;
+          }
+          break;
+      }
+      if (handled) {
+        e.preventDefault();
+        onSizeChange(newSize);
+      }
+    },
+    [detachedSize, constraints, onSizeChange]
+  );
+  const handlePinnedKeyDown = React13.useCallback(
+    (e) => {
+      const step = e.shiftKey ? KEYBOARD_RESIZE_STEP_LARGE : KEYBOARD_RESIZE_STEP;
+      let newSize = pinnedSize;
+      let handled = false;
+      const isHorizontal2 = edge === "left" || edge === "right";
+      if (isHorizontal2) {
+        if (e.key === "ArrowLeft" && edge === "right" || e.key === "ArrowRight" && edge === "left") {
+          newSize = Math.min(constraints.maxWidth || 600, pinnedSize + step);
+          handled = true;
+        } else if (e.key === "ArrowRight" && edge === "right" || e.key === "ArrowLeft" && edge === "left") {
+          newSize = Math.max(constraints.minWidth || 280, pinnedSize - step);
+          handled = true;
+        }
+      } else {
+        if (e.key === "ArrowUp" && edge === "bottom" || e.key === "ArrowDown" && edge === "top") {
+          newSize = Math.min(constraints.maxHeight || 800, pinnedSize + step);
+          handled = true;
+        } else if (e.key === "ArrowDown" && edge === "bottom" || e.key === "ArrowUp" && edge === "top") {
+          newSize = Math.max(constraints.minHeight || 200, pinnedSize - step);
+          handled = true;
+        }
+      }
+      if (handled) {
+        e.preventDefault();
+        onPinnedSizeChange(newSize);
+      }
+    },
+    [edge, pinnedSize, constraints, onPinnedSizeChange]
+  );
+  const getAriaValueNow = (handle) => {
+    if (handle.includes("left") || handle.includes("right")) {
+      return mode === "detached" ? detachedSize.width : pinnedSize;
+    }
+    return mode === "detached" ? detachedSize.height : pinnedSize;
+  };
+  const getAriaValueMinMax = (handle) => {
+    const isWidth = handle.includes("left") || handle.includes("right");
+    if (isWidth) {
+      return {
+        min: constraints.minWidth || 280,
+        max: constraints.maxWidth || 600
+      };
+    }
+    return {
+      min: constraints.minHeight || 200,
+      max: constraints.maxHeight || 800
+    };
+  };
+  if (mode === "detached") {
+    const handles = [
+      "top",
+      "bottom",
+      "left",
+      "right",
+      "top-left",
+      "top-right",
+      "bottom-left",
+      "bottom-right"
+    ];
+    return /* @__PURE__ */ jsx12(Fragment, { children: handles.map((handle) => {
+      const isCorner = handle.includes("-");
+      const isHorizontal2 = handle === "top" || handle === "bottom";
+      const isVertical = handle === "left" || handle === "right";
+      const { min: min2, max: max2 } = getAriaValueMinMax(handle);
+      return /* @__PURE__ */ jsx12(
+        "div",
+        {
+          className: cn(
+            "resize-handle",
+            isHorizontal2 && "resize-handle--horizontal",
+            isVertical && "resize-handle--vertical",
+            isCorner && "resize-handle--corner",
+            `resize-handle--${handle}`
+          ),
+          role: "slider",
+          tabIndex: 0,
+          "aria-orientation": isVertical ? "vertical" : "horizontal",
+          "aria-label": `Resize panel from ${handle.replace("-", " ")} ${isCorner ? "corner" : "edge"}`,
+          "aria-valuenow": getAriaValueNow(handle),
+          "aria-valuemin": min2,
+          "aria-valuemax": max2,
+          "aria-valuetext": `${getAriaValueNow(handle)} pixels`,
+          style: isCorner ? { "--handle-radius": "6px" } : void 0,
+          onPointerDown: (e) => onResizeStart(e, handle),
+          onKeyDown: (e) => handleDetachedKeyDown(e, handle)
+        },
+        handle
+      );
+    }) });
+  }
+  const pinnedHandle = getPinnedResizeHandle(edge);
+  const isHorizontal = edge === "left" || edge === "right";
+  const { min, max } = getAriaValueMinMax(pinnedHandle);
+  return /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: cn(
+        "resize-handle",
+        edge === "left" && "resize-handle--vertical resize-handle--right",
+        edge === "right" && "resize-handle--vertical resize-handle--left",
+        edge === "top" && "resize-handle--horizontal resize-handle--bottom",
+        edge === "bottom" && "resize-handle--horizontal resize-handle--top"
+      ),
+      role: "slider",
+      tabIndex: 0,
+      "aria-orientation": isHorizontal ? "horizontal" : "vertical",
+      "aria-label": `Resize panel from ${edge} edge`,
+      "aria-valuenow": pinnedSize,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuetext": `${pinnedSize} pixels`,
+      onPointerDown: (e) => onResizeStart(e, pinnedHandle),
+      onKeyDown: handlePinnedKeyDown
+    }
+  );
+}
+var DataPanel = React13.forwardRef(
   ({
     open: controlledOpen,
     onOpenChange,
@@ -872,31 +1226,33 @@ var DataPanel = React12.forwardRef(
     className
   }, ref) => {
     const resolvedConstraints = { ...DEFAULT_CONSTRAINTS, ...constraints };
-    const [internalOpen, setInternalOpen] = React12.useState(true);
-    const [internalMode, setInternalMode] = React12.useState(DEFAULT_PANEL_STATE.mode);
-    const [internalEdge, setInternalEdge] = React12.useState(DEFAULT_PANEL_STATE.edge);
-    const [internalExpanded, setInternalExpanded] = React12.useState(
+    const panelId = React13.useId();
+    const titleId = `${panelId}-title`;
+    const [internalOpen, setInternalOpen] = React13.useState(true);
+    const [internalMode, setInternalMode] = React13.useState(DEFAULT_PANEL_STATE.mode);
+    const [internalEdge, setInternalEdge] = React13.useState(DEFAULT_PANEL_STATE.edge);
+    const [internalExpanded, setInternalExpanded] = React13.useState(
       DEFAULT_PANEL_STATE.isExpanded
     );
-    const [detachedPosition, setDetachedPosition] = React12.useState(
+    const [detachedPosition, setDetachedPosition] = React13.useState(
       DEFAULT_PANEL_STATE.detachedPosition
     );
-    const [detachedSize, setDetachedSize] = React12.useState(DEFAULT_PANEL_STATE.detachedSize);
-    const [pinnedSize, setPinnedSize] = React12.useState(DEFAULT_PANEL_STATE.pinnedSize);
-    const [isDragging, setIsDragging] = React12.useState(false);
-    const [isResizing, setIsResizing] = React12.useState(false);
-    const [snapPreview, setSnapPreview] = React12.useState(null);
-    const [isPinnedDragging, setIsPinnedDragging] = React12.useState(false);
-    const [pullOffset, setPullOffset] = React12.useState(0);
-    const dragStateRef = React12.useRef({
+    const [detachedSize, setDetachedSize] = React13.useState(DEFAULT_PANEL_STATE.detachedSize);
+    const [pinnedSize, setPinnedSize] = React13.useState(DEFAULT_PANEL_STATE.pinnedSize);
+    const [isDragging, setIsDragging] = React13.useState(false);
+    const [isResizing, setIsResizing] = React13.useState(false);
+    const [snapPreview, setSnapPreview] = React13.useState(null);
+    const [isPinnedDragging, setIsPinnedDragging] = React13.useState(false);
+    const [pullOffset, setPullOffset] = React13.useState(0);
+    const dragStateRef = React13.useRef({
       startPosition: { x: 0, y: 0 },
       startPanelPosition: { x: 0, y: 0 }
     });
-    const pinnedDragStateRef = React12.useRef({
+    const pinnedDragStateRef = React13.useRef({
       startPosition: { x: 0, y: 0 },
       hasDetached: false
     });
-    const resizeStateRef = React12.useRef({
+    const resizeStateRef = React13.useRef({
       handle: null,
       startPosition: { x: 0, y: 0 },
       startSize: { width: 0, height: 0 },
@@ -906,8 +1262,8 @@ var DataPanel = React12.forwardRef(
     const mode = controlledMode ?? internalMode;
     const edge = controlledEdge ?? internalEdge;
     const isExpanded = controlledExpanded ?? internalExpanded;
-    const saveTimeoutRef = React12.useRef(null);
-    const debouncedSave = React12.useCallback(() => {
+    const saveTimeoutRef = React13.useRef(null);
+    const debouncedSave = React13.useCallback(() => {
       if (!persistKey) return;
       if (saveTimeoutRef.current) {
         clearTimeout(saveTimeoutRef.current);
@@ -933,7 +1289,7 @@ var DataPanel = React12.forwardRef(
       detachedSize,
       pinnedSize
     ]);
-    React12.useEffect(() => {
+    React13.useEffect(() => {
       if (!persistKey) return;
       const persisted = loadPanelState(persistKey);
       if (persisted) {
@@ -946,7 +1302,7 @@ var DataPanel = React12.forwardRef(
         if (persisted.pinnedSize) setPinnedSize(persisted.pinnedSize);
       }
     }, [persistKey, controlledMode, controlledEdge, controlledExpanded]);
-    React12.useEffect(() => {
+    React13.useEffect(() => {
       if (mode === "detached" && detachedPosition.x === DEFAULT_PANEL_STATE.detachedPosition.x && detachedPosition.y === DEFAULT_PANEL_STATE.detachedPosition.y) {
         setDetachedPosition(
           getInitialDetachedPosition(detachedSize, window.innerWidth, window.innerHeight)
@@ -1004,7 +1360,7 @@ var DataPanel = React12.forwardRef(
         document.body.style.userSelect = "none";
       }
     };
-    const handleDragMove = React12.useCallback(
+    const handleDragMove = React13.useCallback(
       (e) => {
         if (!isDragging) return;
         const currentPos = getPointerPosition(e);
@@ -1031,7 +1387,7 @@ var DataPanel = React12.forwardRef(
       },
       [isDragging, detachedSize, snapThreshold]
     );
-    const handleDragEnd = React12.useCallback(() => {
+    const handleDragEnd = React13.useCallback(() => {
       if (!isDragging) return;
       setIsDragging(false);
       document.body.style.cursor = "";
@@ -1044,7 +1400,7 @@ var DataPanel = React12.forwardRef(
         debouncedSave();
       }
     }, [isDragging, snapPreview, handleModeChange, handleEdgeChange, debouncedSave]);
-    const handlePinnedDragMove = React12.useCallback(
+    const handlePinnedDragMove = React13.useCallback(
       (e) => {
         if (!isPinnedDragging) return;
         const currentPos = getPointerPosition(e);
@@ -1080,7 +1436,7 @@ var DataPanel = React12.forwardRef(
       },
       [isPinnedDragging, edge, detachThreshold, pinnedSize, detachedSize, handleModeChange]
     );
-    const handlePinnedDragEnd = React12.useCallback(() => {
+    const handlePinnedDragEnd = React13.useCallback(() => {
       if (!isPinnedDragging) return;
       setIsPinnedDragging(false);
       setPullOffset(0);
@@ -1102,7 +1458,7 @@ var DataPanel = React12.forwardRef(
       document.body.style.cursor = getResizeCursor(handle);
       document.body.style.userSelect = "none";
     };
-    const handleResizeMove = React12.useCallback(
+    const handleResizeMove = React13.useCallback(
       (e) => {
         if (!isResizing || !resizeStateRef.current.handle) return;
         const currentPos = getPointerPosition(e);
@@ -1140,7 +1496,7 @@ var DataPanel = React12.forwardRef(
       },
       [isResizing, mode, edge, resolvedConstraints]
     );
-    const handleResizeEnd = React12.useCallback(() => {
+    const handleResizeEnd = React13.useCallback(() => {
       if (!isResizing) return;
       setIsResizing(false);
       resizeStateRef.current.handle = null;
@@ -1148,7 +1504,7 @@ var DataPanel = React12.forwardRef(
       document.body.style.userSelect = "";
       debouncedSave();
     }, [isResizing, debouncedSave]);
-    React12.useEffect(() => {
+    React13.useEffect(() => {
       if (isDragging) {
         window.addEventListener("pointermove", handleDragMove);
         window.addEventListener("pointerup", handleDragEnd);
@@ -1158,7 +1514,7 @@ var DataPanel = React12.forwardRef(
         };
       }
     }, [isDragging, handleDragMove, handleDragEnd]);
-    React12.useEffect(() => {
+    React13.useEffect(() => {
       if (isPinnedDragging) {
         window.addEventListener("pointermove", handlePinnedDragMove);
         window.addEventListener("pointerup", handlePinnedDragEnd);
@@ -1168,7 +1524,7 @@ var DataPanel = React12.forwardRef(
         };
       }
     }, [isPinnedDragging, handlePinnedDragMove, handlePinnedDragEnd]);
-    React12.useEffect(() => {
+    React13.useEffect(() => {
       if (isResizing) {
         window.addEventListener("pointermove", handleResizeMove);
         window.addEventListener("pointerup", handleResizeEnd);
@@ -1178,7 +1534,7 @@ var DataPanel = React12.forwardRef(
         };
       }
     }, [isResizing, handleResizeMove, handleResizeEnd]);
-    const panelStyles = React12.useMemo(() => {
+    const panelStyles = React13.useMemo(() => {
       if (mode === "pinned") {
         const baseStyles = getPinnedPositionStyles(edge, pinnedSize);
         if (pullOffset > 0) {
@@ -1205,7 +1561,7 @@ var DataPanel = React12.forwardRef(
     if (!isExpanded && mode === "pinned") {
       return /* @__PURE__ */ jsx12(DataPanelTab, { title, edge, onClick: () => handleExpandedChange(true) });
     }
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    return /* @__PURE__ */ jsxs5(Fragment, { children: [
       snapPreview && /* @__PURE__ */ jsx12(
         "div",
         {
@@ -1218,7 +1574,7 @@ var DataPanel = React12.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ jsxs4(
+      /* @__PURE__ */ jsxs5(
         "div",
         {
           ref,
@@ -1231,9 +1587,10 @@ var DataPanel = React12.forwardRef(
             className
           ),
           style: panelStyles,
-          role: mode === "detached" ? "dialog" : void 0,
+          role: mode === "detached" ? "dialog" : "complementary",
           "aria-modal": mode === "detached" ? "true" : void 0,
-          "aria-labelledby": title ? "data-panel-title" : void 0,
+          "aria-labelledby": title ? titleId : void 0,
+          "aria-label": !title ? "Side panel" : void 0,
           onPointerDown: handleDragStart,
           children: [
             /* @__PURE__ */ jsx12(
@@ -1241,6 +1598,7 @@ var DataPanel = React12.forwardRef(
               {
                 title,
                 subtitle,
+                titleId,
                 mode,
                 edge,
                 isExpanded,
@@ -1264,80 +1622,31 @@ var DataPanel = React12.forwardRef(
                 footerActions
               }
             ),
-            !disableResize && /* @__PURE__ */ jsx12(Fragment, { children: mode === "detached" ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--horizontal resize-handle--top",
-                  onPointerDown: (e) => handleResizeStart(e, "top")
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--horizontal resize-handle--bottom",
-                  onPointerDown: (e) => handleResizeStart(e, "bottom")
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--vertical resize-handle--left",
-                  onPointerDown: (e) => handleResizeStart(e, "left")
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--vertical resize-handle--right",
-                  onPointerDown: (e) => handleResizeStart(e, "right")
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--corner resize-handle--top-left",
-                  style: { "--handle-radius": "6px" },
-                  onPointerDown: (e) => handleResizeStart(e, "top-left")
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--corner resize-handle--top-right",
-                  style: { "--handle-radius": "6px" },
-                  onPointerDown: (e) => handleResizeStart(e, "top-right")
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--corner resize-handle--bottom-left",
-                  style: { "--handle-radius": "6px" },
-                  onPointerDown: (e) => handleResizeStart(e, "bottom-left")
-                }
-              ),
-              /* @__PURE__ */ jsx12(
-                "div",
-                {
-                  className: "resize-handle resize-handle--corner resize-handle--bottom-right",
-                  style: { "--handle-radius": "6px" },
-                  onPointerDown: (e) => handleResizeStart(e, "bottom-right")
-                }
-              )
-            ] }) : /* @__PURE__ */ jsx12(
-              "div",
+            !disableResize && /* @__PURE__ */ jsx12(
+              ResizeHandles,
               {
-                className: cn(
-                  "resize-handle",
-                  edge === "left" && "resize-handle--vertical resize-handle--right",
-                  edge === "right" && "resize-handle--vertical resize-handle--left",
-                  edge === "top" && "resize-handle--horizontal resize-handle--bottom",
-                  edge === "bottom" && "resize-handle--horizontal resize-handle--top"
-                ),
-                onPointerDown: (e) => handleResizeStart(e, getPinnedResizeHandle(edge))
+                mode,
+                edge,
+                detachedSize,
+                pinnedSize,
+                onResizeStart: handleResizeStart,
+                onSizeChange: (size) => setDetachedSize(constrainSize(size, resolvedConstraints)),
+                onPinnedSizeChange: (size) => {
+                  if (typeof window === "undefined") {
+                    setPinnedSize(size);
+                    return;
+                  }
+                  if (isHorizontalEdge(edge)) {
+                    setPinnedSize(constrainPinnedWidth(size, resolvedConstraints, window.innerWidth));
+                  } else {
+                    setPinnedSize(
+                      constrainPinnedHeight(size, resolvedConstraints, window.innerHeight)
+                    );
+                  }
+                },
+                constraints: resolvedConstraints
               }
-            ) })
+            )
           ]
         }
       )
@@ -1345,6 +1654,891 @@ var DataPanel = React12.forwardRef(
   }
 );
 DataPanel.displayName = "DataPanel";
+
+// src/components/Skeleton.tsx
+import * as React14 from "react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var skeletonVariants = cva5("rounded-md bg-muted", {
+  variants: {
+    variant: {
+      default: "",
+      text: "h-4 w-full",
+      avatar: "h-12 w-12 rounded-full",
+      card: "h-32 w-full",
+      button: "h-10 w-24",
+      title: "h-6 w-3/4"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var Skeleton = React14.forwardRef(
+  ({ className, variant, animation = "pulse", ...props }, ref) => {
+    const animationClass = animation === "pulse" ? "animate-pulse" : animation === "shimmer" ? "animate-shimmer" : "";
+    return /* @__PURE__ */ jsx13(
+      "div",
+      {
+        ref,
+        className: cn(skeletonVariants({ variant }), animationClass, className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/components/Spinner.tsx
+import * as React15 from "react";
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+var spinnerVariants = cva6("animate-spin text-current", {
+  variants: {
+    size: {
+      sm: "h-4 w-4",
+      md: "h-6 w-6",
+      lg: "h-8 w-8",
+      xl: "h-12 w-12"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Spinner = React15.forwardRef(
+  ({ className, size, label = "Loading...", ...props }, ref) => {
+    return /* @__PURE__ */ jsxs6(
+      "svg",
+      {
+        ref,
+        className: cn(spinnerVariants({ size }), className),
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        viewBox: "0 0 24 24",
+        "aria-label": label,
+        role: "status",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx14(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ jsx14(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+            }
+          ),
+          /* @__PURE__ */ jsx14("title", { children: label })
+        ]
+      }
+    );
+  }
+);
+Spinner.displayName = "Spinner";
+
+// src/components/LoadingLogo.tsx
+import * as React16 from "react";
+import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+var logoPaths = [
+  "M9.902 16.6c.3.7 1.7.8 1-.6-.6-1.4-2.3-5.1-6.1-6.3-1.7-.5-3.7.4-4.3 1.6-.4.7-1.1 2.9.5 4.3.8.7 1.9 1.2 3.6 1 .4-.1.9-.5.6-.8-.5-.4-1.9-1.7-1.1-2.7.7-.8 1.4-.6 2-.3.4.2 2.1 1 3.7 3.6l.1.2z",
+  "M14.602 16.6c-.3.7-1.7.8-1-.6.6-1.4 2.3-5.1 6.1-6.3 1.7-.5 3.7.4 4.3 1.6.4.7 1.1 2.9-.5 4.3-.8.7-1.9 1.2-3.6 1-.4-.1-.9-.5-.6-.8.5-.4 1.9-1.7 1.1-2.7-.7-.8-1.4-.6-2-.3-.4.2-2.1 1-3.7 3.6l-.1.2z",
+  "M12.202 0c.7 1.3 2.1 3.2 2.3 5.3.1 1.5-.8 8.3-2.3 11.7-1.5-3.5-2.4-10.3-2.3-11.7.2-2.1 1.6-4 2.3-5.3z",
+  "M9.002 18.1c-.8 0-.7.8-.1.8h6.7c.7 0 .7-.8-.1-.8h-6.5z",
+  "M13.802 24.8c-1.1-1.1-.9-4.6-.9-4.6h-1.3s.2 3.6-.9 4.6h3.1z",
+  "M14.202 22.5c-.1-.3-.5-1.4-.6-2.3 0-.2.6-.5.7.1.1.6.4 1.6.6 1.9.3.5-.4.9-.7.3z",
+  "M10.302 22.5c.1-.3.5-1.4.6-2.2 0-.3-.5-.6-.7 0-.1.6-.4 1.6-.6 1.9-.3.5.4.9.7.3z"
+];
+var colors = {
+  dark: {
+    fill: "#C50F22",
+    fillLoading: "#ffffff",
+    stroke: "#C50F22"
+  },
+  light: {
+    fill: "#ffffff",
+    fillLoading: "#C50F22",
+    stroke: "#ffffff"
+  }
+};
+var LoadingLogo = React16.forwardRef(
+  ({ width = 40, height = 40, loading = false, variant = "dark", className, ...props }, ref) => {
+    const currentColors = colors[variant];
+    const fillColor = loading ? currentColors.fillLoading : currentColors.fill;
+    const strokeColor = currentColors.stroke;
+    return /* @__PURE__ */ jsxs7(
+      "div",
+      {
+        ref,
+        className: cn("inline-flex items-center justify-center", className),
+        style: { width: `${width}px`, height: `${height}px` },
+        role: loading ? "status" : "img",
+        "aria-label": loading ? "Loading" : "Classic Homes",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs7(
+            "svg",
+            {
+              width: "100%",
+              height: "100%",
+              viewBox: "-1 0 26 25",
+              fill: "none",
+              xmlns: "http://www.w3.org/2000/svg",
+              "aria-hidden": "true",
+              children: [
+                /* @__PURE__ */ jsx15("g", { fill: fillColor, className: "transition-all duration-300", children: logoPaths.map((path, i) => /* @__PURE__ */ jsx15("path", { d: path }, i)) }),
+                loading && /* @__PURE__ */ jsx15(
+                  "g",
+                  {
+                    fill: "none",
+                    stroke: strokeColor,
+                    strokeWidth: "0.5",
+                    strokeDasharray: "10 4",
+                    className: "animate-trace",
+                    children: logoPaths.map((path, i) => /* @__PURE__ */ jsx15("path", { d: path }, i))
+                  }
+                )
+              ]
+            }
+          ),
+          loading && /* @__PURE__ */ jsx15("span", { className: "sr-only", children: "Loading" })
+        ]
+      }
+    );
+  }
+);
+LoadingLogo.displayName = "LoadingLogo";
+
+// src/components/ProgressBar.tsx
+import * as React17 from "react";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
+var progressBarVariants = cva7("w-full overflow-hidden rounded-full bg-muted", {
+  variants: {
+    size: {
+      sm: "h-1",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var progressFillVariants = cva7("h-full rounded-full transition-all duration-300", {
+  variants: {
+    variant: {
+      default: "bg-primary",
+      success: "bg-success",
+      warning: "bg-warning",
+      destructive: "bg-destructive"
+    }
+  },
+  defaultVariants: {
+    variant: "default"
+  }
+});
+var ProgressBar = React17.forwardRef(
+  ({ className, size, variant, value, max = 100, label = "Progress", showValue = false, ...props }, ref) => {
+    const isIndeterminate = value === void 0;
+    const clampedValue = isIndeterminate ? 0 : Math.min(Math.max(0, value), max);
+    const percentage = isIndeterminate ? 0 : Math.round(clampedValue / max * 100);
+    return /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-label": label,
+        "aria-valuenow": isIndeterminate ? void 0 : clampedValue,
+        "aria-valuemin": 0,
+        "aria-valuemax": max,
+        className: cn("flex items-center gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx16("div", { className: cn(progressBarVariants({ size })), children: /* @__PURE__ */ jsx16(
+            "div",
+            {
+              className: cn(
+                progressFillVariants({ variant }),
+                isIndeterminate && "w-1/4 animate-progress-indeterminate"
+              ),
+              style: isIndeterminate ? void 0 : { width: `${percentage}%` }
+            }
+          ) }),
+          showValue && !isIndeterminate && /* @__PURE__ */ jsxs8("span", { className: "text-sm tabular-nums text-muted-foreground", children: [
+            percentage,
+            "%"
+          ] })
+        ]
+      }
+    );
+  }
+);
+ProgressBar.displayName = "ProgressBar";
+
+// src/components/LoadingOverlay.tsx
+import * as React18 from "react";
+import { Fragment as Fragment2, jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+var spinnerSizeMap = { sm: "sm", md: "md", lg: "lg", xl: "xl" };
+var logoSizeMap = { sm: 32, md: 40, lg: 56, xl: 80 };
+var LoadingOverlay = React18.forwardRef(
+  ({
+    loading = true,
+    variant = "spinner",
+    mode = "overlay",
+    size = "md",
+    message,
+    progress,
+    blur = true,
+    opaque = false,
+    delay = 0,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = React18.useState(delay === 0 && loading);
+    React18.useEffect(() => {
+      if (!loading) {
+        setVisible(false);
+        return;
+      }
+      if (delay === 0) {
+        setVisible(true);
+        return;
+      }
+      const timer = setTimeout(() => setVisible(true), delay);
+      return () => clearTimeout(timer);
+    }, [loading, delay]);
+    if (!visible) {
+      return mode === "inline" ? null : /* @__PURE__ */ jsx17(Fragment2, { children });
+    }
+    const indicator = /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      variant === "spinner" && /* @__PURE__ */ jsx17(Spinner, { size: spinnerSizeMap[size] }),
+      variant === "logo" && /* @__PURE__ */ jsx17(LoadingLogo, { loading: true, width: logoSizeMap[size], height: logoSizeMap[size] }),
+      variant === "progress" && /* @__PURE__ */ jsx17(ProgressBar, { value: progress, className: "w-48 max-w-full" }),
+      variant === "skeleton" && /* @__PURE__ */ jsxs9("div", { className: "w-full space-y-3", children: [
+        /* @__PURE__ */ jsx17(Skeleton, { variant: "title" }),
+        /* @__PURE__ */ jsx17(Skeleton, { variant: "text" }),
+        /* @__PURE__ */ jsx17(Skeleton, { variant: "text" }),
+        /* @__PURE__ */ jsx17(Skeleton, { variant: "text", className: "w-2/3" })
+      ] }),
+      message && /* @__PURE__ */ jsx17("p", { className: "mt-2 text-sm text-muted-foreground animate-pulse-subtle", children: message }),
+      !message && /* @__PURE__ */ jsx17("span", { className: "sr-only", children: "Loading" })
+    ] });
+    if (mode === "inline") {
+      return /* @__PURE__ */ jsx17(
+        "div",
+        {
+          ref,
+          role: "status",
+          "aria-live": "polite",
+          className: cn("inline-flex items-center gap-2", className),
+          ...props,
+          children: indicator
+        }
+      );
+    }
+    const bgClass = opaque ? "bg-background" : mode === "fullscreen" ? "bg-background/80" : "bg-background/60";
+    const positionClass = mode === "fullscreen" ? "fixed inset-0 z-50" : "absolute inset-0 z-10";
+    return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+      children,
+      /* @__PURE__ */ jsx17(
+        "div",
+        {
+          ref,
+          role: "status",
+          "aria-live": "polite",
+          className: cn(
+            positionClass,
+            bgClass,
+            blur && "backdrop-blur-sm",
+            "flex flex-col items-center justify-center",
+            className
+          ),
+          ...props,
+          children: indicator
+        }
+      )
+    ] });
+  }
+);
+LoadingOverlay.displayName = "LoadingOverlay";
+
+// src/components/LoadingPage.tsx
+import * as React19 from "react";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+var LoadingPage = React19.forwardRef(
+  ({
+    loading = true,
+    message,
+    progress,
+    showLogo = true,
+    logoVariant = "dark",
+    delay = 200,
+    className,
+    ...props
+  }, ref) => {
+    const [visible, setVisible] = React19.useState(delay === 0 && loading);
+    React19.useEffect(() => {
+      if (!loading) {
+        setVisible(false);
+        return;
+      }
+      if (delay === 0) {
+        setVisible(true);
+        return;
+      }
+      const timer = setTimeout(() => setVisible(true), delay);
+      return () => clearTimeout(timer);
+    }, [loading, delay]);
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": "polite",
+        className: cn(
+          "fixed inset-0 z-50 flex flex-col items-center justify-center bg-background",
+          className
+        ),
+        ...props,
+        children: [
+          showLogo ? /* @__PURE__ */ jsx18(LoadingLogo, { loading: true, width: 64, height: 64, variant: logoVariant }) : /* @__PURE__ */ jsx18(Spinner, { size: "xl" }),
+          progress !== void 0 && /* @__PURE__ */ jsx18(ProgressBar, { value: progress, className: "mt-6 w-48 max-w-full" }),
+          message && /* @__PURE__ */ jsx18("p", { className: "mt-4 text-sm text-muted-foreground animate-pulse-subtle", children: message }),
+          /* @__PURE__ */ jsxs10("span", { className: "sr-only", children: [
+            message || "Loading",
+            progress !== void 0 && `, ${Math.round(progress)}% complete`
+          ] })
+        ]
+      }
+    );
+  }
+);
+LoadingPage.displayName = "LoadingPage";
+
+// src/components/LoadingSection.tsx
+import * as React20 from "react";
+import { jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
+var LoadingSection = React20.forwardRef(
+  ({
+    loading = false,
+    variant = "spinner",
+    message,
+    progress,
+    minHeight = "12rem",
+    blur = true,
+    delay = 0,
+    className,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxs11(
+      "div",
+      {
+        ref,
+        className: cn("relative", className),
+        style: { minHeight },
+        "aria-busy": loading,
+        ...props,
+        children: [
+          children,
+          loading && /* @__PURE__ */ jsx19(
+            LoadingOverlay,
+            {
+              mode: "overlay",
+              variant,
+              message,
+              progress,
+              blur,
+              delay
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+LoadingSection.displayName = "LoadingSection";
+
+// src/components/LiveRegion.tsx
+import * as React21 from "react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var LiveRegion = React21.forwardRef(
+  ({ message, politeness = "polite", atomic = true, visuallyHidden = true, className, children }, ref) => {
+    return /* @__PURE__ */ jsx20(
+      "div",
+      {
+        ref,
+        role: "status",
+        "aria-live": politeness,
+        "aria-atomic": atomic,
+        className: cn(
+          visuallyHidden && "sr-only absolute h-px w-px overflow-hidden whitespace-nowrap border-0 p-0",
+          className
+        ),
+        children: message || children
+      }
+    );
+  }
+);
+LiveRegion.displayName = "LiveRegion";
+
+// src/components/SkipLink.tsx
+import * as React22 from "react";
+import { jsx as jsx21 } from "react/jsx-runtime";
+var SkipLink = React22.forwardRef(
+  ({ targetId, className, children = "Skip to main content", ...props }, ref) => {
+    const handleClick = (e) => {
+      e.preventDefault();
+      const target = document.getElementById(targetId);
+      if (target) {
+        if (target.tabIndex === -1) {
+          target.setAttribute("tabindex", "-1");
+        }
+        target.focus();
+        target.scrollIntoView();
+      } else if (process.env.NODE_ENV !== "production") {
+        console.warn(
+          `SkipLink: Target element with id="${targetId}" not found. Ensure the target element exists and has the correct id attribute.`
+        );
+      }
+      props.onClick?.(e);
+    };
+    return /* @__PURE__ */ jsx21(
+      "a",
+      {
+        ref,
+        href: `#${targetId}`,
+        className: cn("skip-link", className),
+        onClick: handleClick,
+        ...props,
+        children
+      }
+    );
+  }
+);
+SkipLink.displayName = "SkipLink";
+
+// src/hooks/useFocusTrap.ts
+import { useEffect as useEffect5, useRef as useRef3, useCallback as useCallback3 } from "react";
+var FOCUSABLE_SELECTOR = [
+  "a[href]",
+  "area[href]",
+  'input:not([disabled]):not([type="hidden"])',
+  "select:not([disabled])",
+  "textarea:not([disabled])",
+  "button:not([disabled])",
+  "iframe",
+  "object",
+  "embed",
+  "[contenteditable]",
+  '[tabindex]:not([tabindex="-1"])'
+].join(",");
+function getFocusableElements(container) {
+  const elements = container.querySelectorAll(FOCUSABLE_SELECTOR);
+  return Array.from(elements).filter(
+    (el) => el.offsetParent !== null && getComputedStyle(el).visibility !== "hidden"
+  );
+}
+function useFocusTrap(options = {}) {
+  const { active = true, returnFocusTo, initialFocus, preventScroll = false } = options;
+  const containerRef = useRef3(null);
+  const previousActiveElementRef = useRef3(null);
+  const handleKeyDown = useCallback3(
+    (event) => {
+      if (!active || event.key !== "Tab") return;
+      const container = containerRef.current;
+      if (!container) return;
+      const focusableElements = getFocusableElements(container);
+      if (focusableElements.length === 0) return;
+      const firstElement = focusableElements[0];
+      const lastElement = focusableElements[focusableElements.length - 1];
+      if (event.shiftKey) {
+        if (document.activeElement === firstElement) {
+          event.preventDefault();
+          lastElement.focus({ preventScroll });
+        }
+      } else {
+        if (document.activeElement === lastElement) {
+          event.preventDefault();
+          firstElement.focus({ preventScroll });
+        }
+      }
+    },
+    [active, preventScroll]
+  );
+  useEffect5(() => {
+    if (!active) return;
+    const container = containerRef.current;
+    if (!container) return;
+    previousActiveElementRef.current = document.activeElement;
+    const focusableElements = getFocusableElements(container);
+    if (focusableElements.length > 0) {
+      let elementToFocus = null;
+      if (initialFocus) {
+        elementToFocus = container.querySelector(initialFocus);
+      }
+      if (!elementToFocus) {
+        elementToFocus = focusableElements[0];
+      }
+      requestAnimationFrame(() => {
+        elementToFocus?.focus({ preventScroll });
+      });
+    }
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      const elementToReturn = returnFocusTo ?? previousActiveElementRef.current;
+      if (elementToReturn && typeof elementToReturn.focus === "function") {
+        elementToReturn.focus({ preventScroll });
+      }
+    };
+  }, [active, initialFocus, returnFocusTo, handleKeyDown, preventScroll]);
+  return containerRef;
+}
+
+// src/hooks/useFocusRef.ts
+import { useRef as useRef4, useEffect as useEffect6 } from "react";
+function useFocusRef(options = {}) {
+  const { focusOnMount = false, preventScroll = false, delay = 0 } = options;
+  const ref = useRef4(null);
+  useEffect6(() => {
+    if (!focusOnMount) return;
+    const focus = () => {
+      if (ref.current && typeof ref.current.focus === "function") {
+        ref.current.focus({ preventScroll });
+      }
+    };
+    if (delay > 0) {
+      const timer = setTimeout(focus, delay);
+      return () => clearTimeout(timer);
+    } else {
+      const frame = requestAnimationFrame(focus);
+      return () => cancelAnimationFrame(frame);
+    }
+  }, [focusOnMount, preventScroll, delay]);
+  return ref;
+}
+
+// src/hooks/useReducedMotion.ts
+import { useState as useState6, useEffect as useEffect7 } from "react";
+function useReducedMotion() {
+  const [reducedMotion, setReducedMotion] = useState6(false);
+  useEffect7(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setReducedMotion(mediaQuery.matches);
+    const handleChange = (event) => {
+      setReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => {
+      mediaQuery.removeEventListener("change", handleChange);
+    };
+  }, []);
+  return reducedMotion;
+}
+
+// src/hooks/useArrowNavigation.ts
+import { useCallback as useCallback4, useRef as useRef5 } from "react";
+var DEFAULT_SELECTOR = '[role="menuitem"], [role="option"], [role="tab"], button, a, [tabindex]:not([tabindex="-1"])';
+function useArrowNavigation(options = {}) {
+  const {
+    orientation = "vertical",
+    loop = true,
+    itemSelector = DEFAULT_SELECTOR,
+    onFocusChange
+  } = options;
+  const containerRef = useRef5(null);
+  const focusedIndexRef = useRef5(-1);
+  const getFocusableItems = useCallback4(() => {
+    if (!containerRef.current) return [];
+    return Array.from(containerRef.current.querySelectorAll(itemSelector));
+  }, [itemSelector]);
+  const focusItem = useCallback4(
+    (index) => {
+      const items = getFocusableItems();
+      if (items.length === 0) return;
+      let targetIndex = index;
+      if (loop) {
+        if (targetIndex < 0) targetIndex = items.length - 1;
+        if (targetIndex >= items.length) targetIndex = 0;
+      } else {
+        targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
+      }
+      const element = items[targetIndex];
+      if (element) {
+        element.focus();
+        focusedIndexRef.current = targetIndex;
+        onFocusChange?.(targetIndex, element);
+      }
+    },
+    [getFocusableItems, loop, onFocusChange]
+  );
+  const handleKeyDown = useCallback4(
+    (event) => {
+      const items = getFocusableItems();
+      if (items.length === 0) return;
+      const currentIndex = focusedIndexRef.current;
+      let handled = false;
+      switch (event.key) {
+        case "ArrowUp":
+          if (orientation === "vertical" || orientation === "both") {
+            focusItem(currentIndex - 1);
+            handled = true;
+          }
+          break;
+        case "ArrowDown":
+          if (orientation === "vertical" || orientation === "both") {
+            focusItem(currentIndex + 1);
+            handled = true;
+          }
+          break;
+        case "ArrowLeft":
+          if (orientation === "horizontal" || orientation === "both") {
+            focusItem(currentIndex - 1);
+            handled = true;
+          }
+          break;
+        case "ArrowRight":
+          if (orientation === "horizontal" || orientation === "both") {
+            focusItem(currentIndex + 1);
+            handled = true;
+          }
+          break;
+        case "Home":
+          focusItem(0);
+          handled = true;
+          break;
+        case "End":
+          focusItem(items.length - 1);
+          handled = true;
+          break;
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [orientation, focusItem, getFocusableItems]
+  );
+  const handleFocus = useCallback4(
+    (event) => {
+      const items = getFocusableItems();
+      const index = items.indexOf(event.target);
+      if (index !== -1) {
+        focusedIndexRef.current = index;
+      }
+    },
+    [getFocusableItems]
+  );
+  const containerProps = {
+    ref: (node) => {
+      containerRef.current = node;
+    },
+    onKeyDown: handleKeyDown,
+    onFocus: handleFocus
+  };
+  const getItemProps = useCallback4(
+    (index) => ({
+      tabIndex: index === 0 ? 0 : -1,
+      onFocus: () => {
+        focusedIndexRef.current = index;
+      }
+    }),
+    []
+  );
+  return {
+    containerProps,
+    getItemProps,
+    focusItem,
+    getFocusedIndex: () => focusedIndexRef.current
+  };
+}
+
+// src/hooks/useRovingTabindex.ts
+import { useState as useState7, useCallback as useCallback5, useRef as useRef6 } from "react";
+var DEFAULT_SELECTOR2 = "[data-roving-tabindex-item]";
+function useRovingTabindex(options = {}) {
+  const { loop = true, itemSelector = DEFAULT_SELECTOR2, initialIndex = 0, onIndexChange } = options;
+  const [activeIndex, setActiveIndex] = useState7(initialIndex);
+  const containerRef = useRef6(null);
+  const itemsRef = useRef6(/* @__PURE__ */ new Map());
+  const getItems = useCallback5(() => {
+    if (!containerRef.current) {
+      return Array.from(itemsRef.current.values());
+    }
+    return Array.from(containerRef.current.querySelectorAll(itemSelector));
+  }, [itemSelector]);
+  const focusIndex = useCallback5(
+    (index) => {
+      const items = getItems();
+      if (items.length === 0) return;
+      let targetIndex = index;
+      if (loop) {
+        if (targetIndex < 0) targetIndex = items.length - 1;
+        if (targetIndex >= items.length) targetIndex = 0;
+      } else {
+        targetIndex = Math.max(0, Math.min(targetIndex, items.length - 1));
+      }
+      setActiveIndex(targetIndex);
+      onIndexChange?.(targetIndex);
+      const element = items[targetIndex];
+      if (element) {
+        element.focus();
+      }
+    },
+    [getItems, loop, onIndexChange]
+  );
+  const handleKeyDown = useCallback5(
+    (event) => {
+      const items = getItems();
+      if (items.length === 0) return;
+      let handled = false;
+      switch (event.key) {
+        case "ArrowUp":
+        case "ArrowLeft":
+          focusIndex(activeIndex - 1);
+          handled = true;
+          break;
+        case "ArrowDown":
+        case "ArrowRight":
+          focusIndex(activeIndex + 1);
+          handled = true;
+          break;
+        case "Home":
+          focusIndex(0);
+          handled = true;
+          break;
+        case "End":
+          focusIndex(items.length - 1);
+          handled = true;
+          break;
+      }
+      if (handled) {
+        event.preventDefault();
+        event.stopPropagation();
+      }
+    },
+    [activeIndex, focusIndex, getItems]
+  );
+  const containerProps = {
+    ref: (node) => {
+      containerRef.current = node;
+    },
+    onKeyDown: handleKeyDown
+  };
+  const getItemProps = useCallback5(
+    (index) => ({
+      "data-roving-tabindex-item": true,
+      tabIndex: index === activeIndex ? 0 : -1,
+      ref: (node) => {
+        if (node) {
+          itemsRef.current.set(index, node);
+        } else {
+          itemsRef.current.delete(index);
+        }
+      },
+      onClick: () => {
+        setActiveIndex(index);
+        onIndexChange?.(index);
+      },
+      onFocus: () => {
+        if (activeIndex !== index) {
+          setActiveIndex(index);
+          onIndexChange?.(index);
+        }
+      }
+    }),
+    [activeIndex, onIndexChange]
+  );
+  return {
+    containerProps,
+    getItemProps,
+    activeIndex,
+    setActiveIndex: focusIndex,
+    focusNext: () => focusIndex(activeIndex + 1),
+    focusPrevious: () => focusIndex(activeIndex - 1),
+    focusFirst: () => focusIndex(0),
+    focusLast: () => focusIndex(getItems().length - 1)
+  };
+}
+
+// src/hooks/useEscapeKey.ts
+import * as React23 from "react";
+function useEscapeKey(callback, options) {
+  const { enabled = true, preventDefault = true, stopPropagation = false } = options ?? {};
+  const callbackRef = React23.useRef(callback);
+  React23.useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  React23.useEffect(() => {
+    if (!enabled) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape") {
+        if (preventDefault) {
+          event.preventDefault();
+        }
+        if (stopPropagation) {
+          event.stopPropagation();
+        }
+        callbackRef.current(event);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [enabled, preventDefault, stopPropagation]);
+}
+
+// src/hooks/useClickOutside.ts
+import * as React24 from "react";
+function useClickOutside(ref, callback, options) {
+  const {
+    enabled = true,
+    events = ["mousedown", "touchstart"],
+    ignoreElements = []
+  } = options ?? {};
+  const callbackRef = React24.useRef(callback);
+  React24.useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  React24.useEffect(() => {
+    if (!enabled) return;
+    const handleEvent = (event) => {
+      const target = event.target;
+      if (ref.current?.contains(target)) {
+        return;
+      }
+      for (const ignoreRef of ignoreElements) {
+        if (ignoreRef.current?.contains(target)) {
+          return;
+        }
+      }
+      callbackRef.current(event);
+    };
+    events.forEach((eventType) => {
+      document.addEventListener(eventType, handleEvent);
+    });
+    return () => {
+      events.forEach((eventType) => {
+        document.removeEventListener(eventType, handleEvent);
+      });
+    };
+  }, [enabled, events, ignoreElements, ref]);
+}
 export {
   Avatar,
   AvatarFallback,
@@ -1374,9 +2568,18 @@ export {
   DialogTrigger,
   Input,
   Label,
+  LiveRegion,
+  LoadingLogo,
+  LoadingOverlay,
+  LoadingPage,
+  LoadingSection,
   PageHeader,
   PasswordInput,
+  ProgressBar,
   Separator,
+  Skeleton,
+  SkipLink,
+  Spinner,
   Switch,
   badgeVariants,
   buttonVariants,
@@ -1385,5 +2588,16 @@ export {
   pageHeaderContainerVariants,
   pageHeaderSubtitleVariants,
   pageHeaderTitleVariants,
-  useDataPanel
+  progressBarVariants,
+  skeletonVariants,
+  spinnerVariants,
+  useAnnounce,
+  useArrowNavigation,
+  useClickOutside,
+  useDataPanel,
+  useEscapeKey,
+  useFocusRef,
+  useFocusTrap,
+  useReducedMotion,
+  useRovingTabindex
 };