@almadar/ui 5.13.2 → 5.14.0

package/dist/components/molecules/Coachmark.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Coachmark Molecule
+ *
+ * A controlled, externally-anchored popover for onboarding hints. Unlike
+ * Popover (uncontrolled, wraps its own trigger), a Coachmark is driven by
+ * `open` and points at an element it does not own — a tab button, the persona
+ * menu, a canvas node — resolved from a ref, a CSS selector, or a DOMRect.
+ * Portals to document.body so it escapes the canvas/preview transform contexts.
+ */
+import React from "react";
+export type CoachmarkPlacement = "top" | "bottom" | "left" | "right";
+export type CoachmarkAnchor = React.RefObject<HTMLElement | null> | string | DOMRect;
+export interface CoachmarkProps {
+    /** Controlled visibility. */
+    open: boolean;
+    /** The element to point at: a ref, a CSS selector, or a DOMRect. */
+    anchor: CoachmarkAnchor;
+    /** Side of the anchor to render on. @default 'bottom' */
+    placement?: CoachmarkPlacement;
+    title?: string;
+    children: React.ReactNode;
+    /** Close (X) handler — always rendered. */
+    onDismiss: () => void;
+    /** Optional filled primary action (e.g. Next / Got it). */
+    onPrimary?: () => void;
+    primaryLabel?: string;
+    /** Optional ghost secondary action (e.g. Skip). */
+    onSecondary?: () => void;
+    secondaryLabel?: string;
+    /** Render a pulsing beacon dot over the anchor (keystone hints). */
+    showBeacon?: boolean;
+    className?: string;
+}
+/**
+ * Tracks the live bounding rect of an anchor while `active`. Re-reads on
+ * scroll/resize, and polls a few frames so a selector that mounts just after
+ * activation (a freshly-revealed tab) still resolves.
+ */
+export declare function useAnchorRect(anchor: CoachmarkAnchor, active: boolean): DOMRect | null;
+export declare const Coachmark: React.FC<CoachmarkProps>;

package/dist/components/molecules/OnboardingSpotlight.d.ts

@@ -0,0 +1,27 @@
+/**
+ * OnboardingSpotlight Molecule
+ *
+ * Optional first-run welcome: a dimmed backdrop with a cut-out over the current
+ * step's anchor, plus a stepped Coachmark bubble (Next / Skip). The backdrop is
+ * four dim rectangles around the anchor rect so the highlighted element stays
+ * lit and clickable-looking; the bubble and step dots reuse Coachmark.
+ */
+import React from "react";
+import { type CoachmarkAnchor, type CoachmarkPlacement } from "./Coachmark";
+export interface SpotlightStep {
+    anchor: CoachmarkAnchor;
+    placement?: CoachmarkPlacement;
+    title: string;
+    body: string;
+}
+export interface OnboardingSpotlightProps {
+    steps: SpotlightStep[];
+    /** Index of the active step. Out-of-range hides the spotlight. */
+    stepIndex: number;
+    onNext: () => void;
+    onSkip: () => void;
+    onFinish: () => void;
+    /** Padding around the cut-out, in px. @default 6 */
+    cutoutPadding?: number;
+}
+export declare const OnboardingSpotlight: React.FC<OnboardingSpotlightProps>;

package/dist/components/molecules/avl/avl-story-schemas.d.ts

@@ -14,7 +14,7 @@ export declare const CLINIC_SCHEMA: OrbitalSchema;
 /**
  * Task manager schema: 3 orbitals for a richer multi-module story.
  * - TaskOrbital (std-browse): task list
- * - TimerOrbital (std-timer): countdown timer
+ * - FocusTimer (std-list): focus session list
  * - ArchiveOrbital (std-confirmation): archive confirmation
  */
 export declare const TASK_SCHEMA: OrbitalSchema;

package/dist/components/molecules/index.d.ts

@@ -20,6 +20,8 @@ export { Menu, type MenuProps, type MenuItem } from './Menu';
 export { Modal, type ModalProps, type ModalSize } from './Modal';
 export { Pagination, type PaginationProps } from './Pagination';
 export { Popover, type PopoverProps } from './Popover';
