arcway 0.1.0

package/client/ui/panel.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { useAppShell } from './app-shell.jsx';
+function PanelHeader({ children }) {
+  return (
+    <header
+      data-panel-header
+      className="flex h-14 shrink-0 items-center border-b border-panel-border px-4"
+    >
+      {children}
+    </header>
+  );
+}
+function PanelBody({ children }) {
+  return (
+    <div data-panel-body className="flex-1 overflow-y-auto">
+      {children}
+    </div>
+  );
+}
+function PanelTrigger({ children }) {
+  const { togglePanel } = useAppShell();
+  return (
+    <button
+      data-panel-trigger
+      type="button"
+      onClick={togglePanel}
+      className="inline-flex items-center justify-center rounded-md p-2 text-foreground hover:bg-muted"
+      aria-label="Toggle panel"
+    >
+      {children || (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <rect width="18" height="18" x="3" y="3" rx="2" />
+          <path d="M15 3v18" />
+        </svg>
+      )}
+    </button>
+  );
+}
+function PanelRoot({ children, width = 'w-80' }) {
+  const { panelOpen } = useAppShell();
+  if (!panelOpen) return null;
+  return (
+    <aside
+      data-panel
+      className={`@container/panel flex shrink-0 flex-col overflow-hidden border-l border-panel-border bg-panel text-panel-foreground ${width}`}
+    >
+      {children}
+    </aside>
+  );
+}
+const Panel = Object.assign(PanelRoot, {
+  Header: PanelHeader,
+  Body: PanelBody,
+  Trigger: PanelTrigger,
+});
+export { Panel };

package/client/ui/popover.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Popover as PopoverPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Popover({ ...props }) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+function PopoverTrigger({ ...props }) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+function PopoverContent({ className, align = 'center', sideOffset = 4, ...props }) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Content
+        data-slot="popover-content"
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'cn-popover-content z-50 w-72 origin-(--radix-popover-content-transform-origin) outline-hidden',
+          className,
+        )}
+        {...props}
+      />
+    </PopoverPrimitive.Portal>
+  );
+}
+function PopoverAnchor({ ...props }) {
+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
+}
+function PopoverHeader({ className, ...props }) {
+  return (
+    <div data-slot="popover-header" className={cn('cn-popover-header', className)} {...props} />
+  );
+}
+function PopoverTitle({ className, ...props }) {
+  return <div data-slot="popover-title" className={cn('cn-popover-title', className)} {...props} />;
+}
+function PopoverDescription({ className, ...props }) {
+  return (
+    <p
+      data-slot="popover-description"
+      className={cn('cn-popover-description', className)}
+      {...props}
+    />
+  );
+}
+export {
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverDescription,
+  PopoverHeader,
+  PopoverTitle,
+  PopoverTrigger,
+};

package/client/ui/popover.stories.jsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { Popover, PopoverTrigger, PopoverContent } from './popover.jsx';
+import { Button } from './button.jsx';
+const meta = {
+  title: 'UI/Popover',
+  component: Popover,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Popover>
+      <PopoverTrigger asChild>
+        <Button>Open Popover</Button>
+      </PopoverTrigger>
+      <PopoverContent>
+        <p>Popover content goes here.</p>
+      </PopoverContent>
+    </Popover>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: 'Open Popover' });
+    await expect(trigger).toBeInTheDocument();
+  },
+};
+export { Default, stdin_default as default };

package/client/ui/progress.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Progress as ProgressPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Progress({ className, value, ...props }) {
+  return (
+    <ProgressPrimitive.Root
+      data-slot="progress"
+      className={cn('cn-progress relative flex w-full items-center overflow-x-hidden', className)}
+      {...props}
+    >
+      <ProgressPrimitive.Indicator
+        data-slot="progress-indicator"
+        className="cn-progress-indicator size-full flex-1 transition-all"
+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
+      />
+    </ProgressPrimitive.Root>
+  );
+}
+export { Progress };

package/client/ui/progress.stories.js

@@ -0,0 +1,34 @@
+import { expect } from 'storybook/test';
+import { Progress } from './progress.jsx';
+const meta = {
+  title: 'UI/Progress',
+  component: Progress,
+  argTypes: {
+    value: { control: { type: 'range', min: 0, max: 100 } },
+  },
+};
+var stdin_default = meta;
+const Default = {
+  args: { value: 50 },
+  play: async ({ canvasElement }) => {
+    const el = canvasElement.querySelector('[data-slot="progress"]');
+    await expect(el).toBeInTheDocument();
+    const indicator = canvasElement.querySelector('[data-slot="progress-indicator"]');
+    await expect(indicator).toBeInTheDocument();
+  },
+};
+const Empty = {
+  args: { value: 0 },
+  play: async ({ canvasElement }) => {
+    const indicator = canvasElement.querySelector('[data-slot="progress-indicator"]');
+    await expect(indicator.style.transform).toBe('translateX(-100%)');
+  },
+};
+const Full = {
+  args: { value: 100 },
+  play: async ({ canvasElement }) => {
+    const indicator = canvasElement.querySelector('[data-slot="progress-indicator"]');
+    await expect(indicator.style.transform).toBe('translateX(0%)');
+  },
+};
+export { Default, Empty, Full, stdin_default as default };

