@discourser/design-system 0.15.0 → 0.15.1

package/dist/{chunk-QP4EJI3G.cjs → chunk-UNWXE6UB.cjs}

@@ -25,6 +25,8 @@ var progress = require('@ark-ui/react/progress');
 var popover = require('@ark-ui/react/popover');
 var tooltip = require('@ark-ui/react/tooltip');
 var steps = require('@ark-ui/react/steps');
+var react$2 = require('@dnd-kit/react');
+var sortable = require('@dnd-kit/react/sortable');
 
 // src/components/Group.tsx
 var Group_exports = {};
@@ -782,6 +784,102 @@ var Tooltip = react$1.forwardRef(function Tooltip2(props, ref) {
     ] }) }) })
   ] });
 });
+var StyledSvg = jsx.styled(factory.ark.svg);
+var GripDotsVerticalIcon = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  StyledSvg,
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        d: "M9 6H9.01M15 6H15.01M15 12H15.01M9 12H9.01M9 18H9.01M15 18H15.01M10 6C10 6.55228 9.55228 7 9 7C8.44772 7 8 6.55228 8 6C8 5.44772 8.44772 5 9 5C9.55228 5 10 5.44772 10 6ZM16 6C16 6.55228 15.5523 7 15 7C14.4477 7 14 6.55228 14 6C14 5.44772 14.4477 5 15 5C15.5523 5 16 5.44772 16 6ZM10 12C10 12.5523 9.55228 13 9 13C8.44772 13 8 12.5523 8 12C8 11.4477 8.44772 11 9 11C9.55228 11 10 11.4477 10 12ZM16 12C16 12.5523 15.5523 13 15 13C14.4477 13 14 12.5523 14 12C14 11.4477 14.4477 11 15 11C15.5523 11 16 11.4477 16 12ZM10 18C10 18.5523 9.55228 19 9 19C8.44772 19 8 18.5523 8 18C8 17.4477 8.44772 17 9 17C9.55228 17 10 17.4477 10 18ZM16 18C16 18.5523 15.5523 19 15 19C14.4477 19 14 18.5523 14 18C14 17.4477 14.4477 17 15 17C15.5523 17 16 17.4477 16 18Z",
+        stroke: "currentColor",
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+);
+var StyledSvg2 = jsx.styled(factory.ark.svg);
+var ClockIcon = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
+  StyledSvg2,
+  {
+    viewBox: "0 0 24 24",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "1em",
+    height: "1em",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M12 6V12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M16.24 16.24L12 12",
+          stroke: "currentColor",
+          strokeWidth: "1.5",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
+    ]
+  }
+);
+
+// src/components/Breadcrumb.tsx
+var Breadcrumb_exports = {};
+chunkEARF7VDF_cjs.__export(Breadcrumb_exports, {
+  Ellipsis: () => Ellipsis,
+  Item: () => Item4,
+  Link: () => Link,
+  List: () => List3,
+  Root: () => Root17,
+  Separator: () => Separator
+});
+var ChevronRightIcon = () => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m9 18 6-6-6-6" }) });
+var { withProvider: withProvider12, withContext: withContext16 } = jsx.createStyleContext(recipes.breadcrumb);
+var Root17 = withProvider12(factory.ark.nav, "root", { defaultProps: { "aria-label": "breadcrumb" } });
+var List3 = withContext16(factory.ark.ol, "list");
+var Item4 = withContext16(factory.ark.li, "item");
+var Link = withContext16(factory.ark.a, "link");
+var Ellipsis = withContext16(factory.ark.li, "ellipsis", {
+  defaultProps: {
+    role: "presentation",
+    "aria-hidden": true,
+    children: "..."
+  }
+});
+var Separator = withContext16(factory.ark.li, "separator", {
+  defaultProps: {
+    "aria-hidden": true,
+    children: /* @__PURE__ */ jsxRuntime.jsx(ChevronRightIcon, {})
+  }
+});
 var CustomSeparator = ({ index, className }) => {
   const stepsContext = steps.useStepsContext();
   const currentStepIndex = stepsContext.value;
@@ -865,18 +963,364 @@ var Stepper = Object.assign(StepperRoot, {
   PrevTrigger: steps.Steps.PrevTrigger,
   NextTrigger: steps.Steps.NextTrigger
 });
+var dialogContentClass = css.css({
+  width: "full",
+  maxWidth: "560px",
+  maxHeight: "80vh",
+  display: "flex",
+  flexDirection: "column"
+});
+var dialogBodyClass = css.css({
+  flex: "1",
+  overflowY: "auto",
+  py: "0",
+  px: "6"
+});
+var footerLinkClass = css.css({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "1",
+  fontSize: "sm",
+  color: "primary.solid.bg",
+  fontWeight: "medium",
+  textDecoration: "none",
+  cursor: "pointer",
+  bg: "transparent",
+  border: "none",
+  p: "0",
+  _hover: { textDecoration: "underline" },
+  _focusVisible: { focusVisibleRing: "outside" }
+});
+function AddScenarioDialog({
+  open,
+  onClose,
+  renderContent,
+  onBrowseMore,
+  onBuildCustom
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(Root4, { open, onOpenChange: ({ open: isOpen }) => !isOpen && onClose(), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Backdrop, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(Positioner, { children: /* @__PURE__ */ jsxRuntime.jsxs(Content, { className: dialogContentClass, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Title3, { children: "Add Scenario" }),
+        /* @__PURE__ */ jsxRuntime.jsx(CloseTrigger2, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            "aria-label": "Close",
+            className: css.css({
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              borderRadius: "l1",
+              w: "6",
+              h: "6",
+              color: "fg.muted",
+              bg: "transparent",
+              border: "none",
+              cursor: "pointer",
+              fontSize: "lg",
+              _hover: { bg: "neutral.subtle.bg", color: "fg.default" }
+            }),
+            children: "\u2715"
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Body2, { className: dialogBodyClass, children: renderContent ? renderContent({ onClose }) : (
+        // Storybook placeholder
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            className: css.css({
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              minH: "48",
+              borderRadius: "l2",
+              bg: "neutral.subtle.bg",
+              color: "fg.muted",
+              fontSize: "sm",
+              borderWidth: "1px",
+              borderStyle: "dashed",
+              borderColor: "border.default"
+            }),
+            children: "Scenario collection renders here"
+          }
+        )
+      ) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Footer2, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: footerLinkClass,
+            onClick: () => {
+              onBrowseMore?.();
+              onClose();
+            },
+            children: "Browse More Scenarios \u2192"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            className: footerLinkClass,
+            onClick: () => {
+              onBuildCustom?.();
+              onClose();
+            },
+            children: "Build Custom Scenario \u2192"
+          }
+        )
+      ] })
+    ] }) })
+  ] });
+}
+
+// src/components/ScenarioQueue/types.ts
+var difficultyColorMap = {
+  beginner: "primary",
+  intermediate: "secondary",
+  advanced: "tertiary"
+};
+var difficultyLabel = {
+  beginner: "Beginner",
+  intermediate: "Intermediate",
+  advanced: "Advanced"
+};
+var ScenarioCard = react$1.forwardRef(
+  function ScenarioCard2({
+    scenario,
+    position,
+    isActive,
+    showRequeueSwitch = false,
+    onRequeue,
+    isRepeat = false,
+    isDragging = false,
+    rootRef,
+    handleRef,
+    className: _className,
+    ...rest
+  }, _ref) {
+    const styles = recipes.scenarioCard({ isActive, isDragging });
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Root3,
+      {
+        ref: rootRef,
+        className: styles.root,
+        variant: "elevated",
+        css: {
+          boxShadow: "0px 2px 8px 0px rgba(167, 139, 250, 0.15)",
+          // neutral.surface.bg resolves to white in light mode; Figma uses neutral/99 (#FDFCF5)
+          bg: "neutral.1"
+        },
+        ...rest,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(jsx.VStack, { gap: "2.5", pl: "5", pr: "3", py: "2.5", alignItems: "flex-start", children: [
+          !showRequeueSwitch && /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { justify: "space-between", alignItems: "flex-start", w: "full", py: "2", pr: "2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              jsx.Box,
+              {
+                ref: handleRef,
+                className: styles.dragHandle,
+                "aria-label": "Drag to reorder",
+                children: /* @__PURE__ */ jsxRuntime.jsx(GripDotsVerticalIcon, { w: "9", h: "10", "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              jsx.Circle,
+              {
+                size: isActive ? "12" : "11",
+                className: styles.positionBadge,
+                "aria-label": `Position ${position}`,
+                children: position
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { px: "1", py: "1.5", w: "full", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: styles.title, children: scenario.title }) }),
+          /* @__PURE__ */ jsxRuntime.jsxs(jsx.VStack, { gap: "3", alignItems: "flex-start", py: "2.5", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              jsx.Box,
+              {
+                className: styles.difficultyBadge,
+                "data-difficulty": scenario.difficulty,
+                children: difficultyLabel[scenario.difficulty]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsxs(jsx.Box, { className: styles.durationBadge, "data-difficulty": scenario.difficulty, children: [
+              /* @__PURE__ */ jsxRuntime.jsx(ClockIcon, { w: "3", h: "3", "aria-hidden": "true" }),
+              scenario.duration
+            ] }),
+            isRepeat && /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { className: styles.durationBadge, "data-difficulty": scenario.difficulty, children: "Repeat" })
+          ] }),
+          showRequeueSwitch && /* @__PURE__ */ jsxRuntime.jsxs(jsx.HStack, { className: styles.switchRow, justify: "space-between", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles.switchLabel, children: "Re-queue" }),
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              Root5,
+              {
+                size: "sm",
+                defaultChecked: true,
+                onCheckedChange: (details) => {
+                  if (!details.checked) onRequeue?.(scenario.id);
+                },
+                "aria-label": `Re-queue ${scenario.title}`,
+                children: [
+                  /* @__PURE__ */ jsxRuntime.jsx(HiddenInput, {}),
+                  /* @__PURE__ */ jsxRuntime.jsx(Control, { css: { _checked: { bg: "secondary.6" } } })
+                ]
+              }
+            )
+          ] })
+        ] })
+      }
+    );
+  }
+);
+function ScenarioCardDraggable({
+  scenario,
+  index,
+  position,
+  isActive,
+  isRepeat
+}) {
+  const { ref, handleRef, isDragging } = sortable.useSortable({
+    id: scenario.id,
+    index
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    ScenarioCard,
+    {
+      scenario,
+      position,
+      isActive,
+      isDragging,
+      isRepeat,
+      rootRef: ref,
+      handleRef
+    }
+  );
+}
+function arrayMove(array, from, to) {
+  const next = [...array];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
+}
+function ScenarioQueue({
+  scenarios,
+  onReorder,
+  onRequeue,
+  onRemove: _onRemove,
+  renderAddScenarioContent,
+  onBrowseMore,
+  onBuildCustom
+}) {
+  const queuedRaw = scenarios.filter((s) => s.status === "queued");
+  const completed = scenarios.filter((s) => s.status === "completed");
+  const [localQueue, setLocalQueue] = react$1.useState(queuedRaw);
+  react$1.useEffect(() => {
+    setLocalQueue(queuedRaw);
+  }, [scenarios]);
+  const [dialogOpen, setDialogOpen] = react$1.useState(false);
+  const totalCount = localQueue.length + completed.length;
+  const handleDragEnd = (event) => {
+    if (event.canceled) return;
+    const source = event.operation?.source;
+    if (!source) return;
+    const oldIndex = source.initialIndex;
+    const newIndex = source.index;
+    if (oldIndex === newIndex) return;
+    const next = arrayMove(localQueue, oldIndex, newIndex);
+    setLocalQueue(next);
+    onReorder?.(next.map((s) => s.id));
+  };
+  const styles = recipes.scenarioQueue();
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsx.Box, { className: styles.root, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(jsx.Box, { className: styles.header, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { className: styles.title, children: "Scenario Queue" }),
+      /* @__PURE__ */ jsxRuntime.jsxs(jsx.Box, { className: styles.count, children: [
+        totalCount,
+        " scenario",
+        totalCount !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      Root8,
+      {
+        defaultValue: "queue",
+        variant: "line",
+        size: "md",
+        colorPalette: "primary",
+        className: styles.tabsInner,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { className: styles.tabList, children: /* @__PURE__ */ jsxRuntime.jsxs(List, { className: css.css({ borderBottomWidth: "0" }), children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Trigger3, { value: "queue", children: "In Queue" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Trigger3, { value: "completed", children: "Completed" }),
+            /* @__PURE__ */ jsxRuntime.jsx(Indicator2, {})
+          ] }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Content3, { value: "queue", className: styles.tabsContent, children: localQueue.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsx.Center, { className: styles.emptyState, children: "No scenarios in queue" }) : /* @__PURE__ */ jsxRuntime.jsx(react$2.DragDropProvider, { onDragEnd: handleDragEnd, children: /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { className: styles.scrollArea, children: localQueue.map((scenario, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            ScenarioCardDraggable,
+            {
+              scenario,
+              index,
+              position: index + 1,
+              isActive: index === 0,
+              isRepeat: scenario.wasRequeued ?? false
+            },
+            scenario.id
+          )) }) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Content3, { value: "completed", className: styles.tabsContent, children: completed.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(jsx.Center, { className: styles.emptyState, children: "No completed scenarios" }) : /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { className: styles.scrollArea, children: completed.map((scenario, index) => /* @__PURE__ */ jsxRuntime.jsx(
+            ScenarioCard,
+            {
+              scenario,
+              position: index + 1,
+              isActive: false,
+              showRequeueSwitch: true,
+              onRequeue
+            },
+            scenario.id
+          )) }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(jsx.Box, { className: styles.addButtonArea, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        variant: "outline",
+        colorPalette: "primary",
+        size: "md",
+        className: styles.addButton,
+        onClick: () => setDialogOpen(true),
+        children: "+ Add Scenario"
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AddScenarioDialog,
+      {
+        open: dialogOpen,
+        onClose: () => setDialogOpen(false),
+        renderContent: renderAddScenarioContent,
+        onBrowseMore,
+        onBuildCustom
+      }
+    )
+  ] });
+}
 
 exports.AbsoluteCenter_exports = AbsoluteCenter_exports;
 exports.Accordion_exports = Accordion_exports;
+exports.AddScenarioDialog = AddScenarioDialog;
 exports.Avatar_exports = Avatar_exports;
 exports.Badge = Badge;
+exports.Breadcrumb_exports = Breadcrumb_exports;
 exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Card_exports = Card_exports;
 exports.Checkbox_exports = Checkbox_exports;
+exports.ClockIcon = ClockIcon;
 exports.CloseButton_exports = CloseButton_exports;
 exports.Dialog_exports = Dialog_exports;
 exports.Drawer_exports = Drawer_exports;
+exports.GripDotsVerticalIcon = GripDotsVerticalIcon;
 exports.Group_exports = Group_exports;
 exports.Heading = Heading;
 exports.IconButton = IconButton;
@@ -887,6 +1331,8 @@ exports.InputGroup = InputGroup2;
 exports.Popover_exports = Popover_exports;
 exports.Progress_exports = Progress_exports;
 exports.RadioGroup_exports = RadioGroup_exports;
+exports.ScenarioCard = ScenarioCard;
+exports.ScenarioQueue = ScenarioQueue;
 exports.Select_exports = Select_exports;
 exports.Skeleton_exports = Skeleton_exports;
 exports.Slider_exports = Slider_exports;
@@ -897,6 +1343,8 @@ exports.Tabs_exports = Tabs_exports;
 exports.Textarea = Textarea;
 exports.Toaster = Toaster;
 exports.Tooltip_exports = Tooltip_exports;
+exports.difficultyColorMap = difficultyColorMap;
+exports.difficultyLabel = difficultyLabel;
 exports.toaster = toaster;
-//# sourceMappingURL=chunk-QP4EJI3G.cjs.map
-//# sourceMappingURL=chunk-QP4EJI3G.cjs.map
+//# sourceMappingURL=chunk-UNWXE6UB.cjs.map
+//# sourceMappingURL=chunk-UNWXE6UB.cjs.map