arcway 0.1.0

package/client/ui/combobox.jsx

@@ -0,0 +1,223 @@
+import * as React from 'react';
+import { Combobox as ComboboxPrimitive } from '@base-ui/react';
+import { cn } from './lib/utils.js';
+import { Button } from './button.jsx';
+import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from './input-group.jsx';
+import { CheckIcon, ChevronDownIcon, XIcon } from 'lucide-react';
+const Combobox = ComboboxPrimitive.Root;
+function ComboboxValue({ ...props }) {
+  return <ComboboxPrimitive.Value data-slot="combobox-value" {...props} />;
+}
+function ComboboxTrigger({ className, children, ...props }) {
+  return (
+    <ComboboxPrimitive.Trigger
+      data-slot="combobox-trigger"
+      className={cn('cn-combobox-trigger', className)}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="cn-combobox-trigger-icon pointer-events-none" />
+    </ComboboxPrimitive.Trigger>
+  );
+}
+function ComboboxClear({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.Clear
+      data-slot="combobox-clear"
+      render={<InputGroupButton variant="ghost" size="icon-xs" />}
+      className={cn('cn-combobox-clear', className)}
+      {...props}
+    >
+      <XIcon className="cn-combobox-clear-icon pointer-events-none" />
+    </ComboboxPrimitive.Clear>
+  );
+}
+function ComboboxInput({
+  className,
+  children,
+  disabled = false,
+  showTrigger = true,
+  showClear = false,
+  ...props
+}) {
+  return (
+    <InputGroup className={cn('cn-combobox-input w-auto', className)}>
+      <ComboboxPrimitive.Input render={<InputGroupInput disabled={disabled} />} {...props} />
+      <InputGroupAddon align="inline-end">
+        {showTrigger && (
+          <InputGroupButton
+            size="icon-xs"
+            variant="ghost"
+            asChild
+            data-slot="input-group-button"
+            className="group-has-data-[slot=combobox-clear]/input-group:hidden data-pressed:bg-transparent"
+            disabled={disabled}
+          >
+            <ComboboxTrigger />
+          </InputGroupButton>
+        )}
+        {showClear && <ComboboxClear disabled={disabled} />}
+      </InputGroupAddon>
+      {children}
+    </InputGroup>
+  );
+}
+function ComboboxContent({
+  className,
+  side = 'bottom',
+  sideOffset = 6,
+  align = 'start',
+  alignOffset = 0,
+  anchor,
+  ...props
+}) {
+  return (
+    <ComboboxPrimitive.Portal>
+      <ComboboxPrimitive.Positioner
+        side={side}
+        sideOffset={sideOffset}
+        align={align}
+        alignOffset={alignOffset}
+        anchor={anchor}
+        className="isolate z-50"
+      >
+        <ComboboxPrimitive.Popup
+          data-slot="combobox-content"
+          data-chips={!!anchor}
+          className={cn(
+            'cn-combobox-content cn-combobox-content-logical cn-menu-target group/combobox-content relative max-h-(--available-height) w-(--anchor-width) max-w-(--available-width) min-w-[calc(var(--anchor-width)+--spacing(7))] origin-(--transform-origin) data-[chips=true]:min-w-(--anchor-width)',
+            className,
+          )}
+          {...props}
+        />
+      </ComboboxPrimitive.Positioner>
+    </ComboboxPrimitive.Portal>
+  );
+}
+function ComboboxList({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.List
+      data-slot="combobox-list"
+      className={cn('cn-combobox-list overflow-y-auto overscroll-contain', className)}
+      {...props}
+    />
+  );
+}
+function ComboboxItem({ className, children, ...props }) {
+  return (
+    <ComboboxPrimitive.Item
+      data-slot="combobox-item"
+      className={cn(
+        'cn-combobox-item relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ComboboxPrimitive.ItemIndicator render={<span className="cn-combobox-item-indicator" />}>
+        <CheckIcon className="cn-combobox-item-indicator-icon pointer-events-none" />
+      </ComboboxPrimitive.ItemIndicator>
+    </ComboboxPrimitive.Item>
+  );
+}
+function ComboboxGroup({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.Group
+      data-slot="combobox-group"
+      className={cn('cn-combobox-group', className)}
+      {...props}
+    />
+  );
+}
+function ComboboxLabel({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.GroupLabel
+      data-slot="combobox-label"
+      className={cn('cn-combobox-label', className)}
+      {...props}
+    />
+  );
+}
+function ComboboxCollection({ ...props }) {
+  return <ComboboxPrimitive.Collection data-slot="combobox-collection" {...props} />;
+}
+function ComboboxEmpty({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.Empty
+      data-slot="combobox-empty"
+      className={cn('cn-combobox-empty', className)}
+      {...props}
+    />
+  );
+}
+function ComboboxSeparator({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.Separator
+      data-slot="combobox-separator"
+      className={cn('cn-combobox-separator', className)}
+      {...props}
+    />
+  );
+}
+function ComboboxChips({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.Chips
+      data-slot="combobox-chips"
+      className={cn('cn-combobox-chips', className)}
+      {...props}
+    />
+  );
+}
+function ComboboxChip({ className, children, showRemove = true, ...props }) {
+  return (
+    <ComboboxPrimitive.Chip
+      data-slot="combobox-chip"
+      className={cn(
+        'cn-combobox-chip has-disabled:pointer-events-none has-disabled:cursor-not-allowed has-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showRemove && (
+        <ComboboxPrimitive.ChipRemove
+          render={<Button variant="ghost" size="icon-xs" />}
+          className="cn-combobox-chip-remove"
+          data-slot="combobox-chip-remove"
+        >
+          <XIcon className="cn-combobox-chip-indicator-icon pointer-events-none" />
+        </ComboboxPrimitive.ChipRemove>
+      )}
+    </ComboboxPrimitive.Chip>
+  );
+}
+function ComboboxChipsInput({ className, ...props }) {
+  return (
+    <ComboboxPrimitive.Input
+      data-slot="combobox-chip-input"
+      className={cn('cn-combobox-chip-input min-w-16 flex-1 outline-none', className)}
+      {...props}
+    />
+  );
+}
+function useComboboxAnchor() {
+  return React.useRef(null);
+}
+export {
+  Combobox,
+  ComboboxChip,
+  ComboboxChips,
+  ComboboxChipsInput,
+  ComboboxCollection,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxGroup,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxLabel,
+  ComboboxList,
+  ComboboxSeparator,
+  ComboboxTrigger,
+  ComboboxValue,
+  useComboboxAnchor,
+};

package/client/ui/command.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import { Command as CommandPrimitive } from 'cmdk';
+import { cn } from './lib/utils.js';
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog.jsx';
+import { InputGroup, InputGroupAddon } from './input-group.jsx';
+import { CheckIcon, SearchIcon } from 'lucide-react';
+function Command({ className, ...props }) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn('cn-command flex size-full flex-col overflow-hidden', className)}
+      {...props}
+    />
+  );
+}
+function CommandDialog({
+  title = 'Command Palette',
+  description = 'Search for a command to run...',
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn('cn-command-dialog top-1/3 translate-y-0 overflow-hidden p-0', className)}
+        showCloseButton={showCloseButton}
+      >
+        {children}
+      </DialogContent>
+    </Dialog>
+  );
+}
+function CommandInput({ className, ...props }) {
+  return (
+    <div data-slot="command-input-wrapper" className="cn-command-input-wrapper">
+      <InputGroup className="cn-command-input-group">
+        <CommandPrimitive.Input
+          data-slot="command-input"
+          className={cn(
+            'cn-command-input outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+            className,
+          )}
+          {...props}
+        />
+        <InputGroupAddon>
+          <SearchIcon className="cn-command-input-icon" />
+        </InputGroupAddon>
+      </InputGroup>
+    </div>
+  );
+}
+function CommandList({ className, ...props }) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn('cn-command-list overflow-x-hidden overflow-y-auto', className)}
+      {...props}
+    />
+  );
+}
+function CommandEmpty({ className, ...props }) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className={cn('cn-command-empty', className)}
+      {...props}
+    />
+  );
+}
+function CommandGroup({ className, ...props }) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn('cn-command-group', className)}
+      {...props}
+    />
+  );
+}
+function CommandSeparator({ className, ...props }) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn('cn-command-separator', className)}
+      {...props}
+    />
+  );
+}
+function CommandItem({ className, children, ...props }) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        'cn-command-item group/command-item data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <CheckIcon className="cn-command-item-indicator ml-auto opacity-0 group-has-data-[slot=command-shortcut]/command-item:hidden group-data-[checked=true]/command-item:opacity-100" />
+    </CommandPrimitive.Item>
+  );
+}
+function CommandShortcut({ className, ...props }) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn('cn-command-shortcut', className)}
+      {...props}
+    />
+  );
+}
+export {
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+};