package/client/ui/radio-group.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { RadioGroup as RadioGroupPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { CircleIcon } from 'lucide-react';
+function RadioGroup({ className, ...props }) {
+  return (
+    <RadioGroupPrimitive.Root
+      data-slot="radio-group"
+      className={cn('cn-radio-group w-full', className)}
+      {...props}
+    />
+  );
+}
+function RadioGroupItem({ className, ...props }) {
+  return (
+    <RadioGroupPrimitive.Item
+      data-slot="radio-group-item"
+      className={cn(
+        'cn-radio-group-item group/radio-group-item peer relative aspect-square shrink-0 border outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    >
+      <RadioGroupPrimitive.Indicator
+        data-slot="radio-group-indicator"
+        className="cn-radio-group-indicator"
+      >
+        <CircleIcon className="cn-radio-group-indicator-icon" />
+      </RadioGroupPrimitive.Indicator>
+    </RadioGroupPrimitive.Item>
+  );
+}
+export { RadioGroup, RadioGroupItem };

package/client/ui/radio-group.stories.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { RadioGroup, RadioGroupItem } from './radio-group.jsx';
+import { Label } from './label.jsx';
+const meta = {
+  title: 'UI/RadioGroup',
+  component: RadioGroup,
+};
+var stdin_default = meta;
+const Default = {
+  render: (args) => (
+    <RadioGroup defaultValue="option-1" {...args}>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option-1" id="option-1" />
+        <Label htmlFor="option-1">Option 1</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option-2" id="option-2" />
+        <Label htmlFor="option-2">Option 2</Label>
+      </div>
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option-3" id="option-3" />
+        <Label htmlFor="option-3">Option 3</Label>
+      </div>
+    </RadioGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radios = canvas.getAllByRole('radio');
+    await expect(radios).toHaveLength(3);
+    await expect(radios[0]).toBeChecked();
+    await expect(radios[1]).not.toBeChecked();
+  },
+};
+const Disabled = {
+  render: () => (
+    <RadioGroup disabled defaultValue="option-1">
+      <div className="flex items-center gap-2">
+        <RadioGroupItem value="option-1" id="d-1" />
+        <Label htmlFor="d-1">Disabled</Label>
+      </div>
+    </RadioGroup>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('radio')).toBeDisabled();
+  },
+};
+export { Default, Disabled, stdin_default as default };

package/client/ui/resizable.jsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import { cn } from './lib/utils.js';
+function ResizablePanelGroup({ className, ...props }) {
+  return (
+    <ResizablePrimitive.Group
+      data-slot="resizable-panel-group"
+      className={cn(
+        'cn-resizable-panel-group flex h-full w-full aria-[orientation=vertical]:flex-col',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+function ResizablePanel({ ...props }) {
+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
+}
+function ResizableHandle({ withHandle, className, ...props }) {
+  return (
+    <ResizablePrimitive.Separator
+      data-slot="resizable-handle"
+      className={cn(
+        'cn-resizable-handle bg-border focus-visible:ring-ring ring-offset-background relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:outline-hidden aria-[orientation=horizontal]:h-px aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:after:left-0 aria-[orientation=horizontal]:after:h-1 aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2 [&[aria-orientation=horizontal]>div]:rotate-90',
+        className,
+      )}
+      {...props}
+    >
+      {withHandle && <div className="cn-resizable-handle-icon z-10 flex shrink-0" />}
+    </ResizablePrimitive.Separator>
+  );
+}
+export { ResizableHandle, ResizablePanel, ResizablePanelGroup };

package/client/ui/scroll-area.jsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function ScrollArea({ className, children, ...props }) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn('cn-scroll-area relative', className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="cn-scroll-area-viewport focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+function ScrollBar({ className, orientation = 'vertical', ...props }) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn(
+        'cn-scroll-area-scrollbar flex touch-none p-px transition-colors select-none',
+        className,
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="cn-scroll-area-thumb bg-border relative flex-1"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+export { ScrollArea, ScrollBar };

package/client/ui/scroll-area.stories.jsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import { ScrollArea, ScrollBar } from './scroll-area.jsx';
+const meta = {
+  title: 'UI/ScrollArea',
+  component: ScrollArea,
+};
+var stdin_default = meta;
+const Vertical = {
+  render: () => (
+    <ScrollArea style={{ height: 200, width: 300 }}>
+      <div style={{ padding: '1rem' }}>
+        {Array.from({ length: 20 }, (_, i) => (
+          <p key={i}>Scrollable item {i + 1}</p>
+        ))}
+      </div>
+    </ScrollArea>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Scrollable item 1')).toBeInTheDocument();
+    await expect(canvas.getByText('Scrollable item 20')).toBeInTheDocument();
+  },
+};
+const Horizontal = {
+  render: () => (
+    <ScrollArea style={{ width: 300 }}>
+      <div style={{ display: 'flex', gap: '1rem', padding: '1rem', width: '800px' }}>
+        {Array.from({ length: 10 }, (_, i) => (
+          <div key={i} style={{ minWidth: 100, padding: '1rem', border: '1px solid gray' }}>
+            Item {i + 1}
+          </div>
+        ))}
+      </div>
+      <ScrollBar orientation="horizontal" />
+    </ScrollArea>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Item 1')).toBeInTheDocument();
+  },
+};
+export { Horizontal, Vertical, stdin_default as default };

package/client/ui/select.jsx

@@ -0,0 +1,145 @@
+import React from 'react';
+import { Select as SelectPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from 'lucide-react';
+function Select({ ...props }) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />;
+}
+function SelectGroup({ className, ...props }) {
+  return (
+    <SelectPrimitive.Group
+      data-slot="select-group"
+      className={cn('cn-select-group', className)}
+      {...props}
+    />
+  );
+}
+function SelectValue({ ...props }) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
+}
+function SelectTrigger({ className, size = 'default', children, ...props }) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      data-size={size}
+      className={cn(
+        'cn-select-trigger flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="cn-select-trigger-icon pointer-events-none" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  );
+}
+function SelectContent({
+  className,
+  children,
+  position = 'item-aligned',
+  align = 'center',
+  ...props
+}) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        data-align-trigger={position === 'item-aligned'}
+        className={cn(
+          'cn-select-content cn-menu-target relative z-50 max-h-(--radix-select-content-available-height) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          className,
+        )}
+        position={position}
+        align={align}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          data-position={position}
+          className={cn(
+            'cn-select-viewport data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)',
+            position === 'popper' && '',
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  );
+}
+function SelectLabel({ className, ...props }) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn('cn-select-label', className)}
+      {...props}
+    />
+  );
+}
+function SelectItem({ className, children, ...props }) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        'cn-select-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}
+    >
+      <span className="cn-select-item-indicator">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="cn-select-item-indicator-icon pointer-events-none" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  );
+}
+function SelectSeparator({ className, ...props }) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn('cn-select-separator pointer-events-none', className)}
+      {...props}
+    />
+  );
+}
+function SelectScrollUpButton({ className, ...props }) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn('cn-select-scroll-up-button', className)}
+      {...props}
+    >
+      <ChevronUpIcon />
+    </SelectPrimitive.ScrollUpButton>
+  );
+}
+function SelectScrollDownButton({ className, ...props }) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn('cn-select-scroll-down-button', className)}
+      {...props}
+    >
+      <ChevronDownIcon />
+    </SelectPrimitive.ScrollDownButton>
+  );
+}
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/client/ui/select.stories.jsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { expect, within } from 'storybook/test';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+  SelectGroup,
+  SelectLabel,
+} from './select.jsx';
+const meta = {
+  title: 'UI/Select',
+  component: Select,
+};
+var stdin_default = meta;
+const Default = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Pick a fruit" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="apple">Apple</SelectItem>
+        <SelectItem value="banana">Banana</SelectItem>
+        <SelectItem value="cherry">Cherry</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('combobox');
+    await expect(trigger).toBeInTheDocument();
+    await expect(trigger.dataset.slot).toBe('select-trigger');
+  },
+};
+const WithGroups = {
+  render: () => (
+    <Select>
+      <SelectTrigger className="w-[200px]">
+        <SelectValue placeholder="Select food" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectGroup>
+          <SelectLabel>Fruits</SelectLabel>
+          <SelectItem value="apple">Apple</SelectItem>
+          <SelectItem value="banana">Banana</SelectItem>
+        </SelectGroup>
+        <SelectGroup>
+          <SelectLabel>Vegetables</SelectLabel>
+          <SelectItem value="carrot">Carrot</SelectItem>
+          <SelectItem value="potato">Potato</SelectItem>
+        </SelectGroup>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByRole('combobox')).toBeInTheDocument();
+  },
+};
+const SmallSize = {
+  render: () => (
+    <Select>
+      <SelectTrigger size="sm" className="w-[200px]">
+        <SelectValue placeholder="Small select" />
+      </SelectTrigger>
+      <SelectContent>
+        <SelectItem value="a">Item A</SelectItem>
+        <SelectItem value="b">Item B</SelectItem>
+      </SelectContent>
+    </Select>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('combobox');
+    await expect(trigger.dataset.size).toBe('sm');
+  },
+};
+export { Default, SmallSize, WithGroups, stdin_default as default };

package/client/ui/separator.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Separator as SeparatorPrimitive } from 'radix-ui';
+import { cn } from './lib/utils.js';
+function Separator({ className, orientation = 'horizontal', decorative = true, ...props }) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        'bg-border shrink-0 data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+export { Separator };