+export { Coachmark, useAnchorRect, type CoachmarkProps, type CoachmarkPlacement, type CoachmarkAnchor, } from './Coachmark';
+export { OnboardingSpotlight, type OnboardingSpotlightProps, type SpotlightStep, } from './OnboardingSpotlight';
 export { RelationSelect, type RelationSelectProps, type RelationOption } from './RelationSelect';
 export { SearchInput, type SearchInputProps } from './SearchInput';
 export { SidePanel, type SidePanelProps } from './SidePanel';

package/dist/components/molecules/markdown/CodeBlock.d.ts

@@ -19,7 +19,7 @@ export interface CodeBlockProps {
     showLanguageBadge?: boolean;
     /** Maximum height before scrolling */
     maxHeight?: string;
-    /** Enable JSON-style code folding (default: true for json/orb) */
+    /** Enable brace-based code folding of multi-line `{}`/`[]` blocks (default: true). */
     foldable?: boolean;
     /** Additional CSS classes */
     className?: string;

package/dist/providers/index.cjs

@@ -10,9 +10,9 @@ var LucideIcons2 = require('lucide-react');
 var PhosphorIcons = require('@phosphor-icons/react');
 var TablerIcons = require('@tabler/icons-react');
 var FaIcons = require('react-icons/fa');
+var reactDom = require('react-dom');
 var evaluator = require('@almadar/evaluator');
 var context = require('@almadar/ui/context');
-var reactDom = require('react-dom');
 var reactRouterDom = require('react-router-dom');
 var ELK = require('elkjs/lib/elk.bundled.js');
 var ReactMarkdown = require('react-markdown');
@@ -2041,7 +2041,7 @@ var init_Modal = __esm({
           document.body.style.overflow = "";
         };
       }, [isOpen]);
