@duskmoon-dev/components 0.3.3 → 0.4.0

package/dist/components/calendar/index.js

@@ -140,29 +140,33 @@ function Header({
   return /* @__PURE__ */ jsxs("div", {
     className: calendarHeaderClass,
     children: [
-      /* @__PURE__ */ jsx("div", {
-        className: calendarTitleClass,
-        children: title
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Previous panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, -1) : addMonths(panelDate, -1), mode),
+        children: /* @__PURE__ */ jsx("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", {
+            d: "m15 18-6-6 6-6"
+          })
+        })
       }),
       /* @__PURE__ */ jsxs("div", {
         className: calendarControlsClass,
         children: [
-          /* @__PURE__ */ jsxs("div", {
-            className: calendarNavClass,
-            children: [
-              /* @__PURE__ */ jsx("button", {
-                type: "button",
-                "aria-label": "Previous panel",
-                onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, -1) : addMonths(panelDate, -1), mode),
-                children: "Previous"
-              }),
-              /* @__PURE__ */ jsx("button", {
-                type: "button",
-                "aria-label": "Next panel",
-                onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, 1) : addMonths(panelDate, 1), mode),
-                children: "Next"
-              })
-            ]
+          /* @__PURE__ */ jsx("div", {
+            className: calendarTitleClass,
+            children: title
           }),
           /* @__PURE__ */ jsxs("div", {
             className: calendarModeClass,
@@ -182,6 +186,27 @@ function Header({
             ]
           })
         ]
+      }),
+      /* @__PURE__ */ jsx("button", {
+        type: "button",
+        className: calendarNavClass,
+        "aria-label": "Next panel",
+        onClick: () => setPanelDate(mode === "year" ? addYears(panelDate, 1) : addMonths(panelDate, 1), mode),
+        children: /* @__PURE__ */ jsx("svg", {
+          "aria-hidden": "true",
+          focusable: "false",
+          width: "16",
+          height: "16",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          children: /* @__PURE__ */ jsx("path", {
+            d: "m9 18 6-6-6-6"
+          })
+        })
       })
     ]
   });

package/dist/components/chat/Chat.d.ts

@@ -1,9 +1,17 @@
 import React from "react";
-import type { ChatBubbleProps, ChatComponent, ChatToolProps, ChatTypingProps } from "./Chat.types";
+import type { ChatBubbleProps, ChatComponent, ChatActionsProps, ChatScrollIndicatorProps, ChatToolProps, ChatTypingProps } from "./Chat.types";
 export declare const ChatAvatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const ChatHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const ChatBubble: React.ForwardRefExoticComponent<Omit<ChatBubbleProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
 export declare const ChatFooter: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatStatus: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatStatusItem: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ChatStatusValue: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const ChatActions: React.ForwardRefExoticComponent<Omit<ChatActionsProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatScroll: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatScrollBody: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatScrollTrack: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare const ChatScrollIndicator: React.ForwardRefExoticComponent<Omit<ChatScrollIndicatorProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
 export declare const ChatReasoning: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.DetailsHTMLAttributes<HTMLDetailsElement>, HTMLDetailsElement>, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
 export declare const ChatTool: React.ForwardRefExoticComponent<Omit<ChatToolProps, "ref"> & React.RefAttributes<HTMLDetailsElement>>;
 export declare const ChatToolHeader: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React.RefAttributes<HTMLElement>>;

package/dist/components/chat/Chat.types.d.ts

@@ -1,15 +1,33 @@
 import type { ComponentProps, ForwardRefExoticComponent, RefAttributes } from "react";
 export type ChatPlacement = "start" | "end";
+export type ChatTimeline = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24;
 export type ChatBubbleColor = "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error";
 export type ChatBubbleSize = "xs" | "sm" | "md" | "lg";
 export type ChatToolState = "pending" | "running" | "success" | "error";
 export interface ChatProps extends ComponentProps<"div"> {
     /** Position the turn at the start or end of the conversation row. */
     placement?: ChatPlacement;
+    /** Pair an assistant row with a scroll indicator (slots 1–24). */
+    timeline?: ChatTimeline;
+    "data-chat-tl"?: string | number;
 }
 export type ChatAvatarProps = ComponentProps<"div">;
 export type ChatHeaderProps = ComponentProps<"div">;
 export type ChatFooterProps = ComponentProps<"div">;
+export type ChatStatusProps = ComponentProps<"div">;
+export type ChatStatusItemProps = ComponentProps<"span">;
+export type ChatStatusValueProps = ComponentProps<"span">;
+export interface ChatActionsProps extends ComponentProps<"div"> {
+    /** Reveal actions on message hover or keyboard focus. */
+    hover?: boolean;
+}
+export type ChatScrollProps = ComponentProps<"div">;
+export type ChatScrollBodyProps = ComponentProps<"div">;
+export type ChatScrollTrackProps = ComponentProps<"div">;
+export interface ChatScrollIndicatorProps extends ComponentProps<"button"> {
+    targetId: string;
+    timeline: ChatTimeline;
+}
 export interface ChatBubbleProps extends ComponentProps<"div"> {
     /** Apply a semantic DuskMoon color to the bubble. */
     color?: ChatBubbleColor;
@@ -36,6 +54,14 @@ export type ChatComponent = ChatPartComponent<HTMLDivElement, ChatProps> & {
     Header: ChatPartComponent<HTMLDivElement, ChatHeaderProps>;
     Bubble: ChatPartComponent<HTMLDivElement, ChatBubbleProps>;
     Footer: ChatPartComponent<HTMLDivElement, ChatFooterProps>;
+    Status: ChatPartComponent<HTMLDivElement, ChatStatusProps>;
+    StatusItem: ChatPartComponent<HTMLSpanElement, ChatStatusItemProps>;
+    StatusValue: ChatPartComponent<HTMLSpanElement, ChatStatusValueProps>;
+    Actions: ChatPartComponent<HTMLDivElement, ChatActionsProps>;
+    Scroll: ChatPartComponent<HTMLDivElement, ChatScrollProps>;
+    ScrollBody: ChatPartComponent<HTMLDivElement, ChatScrollBodyProps>;
+    ScrollTrack: ChatPartComponent<HTMLDivElement, ChatScrollTrackProps>;
+    ScrollIndicator: ChatPartComponent<HTMLButtonElement, ChatScrollIndicatorProps>;
     Reasoning: ChatPartComponent<HTMLDetailsElement, ChatReasoningProps>;
     Tool: ChatPartComponent<HTMLDetailsElement, ChatToolProps>;
     ToolHeader: ChatPartComponent<HTMLElement, ChatToolHeaderProps>;

package/dist/components/chat/index.js

@@ -34,6 +34,15 @@ var chatAvatarClass = "chat-avatar";
 var chatHeaderClass = "chat-header";
 var chatBubbleBaseClass = "chat-bubble";
 var chatFooterClass = "chat-footer";
+var chatStatusClass = "chat-status";
+var chatStatusItemClass = "chat-status-item";
+var chatStatusValueClass = "chat-status-value";
+var chatActionsClass = "chat-actions";
+var chatActionsHoverClass = "chat-actions-hover";
+var chatScrollClass = "chat-scroll";
+var chatScrollBodyClass = "chat-scroll-body";
+var chatScrollTrackClass = "chat-scroll-track";
+var chatScrollIndicatorClass = "chat-scroll-indicator";
 var chatReasoningClass = "chat-reasoning";
 var chatToolBaseClass = "chat-tool";
 var chatToolHeaderClass = "chat-tool-header";
@@ -41,7 +50,6 @@ var chatToolStatusClass = "chat-tool-status";
 var chatToolCallClass = "chat-tool-call";
 var chatToolResultClass = "chat-tool-result";
 var chatTypingClass = "chat-typing";
-var chatStreamingCaretClass = "chat-streaming-caret";
 var chatBubbleFilledClass = "chat-bubble-filled";
 var chatBubbleStreamingClass = "chat-bubble-streaming";
 var chatPlacementClasses = {
@@ -121,7 +129,7 @@ var ChatBubble = forwardRef(({ color, size = "md", filled, streaming, className,
   children: [
     children,
     streaming ? /* @__PURE__ */ jsx("span", {
-      className: chatStreamingCaretClass,
+      className: "chat-bubble-content chat-bubble-streaming",
       "aria-hidden": "true"
     }) : null
   ]
@@ -133,6 +141,70 @@ var ChatFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ js
   className: cn(chatFooterClass, className)
 }));
 ChatFooter.displayName = "Chat.Footer";
+var ChatStatus = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatStatusClass, className)
+}));
+ChatStatus.displayName = "Chat.Status";
+var ChatStatusItem = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+  ...props,
+  ref,
+  className: cn(chatStatusItemClass, className)
+}));
+ChatStatusItem.displayName = "Chat.StatusItem";
+var ChatStatusValue = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("span", {
+  ...props,
+  ref,
+  className: cn(chatStatusValueClass, className)
+}));
+ChatStatusValue.displayName = "Chat.StatusValue";
+var ChatActions = forwardRef(({ hover, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatActionsClass, hover && chatActionsHoverClass, className)
+}));
+ChatActions.displayName = "Chat.Actions";
+var ChatScroll = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatScrollClass, className)
+}));
+ChatScroll.displayName = "Chat.Scroll";
+var ChatScrollBody = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatScrollBodyClass, className)
+}));
+ChatScrollBody.displayName = "Chat.ScrollBody";
+var ChatScrollTrack = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ...props,
+  ref,
+  className: cn(chatScrollTrackClass, className)
+}));
+ChatScrollTrack.displayName = "Chat.ScrollTrack";
+var ChatScrollIndicator = forwardRef(({ targetId, timeline, type = "button", className, onClick, ...props }, ref) => /* @__PURE__ */ jsx("button", {
+  ...props,
+  ref,
+  type,
+  "data-chat-target": targetId,
+  "data-chat-tl": timeline,
+  "aria-label": props["aria-label"] ?? (props["aria-labelledby"] ? undefined : `Jump to assistant reply ${timeline}`),
+  className: cn(chatScrollIndicatorClass, className),
+  onClick: (event) => {
+    onClick?.(event);
+    if (event.defaultPrevented)
+      return;
+    const scroller = event.currentTarget.closest(`.${chatScrollClass}`);
+    const target = Array.from(scroller?.querySelectorAll("[id]") ?? []).find((element) => element.id === targetId && element.closest(`.${chatScrollClass}`) === scroller);
+    if (!scroller || !target)
+      return;
+    const top = scroller.scrollTop + target.getBoundingClientRect().top - scroller.getBoundingClientRect().top;
+    const reducedMotion = scroller.ownerDocument.defaultView?.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
+    scroller.scrollTo({ top, behavior: reducedMotion ? "auto" : "smooth" });
+  }
+}));
+ChatScrollIndicator.displayName = "Chat.ScrollIndicator";
 var ChatReasoning = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("details", {
   ...props,
   ref,
@@ -185,9 +257,10 @@ var ChatTyping = forwardRef(({
   })
 }));
 ChatTyping.displayName = "Chat.Typing";
