@d4gger/design-system 3.0.1 → 4.0.0

package/dist/components/commentThread/CommentThread.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentThread.d.cts","sourceRoot":"","sources":["../../../src/components/commentThread/CommentThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAEhG,QAAA,MAAM,OAAO,kFAAipB,CAAA;AAG9pB,QAAA,MAAM,OAAO,6GAIX,CAAA;AAEF,QAAA,MAAM,SAAS,6GAA0R,CAAA;AAEzS,QAAA,MAAM,QAAQ,uFAA6vB,CAAA;AAE3wB,QAAA,MAAM,MAAM,6GAAuQ,CAAA;AAEnR,QAAA,MAAM,IAAI,+FAAmL,CAAA;AAE7L,QAAA,MAAM,aAAa;;;;;;;CAA+E,CAAA;AAClG,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,iBAAiB,EAAE,SAAS,EAAE,CAAA;AAClG,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"CommentThread.d.cts","sourceRoot":"","sources":["../../../src/components/commentThread/CommentThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE9H,QAAA,MAAM,OAAO,kFAAqqB,CAAA;AAGlrB,QAAA,MAAM,OAAO,qFASX,CAAA;AAEF,QAAA,MAAM,SAAS,uFAA4S,CAAA;AAE3T,QAAA,MAAM,QAAQ,uFAgBZ,CAAA;AAEF,QAAA,MAAM,MAAM,6GAAuQ,CAAA;AAEnR,QAAA,MAAM,IAAI,+FAAmL,CAAA;AAE7L,QAAA,MAAM,aAAa;;;;;;;CAA+E,CAAA;AAClG,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,iBAAiB,EAAE,SAAS,EAAE,CAAA;AAClG,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,oBAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/components/commentThread/CommentThread.d.mts

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props.js';
+import type { CommentProps, CommentThreadRootProps, ComposerProps, RepliesProps, TombstoneProps } from './commentThread.props.js';
 declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLElement>>;
-declare const Replies: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const Tombstone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Replies: React.ForwardRefExoticComponent<RepliesProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tombstone: React.ForwardRefExoticComponent<TombstoneProps & React.RefAttributes<HTMLDivElement>>;
 declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLFormElement>>;
 declare const Locked: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const Root: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>>;
 declare const CommentThread: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>> & {
     Root: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>>;
     Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLElement>>;
-    Replies: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Tombstone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Replies: React.ForwardRefExoticComponent<RepliesProps & React.RefAttributes<HTMLDivElement>>;
+    Tombstone: React.ForwardRefExoticComponent<TombstoneProps & React.RefAttributes<HTMLDivElement>>;
     Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLFormElement>>;
     Locked: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
 export { CommentThread, Comment, Composer, Locked, Replies, Root as CommentThreadRoot, Tombstone };
-export type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props.js';
+export type { CommentProps, CommentThreadRootProps, ComposerProps, ComposerInputContext, RepliesProps, TombstoneProps } from './commentThread.props.js';
 //# sourceMappingURL=CommentThread.d.mts.map

package/dist/components/commentThread/CommentThread.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentThread.d.mts","sourceRoot":"","sources":["../../../src/components/commentThread/CommentThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAEhG,QAAA,MAAM,OAAO,kFAAipB,CAAA;AAG9pB,QAAA,MAAM,OAAO,6GAIX,CAAA;AAEF,QAAA,MAAM,SAAS,6GAA0R,CAAA;AAEzS,QAAA,MAAM,QAAQ,uFAA6vB,CAAA;AAE3wB,QAAA,MAAM,MAAM,6GAAuQ,CAAA;AAEnR,QAAA,MAAM,IAAI,+FAAmL,CAAA;AAE7L,QAAA,MAAM,aAAa;;;;;;;CAA+E,CAAA;AAClG,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,iBAAiB,EAAE,SAAS,EAAE,CAAA;AAClG,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"CommentThread.d.mts","sourceRoot":"","sources":["../../../src/components/commentThread/CommentThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE9H,QAAA,MAAM,OAAO,kFAAqqB,CAAA;AAGlrB,QAAA,MAAM,OAAO,qFASX,CAAA;AAEF,QAAA,MAAM,SAAS,uFAA4S,CAAA;AAE3T,QAAA,MAAM,QAAQ,uFAgBZ,CAAA;AAEF,QAAA,MAAM,MAAM,6GAAuQ,CAAA;AAEnR,QAAA,MAAM,IAAI,+FAAmL,CAAA;AAE7L,QAAA,MAAM,aAAa;;;;;;;CAA+E,CAAA;AAClG,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,iBAAiB,EAAE,SAAS,EAAE,CAAA;AAClG,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,oBAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/components/commentThread/CommentThread.d.ts

@@ -1,19 +1,19 @@
 import * as React from 'react';
-import type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props.js';
+import type { CommentProps, CommentThreadRootProps, ComposerProps, RepliesProps, TombstoneProps } from './commentThread.props.js';
 declare const Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLElement>>;
-declare const Replies: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-declare const Tombstone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const Replies: React.ForwardRefExoticComponent<RepliesProps & React.RefAttributes<HTMLDivElement>>;
+declare const Tombstone: React.ForwardRefExoticComponent<TombstoneProps & React.RefAttributes<HTMLDivElement>>;
 declare const Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLFormElement>>;
 declare const Locked: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 declare const Root: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>>;
 declare const CommentThread: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>> & {
     Root: React.ForwardRefExoticComponent<CommentThreadRootProps & React.RefAttributes<HTMLDivElement>>;
     Comment: React.ForwardRefExoticComponent<CommentProps & React.RefAttributes<HTMLElement>>;
-    Replies: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
-    Tombstone: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+    Replies: React.ForwardRefExoticComponent<RepliesProps & React.RefAttributes<HTMLDivElement>>;
+    Tombstone: React.ForwardRefExoticComponent<TombstoneProps & React.RefAttributes<HTMLDivElement>>;
     Composer: React.ForwardRefExoticComponent<ComposerProps & React.RefAttributes<HTMLFormElement>>;
     Locked: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 };
 export { CommentThread, Comment, Composer, Locked, Replies, Root as CommentThreadRoot, Tombstone };
-export type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props.js';
+export type { CommentProps, CommentThreadRootProps, ComposerProps, ComposerInputContext, RepliesProps, TombstoneProps } from './commentThread.props.js';
 //# sourceMappingURL=CommentThread.d.ts.map

package/dist/components/commentThread/CommentThread.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommentThread.d.ts","sourceRoot":"","sources":["../../../src/components/commentThread/CommentThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAEhG,QAAA,MAAM,OAAO,kFAAipB,CAAA;AAG9pB,QAAA,MAAM,OAAO,6GAIX,CAAA;AAEF,QAAA,MAAM,SAAS,6GAA0R,CAAA;AAEzS,QAAA,MAAM,QAAQ,uFAA6vB,CAAA;AAE3wB,QAAA,MAAM,MAAM,6GAAuQ,CAAA;AAEnR,QAAA,MAAM,IAAI,+FAAmL,CAAA;AAE7L,QAAA,MAAM,aAAa;;;;;;;CAA+E,CAAA;AAClG,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,iBAAiB,EAAE,SAAS,EAAE,CAAA;AAClG,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA"}
+{"version":3,"file":"CommentThread.d.ts","sourceRoot":"","sources":["../../../src/components/commentThread/CommentThread.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE9H,QAAA,MAAM,OAAO,kFAAqqB,CAAA;AAGlrB,QAAA,MAAM,OAAO,qFASX,CAAA;AAEF,QAAA,MAAM,SAAS,uFAA4S,CAAA;AAE3T,QAAA,MAAM,QAAQ,uFAgBZ,CAAA;AAEF,QAAA,MAAM,MAAM,6GAAuQ,CAAA;AAEnR,QAAA,MAAM,IAAI,+FAAmL,CAAA;AAE7L,QAAA,MAAM,aAAa;;;;;;;CAA+E,CAAA;AAClG,OAAO,EAAE,aAAa,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,IAAI,iBAAiB,EAAE,SAAS,EAAE,CAAA;AAClG,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,oBAAoB,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/components/commentThread/CommentThread.js

@@ -1,38 +1,66 @@
 import * as React from "react";
 import classNames from "classnames";
+import { Button } from "../button/Button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-const Comment = React.forwardRef(({ author, avatarSrc, badge, dateTime, timeLabel, actions, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("article", { ...props, ref, className: classNames("dsx-comment-thread__comment", className), children: [
+const Comment = React.forwardRef(({ author, avatarSrc, badge, dateTime, timeLabel, actions, metadata, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("article", { ...props, ref, className: classNames("dsx-comment-thread__comment", className), children: [
   /* @__PURE__ */ jsx("div", { className: "dsx-comment-thread__avatar", children: avatarSrc ? /* @__PURE__ */ jsx("img", { src: avatarSrc, alt: "" }) : author.split(/\s+/).map((part) => part[0]).join("").slice(0, 2).toUpperCase() }),
   /* @__PURE__ */ jsxs("header", { children: [
     /* @__PURE__ */ jsx("strong", { children: author }),
     badge,
-    /* @__PURE__ */ jsx("time", { dateTime, children: timeLabel })
+    /* @__PURE__ */ jsx("time", { dateTime, children: timeLabel }),
+    metadata
   ] }),
   /* @__PURE__ */ jsx("div", { className: "dsx-comment-thread__body", children }),
   actions ? /* @__PURE__ */ jsx("div", { className: "dsx-comment-thread__actions", children: actions }) : null
 ] }));
 Comment.displayName = "CommentThreadComment";
 const ReplyDepthContext = React.createContext(0);
-const Replies = React.forwardRef(({ className, children, ...props }, ref) => {
+const Replies = React.forwardRef(({ className, children, limit, expanded: expandedProp, onExpandedChange, moreLabel, ...props }, ref) => {
+  const [localExpanded, setLocalExpanded] = React.useState(false);
+  const expanded = expandedProp ?? localExpanded;
+  const all = React.Children.toArray(children);
+  const visible = limit == null || expanded ? all : all.slice(0, Math.max(0, limit));
+  const remaining = all.length - visible.length;
   const depth = React.useContext(ReplyDepthContext);
   if (depth >= 1) throw new Error("CommentThread supports one reply level.");
-  return /* @__PURE__ */ jsx(ReplyDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx("div", { ...props, ref, role: props.role ?? "group", className: classNames("dsx-comment-thread__replies", className), children }) });
+  return /* @__PURE__ */ jsx(ReplyDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsxs("div", { ...props, ref, role: props.role ?? "group", className: classNames("dsx-comment-thread__replies", className), children: [
+    visible,
+    remaining > 0 ? /* @__PURE__ */ jsx(Button, { type: "button", size: "lg", variant: "ghost", onClick: () => {
+      setLocalExpanded(true);
+      onExpandedChange?.(true);
+    }, children: moreLabel?.(remaining) ?? `Show ${remaining} more replies` }) : null
+  ] }) });
 });
 Replies.displayName = "CommentThreadReplies";
-const Tombstone = React.forwardRef(({ children = "Comment removed", className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ...props, ref, className: classNames("dsx-comment-thread__tombstone", className), role: "status", "data-removed": "true", children }));
+const Tombstone = React.forwardRef(({ children, state = "removed", className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ...props, ref, className: classNames("dsx-comment-thread__tombstone", className), role: "status", "data-removed": "true", "data-state": state, children: children ?? `Comment ${state}` }));
 Tombstone.displayName = "CommentThreadTombstone";
-const Composer = React.forwardRef(({ value, onValueChange, onSubmit, maxLength = 2e3, submitting, locked, className, children, ...props }, ref) => /* @__PURE__ */ jsxs("form", { ...props, ref, className: classNames("dsx-comment-thread__composer", className), "aria-busy": submitting || void 0, onSubmit: (event) => {
-  event.preventDefault();
-  if (!locked && !submitting && value.trim()) onSubmit?.();
-}, children: [
-  /* @__PURE__ */ jsx("textarea", { value, maxLength, disabled: locked || submitting, onChange: (event) => onValueChange(event.currentTarget.value), "aria-label": "Comment" }),
-  /* @__PURE__ */ jsxs("span", { "aria-live": "polite", children: [
-    value.length,
-    "/",
-    maxLength
-  ] }),
-  children ?? /* @__PURE__ */ jsx("button", { type: "submit", disabled: locked || submitting || !value.trim(), children: submitting ? "Submitting\u2026" : "Comment" })
-] }));
+const Composer = React.forwardRef(({ value, onValueChange, onSubmit, maxLength = 2e3, submitting, locked, label = "Comment", error, status, input, actions, className, children, ...props }, ref) => {
+  const id = React.useId();
+  const countId = `${id}-count`;
+  const errorId = `${id}-error`;
+  const statusId = `${id}-status`;
+  const invalid = Boolean(error) || value.length > maxLength;
+  const disabled = Boolean(locked || submitting);
+  const describedBy = [countId, error ? errorId : "", status ? statusId : ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("form", { ...props, ref, className: classNames("dsx-comment-thread__composer", className), "aria-busy": submitting || void 0, onSubmit: (event) => {
+    event.preventDefault();
+    if (!disabled && !invalid && value.trim()) onSubmit?.();
+  }, children: [
+    /* @__PURE__ */ jsx("label", { id: `${id}-label`, htmlFor: id, children: label }),
+    input ? input({ id, value, onValueChange, maxLength, disabled, describedBy, invalid }) : /* @__PURE__ */ jsx("textarea", { id, value, maxLength, disabled, onChange: (event) => onValueChange(event.currentTarget.value), "aria-invalid": invalid || void 0, "aria-describedby": describedBy }),
+    /* @__PURE__ */ jsxs("span", { id: countId, className: "dsx-comment-thread__count", "aria-live": "polite", children: [
+      value.length,
+      "/",
+      maxLength
+    ] }),
+    error ? /* @__PURE__ */ jsx("div", { id: errorId, role: "alert", children: error }) : null,
+    status ? /* @__PURE__ */ jsx("div", { id: statusId, role: "status", children: status }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "dsx-comment-thread__actions", children: [
+      actions,
+      children ?? /* @__PURE__ */ jsx(Button, { className: "dsx-comment-thread__submit", type: "submit", size: "lg", disabled: disabled || invalid || !value.trim(), children: submitting ? "Submitting\u2026" : "Comment" })
+    ] })
+  ] });
+});
 Composer.displayName = "CommentThreadComposer";
 const Locked = React.forwardRef(({ children = "Comments are locked", className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ...props, ref, className: classNames("dsx-comment-thread__locked", className), role: "status", children }));
 Locked.displayName = "CommentThreadLocked";

package/dist/components/commentThread/CommentThread.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/commentThread/CommentThread.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\n\nimport type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props'\n\nconst Comment = React.forwardRef<HTMLElement, CommentProps>(({ author, avatarSrc, badge, dateTime, timeLabel, actions, className, children, ...props }, ref) => <article {...props} ref={ref} className={classNames('dsx-comment-thread__comment', className)}><div className=\"dsx-comment-thread__avatar\">{avatarSrc ? <img src={avatarSrc} alt=\"\" /> : author.split(/\\s+/).map((part) => part[0]).join('').slice(0, 2).toUpperCase()}</div><header><strong>{author}</strong>{badge}<time dateTime={dateTime}>{timeLabel}</time></header><div className=\"dsx-comment-thread__body\">{children}</div>{actions ? <div className=\"dsx-comment-thread__actions\">{actions}</div> : null}</article>)\nComment.displayName = 'CommentThreadComment'\nconst ReplyDepthContext = React.createContext(0)\nconst Replies = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, children, ...props }, ref) => {\n  const depth = React.useContext(ReplyDepthContext)\n  if (depth >= 1) throw new Error('CommentThread supports one reply level.')\n  return <ReplyDepthContext.Provider value={depth + 1}><div {...props} ref={ref} role={props.role ?? 'group'} className={classNames('dsx-comment-thread__replies', className)}>{children}</div></ReplyDepthContext.Provider>\n})\nReplies.displayName = 'CommentThreadReplies'\nconst Tombstone = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ children = 'Comment removed', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__tombstone', className)} role=\"status\" data-removed=\"true\">{children}</div>)\nTombstone.displayName = 'CommentThreadTombstone'\nconst Composer = React.forwardRef<HTMLFormElement, ComposerProps>(({ value, onValueChange, onSubmit, maxLength = 2000, submitting, locked, className, children, ...props }, ref) => <form {...props} ref={ref} className={classNames('dsx-comment-thread__composer', className)} aria-busy={submitting || undefined} onSubmit={(event) => { event.preventDefault(); if (!locked && !submitting && value.trim()) onSubmit?.() }}><textarea value={value} maxLength={maxLength} disabled={locked || submitting} onChange={(event) => onValueChange(event.currentTarget.value)} aria-label=\"Comment\"/><span aria-live=\"polite\">{value.length}/{maxLength}</span>{children ?? <button type=\"submit\" disabled={locked || submitting || !value.trim()}>{submitting ? 'Submitting\u2026' : 'Comment'}</button>}</form>)\nComposer.displayName = 'CommentThreadComposer'\nconst Locked = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ children = 'Comments are locked', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__locked', className)} role=\"status\">{children}</div>)\nLocked.displayName = 'CommentThreadLocked'\nconst Root = React.forwardRef<HTMLDivElement, CommentThreadRootProps>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread', className)} />)\nRoot.displayName = 'CommentThread'\nconst CommentThread = Object.assign(Root, { Root, Comment, Replies, Tombstone, Composer, Locked })\nexport { CommentThread, Comment, Composer, Locked, Replies, Root as CommentThreadRoot, Tombstone }\nexport type { CommentProps, CommentThreadRootProps, ComposerProps } from './commentThread.props'\n"],
-  "mappings": "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",
+  "sourcesContent": ["import * as React from 'react'\nimport classNames from 'classnames'\nimport { Button } from '../button/Button'\n\nimport type { CommentProps, CommentThreadRootProps, ComposerProps, RepliesProps, TombstoneProps } from './commentThread.props'\n\nconst Comment = React.forwardRef<HTMLElement, CommentProps>(({ author, avatarSrc, badge, dateTime, timeLabel, actions, metadata, className, children, ...props }, ref) => <article {...props} ref={ref} className={classNames('dsx-comment-thread__comment', className)}><div className=\"dsx-comment-thread__avatar\">{avatarSrc ? <img src={avatarSrc} alt=\"\" /> : author.split(/\\s+/).map((part) => part[0]).join('').slice(0, 2).toUpperCase()}</div><header><strong>{author}</strong>{badge}<time dateTime={dateTime}>{timeLabel}</time>{metadata}</header><div className=\"dsx-comment-thread__body\">{children}</div>{actions ? <div className=\"dsx-comment-thread__actions\">{actions}</div> : null}</article>)\nComment.displayName = 'CommentThreadComment'\nconst ReplyDepthContext = React.createContext(0)\nconst Replies = React.forwardRef<HTMLDivElement, RepliesProps>(({ className, children, limit, expanded: expandedProp, onExpandedChange, moreLabel, ...props }, ref) => {\n  const [localExpanded, setLocalExpanded] = React.useState(false)\n  const expanded = expandedProp ?? localExpanded\n  const all = React.Children.toArray(children)\n  const visible = limit == null || expanded ? all : all.slice(0, Math.max(0, limit))\n  const remaining = all.length - visible.length\n  const depth = React.useContext(ReplyDepthContext)\n  if (depth >= 1) throw new Error('CommentThread supports one reply level.')\n  return <ReplyDepthContext.Provider value={depth + 1}><div {...props} ref={ref} role={props.role ?? 'group'} className={classNames('dsx-comment-thread__replies', className)}>{visible}{remaining > 0 ? <Button type=\"button\" size=\"lg\" variant=\"ghost\" onClick={() => { setLocalExpanded(true); onExpandedChange?.(true) }}>{moreLabel?.(remaining) ?? `Show ${remaining} more replies`}</Button> : null}</div></ReplyDepthContext.Provider>\n})\nReplies.displayName = 'CommentThreadReplies'\nconst Tombstone = React.forwardRef<HTMLDivElement, TombstoneProps>(({ children, state = 'removed', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__tombstone', className)} role=\"status\" data-removed=\"true\" data-state={state}>{children ?? `Comment ${state}`}</div>)\nTombstone.displayName = 'CommentThreadTombstone'\nconst Composer = React.forwardRef<HTMLFormElement, ComposerProps>(({ value, onValueChange, onSubmit, maxLength = 2000, submitting, locked, label = 'Comment', error, status, input, actions, className, children, ...props }, ref) => {\n  const id = React.useId()\n  const countId = `${id}-count`\n  const errorId = `${id}-error`\n  const statusId = `${id}-status`\n  const invalid = Boolean(error) || value.length > maxLength\n  const disabled = Boolean(locked || submitting)\n  const describedBy = [countId, error ? errorId : '', status ? statusId : ''].filter(Boolean).join(' ')\n  return <form {...props} ref={ref} className={classNames('dsx-comment-thread__composer', className)} aria-busy={submitting || undefined} onSubmit={event => { event.preventDefault(); if (!disabled && !invalid && value.trim()) onSubmit?.() }}>\n    <label id={`${id}-label`} htmlFor={id}>{label}</label>\n    {input ? input({ id, value, onValueChange, maxLength, disabled, describedBy, invalid }) : <textarea id={id} value={value} maxLength={maxLength} disabled={disabled} onChange={event => onValueChange(event.currentTarget.value)} aria-invalid={invalid || undefined} aria-describedby={describedBy} />}\n    <span id={countId} className=\"dsx-comment-thread__count\" aria-live=\"polite\">{value.length}/{maxLength}</span>\n    {error ? <div id={errorId} role=\"alert\">{error}</div> : null}\n    {status ? <div id={statusId} role=\"status\">{status}</div> : null}\n    <div className=\"dsx-comment-thread__actions\">{actions}{children ?? <Button className=\"dsx-comment-thread__submit\" type=\"submit\" size=\"lg\" disabled={disabled || invalid || !value.trim()}>{submitting ? 'Submitting\u2026' : 'Comment'}</Button>}</div>\n  </form>\n})\nComposer.displayName = 'CommentThreadComposer'\nconst Locked = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ children = 'Comments are locked', className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread__locked', className)} role=\"status\">{children}</div>)\nLocked.displayName = 'CommentThreadLocked'\nconst Root = React.forwardRef<HTMLDivElement, CommentThreadRootProps>(({ className, ...props }, ref) => <div {...props} ref={ref} className={classNames('dsx-comment-thread', className)} />)\nRoot.displayName = 'CommentThread'\nconst CommentThread = Object.assign(Root, { Root, Comment, Replies, Tombstone, Composer, Locked })\nexport { CommentThread, Comment, Composer, Locked, Replies, Root as CommentThreadRoot, Tombstone }\nexport type { CommentProps, CommentThreadRootProps, ComposerProps, ComposerInputContext, RepliesProps, TombstoneProps } from './commentThread.props'\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/commentThread/commentThread.props.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/commentThread/commentThread.props.ts"],
-  "sourcesContent": ["import type * as React from 'react'\n\ninterface CommentThreadRootProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ninterface CommentProps extends React.HTMLAttributes<HTMLElement> {\n  author: string\n  avatarSrc?: string\n  badge?: React.ReactNode\n  dateTime: string\n  timeLabel: React.ReactNode\n  actions?: React.ReactNode\n}\n\ninterface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  value: string\n  onValueChange: (value: string) => void\n  onSubmit?: () => void\n  maxLength?: number\n  submitting?: boolean\n  locked?: boolean\n}\n\nexport type { CommentProps, CommentThreadRootProps, ComposerProps }\n"],
+  "sourcesContent": ["import type * as React from 'react'\n\ninterface CommentThreadRootProps extends React.HTMLAttributes<HTMLDivElement> {}\n\ninterface CommentProps extends React.HTMLAttributes<HTMLElement> {\n  author: string\n  avatarSrc?: string\n  badge?: React.ReactNode\n  dateTime: string\n  timeLabel: React.ReactNode\n  actions?: React.ReactNode\n  metadata?: React.ReactNode\n}\n\ninterface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {\n  value: string\n  onValueChange: (value: string) => void\n  onSubmit?: () => void\n  maxLength?: number\n  submitting?: boolean\n  locked?: boolean\n  label?: string\n  error?: React.ReactNode\n  status?: React.ReactNode\n  actions?: React.ReactNode\n  input?: (context: ComposerInputContext) => React.ReactNode\n}\n\nexport type { CommentProps, CommentThreadRootProps, ComposerProps }\n\nexport interface ComposerInputContext {\n  id: string; value: string; onValueChange: (value: string) => void\n  maxLength: number; disabled: boolean; describedBy: string; invalid: boolean\n}\nexport interface RepliesProps extends React.HTMLAttributes<HTMLDivElement> {\n  limit?: number; expanded?: boolean; onExpandedChange?: (expanded: boolean) => void\n  moreLabel?: (remaining: number) => React.ReactNode\n}\nexport interface TombstoneProps extends React.HTMLAttributes<HTMLDivElement> { state?: 'hidden' | 'removed' | 'deleted' }\n"],
   "mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
   "names": []
 }

package/dist/components/commentThread/commentThread.props.d.cts

@@ -8,6 +8,7 @@ interface CommentProps extends React.HTMLAttributes<HTMLElement> {
     dateTime: string;
     timeLabel: React.ReactNode;
     actions?: React.ReactNode;
+    metadata?: React.ReactNode;
 }
 interface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
     value: string;
@@ -16,6 +17,29 @@ interface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>,
     maxLength?: number;
     submitting?: boolean;
     locked?: boolean;
+    label?: string;
+    error?: React.ReactNode;
+    status?: React.ReactNode;
+    actions?: React.ReactNode;
+    input?: (context: ComposerInputContext) => React.ReactNode;
 }
 export type { CommentProps, CommentThreadRootProps, ComposerProps };
+export interface ComposerInputContext {
+    id: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    maxLength: number;
+    disabled: boolean;
+    describedBy: string;
+    invalid: boolean;
+}
+export interface RepliesProps extends React.HTMLAttributes<HTMLDivElement> {
+    limit?: number;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    moreLabel?: (remaining: number) => React.ReactNode;
+}
+export interface TombstoneProps extends React.HTMLAttributes<HTMLDivElement> {
+    state?: 'hidden' | 'removed' | 'deleted';
+}
 //# sourceMappingURL=commentThread.props.d.cts.map

package/dist/components/commentThread/commentThread.props.d.cts.map

@@ -1 +1 @@
-{"version":3,"file":"commentThread.props.d.cts","sourceRoot":"","sources":["../../../src/components/commentThread/commentThread.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,UAAU,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"commentThread.props.d.cts","sourceRoot":"","sources":["../../../src/components/commentThread/commentThread.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,UAAU,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAA;CAC3D;AAED,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA;AAEnE,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAC5E;AACD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAClF,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CACnD;AACD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAAG,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;CAAE"}

package/dist/components/commentThread/commentThread.props.d.mts

@@ -8,6 +8,7 @@ interface CommentProps extends React.HTMLAttributes<HTMLElement> {
     dateTime: string;
     timeLabel: React.ReactNode;
     actions?: React.ReactNode;
+    metadata?: React.ReactNode;
 }
 interface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
     value: string;
@@ -16,6 +17,29 @@ interface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>,
     maxLength?: number;
     submitting?: boolean;
     locked?: boolean;
+    label?: string;
+    error?: React.ReactNode;
+    status?: React.ReactNode;
+    actions?: React.ReactNode;
+    input?: (context: ComposerInputContext) => React.ReactNode;
 }
 export type { CommentProps, CommentThreadRootProps, ComposerProps };
+export interface ComposerInputContext {
+    id: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    maxLength: number;
+    disabled: boolean;
+    describedBy: string;
+    invalid: boolean;
+}
+export interface RepliesProps extends React.HTMLAttributes<HTMLDivElement> {
+    limit?: number;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    moreLabel?: (remaining: number) => React.ReactNode;
+}
+export interface TombstoneProps extends React.HTMLAttributes<HTMLDivElement> {
+    state?: 'hidden' | 'removed' | 'deleted';
+}
 //# sourceMappingURL=commentThread.props.d.mts.map

package/dist/components/commentThread/commentThread.props.d.mts.map

@@ -1 +1 @@
-{"version":3,"file":"commentThread.props.d.mts","sourceRoot":"","sources":["../../../src/components/commentThread/commentThread.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,UAAU,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"commentThread.props.d.mts","sourceRoot":"","sources":["../../../src/components/commentThread/commentThread.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,UAAU,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAA;CAC3D;AAED,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA;AAEnE,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAC5E;AACD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAClF,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CACnD;AACD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAAG,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;CAAE"}

package/dist/components/commentThread/commentThread.props.d.ts

@@ -8,6 +8,7 @@ interface CommentProps extends React.HTMLAttributes<HTMLElement> {
     dateTime: string;
     timeLabel: React.ReactNode;
     actions?: React.ReactNode;
+    metadata?: React.ReactNode;
 }
 interface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>, 'onSubmit'> {
     value: string;
@@ -16,6 +17,29 @@ interface ComposerProps extends Omit<React.FormHTMLAttributes<HTMLFormElement>,
     maxLength?: number;
     submitting?: boolean;
     locked?: boolean;
+    label?: string;
+    error?: React.ReactNode;
+    status?: React.ReactNode;
+    actions?: React.ReactNode;
+    input?: (context: ComposerInputContext) => React.ReactNode;
 }
 export type { CommentProps, CommentThreadRootProps, ComposerProps };
+export interface ComposerInputContext {
+    id: string;
+    value: string;
+    onValueChange: (value: string) => void;
+    maxLength: number;
+    disabled: boolean;
+    describedBy: string;
+    invalid: boolean;
+}
+export interface RepliesProps extends React.HTMLAttributes<HTMLDivElement> {
+    limit?: number;
+    expanded?: boolean;
+    onExpandedChange?: (expanded: boolean) => void;
+    moreLabel?: (remaining: number) => React.ReactNode;
+}
+export interface TombstoneProps extends React.HTMLAttributes<HTMLDivElement> {
+    state?: 'hidden' | 'removed' | 'deleted';
+}
 //# sourceMappingURL=commentThread.props.d.ts.map

package/dist/components/commentThread/commentThread.props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"commentThread.props.d.ts","sourceRoot":"","sources":["../../../src/components/commentThread/commentThread.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,UAAU,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB;AAED,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA"}
+{"version":3,"file":"commentThread.props.d.ts","sourceRoot":"","sources":["../../../src/components/commentThread/commentThread.props.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAA;AAEnC,UAAU,sBAAuB,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;CAAG;AAEhF,UAAU,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,WAAW,CAAC;IAC9D,MAAM,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AAED,UAAU,aAAc,SAAQ,IAAI,CAAC,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC,EAAE,UAAU,CAAC;IACzF,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACtC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACvB,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,KAAK,CAAC,EAAE,CAAC,OAAO,EAAE,oBAAoB,KAAK,KAAK,CAAC,SAAS,CAAA;CAC3D;AAED,YAAY,EAAE,YAAY,EAAE,sBAAsB,EAAE,aAAa,EAAE,CAAA;AAEnE,MAAM,WAAW,oBAAoB;IACnC,EAAE,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjE,SAAS,EAAE,MAAM,CAAC;IAAC,QAAQ,EAAE,OAAO,CAAC;IAAC,WAAW,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,OAAO,CAAA;CAC5E;AACD,MAAM,WAAW,YAAa,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACxE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAA;IAClF,SAAS,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAA;CACnD;AACD,MAAM,WAAW,cAAe,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAAG,KAAK,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,SAAS,CAAA;CAAE"}

package/dist/components/config-drawer.css

@@ -1,6 +1,6 @@
 
 
-/* ConfigDrawer renders inside Sheet.Content (right-anchored panel).
+/* ConfigDrawer renders inside Drawer.Content (host-selected edge).
    These rules style the body layout and each settings row. */
 
 .dsx-config-drawer__body {
@@ -11,11 +11,13 @@
   overflow-y: auto;
   padding: var(--dsx-space-md) 0;
   min-height: 0;
+  min-width: 0;
 }
 
 .dsx-config-drawer__row {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: var(--dsx-space-md);
@@ -26,12 +28,14 @@
   display: flex;
   flex-direction: column;
   gap: var(--dsx-space-2xs);
-  flex: 1 1 auto;
+  flex: 1 1 max-content;
   min-width: 0;
 }
 
 .dsx-config-drawer__row-control {
-  flex-shrink: 0;
+  flex: 0 0 auto;
+  min-width: 0;
+  max-width: 100%;
 }
 
 .dsx-config-drawer__accent-swatch {

package/dist/components/configDrawer/ConfigDrawer.cjs

@@ -61,7 +61,7 @@ function AccentSwatch({ tier }) {
   );
 }
 function SettingRow({ label, description, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { direction: "row", justify: "between", align: "center", gap: "md", className: "dsx-config-drawer__row", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { direction: "row", justify: "between", align: "center", gap: "md", wrap: "wrap", className: "dsx-config-drawer__row", children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_Flex.Flex, { direction: "column", gap: "1", className: "dsx-config-drawer__row-info", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Label.Label, { children: label }),
       description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Text.Text, { variant: "label-small", tone: "muted", children: description })

package/dist/components/configDrawer/ConfigDrawer.cjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/configDrawer/ConfigDrawer.tsx"],
-  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { Flex } from '../flex/Flex'\nimport { Icon } from '../icon/Icon'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Label } from '../label/Label'\nimport { NumberInput } from '../numberInput/NumberInput'\nimport { SegmentedControl } from '../segmentedControl/SegmentedControl'\nimport { Separator } from '../separator/Separator'\nimport { Text } from '../text/Text'\nimport { useTheme } from '../themeProvider/ThemeProvider'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type { ThemeAccentColor, ThemeGrayColor, ThemePanelBackground, ThemeRadius, ThemeScaling } from '../../foundations/Theme'\nimport type { ThemePreference } from '../themeProvider/themeProvider.props'\n\nconst configDrawerSides = ['top', 'right', 'bottom', 'left'] as const\ntype ConfigDrawerSide = (typeof configDrawerSides)[number]\n\nconst Drawer = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.Drawer })))\nconst DrawerTrigger = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTrigger })))\nconst DrawerContent = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerContent })))\nconst DrawerHeader = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerHeader })))\nconst DrawerTitle = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTitle })))\nconst DrawerDescription = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerDescription })))\n\ntype ConfigDrawerProps = {\n  /** Whether the drawer is open (controlled). */\n  open?: boolean\n  /** Callback when open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean\n  /** Custom trigger button. */\n  trigger?: React.ReactNode\n  /** Which edge the drawer slides from. Default 'right' (unchanged from before). */\n  side?: ConfigDrawerSide\n  /**\n   * Extra content rendered after the built-in settings \u2014 e.g. a host app's\n   * own per-page scenario controls. Kept as a plain slot rather than a\n   * fixed \"scenarios\" prop shape: what belongs here differs per host and\n   * per page, only the drawer chrome is meant to be shared.\n   */\n  children?: React.ReactNode\n}\n\ntype SettingRowProps = {\n  label: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction AccentSwatch({ tier }: { tier: ThemeAccentColor }) {\n  return (\n    <span\n      className=\"dsx-config-drawer__accent-swatch\"\n      data-tier={tier}\n      aria-hidden=\"true\"\n    />\n  )\n}\n\nfunction SettingRow({ label, description, children }: SettingRowProps) {\n  return (\n    <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"md\" className=\"dsx-config-drawer__row\">\n      <Flex direction=\"column\" gap=\"1\" className=\"dsx-config-drawer__row-info\">\n        <Label>{label}</Label>\n        {description && (\n          <Text variant=\"label-small\" tone=\"muted\">{description}</Text>\n        )}\n      </Flex>\n      <div className=\"dsx-config-drawer__row-control\">{children}</div>\n    </Flex>\n  )\n}\n\nexport function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side = 'right', children }: ConfigDrawerProps) {\n  const {\n    theme,\n    setTheme,\n    accentColor,\n    setAccentColor,\n    grayColor,\n    setGrayColor,\n    radius,\n    setRadius,\n    density,\n    setDensity,\n    scaling,\n    setScaling,\n    panelBackground,\n    setPanelBackground,\n  } = useTheme()\n\n  const handleScalingChange = React.useCallback(\n    (value: number | undefined) => {\n      if (value !== undefined) {\n        const clamped = Math.min(110, Math.max(90, Math.round(value / 5) * 5))\n        setScaling(String(clamped) as ThemeScaling)\n      }\n    },\n    [setScaling],\n  )\n\n  const scalingNumber = React.useMemo(() => {\n    const parsed = parseInt(scaling, 10)\n    return isNaN(parsed) ? 100 : parsed\n  }, [scaling])\n\n  const defaultTrigger = (\n    <IconButton variant=\"ghost\" size=\"md\" aria-label=\"Open preferences\">\n      <Icon name=\"settings\" size=\"md\" />\n    </IconButton>\n  )\n\n  return (\n    <React.Suspense fallback={null}>\n      <Drawer open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen} direction={side}>\n        <DrawerTrigger asChild>{trigger ?? defaultTrigger}</DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Preferences</DrawerTitle>\n          </DrawerHeader>\n          <VisuallyHidden asChild>\n            <DrawerDescription>Adjust theme, accent, radius, density, scaling, and panel background for this preview.</DrawerDescription>\n          </VisuallyHidden>\n\n          <Flex direction=\"column\" gap=\"lg\" className=\"dsx-config-drawer__body\">\n            {/* Appearance */}\n            <SettingRow label=\"Theme\" description=\"Choose your preferred appearance\">\n              <SegmentedControl\n                type=\"single\"\n                value={theme}\n                onValueChange={(value: string) => setTheme(value as ThemePreference)}\n                aria-label=\"Theme mode\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"light\">Light</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"dark\">Dark</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"system\">System</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Accent Color */}\n            <SettingRow label=\"Accent\" description=\"Primary color for interactive elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={accentColor}\n                onValueChange={(value: string) => setAccentColor(value as ThemeAccentColor)}\n                aria-label=\"Accent color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"rift\">\n                  <AccentSwatch tier=\"rift\" />\n                  Rift\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"warp\">\n                  <AccentSwatch tier=\"warp\" />\n                  Warp\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"ray\">\n                  <AccentSwatch tier=\"ray\" />\n                  Ray\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"astral\">\n                  <AccentSwatch tier=\"astral\" />\n                  Astral\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"spark\">\n                  <AccentSwatch tier=\"spark\" />\n                  Spark\n                </SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Gray Color */}\n            <SettingRow label=\"Gray\" description=\"Neutral tone palette\">\n              <SegmentedControl\n                type=\"single\"\n                value={grayColor}\n                onValueChange={(value: string) => setGrayColor(value as ThemeGrayColor)}\n                aria-label=\"Gray color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"auto\">Auto</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"neutral\">Neutral</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Radius */}\n            <SettingRow label=\"Radius\" description=\"Corner rounding for surfaces\">\n              <SegmentedControl\n                type=\"single\"\n                value={radius}\n                onValueChange={(value: string) => setRadius(value as ThemeRadius)}\n                aria-label=\"Border radius\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"none\">None</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"sm\">Small</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"md\">Medium</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"lg\">Large</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"full\">Full</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Density */}\n            <SettingRow label=\"Density\" description=\"Spacing between elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={density}\n                onValueChange={(value: string) => setDensity(value as 'comfortable' | 'compact')}\n                aria-label=\"Density\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"comfortable\">Comfortable</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"compact\">Compact</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Scaling */}\n            <SettingRow label=\"Scaling\" description=\"UI size multiplier\">\n              <NumberInput\n                value={scalingNumber}\n                onChange={handleScalingChange}\n                min={90}\n                max={110}\n                step={5}\n                className=\"dsx-config-drawer__scaling-input\"\n                aria-label=\"Scaling percentage\"\n              />\n            </SettingRow>\n\n            <Separator />\n\n            {/* Panel BG \u2014 the app-level predecessor to this component had this\n                control; ConfigDrawer didn't, a real parity gap. */}\n            <SettingRow label=\"Panel BG\" description=\"Surface treatment for glass panels\">\n              <SegmentedControl\n                type=\"single\"\n                value={panelBackground}\n                onValueChange={(value: string) => setPanelBackground(value as ThemePanelBackground)}\n                aria-label=\"Panel background\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"translucent\">Translucent</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"solid\">Solid</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            {children && (\n              <>\n                <Separator />\n                {children}\n              </>\n            )}\n          </Flex>\n        </DrawerContent>\n      </Drawer>\n    </React.Suspense>\n  )\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AAEvB,kBAAqB;AACrB,kBAAqB;AACrB,wBAA2B;AAC3B,mBAAsB;AACtB,yBAA4B;AAC5B,8BAAiC;AACjC,uBAA0B;AAC1B,kBAAqB;AACrB,2BAAyB;AACzB,4BAA+B;AA2C3B;AAnCJ,MAAM,SAAS,MAAM,KAAK,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,OAAO,EAAE,CAAC;AACnG,MAAM,gBAAgB,MAAM,KAAK,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,cAAc,EAAE,CAAC;AACjH,MAAM,gBAAgB,MAAM,KAAK,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,cAAc,EAAE,CAAC;AACjH,MAAM,eAAe,MAAM,KAAK,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,aAAa,EAAE,CAAC;AAC/G,MAAM,cAAc,MAAM,KAAK,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,YAAY,EAAE,CAAC;AAC7G,MAAM,oBAAoB,MAAM,KAAK,MAAM,OAAO,kBAAkB,EAAE,KAAK,CAAC,SAAS,EAAE,SAAS,IAAI,kBAAkB,EAAE,CAAC;AA4BzH,SAAS,aAAa,EAAE,KAAK,GAA+B;AAC1D,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAU;AAAA,MACV,aAAW;AAAA,MACX,eAAY;AAAA;AAAA,EACd;AAEJ;AAEA,SAAS,WAAW,EAAE,OAAO,aAAa,SAAS,GAAoB;AACrE,SACE,6CAAC,oBAAK,WAAU,OAAM,SAAQ,WAAU,OAAM,UAAS,KAAI,MAAK,WAAU,0BACxE;AAAA,iDAAC,oBAAK,WAAU,UAAS,KAAI,KAAI,WAAU,+BACzC;AAAA,kDAAC,sBAAO,iBAAM;AAAA,MACb,eACC,4CAAC,oBAAK,SAAQ,eAAc,MAAK,SAAS,uBAAY;AAAA,OAE1D;AAAA,IACA,4CAAC,SAAI,WAAU,kCAAkC,UAAS;AAAA,KAC5D;AAEJ;AAEO,SAAS,aAAa,EAAE,MAAM,cAAc,aAAa,SAAS,OAAO,SAAS,SAAS,GAAsB;AACtH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EACF,QAAI,+BAAS;AAEb,QAAM,sBAAsB,MAAM;AAAA,IAChC,CAAC,UAA8B;AAC7B,UAAI,UAAU,QAAW;AACvB,cAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,IAAI,KAAK,MAAM,QAAQ,CAAC,IAAI,CAAC,CAAC;AACrE,mBAAW,OAAO,OAAO,CAAiB;AAAA,MAC5C;AAAA,IACF;AAAA,IACA,CAAC,UAAU;AAAA,EACb;AAEA,QAAM,gBAAgB,MAAM,QAAQ,MAAM;AACxC,UAAM,SAAS,SAAS,SAAS,EAAE;AACnC,WAAO,MAAM,MAAM,IAAI,MAAM;AAAA,EAC/B,GAAG,CAAC,OAAO,CAAC;AAEZ,QAAM,iBACJ,4CAAC,gCAAW,SAAQ,SAAQ,MAAK,MAAK,cAAW,oBAC/C,sDAAC,oBAAK,MAAK,YAAW,MAAK,MAAK,GAClC;AAGF,SACE,4CAAC,MAAM,UAAN,EAAe,UAAU,MACxB,uDAAC,UAAO,MAAY,cAA4B,aAA0B,WAAW,MACnF;AAAA,gDAAC,iBAAc,SAAO,MAAE,qBAAW,gBAAe;AAAA,IAClD,6CAAC,iBACC;AAAA,kDAAC,gBACC,sDAAC,eAAY,yBAAW,GAC1B;AAAA,MACA,4CAAC,wCAAe,SAAO,MACrB,sDAAC,qBAAkB,oGAAsF,GAC3G;AAAA,MAEA,6CAAC,oBAAK,WAAU,UAAS,KAAI,MAAK,WAAU,2BAE1C;AAAA,oDAAC,cAAW,OAAM,SAAQ,aAAY,oCACpC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,eAAe,CAAC,UAAkB,SAAS,KAAwB;AAAA,YACnE,cAAW;AAAA,YACX,MAAK;AAAA,YAEL;AAAA,0DAAC,yCAAiB,MAAjB,EAAsB,OAAM,SAAQ,mBAAK;AAAA,cAC1C,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,QAAO,kBAAI;AAAA,cACxC,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,UAAS,oBAAM;AAAA;AAAA;AAAA,QAC9C,GACF;AAAA,QAEA,4CAAC,8BAAU;AAAA,QAGX,4CAAC,cAAW,OAAM,UAAS,aAAY,0CACrC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,eAAe,CAAC,UAAkB,eAAe,KAAyB;AAAA,YAC1E,cAAW;AAAA,YACX,MAAK;AAAA,YAEL;AAAA,2DAAC,yCAAiB,MAAjB,EAAsB,OAAM,QAC3B;AAAA,4DAAC,gBAAa,MAAK,QAAO;AAAA,gBAAE;AAAA,iBAE9B;AAAA,cACA,6CAAC,yCAAiB,MAAjB,EAAsB,OAAM,QAC3B;AAAA,4DAAC,gBAAa,MAAK,QAAO;AAAA,gBAAE;AAAA,iBAE9B;AAAA,cACA,6CAAC,yCAAiB,MAAjB,EAAsB,OAAM,OAC3B;AAAA,4DAAC,gBAAa,MAAK,OAAM;AAAA,gBAAE;AAAA,iBAE7B;AAAA,cACA,6CAAC,yCAAiB,MAAjB,EAAsB,OAAM,UAC3B;AAAA,4DAAC,gBAAa,MAAK,UAAS;AAAA,gBAAE;AAAA,iBAEhC;AAAA,cACA,6CAAC,yCAAiB,MAAjB,EAAsB,OAAM,SAC3B;AAAA,4DAAC,gBAAa,MAAK,SAAQ;AAAA,gBAAE;AAAA,iBAE/B;AAAA;AAAA;AAAA,QACF,GACF;AAAA,QAEA,4CAAC,8BAAU;AAAA,QAGX,4CAAC,cAAW,OAAM,QAAO,aAAY,wBACnC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,eAAe,CAAC,UAAkB,aAAa,KAAuB;AAAA,YACtE,cAAW;AAAA,YACX,MAAK;AAAA,YAEL;AAAA,0DAAC,yCAAiB,MAAjB,EAAsB,OAAM,QAAO,kBAAI;AAAA,cACxC,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,WAAU,qBAAO;AAAA;AAAA;AAAA,QAChD,GACF;AAAA,QAEA,4CAAC,8BAAU;AAAA,QAGX,4CAAC,cAAW,OAAM,UAAS,aAAY,gCACrC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,eAAe,CAAC,UAAkB,UAAU,KAAoB;AAAA,YAChE,cAAW;AAAA,YACX,MAAK;AAAA,YAEL;AAAA,0DAAC,yCAAiB,MAAjB,EAAsB,OAAM,QAAO,kBAAI;AAAA,cACxC,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,MAAK,mBAAK;AAAA,cACvC,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,MAAK,oBAAM;AAAA,cACxC,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,MAAK,mBAAK;AAAA,cACvC,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,QAAO,kBAAI;AAAA;AAAA;AAAA,QAC1C,GACF;AAAA,QAEA,4CAAC,8BAAU;AAAA,QAGX,4CAAC,cAAW,OAAM,WAAU,aAAY,4BACtC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,eAAe,CAAC,UAAkB,WAAW,KAAkC;AAAA,YAC/E,cAAW;AAAA,YACX,MAAK;AAAA,YAEL;AAAA,0DAAC,yCAAiB,MAAjB,EAAsB,OAAM,eAAc,yBAAW;AAAA,cACtD,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,WAAU,qBAAO;AAAA;AAAA;AAAA,QAChD,GACF;AAAA,QAEA,4CAAC,8BAAU;AAAA,QAGX,4CAAC,cAAW,OAAM,WAAU,aAAY,sBACtC;AAAA,UAAC;AAAA;AAAA,YACC,OAAO;AAAA,YACP,UAAU;AAAA,YACV,KAAK;AAAA,YACL,KAAK;AAAA,YACL,MAAM;AAAA,YACN,WAAU;AAAA,YACV,cAAW;AAAA;AAAA,QACb,GACF;AAAA,QAEA,4CAAC,8BAAU;AAAA,QAIX,4CAAC,cAAW,OAAM,YAAW,aAAY,sCACvC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,OAAO;AAAA,YACP,eAAe,CAAC,UAAkB,mBAAmB,KAA6B;AAAA,YAClF,cAAW;AAAA,YACX,MAAK;AAAA,YAEL;AAAA,0DAAC,yCAAiB,MAAjB,EAAsB,OAAM,eAAc,yBAAW;AAAA,cACtD,4CAAC,yCAAiB,MAAjB,EAAsB,OAAM,SAAQ,mBAAK;AAAA;AAAA;AAAA,QAC5C,GACF;AAAA,QAEC,YACC,4EACE;AAAA,sDAAC,8BAAU;AAAA,UACV;AAAA,WACH;AAAA,SAEJ;AAAA,OACF;AAAA,KACF,GACF;AAEJ;",
+  "sourcesContent": ["'use client'\n\nimport * as React from 'react'\n\nimport { Flex } from '../flex/Flex'\nimport { Icon } from '../icon/Icon'\nimport { IconButton } from '../iconButton/IconButton'\nimport { Label } from '../label/Label'\nimport { NumberInput } from '../numberInput/NumberInput'\nimport { SegmentedControl } from '../segmentedControl/SegmentedControl'\nimport { Separator } from '../separator/Separator'\nimport { Text } from '../text/Text'\nimport { useTheme } from '../themeProvider/ThemeProvider'\nimport { VisuallyHidden } from '../visuallyHidden/VisuallyHidden'\n\nimport type { ThemeAccentColor, ThemeGrayColor, ThemePanelBackground, ThemeRadius, ThemeScaling } from '../../foundations/Theme'\nimport type { ThemePreference } from '../themeProvider/themeProvider.props'\n\nconst configDrawerSides = ['top', 'right', 'bottom', 'left'] as const\ntype ConfigDrawerSide = (typeof configDrawerSides)[number]\n\nconst Drawer = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.Drawer })))\nconst DrawerTrigger = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTrigger })))\nconst DrawerContent = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerContent })))\nconst DrawerHeader = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerHeader })))\nconst DrawerTitle = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerTitle })))\nconst DrawerDescription = React.lazy(() => import('../drawer/Drawer').then((mod) => ({ default: mod.DrawerDescription })))\n\ntype ConfigDrawerProps = {\n  /** Whether the drawer is open (controlled). */\n  open?: boolean\n  /** Callback when open state changes. */\n  onOpenChange?: (open: boolean) => void\n  /** Default open state (uncontrolled). */\n  defaultOpen?: boolean\n  /** Custom trigger button. */\n  trigger?: React.ReactNode\n  /** Which edge the drawer slides from. Default 'right' (unchanged from before). */\n  side?: ConfigDrawerSide\n  /**\n   * Extra content rendered after the built-in settings \u2014 e.g. a host app's\n   * own per-page scenario controls. Kept as a plain slot rather than a\n   * fixed \"scenarios\" prop shape: what belongs here differs per host and\n   * per page, only the drawer chrome is meant to be shared.\n   */\n  children?: React.ReactNode\n}\n\ntype SettingRowProps = {\n  label: string\n  description?: string\n  children: React.ReactNode\n}\n\nfunction AccentSwatch({ tier }: { tier: ThemeAccentColor }) {\n  return (\n    <span\n      className=\"dsx-config-drawer__accent-swatch\"\n      data-tier={tier}\n      aria-hidden=\"true\"\n    />\n  )\n}\n\nfunction SettingRow({ label, description, children }: SettingRowProps) {\n  return (\n    <Flex direction=\"row\" justify=\"between\" align=\"center\" gap=\"md\" wrap=\"wrap\" className=\"dsx-config-drawer__row\">\n      <Flex direction=\"column\" gap=\"1\" className=\"dsx-config-drawer__row-info\">\n        <Label>{label}</Label>\n        {description && (\n          <Text variant=\"label-small\" tone=\"muted\">{description}</Text>\n        )}\n      </Flex>\n      <div className=\"dsx-config-drawer__row-control\">{children}</div>\n    </Flex>\n  )\n}\n\nexport function ConfigDrawer({ open, onOpenChange, defaultOpen, trigger, side = 'right', children }: ConfigDrawerProps) {\n  const {\n    theme,\n    setTheme,\n    accentColor,\n    setAccentColor,\n    grayColor,\n    setGrayColor,\n    radius,\n    setRadius,\n    density,\n    setDensity,\n    scaling,\n    setScaling,\n    panelBackground,\n    setPanelBackground,\n  } = useTheme()\n\n  const handleScalingChange = React.useCallback(\n    (value: number | undefined) => {\n      if (value !== undefined) {\n        const clamped = Math.min(110, Math.max(90, Math.round(value / 5) * 5))\n        setScaling(String(clamped) as ThemeScaling)\n      }\n    },\n    [setScaling],\n  )\n\n  const scalingNumber = React.useMemo(() => {\n    const parsed = parseInt(scaling, 10)\n    return isNaN(parsed) ? 100 : parsed\n  }, [scaling])\n\n  const defaultTrigger = (\n    <IconButton variant=\"ghost\" size=\"md\" aria-label=\"Open preferences\">\n      <Icon name=\"settings\" size=\"md\" />\n    </IconButton>\n  )\n\n  return (\n    <React.Suspense fallback={null}>\n      <Drawer open={open} onOpenChange={onOpenChange} defaultOpen={defaultOpen} direction={side}>\n        <DrawerTrigger asChild>{trigger ?? defaultTrigger}</DrawerTrigger>\n        <DrawerContent>\n          <DrawerHeader>\n            <DrawerTitle>Preferences</DrawerTitle>\n          </DrawerHeader>\n          <VisuallyHidden asChild>\n            <DrawerDescription>Adjust theme, accent, radius, density, scaling, and panel background for this preview.</DrawerDescription>\n          </VisuallyHidden>\n\n          <Flex direction=\"column\" gap=\"lg\" className=\"dsx-config-drawer__body\">\n            {/* Appearance */}\n            <SettingRow label=\"Theme\" description=\"Choose your preferred appearance\">\n              <SegmentedControl\n                type=\"single\"\n                value={theme}\n                onValueChange={(value: string) => setTheme(value as ThemePreference)}\n                aria-label=\"Theme mode\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"light\">Light</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"dark\">Dark</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"system\">System</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Accent Color */}\n            <SettingRow label=\"Accent\" description=\"Primary color for interactive elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={accentColor}\n                onValueChange={(value: string) => setAccentColor(value as ThemeAccentColor)}\n                aria-label=\"Accent color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"rift\">\n                  <AccentSwatch tier=\"rift\" />\n                  Rift\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"warp\">\n                  <AccentSwatch tier=\"warp\" />\n                  Warp\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"ray\">\n                  <AccentSwatch tier=\"ray\" />\n                  Ray\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"astral\">\n                  <AccentSwatch tier=\"astral\" />\n                  Astral\n                </SegmentedControl.Item>\n                <SegmentedControl.Item value=\"spark\">\n                  <AccentSwatch tier=\"spark\" />\n                  Spark\n                </SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Gray Color */}\n            <SettingRow label=\"Gray\" description=\"Neutral tone palette\">\n              <SegmentedControl\n                type=\"single\"\n                value={grayColor}\n                onValueChange={(value: string) => setGrayColor(value as ThemeGrayColor)}\n                aria-label=\"Gray color\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"auto\">Auto</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"neutral\">Neutral</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Radius */}\n            <SettingRow label=\"Radius\" description=\"Corner rounding for surfaces\">\n              <SegmentedControl\n                type=\"single\"\n                value={radius}\n                onValueChange={(value: string) => setRadius(value as ThemeRadius)}\n                aria-label=\"Border radius\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"none\">None</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"sm\">Small</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"md\">Medium</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"lg\">Large</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"full\">Full</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Density */}\n            <SettingRow label=\"Density\" description=\"Spacing between elements\">\n              <SegmentedControl\n                type=\"single\"\n                value={density}\n                onValueChange={(value: string) => setDensity(value as 'comfortable' | 'compact')}\n                aria-label=\"Density\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"comfortable\">Comfortable</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"compact\">Compact</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            <Separator />\n\n            {/* Scaling */}\n            <SettingRow label=\"Scaling\" description=\"UI size multiplier\">\n              <NumberInput\n                value={scalingNumber}\n                onChange={handleScalingChange}\n                min={90}\n                max={110}\n                step={5}\n                className=\"dsx-config-drawer__scaling-input\"\n                aria-label=\"Scaling percentage\"\n              />\n            </SettingRow>\n\n            <Separator />\n\n            {/* Panel BG \u2014 the app-level predecessor to this component had this\n                control; ConfigDrawer didn't, a real parity gap. */}\n            <SettingRow label=\"Panel BG\" description=\"Surface treatment for glass panels\">\n              <SegmentedControl\n                type=\"single\"\n                value={panelBackground}\n                onValueChange={(value: string) => setPanelBackground(value as ThemePanelBackground)}\n                aria-label=\"Panel background\"\n                size=\"sm\"\n              >\n                <SegmentedControl.Item value=\"translucent\">Translucent</SegmentedControl.Item>\n                <SegmentedControl.Item value=\"solid\">Solid</SegmentedControl.Item>\n              </SegmentedControl>\n            </SettingRow>\n\n            {children && (\n              <>\n                <Separator />\n                {children}\n              </>\n            )}\n          </Flex>\n        </DrawerContent>\n      </Drawer>\n    </React.Suspense>\n  )\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/components/configDrawer/ConfigDrawer.js

@@ -28,7 +28,7 @@ function AccentSwatch({ tier }) {
   );
 }
 function SettingRow({ label, description, children }) {
-  return /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "md", className: "dsx-config-drawer__row", children: [
+  return /* @__PURE__ */ jsxs(Flex, { direction: "row", justify: "between", align: "center", gap: "md", wrap: "wrap", className: "dsx-config-drawer__row", children: [
     /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "1", className: "dsx-config-drawer__row-info", children: [
       /* @__PURE__ */ jsx(Label, { children: label }),
       description && /* @__PURE__ */ jsx(Text, { variant: "label-small", tone: "muted", children: description })