-      if (!isOpen) return null;
+      if (!isOpen || typeof document === "undefined") return null;
       const handleClose = () => {
         if (closeEvent) eventBus.emit(`UI:${closeEvent}`, {});
         onClose();
@@ -2051,124 +2051,127 @@ var init_Modal = __esm({
           handleClose();
         }
       };
-      return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Overlay,
-          {
-            isVisible: isOpen,
-            onClick: handleOverlayClick,
-            className: "z-40"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          Box,
-          {
-            className: cn(
-              "fixed inset-0 z-50 pointer-events-none",
-              "flex items-start justify-center px-4 pb-4 pt-[10vh]",
-              "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsxs(
-              Dialog,
-              {
-                ref: modalRef,
-                open: true,
-                className: cn(
-                  // Reset browser-default dialog chrome — we own styling. `static`
-                  // overrides the user-agent `position: absolute` so the parent
-                  // flex container's `justify-center` actually centers the dialog
-                  // (without this, the dialog drops out of flex flow and `m-0`
-                  // kills the user-agent's `margin: auto` centering, pinning the
-                  // dialog to top-left).
-                  "static m-0 p-0 border-0 bg-transparent",
-                  // Pre-existing dialog frame
-                  "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
-                  // Desktop sizing + viewport-aware floor.
-                  sizeClasses2[size],
-                  minWidthClasses[size],
-                  "max-h-[80vh]",
-                  // Mobile: take the entire screen. Override desktop max-w cap,
-                  // full height, no rounded corners, no min-width.
-                  "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
-                  lookStyles[look],
-                  className
-                ),
-                style: dragY > 0 ? {
-                  transform: `translateY(${dragY}px)`,
-                  transition: isDragging.current ? "none" : "transform 200ms ease-out"
-                } : void 0,
-                ...title && { "aria-labelledby": "modal-title" },
-                children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(
-                    Box,
-                    {
-                      className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
-                      onPointerDown: (e) => {
-                        if (!swipeDownToClose) return;
-                        dragStartY.current = e.clientY;
-                        isDragging.current = true;
-                        e.target.setPointerCapture(e.pointerId);
-                      },
-                      onPointerMove: (e) => {
-                        if (!isDragging.current) return;
-                        const dy = Math.max(0, e.clientY - dragStartY.current);
-                        setDragY(dy);
-                      },
-                      onPointerUp: () => {
-                        if (!isDragging.current) return;
-                        isDragging.current = false;
-                        if (dragY > 100) {
-                          handleClose();
-                        }
-                        setDragY(0);
-                      },
-                      onPointerCancel: () => {
-                        isDragging.current = false;
-                        setDragY(0);
-                      },
-                      children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
-                    }
+      return reactDom.createPortal(
+        /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Overlay,
+            {
+              isVisible: isOpen,
+              onClick: handleOverlayClick,
+              className: "z-[1000]"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            Box,
+            {
+              className: cn(
+                "fixed inset-0 z-[1001] pointer-events-none",
+                "flex items-start justify-center px-4 pb-4 pt-[10vh]",
+                "max-sm:items-stretch max-sm:p-0 max-sm:pt-0"
+              ),
+              children: /* @__PURE__ */ jsxRuntime.jsxs(
+                Dialog,
+                {
+                  ref: modalRef,
+                  open: true,
+                  className: cn(
+                    // Reset browser-default dialog chrome — we own styling. `static`
+                    // overrides the user-agent `position: absolute` so the parent
+                    // flex container's `justify-center` actually centers the dialog
+                    // (without this, the dialog drops out of flex flow and `m-0`
+                    // kills the user-agent's `margin: auto` centering, pinning the
+                    // dialog to top-left).
+                    "static m-0 p-0 border-0 bg-transparent",
+                    // Pre-existing dialog frame
+                    "pointer-events-auto w-full flex flex-col bg-surface border shadow-elevation-dialog rounded-container",
+                    // Desktop sizing + viewport-aware floor.
+                    sizeClasses2[size],
+                    minWidthClasses[size],
+                    "max-h-[80vh]",
+                    // Mobile: take the entire screen. Override desktop max-w cap,
+                    // full height, no rounded corners, no min-width.
+                    "max-sm:max-w-none max-sm:max-h-none max-sm:w-full max-sm:h-full max-sm:rounded-none",
+                    lookStyles[look],
+                    className
                   ),
-                  (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
-                    Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 flex items-center justify-between",
-                        "border-b-[length:var(--border-width)] border-border"
-                      ),
-                      children: [
-                        title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
-                        showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
-                          Button,
-                          {
-                            variant: "ghost",
-                            size: "sm",
-                            icon: "x",
-                            onClick: handleClose,
-                            "data-event": "CLOSE",
-                            "aria-label": "Close modal"
+                  style: dragY > 0 ? {
+                    transform: `translateY(${dragY}px)`,
+                    transition: isDragging.current ? "none" : "transform 200ms ease-out"
+                  } : void 0,
+                  ...title && { "aria-labelledby": "modal-title" },
+                  children: [
+                    /* @__PURE__ */ jsxRuntime.jsx(
+                      Box,
+                      {
+                        className: "hidden max-sm:flex justify-center py-2 cursor-grab active:cursor-grabbing touch-none",
+                        onPointerDown: (e) => {
+                          if (!swipeDownToClose) return;
+                          dragStartY.current = e.clientY;
+                          isDragging.current = true;
+                          e.target.setPointerCapture(e.pointerId);
+                        },
+                        onPointerMove: (e) => {
+                          if (!isDragging.current) return;
+                          const dy = Math.max(0, e.clientY - dragStartY.current);
+                          setDragY(dy);
+                        },
+                        onPointerUp: () => {
+                          if (!isDragging.current) return;
+                          isDragging.current = false;
+                          if (dragY > 100) {
+                            handleClose();
                           }
-                        )
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
-                  footer && /* @__PURE__ */ jsxRuntime.jsx(
-                    Box,
-                    {
-                      className: cn(
-                        "px-6 py-4 bg-muted",
-                        "border-t-[length:var(--border-width)] border-border"
-                      ),
-                      children: footer
-                    }
-                  )
-                ]
-              }
-            )
-          }
-        )
-      ] });
+                          setDragY(0);
+                        },
+                        onPointerCancel: () => {
+                          isDragging.current = false;
+                          setDragY(0);
+                        },
+                        children: /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-10 h-1 rounded-full bg-border" })
+                      }
+                    ),
+                    (title || showCloseButton) && /* @__PURE__ */ jsxRuntime.jsxs(
+                      Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 flex items-center justify-between",
+                          "border-b-[length:var(--border-width)] border-border"
+                        ),
+                        children: [
+                          title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", as: "h2", id: "modal-title", children: title }),
+                          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(
+                            Button,
+                            {
+                              variant: "ghost",
+                              size: "sm",
+                              icon: "x",
+                              onClick: handleClose,
+                              "data-event": "CLOSE",
+                              "aria-label": "Close modal"
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "flex-1 overflow-y-auto p-6", children }),
+                    footer && /* @__PURE__ */ jsxRuntime.jsx(
+                      Box,
+                      {
+                        className: cn(
+                          "px-6 py-4 bg-muted",
+                          "border-t-[length:var(--border-width)] border-border"
+                        ),
+                        children: footer
+                      }
+                    )
+                  ]
+                }
+              )
+            }
+          )
+        ] }),
+        document.body
+      );
     };
     Modal.displayName = "Modal";
   }