package/client/ui/context-menu.jsx

@@ -0,0 +1,170 @@
+import React from 'react';
+import { ContextMenu as ContextMenuPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { CheckIcon, ChevronRightIcon } from 'lucide-react';
+function ContextMenu({ ...props }) {
+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
+}
+function ContextMenuTrigger({ className, ...props }) {
+  return (
+    <ContextMenuPrimitive.Trigger
+      data-slot="context-menu-trigger"
+      className={cn('cn-context-menu-trigger select-none', className)}
+      {...props}
+    />
+  );
+}
+function ContextMenuGroup({ ...props }) {
+  return <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />;
+}
+function ContextMenuPortal({ ...props }) {
+  return <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />;
+}
+function ContextMenuSub({ ...props }) {
+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
+}
+function ContextMenuRadioGroup({ ...props }) {
+  return <ContextMenuPrimitive.RadioGroup data-slot="context-menu-radio-group" {...props} />;
+}
+function ContextMenuContent({ className, ...props }) {
+  return (
+    <ContextMenuPrimitive.Portal>
+      <ContextMenuPrimitive.Content
+        data-slot="context-menu-content"
+        className={cn(
+          'cn-context-menu-content cn-menu-target z-50 max-h-(--radix-context-menu-content-available-height) origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto',
+          className,
+        )}
+        {...props}
+      />
+    </ContextMenuPrimitive.Portal>
+  );
+}
+function ContextMenuItem({ className, inset, variant = 'default', ...props }) {
+  return (
+    <ContextMenuPrimitive.Item
+      data-slot="context-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        'cn-context-menu-item group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+  return (
+    <ContextMenuPrimitive.SubTrigger
+      data-slot="context-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        'cn-context-menu-sub-trigger flex cursor-default items-center outline-hidden select-none [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="cn-rtl-flip ml-auto" />
+    </ContextMenuPrimitive.SubTrigger>
+  );
+}
+function ContextMenuSubContent({ className, ...props }) {
+  return (
+    <ContextMenuPrimitive.SubContent
+      data-slot="context-menu-sub-content"
+      className={cn(
+        'cn-context-menu-sub-content cn-menu-target z-50 origin-(--radix-context-menu-content-transform-origin) overflow-hidden',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+  return (
+    <ContextMenuPrimitive.CheckboxItem
+      data-slot="context-menu-checkbox-item"
+      data-inset={inset}
+      className={cn(
+        'cn-context-menu-checkbox-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="cn-context-menu-item-indicator pointer-events-none">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.CheckboxItem>
+  );
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+  return (
+    <ContextMenuPrimitive.RadioItem
+      data-slot="context-menu-radio-item"
+      data-inset={inset}
+      className={cn(
+        'cn-context-menu-radio-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      <span className="cn-context-menu-item-indicator pointer-events-none">
+        <ContextMenuPrimitive.ItemIndicator>
+          <CheckIcon />
+        </ContextMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </ContextMenuPrimitive.RadioItem>
+  );
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+  return (
+    <ContextMenuPrimitive.Label
+      data-slot="context-menu-label"
+      data-inset={inset}
+      className={cn('cn-context-menu-label', className)}
+      {...props}
+    />
+  );
+}
+function ContextMenuSeparator({ className, ...props }) {
+  return (
+    <ContextMenuPrimitive.Separator
+      data-slot="context-menu-separator"
+      className={cn('cn-context-menu-separator', className)}
+      {...props}
+    />
+  );
+}
+function ContextMenuShortcut({ className, ...props }) {
+  return (
+    <span
+      data-slot="context-menu-shortcut"
+      className={cn('cn-context-menu-shortcut', className)}
+      {...props}
+    />
+  );
+}
+export {
+  ContextMenu,
+  ContextMenuCheckboxItem,
+  ContextMenuContent,
+  ContextMenuGroup,
+  ContextMenuItem,
+  ContextMenuLabel,
+  ContextMenuPortal,
+  ContextMenuRadioGroup,
+  ContextMenuRadioItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuSub,
+  ContextMenuSubContent,
+  ContextMenuSubTrigger,
+  ContextMenuTrigger,
+};

package/client/ui/context-menu.stories.jsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  ContextMenu,
+  ContextMenuTrigger,
+  ContextMenuContent,
+  ContextMenuItem,
+} from './context-menu.jsx';
+const meta = {
+  title: 'UI/ContextMenu',
+  component: ContextMenu,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <ContextMenu>
+      <ContextMenuTrigger>
+        <div style={{ border: '2px dashed gray', padding: '2rem', textAlign: 'center' }}>
+          Right-click here
+        </div>
+      </ContextMenuTrigger>
+      <ContextMenuContent>
+        <ContextMenuItem>Copy</ContextMenuItem>
+        <ContextMenuItem>Paste</ContextMenuItem>
+        <ContextMenuItem>Delete</ContextMenuItem>
+      </ContextMenuContent>
+    </ContextMenu>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByText('Right-click here');
+    await expect(trigger).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/dialog.jsx

@@ -0,0 +1,109 @@
+import React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { Button } from './button.jsx';
+import { XIcon } from 'lucide-react';
+function Dialog({ ...props }) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+function DialogTrigger({ ...props }) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+function DialogPortal({ ...props }) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+function DialogClose({ ...props }) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+function DialogOverlay({ className, ...props }) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn('cn-dialog-overlay fixed inset-0 isolate z-50', className)}
+      {...props}
+    />
+  );
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'cn-dialog-content fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button variant="ghost" className="cn-dialog-close" size="icon-sm">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+function DialogHeader({ className, ...props }) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn('cn-dialog-header flex flex-col', className)}
+      {...props}
+    />
+  );
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'cn-dialog-footer flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+function DialogTitle({ className, ...props }) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('cn-dialog-title', className)}
+      {...props}
+    />
+  );
+}
+function DialogDescription({ className, ...props }) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn('cn-dialog-description', className)}
+      {...props}
+    />
+  );
+}
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/client/ui/dialog.stories.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from './dialog.jsx';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/Dialog',
+  component: Dialog,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Dialog</Button>
+      </DialogTrigger>
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>This is a dialog description.</DialogDescription>
+        </DialogHeader>
+      </DialogContent>
+    </Dialog>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: 'Open Dialog' });
+    await expect(trigger).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };