@dfosco/storyboard-core 4.2.0-beta.3 → 4.2.0

package/src/lib/components/ui/dropdown-menu/index.js

@@ -1,54 +1,54 @@
-import Root from "./dropdown-menu.svelte";
-import Sub from "./dropdown-menu-sub.svelte";
-import CheckboxGroup from "./dropdown-menu-checkbox-group.svelte";
-import CheckboxItem from "./dropdown-menu-checkbox-item.svelte";
-import Content from "./dropdown-menu-content.svelte";
-import Group from "./dropdown-menu-group.svelte";
-import Item from "./dropdown-menu-item.svelte";
-import Label from "./dropdown-menu-label.svelte";
-import RadioGroup from "./dropdown-menu-radio-group.svelte";
-import RadioItem from "./dropdown-menu-radio-item.svelte";
-import Separator from "./dropdown-menu-separator.svelte";
-import Shortcut from "./dropdown-menu-shortcut.svelte";
-import Trigger from "./dropdown-menu-trigger.svelte";
-import SubContent from "./dropdown-menu-sub-content.svelte";
-import SubTrigger from "./dropdown-menu-sub-trigger.svelte";
-import GroupHeading from "./dropdown-menu-group-heading.svelte";
-import Portal from "./dropdown-menu-portal.svelte";
+import Root from "./dropdown-menu.jsx";
+import Sub from "./dropdown-menu-sub.jsx";
+import CheckboxGroup from "./dropdown-menu-checkbox-group.jsx";
+import CheckboxItem from "./dropdown-menu-checkbox-item.jsx";
+import Content from "./dropdown-menu-content.jsx";
+import Group from "./dropdown-menu-group.jsx";
+import Item from "./dropdown-menu-item.jsx";
+import Label from "./dropdown-menu-label.jsx";
+import RadioGroup from "./dropdown-menu-radio-group.jsx";
+import RadioItem from "./dropdown-menu-radio-item.jsx";
+import Separator from "./dropdown-menu-separator.jsx";
+import Shortcut from "./dropdown-menu-shortcut.jsx";
+import Trigger from "./dropdown-menu-trigger.jsx";
+import SubContent from "./dropdown-menu-sub-content.jsx";
+import SubTrigger from "./dropdown-menu-sub-trigger.jsx";
+import GroupHeading from "./dropdown-menu-group-heading.jsx";
+import Portal from "./dropdown-menu-portal.jsx";
 
 export {
-	CheckboxGroup,
-	CheckboxItem,
-	Content,
-	Portal,
-	Root as DropdownMenu,
-	CheckboxGroup as DropdownMenuCheckboxGroup,
-	CheckboxItem as DropdownMenuCheckboxItem,
-	Content as DropdownMenuContent,
-	Portal as DropdownMenuPortal,
-	Group as DropdownMenuGroup,
-	Item as DropdownMenuItem,
-	Label as DropdownMenuLabel,
-	RadioGroup as DropdownMenuRadioGroup,
-	RadioItem as DropdownMenuRadioItem,
-	Separator as DropdownMenuSeparator,
-	Shortcut as DropdownMenuShortcut,
-	Sub as DropdownMenuSub,
-	SubContent as DropdownMenuSubContent,
-	SubTrigger as DropdownMenuSubTrigger,
-	Trigger as DropdownMenuTrigger,
-	GroupHeading as DropdownMenuGroupHeading,
-	Group,
-	GroupHeading,
-	Item,
-	Label,
-	RadioGroup,
-	RadioItem,
-	Root,
-	Separator,
-	Shortcut,
-	Sub,
-	SubContent,
-	SubTrigger,
-	Trigger,
-};
+CheckboxGroup,
+CheckboxItem,
+Content,
+Portal,
+Root as DropdownMenu,
+CheckboxGroup as DropdownMenuCheckboxGroup,
+CheckboxItem as DropdownMenuCheckboxItem,
+Content as DropdownMenuContent,
+Portal as DropdownMenuPortal,
+Group as DropdownMenuGroup,
+Item as DropdownMenuItem,
+Label as DropdownMenuLabel,
+RadioGroup as DropdownMenuRadioGroup,
+RadioItem as DropdownMenuRadioItem,
+Separator as DropdownMenuSeparator,
+Shortcut as DropdownMenuShortcut,
+Sub as DropdownMenuSub,
+SubContent as DropdownMenuSubContent,
+SubTrigger as DropdownMenuSubTrigger,
+Trigger as DropdownMenuTrigger,
+GroupHeading as DropdownMenuGroupHeading,
+Group,
+GroupHeading,
+Item,
+Label,
+RadioGroup,
+RadioItem,
+Root,
+Separator,
+Shortcut,
+Sub,
+SubContent,
+SubTrigger,
+Trigger,
+};