-var ChatRoot = forwardRef(({ placement = "start", className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+var ChatRoot = forwardRef(({ placement = "start", timeline, className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
   ...props,
   ref,
+  "data-chat-tl": timeline ?? props["data-chat-tl"],
   className: getChatClasses({ placement, className })
 }));
 ChatRoot.displayName = "Chat";
@@ -196,6 +269,14 @@ var Chat = Object.assign(ChatRoot, {
   Header: ChatHeader,
   Bubble: ChatBubble,
   Footer: ChatFooter,
+  Status: ChatStatus,
+  StatusItem: ChatStatusItem,
+  StatusValue: ChatStatusValue,
+  Actions: ChatActions,
+  Scroll: ChatScroll,
+  ScrollBody: ChatScrollBody,
+  ScrollTrack: ChatScrollTrack,
+  ScrollIndicator: ChatScrollIndicator,
   Reasoning: ChatReasoning,
   Tool: ChatTool,
   ToolHeader: ChatToolHeader,
@@ -206,11 +287,19 @@ var Chat = Object.assign(ChatRoot, {
 });
 export {
   Chat,
+  ChatActions,
   ChatAvatar,
   ChatBubble,
   ChatFooter,
   ChatHeader,
   ChatReasoning,
+  ChatScroll,
+  ChatScrollBody,
+  ChatScrollIndicator,
+  ChatScrollTrack,
+  ChatStatus,
+  ChatStatusItem,
+  ChatStatusValue,
   ChatTool,
   ChatToolCall,
   ChatToolHeader,

package/dist/components/color-picker/ColorPicker.types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import type { ComponentProps, ComponentPropsWithoutRef, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
 export type ColorPickerFormat = "hex" | "rgb" | "hsb";
 export type ColorPickerTrigger = "hover" | "click";
 export type ColorPickerSize = "small" | "middle" | "large" | "sm" | "md" | "lg";
@@ -20,6 +20,7 @@ export interface ColorPreset {
     colors: ColorValue[];
 }
 export interface ColorPickerProps extends Omit<ComponentPropsWithoutRef<"div">, "children" | "defaultValue" | "onChange"> {
+    triggerProps?: ComponentProps<"button">;
     value?: ColorValue;
     defaultValue?: ColorValue;
     format?: ColorPickerFormat;

package/dist/components/color-picker/index.js

@@ -1,7 +1,14 @@
 "use client";
 
 // src/components/color-picker/ColorPicker.tsx
-import { forwardRef, useState } from "react";
+import {
+  forwardRef,
+  useEffect,
+  useId,
+  useImperativeHandle,
+  useRef,
+  useState
+} from "react";
 
 // ../../node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -102,7 +109,7 @@ function colorToRgb(value) {
   if (isHsb(value))
     return hsbToRgb(value);
   const normalized = value.trim();
-  if (normalized.startsWith("#")) {
+  if (/^#(?:[a-f\d]{3}|[a-f\d]{6})$/i.test(normalized)) {
     const hex = normalized.slice(1);
     const fullHex = hex.length === 3 ? hex.split("").map((item) => item + item).join("") : hex.padEnd(6, "0").slice(0, 6);
     return {
@@ -118,17 +125,44 @@ function colorToRgb(value) {
   }
   return { r: 0, g: 0, b: 0 };
 }
+function colorToHsb(value) {
+  if (isHsb(value))
+    return {
+      ...value,
+      h: (value.h % 360 + 360) % 360,
+      s: clamp(value.s, 0, 100),
+      b: clamp(value.b, 0, 100)
+    };
+  const rgb = colorToRgb(value);
+  const [r, g, b] = [rgb.r, rgb.g, rgb.b].map((part) => Number.isFinite(part) ? clamp(part, 0, 255) / 255 : 0);
+  const max = Math.max(r, g, b);
+  const delta = max - Math.min(r, g, b);
+  const hue = delta === 0 ? 0 : max === r ? (g - b) / delta % 6 : max === g ? (b - r) / delta + 2 : (r - g) / delta + 4;
+  return {
+    h: (hue * 60 + 360) % 360,
+    s: max === 0 ? 0 : delta / max * 100,
+    b: max * 100,
+    a: rgb.a
+  };
+}
 function colorToCss(value, format) {
   const rgb = colorToRgb(value);
   if (format === "rgb") {
     return rgb.a !== undefined ? `rgba(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)}, ${rgb.a})` : `rgb(${Math.round(rgb.r)}, ${Math.round(rgb.g)}, ${Math.round(rgb.b)})`;
   }
-  if (format === "hsb" && isHsb(value)) {
-    return `hsb(${Math.round(value.h)}, ${Math.round(value.s)}%, ${Math.round(value.b)}%)`;
+  if (format === "hsb") {
+    const hsb = colorToHsb(value);
+    return `hsb(${Math.round(hsb.h)}, ${Math.round(hsb.s)}%, ${Math.round(hsb.b)}%)`;
   }
   return `#${componentToHex(rgb.r)}${componentToHex(rgb.g)}${componentToHex(rgb.b)}`;
 }
 function parseInput(value, format) {
+  if (format === "hsb") {
+    const match = value.match(/^hsb\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*\)$/i);
+    if (match)
+      return { h: Number(match[1]), s: Number(match[2]), b: Number(match[3]) };
+    return value;
+  }
   if (format === "rgb") {
     const rgb = colorToRgb(value);
     return {
@@ -156,9 +190,14 @@ var ColorPicker = forwardRef(({
   showText,
   size = "middle",
   trigger = "click",
+  triggerProps,
   value,
   ...props
 }, ref) => {
+  const rootRef = useRef(null);
+  const triggerRef = useRef(null);
+  const panelId = useId();
+  useImperativeHandle(ref, () => rootRef.current, []);
   const valueControlled = value !== undefined;
   const openControlled = open !== undefined;
   const [innerValue, setInnerValue] = useState(defaultValue);
@@ -166,6 +205,16 @@ var ColorPicker = forwardRef(({
   const currentValue = valueControlled ? value : innerValue;
   const visible = openControlled ? Boolean(open) : innerOpen;
   const cssValue = colorToCss(currentValue, format);
+  const [lastSelection, setLastSelection] = useState(() => colorToHsb(currentValue));
+  const selection = colorToHsb(currentValue);
+  if (selection.s === 0 || selection.b === 0)
+    selection.h = lastSelection.h;
+  if (selection.b === 0)
+    selection.s = lastSelection.s;
+  if (selection.h === 0 && lastSelection.h === 360)
+    selection.h = 360;
+  const pointerId = useRef(null);
+  const instructionsId = useId();
   function setVisible(nextOpen) {
     if (disabled)
       return;
@@ -174,21 +223,163 @@ var ColorPicker = forwardRef(({
     }
     onOpenChange?.(nextOpen);
   }
-  function emitChange(nextValue) {
+  useEffect(() => {
+    if (!visible)
+      return;
+    function dismissOutside(event) {
+      if (!rootRef.current?.contains(event.target))
+        setVisible(false);
+    }
+    function dismissEscape(event) {
+      if (event.key === "Escape" && rootRef.current?.contains(event.target)) {
+        event.preventDefault();
+        setVisible(false);
+        triggerRef.current?.focus();
+      }
+    }
+    document.addEventListener("pointerdown", dismissOutside);
+    document.addEventListener("keydown", dismissEscape);
+    return () => {
+      document.removeEventListener("pointerdown", dismissOutside);
+      document.removeEventListener("keydown", dismissEscape);
+    };
+  });
+  function emitChange(nextValue, complete = true) {
+    if (disabled)
+      return;
     const css = colorToCss(nextValue, format);
     if (!valueControlled) {
       setInnerValue(nextValue);
     }
     onChange?.(nextValue, css);
-    onChangeComplete?.(nextValue, css);
+    if (complete)
+      onChangeComplete?.(nextValue, css);
+  }
+  function selectColor(next, complete = true) {
+    if (disabled)
+      return;
+    setLastSelection(next);
+    emitChange(format === "hex" ? colorToCss(next, "hex") : format === "rgb" ? hsbToRgb(next) : next, complete);
+  }
+  function selectPosition(event, complete = false) {
+    const bounds = event.currentTarget.getBoundingClientRect();
+    if (disabled || bounds.width === 0 || bounds.height === 0)
+      return;
+    selectColor({
+      ...selection,
+      s: clamp((event.clientX - bounds.left) / bounds.width * 100, 0, 100),
+      b: clamp(100 - (event.clientY - bounds.top) / bounds.height * 100, 0, 100)
+    }, complete);
   }
   const panel = /* @__PURE__ */ jsxs("div", {
+    id: panelId,
     className: colorPickerPanelClass,
+    role: "dialog",
+    "aria-label": "Choose color",
     children: [
+      /* @__PURE__ */ jsx("div", {
+        className: "color-picker-area",
+        role: "slider",
+        "aria-label": "Saturation and brightness",
+        "aria-valuemin": 0,
+        "aria-valuemax": 100,
+        "aria-valuenow": Math.round(selection.s),
+        "aria-valuetext": `Saturation ${Math.round(selection.s)}%, brightness ${Math.round(selection.b)}%`,
+        "aria-describedby": instructionsId,
+        "aria-disabled": Boolean(disabled),
+        tabIndex: disabled ? -1 : 0,
+        style: { "--color-picker-hue": `${selection.h}` },
+        onPointerDown: (event) => {
+          if (disabled || event.button !== 0)
+            return;
+          event.preventDefault();
+          event.currentTarget.focus();
+          pointerId.current = event.pointerId;
+          event.currentTarget.setPointerCapture?.(event.pointerId);
+          selectPosition(event);
+        },
+        onPointerMove: (event) => {
+          if (pointerId.current === event.pointerId)
+            selectPosition(event);
+        },
+        onPointerUp: (event) => {
+          if (pointerId.current !== event.pointerId)
+            return;
+          selectPosition(event, true);
+          pointerId.current = null;
+          event.currentTarget.releasePointerCapture?.(event.pointerId);
+        },
+        onPointerCancel: () => {
+          pointerId.current = null;
+        },
+        onLostPointerCapture: () => {
+          pointerId.current = null;
+        },
+        onKeyDown: (event) => {
+          if (disabled)
+            return;
+          const step = event.shiftKey ? 10 : 1;
+          let { s, b } = selection;
+          switch (event.key) {
+            case "ArrowLeft":
+              s -= step;
+              break;
+            case "ArrowRight":
+              s += step;
+              break;
+            case "ArrowDown":
+              b -= step;
+              break;
+            case "ArrowUp":
+              b += step;
+              break;
+            case "Home":
+              s = 0;
+              break;
+            case "End":
+              s = 100;
+              break;
+            default:
+              return;
+          }
+          event.preventDefault();
+          selectColor({
+            ...selection,
+            s: clamp(s, 0, 100),
+            b: clamp(b, 0, 100)
+          });
+        },
+        children: /* @__PURE__ */ jsx("span", {
+          className: "color-picker-area-indicator",
+          "aria-hidden": "true",
+          style: {
+            left: `${selection.s}%`,
+            top: `${100 - selection.b}%`,
+            backgroundColor: colorToCss(currentValue, "hex")
+          }
+        })
+      }),
+      /* @__PURE__ */ jsx("span", {
+        id: instructionsId,
+        className: "color-picker-instructions",
+        children: "Left/right: saturation. Up/down: brightness. Shift: larger steps."
+      }),
+      /* @__PURE__ */ jsx("input", {
+        className: "color-picker-hue",
+        type: "range",
+        "aria-label": "Hue",
+        min: 0,
+        max: 360,
+        step: 1,
+        value: selection.h,
+        disabled,
+        onChange: (event) => selectColor({ ...selection, h: Number(event.currentTarget.value) })
+      }),
       /* @__PURE__ */ jsx("input", {
         className: colorPickerInputClass,
         "aria-label": "Color value",
-        value: cssValue,
+        value: format === "hex" && typeof currentValue === "string" ? currentValue : cssValue,
+        disabled,
         onChange: (event) => emitChange(parseInput(event.currentTarget.value, format))
       }),
       presets?.length ? /* @__PURE__ */ jsx("div", {
@@ -206,6 +397,7 @@ var ColorPicker = forwardRef(({
                 const presetCss = colorToCss(presetColor, format);
                 return /* @__PURE__ */ jsx("button", {
                   type: "button",
+                  disabled,
                   "aria-label": `Select color ${presetCss}`,
                   className: colorPickerSwatchClass,
                   style: {
@@ -222,7 +414,7 @@ var ColorPicker = forwardRef(({
   });
   return /* @__PURE__ */ jsxs("div", {
     ...props,
-    ref,
+    ref: rootRef,
     className: getColorPickerClasses({
       size,
       trigger,
@@ -241,9 +433,14 @@ var ColorPicker = forwardRef(({
     },
     children: [
       /* @__PURE__ */ jsx("button", {
+        ...triggerProps,
+        ref: triggerRef,
         type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": visible,
+        "aria-controls": visible ? panelId : undefined,
         className: colorPickerSwatchClass,
-        "aria-label": "Open color picker",
+        "aria-label": triggerProps?.["aria-label"] ?? "Open color picker",
         disabled,
         style: { backgroundColor: colorToCss(currentValue, "hex") },
         onClick: () => {

package/dist/components/console-page/ConsolePage.d.ts

@@ -0,0 +1,2 @@
+import type { ConsolePageComponent } from "./ConsolePage.types";
+export declare const ConsolePage: ConsolePageComponent;

package/dist/components/console-page/ConsolePage.types.d.ts

@@ -0,0 +1,29 @@
+import type { ComponentProps, ForwardRefExoticComponent, ReactNode, RefAttributes } from "react";
+import type { ConsolePageSidebarState } from "../../classes/console-page";
+export interface ConsolePageProps extends Omit<ComponentProps<"div">, "ref"> {
+    sidebarState?: ConsolePageSidebarState;
+    sidebarMode?: ConsolePageSidebarState;
+    appBar?: ReactNode;
+    sidebar?: ReactNode;
+    sidebarHeader?: ReactNode;
+    sidebarFooter?: ReactNode;
+}
+export type ConsolePageSidebarMode = ConsolePageSidebarState;
+export type ConsolePageFrameProps = Omit<ComponentProps<"div">, "ref">;
+export type ConsolePageAppbarProps = Omit<ComponentProps<"header">, "ref">;
+export type ConsolePageSidebarProps = Omit<ComponentProps<"aside">, "ref">;
+export type ConsolePageSidebarBodyProps = Omit<ComponentProps<"nav">, "ref">;
+export type ConsolePageMainProps = Omit<ComponentProps<"main">, "ref">;
+export type ConsolePageButtonProps = Omit<ComponentProps<"button">, "ref">;
+export interface ConsolePageComponent extends ForwardRefExoticComponent<ConsolePageProps & RefAttributes<HTMLDivElement>> {
+    Frame: ForwardRefExoticComponent<ConsolePageFrameProps & RefAttributes<HTMLDivElement>>;
+    Appbar: ForwardRefExoticComponent<ConsolePageAppbarProps & RefAttributes<HTMLElement>>;
+    Sidebar: ForwardRefExoticComponent<ConsolePageSidebarProps & RefAttributes<HTMLElement>>;
+    SidebarHeader: ForwardRefExoticComponent<ConsolePageFrameProps & RefAttributes<HTMLDivElement>>;
+    SidebarBody: ForwardRefExoticComponent<ConsolePageSidebarBodyProps & RefAttributes<HTMLElement>>;
+    SidebarFooter: ForwardRefExoticComponent<ConsolePageFrameProps & RefAttributes<HTMLDivElement>>;
+    Main: ForwardRefExoticComponent<ConsolePageMainProps & RefAttributes<HTMLElement>>;
+    SidebarToggle: ForwardRefExoticComponent<ConsolePageButtonProps & RefAttributes<HTMLButtonElement>>;
+    MobileTrigger: ForwardRefExoticComponent<ConsolePageButtonProps & RefAttributes<HTMLButtonElement>>;
+    MobileMenu: ForwardRefExoticComponent<ConsolePageSidebarBodyProps & RefAttributes<HTMLElement>>;
+}

package/dist/components/console-page/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./ConsolePage";
+export * from "./ConsolePage.types";