@@ -13964,7 +13967,7 @@ var init_CodeBlock = __esm({
             };
           };
         }, [errorLines]);
-        const isFoldable = foldableProp ?? (language === "orb" || language === "json");
+        const isFoldable = foldableProp ?? true;
         const [collapsed, setCollapsed] = React86.useState(() => /* @__PURE__ */ new Set());
         const foldRegions = React86.useMemo(
           () => isFoldable ? computeFoldRegions(code) : [],
@@ -13987,6 +13990,8 @@ var init_CodeBlock = __esm({
         collapsedRef.current = collapsed;
         const foldStartMapRef = React86.useRef(foldStartMap);
         foldStartMapRef.current = foldStartMap;
+        const hiddenLinesRef = React86.useRef(hiddenLines);
+        hiddenLinesRef.current = hiddenLines;
         const toggleFold = React86.useCallback((lineNum) => {
           setCollapsed((prev) => {
             const next = new Set(prev);
@@ -14099,6 +14104,60 @@ var init_CodeBlock = __esm({
             eventBus.emit("UI:COPY_CODE", { language, success: false });
           }
         };
+        const handleSelectionCopy = React86.useCallback((e) => {
+          if (hiddenLinesRef.current.size === 0) return;
+          const sel = typeof window !== "undefined" ? window.getSelection() : null;
+          if (!sel || sel.rangeCount === 0 || sel.isCollapsed) return;
+          const lineOf = (node) => {
+            const start = node instanceof HTMLElement ? node : node?.parentElement ?? null;
+            const lineEl = start?.closest("[data-line]");
+            if (!lineEl) return null;
+            const n = parseInt(lineEl.getAttribute("data-line") ?? "", 10);
+            return Number.isNaN(n) ? null : n;
+          };
+          const range = sel.getRangeAt(0);
+          let a = lineOf(range.startContainer);
+          let b = lineOf(range.endContainer);
+          if (a === null || b === null) {
+            const container = codeRef.current;
+            if (!container) return;
+            let min = Infinity, max = -Infinity;
+            container.querySelectorAll("[data-line]").forEach((el) => {
+              if (!sel.containsNode(el, true)) return;
+              const n = parseInt(el.getAttribute("data-line") ?? "", 10);
+              if (!Number.isNaN(n)) {
+                min = Math.min(min, n);
+                max = Math.max(max, n);
+              }
+            });
+            if (min === Infinity) return;
+            a = a ?? min;
+            b = b ?? max;
+          }
+          if (a > b) [a, b] = [b, a];
+          let touchesFold = false;
+          for (let i = a; i <= b; i++) {
+            if (hiddenLinesRef.current.has(i) || foldStartMapRef.current.has(i) && collapsedRef.current.has(i)) {
+              touchesFold = true;
+              break;
+            }
+          }
+          if (!touchesFold) return;
+          let endLine = b;
+          let changed = true;
+          while (changed) {
+            changed = false;
+            foldStartMapRef.current.forEach((region, start) => {
+              if (start >= a && start <= endLine && collapsedRef.current.has(start) && region.end > endLine) {
+                endLine = region.end;
+                changed = true;
+              }
+            });
+          }
+          const full = code.split("\n").slice(a, endLine + 1).join("\n");
+          e.clipboardData.setData("text/plain", full);
+          e.preventDefault();
+        }, [code]);
         const hasHeader = showLanguageBadge || showCopyButton;
         return /* @__PURE__ */ jsxRuntime.jsxs(Box, { className: `relative group ${className || ""}`, style: { display: "flex", flexDirection: "column", height: "100%" }, children: [
           hasHeader && /* @__PURE__ */ jsxRuntime.jsxs(
@@ -14249,6 +14308,7 @@ var init_CodeBlock = __esm({
             "div",
             {
               ref: scrollRef,
+              onCopy: handleSelectionCopy,
               style: {
                 flex: 1,
                 minHeight: 0,