package/src/lib/components/ui/input/index.js

@@ -1,7 +1,7 @@
-import Root from "./input.svelte";
+import Root from "./input.jsx";
 
 export {
-	Root,
-	//
-	Root as Input,
-};
+Root,
+//
+Root as Input,
+};

package/src/lib/components/ui/input/input.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const Input = forwardRef(function Input({ className, type, "data-slot": dataSlot = "input", ...props }, ref) {
+return (
+<input
+ref={ref}
+data-slot={dataSlot}
+type={type}
+className={cn(
+"dark:bg-input/30 border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 disabled:bg-input/50 dark:disabled:bg-input/80 h-8 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors file:h-6 file:text-sm file:font-medium focus-visible:ring-3 aria-invalid:ring-3 md:text-sm file:text-foreground placeholder:text-muted-foreground w-full min-w-0 outline-none file:inline-flex file:border-0 file:bg-transparent disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Input;

package/src/lib/components/ui/label/index.js

@@ -1,7 +1,7 @@
-import Root from "./label.svelte";
+import Root from "./label.jsx";
 
 export {
-	Root,
-	//
-	Root as Label,
-};
+Root,
+//
+Root as Label,
+};

package/src/lib/components/ui/label/label.jsx

@@ -0,0 +1,19 @@
+import { forwardRef } from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "../../../utils/index.js";
+
+const Label = forwardRef(function Label({ className, ...props }, ref) {
+return (
+<LabelPrimitive.Root
+ref={ref}
+data-slot="label"
+className={cn(
+"gap-2 text-sm leading-none font-medium group-data-[disabled=true]:opacity-50 peer-disabled:opacity-50 flex items-center select-none group-data-[disabled=true]:pointer-events-none peer-disabled:cursor-not-allowed",
+className
+)}
+{...props}
+/>
+);
+});
+
+export default Label;

package/src/lib/components/ui/panel/index.js

@@ -1,24 +1,24 @@
-import Root from "./panel.svelte";
-import Content from "./panel-content.svelte";
-import Header from "./panel-header.svelte";
-import Title from "./panel-title.svelte";
-import Body from "./panel-body.svelte";
-import Footer from "./panel-footer.svelte";
-import Close from "./panel-close.svelte";
+import Root from "./panel.jsx";
+import Content from "./panel-content.jsx";
+import Header from "./panel-header.jsx";
+import Title from "./panel-title.jsx";
+import Body from "./panel-body.jsx";
+import Footer from "./panel-footer.jsx";
+import Close from "./panel-close.jsx";
 
 export {
-  Root,
-  Content,
-  Header,
-  Title,
-  Body,
-  Footer,
-  Close,
-  Root as Panel,
-  Content as PanelContent,
-  Header as PanelHeader,
-  Title as PanelTitle,
-  Body as PanelBody,
-  Footer as PanelFooter,
-  Close as PanelClose,
+Root,
+Content,
+Header,
+Title,
+Body,
+Footer,
+Close,
+Root as Panel,
+Content as PanelContent,
+Header as PanelHeader,
+Title as PanelTitle,
+Body as PanelBody,
+Footer as PanelFooter,
+Close as PanelClose,
 };

package/src/lib/components/ui/panel/panel-body.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PanelBody = forwardRef(function PanelBody({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="panel-body" className={cn("flex-1 overflow-auto px-4 py-2", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PanelBody;

package/src/lib/components/ui/panel/panel-close.jsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { Button } from "../../../components/ui/button/index.js";
+import { X } from "lucide-react";
+
+const PanelClose = forwardRef(function PanelClose({ className, ...props }, ref) {
+return (
+<DialogPrimitive.Close asChild data-slot="panel-close">
+<Button ref={ref} variant="ghost" size="icon-sm" className={className} {...props}>
+<X />
+<span className="sr-only">Close</span>
+</Button>
+</DialogPrimitive.Close>
+);
+});
+export default PanelClose;

package/src/lib/components/ui/panel/panel-content.jsx

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+
+const PanelContent = forwardRef(function PanelContent({ className, children, ...props }, ref) {
+return (
+<DialogPrimitive.Portal>
+<DialogPrimitive.Content
+ref={ref}
+data-slot="panel-content"
+onInteractOutside={(e) => e.preventDefault()}
+onFocusOutside={(e) => e.preventDefault()}
+className={cn(
+"font-sans fixed z-[10000] bottom-28 right-6 w-[400px] max-h-[90vh] flex flex-col",
+"bg-popover text-popover-foreground border-3 border-slate-400",
+"rounded-xl shadow-xl overflow-x-hidden overflow-y-auto",
+"data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-4",
+"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:slide-out-to-bottom-4",
+"duration-150",
+className
+)}
+{...props}
+>
+{children}
+</DialogPrimitive.Content>
+</DialogPrimitive.Portal>
+);
+});
+export default PanelContent;

package/src/lib/components/ui/panel/panel-footer.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PanelFooter = forwardRef(function PanelFooter({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="panel-footer" className={cn("flex items-center justify-end gap-2 px-4 pt-2 pb-4", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PanelFooter;

package/src/lib/components/ui/panel/panel-header.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PanelHeader = forwardRef(function PanelHeader({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="panel-header" className={cn("flex items-center justify-between gap-2 px-4 pt-4 pb-2", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PanelHeader;

package/src/lib/components/ui/panel/panel-title.jsx

@@ -0,0 +1,12 @@
+import { forwardRef } from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { cn } from "../../../utils/index.js";
+
+const PanelTitle = forwardRef(function PanelTitle({ className, children, ...props }, ref) {
+return (
+<DialogPrimitive.Title ref={ref} data-slot="panel-title" className={cn("text-sm font-semibold", className)} {...props}>
+{children}
+</DialogPrimitive.Title>
+);
+});
+export default PanelTitle;

package/src/lib/components/ui/panel/panel.jsx

@@ -0,0 +1,4 @@
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+export default function Panel({ children, ...props }) {
+return <DialogPrimitive.Root {...props}>{children}</DialogPrimitive.Root>;
+}

package/src/lib/components/ui/popover/index.js

@@ -1,28 +1,28 @@
-import Root from "./popover.svelte";
-import Close from "./popover-close.svelte";
-import Content from "./popover-content.svelte";
-import Description from "./popover-description.svelte";
-import Header from "./popover-header.svelte";
-import Title from "./popover-title.svelte";
-import Trigger from "./popover-trigger.svelte";
-import Portal from "./popover-portal.svelte";
+import Root from "./popover.jsx";
+import Close from "./popover-close.jsx";
+import Content from "./popover-content.jsx";
+import Description from "./popover-description.jsx";
+import Header from "./popover-header.jsx";
+import Title from "./popover-title.jsx";
+import Trigger from "./popover-trigger.jsx";
+import Portal from "./popover-portal.jsx";
 
 export {
-	Root,
-	Content,
-	Description,
-	Header,
-	Title,
-	Trigger,
-	Close,
-	Portal,
-	//
-	Root as Popover,
-	Content as PopoverContent,
-	Description as PopoverDescription,
-	Header as PopoverHeader,
-	Title as PopoverTitle,
-	Trigger as PopoverTrigger,
-	Close as PopoverClose,
-	Portal as PopoverPortal,
-};
+Root,
+Content,
+Description,
+Header,
+Title,
+Trigger,
+Close,
+Portal,
+//
+Root as Popover,
+Content as PopoverContent,
+Description as PopoverDescription,
+Header as PopoverHeader,
+Title as PopoverTitle,
+Trigger as PopoverTrigger,
+Close as PopoverClose,
+Portal as PopoverPortal,
+};

package/src/lib/components/ui/popover/popover-close.jsx

@@ -0,0 +1,7 @@
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+
+const PopoverClose = forwardRef(function PopoverClose(props, ref) {
+return <PopoverPrimitive.Close ref={ref} data-slot="popover-close" {...props} />;
+});
+export default PopoverClose;

package/src/lib/components/ui/popover/popover-content.jsx

@@ -0,0 +1,22 @@
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../../utils/index.js";
+
+const PopoverContent = forwardRef(function PopoverContent({ className, sideOffset = 4, align = "center", ...props }, ref) {
+return (
+<PopoverPrimitive.Portal>
+<PopoverPrimitive.Content
+ref={ref}
+data-slot="popover-content"
+sideOffset={sideOffset}
+align={align}
+className={cn(
+"bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 flex flex-col gap-2.5 rounded-lg p-2.5 text-sm shadow-md ring-1 duration-100 z-50 w-72 origin-(--transform-origin) outline-hidden",
+className
+)}
+{...props}
+/>
+</PopoverPrimitive.Portal>
+);
+});
+export default PopoverContent;

package/src/lib/components/ui/popover/popover-description.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PopoverDescription = forwardRef(function PopoverDescription({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="popover-description" className={cn("text-muted-foreground", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PopoverDescription;

package/src/lib/components/ui/popover/popover-header.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PopoverHeader = forwardRef(function PopoverHeader({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="popover-header" className={cn("flex flex-col gap-0.5 text-sm", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PopoverHeader;

package/src/lib/components/ui/popover/popover-portal.jsx

@@ -0,0 +1,4 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+export default function PopoverPortal(props) {
+return <PopoverPrimitive.Portal {...props} />;
+}

package/src/lib/components/ui/popover/popover-title.jsx

@@ -0,0 +1,11 @@
+import { forwardRef } from "react";
+import { cn } from "../../../utils/index.js";
+
+const PopoverTitle = forwardRef(function PopoverTitle({ className, children, ...props }, ref) {
+return (
+<div ref={ref} data-slot="popover-title" className={cn("font-medium", className)} {...props}>
+{children}
+</div>
+);
+});
+export default PopoverTitle;

package/src/lib/components/ui/popover/popover-trigger.jsx

@@ -0,0 +1,8 @@
+import { forwardRef } from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { cn } from "../../../utils/index.js";
+
+const PopoverTrigger = forwardRef(function PopoverTrigger({ className, ...props }, ref) {
+return <PopoverPrimitive.Trigger ref={ref} data-slot="popover-trigger" className={cn("", className)} {...props} />;
+});
+export default PopoverTrigger;

package/src/lib/components/ui/popover/popover.jsx

@@ -0,0 +1,4 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+export default function Popover({ children, ...props }) {
+return <PopoverPrimitive.Root {...props}>{children}</PopoverPrimitive.Root>;
+}

package/src/lib/components/ui/searchable-list.jsx

@@ -0,0 +1,160 @@
+/**
+ * SearchableList — a filterable list with an auto-focused search input.
+ *
+ * Designed to work inside dropdown menus and popovers. Prevents printable-key
+ * events from bubbling so host menus (e.g. Radix typeahead) don't hijack input.
+ * Navigation keys (arrows, escape, tab) still bubble for menu keyboard nav.
+ *
+ * Usage:
+ *   <SearchableList
+ *     items={items}
+ *     filterFn={(item, query) => item.name.toLowerCase().includes(query)}
+ *     renderItem={(item) => <MenuItem key={item.id}>{item.name}</MenuItem>}
+ *     placeholder="Filter…"
+ *   />
+ */
+import { useState, useRef, useEffect, useMemo, useCallback, forwardRef } from 'react'
+import { Input } from './input/index.js'
+import { cn } from '../../utils/index.js'
+
+/** Keys that should always bubble to the parent menu for navigation. */
+const PASSTHROUGH_KEYS = new Set([
+  'Escape', 'Tab', 'ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight',
+  'Home', 'End', 'Enter', 'PageUp', 'PageDown',
+])
+
+/**
+ * @param {Object} props
+ * @param {Array} props.items - Items to display and filter
+ * @param {(item: any, query: string) => boolean} props.filterFn - Filter predicate (query is pre-lowercased)
+ * @param {(item: any, index: number) => React.ReactNode} props.renderItem - Render each item
+ * @param {string} [props.placeholder='Search…'] - Input placeholder
+ * @param {string} [props.emptyMessage='No results'] - Shown when filter yields no results
+ * @param {string} [props.loadingMessage='Loading…'] - Shown while loading
+ * @param {boolean} [props.loading=false] - Whether items are still loading
+ * @param {React.ReactNode} [props.header] - Slot rendered between input and results (always visible)
+ * @param {boolean} [props.autoFocus=true] - Focus the input on mount
+ * @param {string} [props.className] - Wrapper className
+ * @param {string} [props.listClassName] - Scrollable results area className
+ * @param {React.RefObject} [props.inputRef] - External ref for the input element
+ */
+const SearchableList = forwardRef(function SearchableList(
+  {
+    items = [],
+    filterFn,
+    renderItem,
+    placeholder = 'Search…',
+    emptyMessage = 'No results',
+    loadingMessage = 'Loading…',
+    loading = false,
+    header,
+    autoFocus = true,
+    className,
+    listClassName,
+    inputRef: externalInputRef,
+  },
+  ref,
+) {
+  const [query, setQuery] = useState('')
+  const internalInputRef = useRef(null)
+  const inputRef = externalInputRef || internalInputRef
+  const listRef = useRef(null)
+
+  // Auto-focus the input on mount — double rAF lets the host menu
+  // finish its own focus management before we steal focus.
+  useEffect(() => {
+    if (!autoFocus) return
+    const outer = requestAnimationFrame(() => {
+      requestAnimationFrame(() => {
+        inputRef.current?.focus()
+      })
+    })
+    return () => cancelAnimationFrame(outer)
+  }, [autoFocus])
+
+  const filteredItems = useMemo(() => {
+    const q = query.trim().toLowerCase()
+    if (!q || !filterFn) return items
+    return items.filter((item) => filterFn(item, q))
+  }, [items, query, filterFn])
+
+  // Handle keyboard navigation between input and list.
+  // Printable keys are suppressed so Radix typeahead doesn't intercept them.
+  const handleKeyDown = useCallback((e) => {
+    // ArrowDown from input → focus first menu item in results
+    if (e.key === 'ArrowDown') {
+      const firstItem = listRef.current?.querySelector('[role="menuitem"]')
+      if (firstItem) {
+        e.preventDefault()
+        e.stopPropagation()
+        firstItem.focus()
+      }
+      return
+    }
+    // Tab from input → focus first menu item (keeps user in the dropdown)
+    if (e.key === 'Tab' && !e.shiftKey) {
+      const firstItem = listRef.current?.querySelector('[role="menuitem"]')
+      if (firstItem) {
+        e.preventDefault()
+        e.stopPropagation()
+        firstItem.focus()
+      }
+      return
+    }
+    if (!PASSTHROUGH_KEYS.has(e.key)) {
+      e.stopPropagation()
+    }
+  }, [])
+
+  // Shift+Tab from any list item → return focus to the input
+  // eslint-disable-next-line react-hooks/preserve-manual-memoization
+  const handleListKeyDown = useCallback((e) => {
+    if (e.key === 'Tab' && e.shiftKey) {
+      e.preventDefault()
+      e.stopPropagation()
+      inputRef.current?.focus()
+    }
+  }, [])
+
+  return (
+    <div ref={ref} className={cn('flex flex-col', className)}>
+      {/* Search input — pinned at top */}
+      <div
+        className="px-2 pt-1 pb-1.5"
+        onKeyDown={handleKeyDown}
+        onPointerDown={(e) => e.stopPropagation()}
+      >
+        <Input
+          ref={inputRef}
+          type="text"
+          value={query}
+          onChange={(e) => setQuery(e.target.value)}
+          placeholder={placeholder}
+          autoComplete="off"
+          spellCheck={false}
+          className="h-9 text-xs rounded"
+          aria-label={placeholder}
+        />
+      </div>
+
+      {/* Optional header slot (e.g. "Create new…" button) — always visible */}
+      {header}
+
+      {/* Scrollable results area */}
+      <div ref={listRef} className={cn('overflow-y-auto', listClassName)} onKeyDown={handleListKeyDown}>
+        {loading ? (
+          <p className="px-2 py-3 text-xs text-muted-foreground text-center">{loadingMessage}</p>
+        ) : filteredItems.length > 0 ? (
+          filteredItems.map(renderItem)
+        ) : query.trim() ? (
+          <p className="px-2 py-3 text-xs text-muted-foreground text-center">{emptyMessage}</p>
+        ) : items.length === 0 ? (
+          <p className="px-2 py-3 text-xs text-muted-foreground text-center">No items</p>
+        ) : null}
+      </div>
+    </div>
+  )
+})
+
+export { SearchableList }
+export default SearchableList