@saena-io/create 0.1.0 → 0.2.0

package/template/base/src/components/ui/app-sidebar.tsx

@@ -0,0 +1,183 @@
+'use client';
+
+import type * as React from 'react';
+
+import {
+  BookOpen02Icon,
+  ChartRingIcon,
+  CommandIcon,
+  ComputerTerminalIcon,
+  CropIcon,
+  MapsIcon,
+  PieChartIcon,
+  RoboticIcon,
+  SentIcon,
+  Settings05Icon,
+} from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { NavMain } from '@saena-io/ui/components/nav-main';
+import { NavProjects } from '@saena-io/ui/components/nav-projects';
+import { NavSecondary } from '@saena-io/ui/components/nav-secondary';
+import { NavUser } from '@saena-io/ui/components/nav-user';
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from '@saena-io/ui/components/sidebar';
+
+const data = {
+  user: {
+    name: 'shadcn',
+    email: 'm@example.com',
+    avatar: '/avatars/shadcn.jpg',
+  },
+  navMain: [
+    {
+      title: 'Playground',
+      url: '#',
+      icon: <HugeiconsIcon icon={ComputerTerminalIcon} strokeWidth={2} />,
+      isActive: true,
+      items: [
+        {
+          title: 'History',
+          url: '#',
+        },
+        {
+          title: 'Starred',
+          url: '#',
+        },
+        {
+          title: 'Settings',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Models',
+      url: '#',
+      icon: <HugeiconsIcon icon={RoboticIcon} strokeWidth={2} />,
+      items: [
+        {
+          title: 'Genesis',
+          url: '#',
+        },
+        {
+          title: 'Explorer',
+          url: '#',
+        },
+        {
+          title: 'Quantum',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Documentation',
+      url: '#',
+      icon: <HugeiconsIcon icon={BookOpen02Icon} strokeWidth={2} />,
+      items: [
+        {
+          title: 'Introduction',
+          url: '#',
+        },
+        {
+          title: 'Get Started',
+          url: '#',
+        },
+        {
+          title: 'Tutorials',
+          url: '#',
+        },
+        {
+          title: 'Changelog',
+          url: '#',
+        },
+      ],
+    },
+    {
+      title: 'Settings',
+      url: '#',
+      icon: <HugeiconsIcon icon={Settings05Icon} strokeWidth={2} />,
+      items: [
+        {
+          title: 'General',
+          url: '#',
+        },
+        {
+          title: 'Team',
+          url: '#',
+        },
+        {
+          title: 'Billing',
+          url: '#',
+        },
+        {
+          title: 'Limits',
+          url: '#',
+        },
+      ],
+    },
+  ],
+  navSecondary: [
+    {
+      title: 'Support',
+      url: '#',
+      icon: <HugeiconsIcon icon={ChartRingIcon} strokeWidth={2} />,
+    },
+    {
+      title: 'Feedback',
+      url: '#',
+      icon: <HugeiconsIcon icon={SentIcon} strokeWidth={2} />,
+    },
+  ],
+  projects: [
+    {
+      name: 'Design Engineering',
+      url: '#',
+      icon: <HugeiconsIcon icon={CropIcon} strokeWidth={2} />,
+    },
+    {
+      name: 'Sales & Marketing',
+      url: '#',
+      icon: <HugeiconsIcon icon={PieChartIcon} strokeWidth={2} />,
+    },
+    {
+      name: 'Travel',
+      url: '#',
+      icon: <HugeiconsIcon icon={MapsIcon} strokeWidth={2} />,
+    },
+  ],
+};
+export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
+  return (
+    <Sidebar variant="inset" {...props}>
+      <SidebarHeader>
+        <SidebarMenu>
+          <SidebarMenuItem>
+            <SidebarMenuButton size="lg" render={<a href="#" />}>
+              <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
+                <HugeiconsIcon icon={CommandIcon} strokeWidth={2} className="size-4" />
+              </div>
+              <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">Acme Inc</span>
+                <span className="truncate text-xs">Enterprise</span>
+              </div>
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarHeader>
+      <SidebarContent>
+        <NavMain items={data.navMain} />
+        <NavProjects projects={data.projects} />
+        <NavSecondary items={data.navSecondary} className="mt-auto" />
+      </SidebarContent>
+      <SidebarFooter>
+        <NavUser user={data.user} />
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/template/base/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,22 @@
+import { cn } from '@saena-io/ui/lib/utils';
+
+function AspectRatio({
+  ratio,
+  className,
+  ...props
+}: React.ComponentProps<'div'> & { ratio: number }) {
+  return (
+    <div
+      data-slot="aspect-ratio"
+      style={
+        {
+          '--ratio': ratio,
+        } as React.CSSProperties
+      }
+      className={cn('relative aspect-(--ratio)', className)}
+      {...props}
+    />
+  );
+}
+
+export { AspectRatio };

package/template/base/src/components/ui/asset-input.tsx

@@ -0,0 +1,211 @@
+import { ImageUpload01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import type { AssetRef } from '@saena-io/plugin-sdk';
+import { cn } from '@saena-io/ui/lib/utils';
+import { type ChangeEvent, type DragEvent, useEffect, useMemo, useRef, useState } from 'react';
+import { Button } from './button';
+import { Spinner } from './spinner';
+
+// The core asset uploader (ADR-0002): a controlled field that POSTs a file to the host's upload route and yields
+// an AssetRef. A future DAM plugin registers a richer picker that replaces this everywhere it appears.
+
+const UPLOAD_URL = '/api/assets/upload';
+const DEFAULT_ACCEPT = 'image/png,image/jpeg,image/webp,image/gif,image/avif';
+
+function formatBytes(n: number): string {
+  if (n < 1024) return `${n} B`;
+  if (n < 1024 * 1024) return `${Math.round(n / 1024)} KB`;
+  return `${(n / (1024 * 1024)).toFixed(1)} MB`;
+}
+
+export function AssetInput({
+  value,
+  onChange,
+  onEdit,
+  accept = DEFAULT_ACCEPT,
+  className,
+  showRemove = true,
+}: {
+  value: AssetRef | null;
+  onChange: (ref: AssetRef | null) => void;
+  /** When set, the filled control shows an "Edit" action (e.g. to open a focal-point/alt sheet). */
+  onEdit?: () => void;
+  accept?: string;
+  className?: string;
+  /** Show the "Remove" (clear) button when filled. Off when removal is owned by a container (e.g. a list row). */
+  showRemove?: boolean;
+}) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [uploading, setUploading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [dragging, setDragging] = useState(false);
+  // Drag-enter/leave fire per child element; count depth so the highlight doesn't flicker over inner nodes.
+  const dragDepth = useRef(0);
+  const acceptedTypes = useMemo(
+    () =>
+      new Set(
+        accept
+          .split(',')
+          .map((s) => s.trim())
+          .filter(Boolean),
+      ),
+    [accept],
+  );
+
+  // A drag cancelled (Escape) or dropped outside this element fires no local dragleave/drop, so reset the
+  // highlight on any window-level drag end while we're highlighted.
+  useEffect(() => {
+    if (!dragging) return;
+    const reset = () => {
+      dragDepth.current = 0;
+      setDragging(false);
+    };
+    window.addEventListener('dragend', reset);
+    window.addEventListener('drop', reset);
+    return () => {
+      window.removeEventListener('dragend', reset);
+      window.removeEventListener('drop', reset);
+    };
+  }, [dragging]);
+
+  const pick = () => inputRef.current?.click();
+
+  async function upload(file: File): Promise<void> {
+    setUploading(true);
+    setError(null);
+    try {
+      const body = new FormData();
+      body.append('file', file);
+      const res = await fetch(UPLOAD_URL, { method: 'POST', body });
+      if (!res.ok) {
+        const detail = (await res.json().catch(() => null)) as { error?: string } | null;
+        throw new Error(detail?.error ?? `upload failed (${res.status})`);
+      }
+      onChange((await res.json()) as AssetRef);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : 'upload failed');
+    } finally {
+      setUploading(false);
+    }
+  }
+
+  function onFile(e: ChangeEvent<HTMLInputElement>): void {
+    const file = e.target.files?.[0];
+    e.target.value = ''; // let the same file be re-picked after a remove
+    if (file) void upload(file);
+  }
+
+  // Native drag-and-drop: the whole control is a drop target (empty or filled — a drop replaces). Disabled
+  // mid-upload. Every handler ignores non-file drags (`types` lacks 'Files') so e.g. a list-item reorder drag
+  // passes straight through to the list without flickering this dropzone.
+  const isFileDrag = (e: DragEvent) => e.dataTransfer.types.includes('Files');
+  const dropHandlers = uploading
+    ? {}
+    : {
+        onDragEnter: (e: DragEvent) => {
+          if (!isFileDrag(e)) return;
+          e.preventDefault();
+          dragDepth.current += 1;
+          setDragging(true);
+        },
+        onDragOver: (e: DragEvent) => {
+          if (!isFileDrag(e)) return;
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy';
+        },
+        onDragLeave: (e: DragEvent) => {
+          if (!isFileDrag(e)) return;
+          e.preventDefault();
+          dragDepth.current -= 1;
+          if (dragDepth.current <= 0) {
+            dragDepth.current = 0;
+            setDragging(false);
+          }
+        },
+        onDrop: (e: DragEvent) => {
+          if (!isFileDrag(e)) return;
+          e.preventDefault();
+          dragDepth.current = 0;
+          setDragging(false);
+          const file = e.dataTransfer.files?.[0];
+          if (!file) return;
+          if (acceptedTypes.size > 0 && !acceptedTypes.has(file.type)) {
+            setError('Please drop an image');
+            return;
+          }
+          void upload(file);
+        },
+      };
+
+  return (
+    <div className={cn('flex flex-col gap-1.5', className)} {...dropHandlers}>
+      <input ref={inputRef} type="file" accept={accept} className="hidden" onChange={onFile} />
+      {value ? (
+        <div
+          className={cn(
+            'flex items-center gap-3 rounded-md border border-input bg-input/20 p-2 transition-colors dark:bg-input/30',
+            dragging && 'border-ring ring-2 ring-ring/30',
+          )}
+        >
+          <img
+            src={value.url}
+            alt=""
+            className="size-16 shrink-0 rounded object-cover ring-1 ring-foreground/10"
+          />
+          <div className="flex min-w-0 flex-1 flex-col gap-1.5">
+            <span className="truncate text-muted-foreground text-xs">
+              {value.mime} · {formatBytes(value.size)}
+            </span>
+            <div className="flex gap-2">
+              {onEdit ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="outline"
+                  onClick={onEdit}
+                  disabled={uploading}
+                >
+                  Edit
+                </Button>
+              ) : null}
+              <Button type="button" size="sm" variant="outline" onClick={pick} disabled={uploading}>
+                {uploading ? 'Uploading…' : 'Replace'}
+              </Button>
+              {showRemove ? (
+                <Button
+                  type="button"
+                  size="sm"
+                  variant="ghost"
+                  onClick={() => onChange(null)}
+                  disabled={uploading}
+                >
+                  Remove
+                </Button>
+              ) : null}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <button
+          type="button"
+          onClick={pick}
+          disabled={uploading}
+          className={cn(
+            'flex h-24 flex-col items-center justify-center gap-1.5 rounded-md border border-input border-dashed bg-input/20 text-muted-foreground text-xs transition-colors hover:bg-input/40 disabled:pointer-events-none disabled:opacity-50 dark:bg-input/30',
+            dragging && 'border-ring border-solid bg-input/40 text-foreground',
+          )}
+        >
+          {uploading ? (
+            <Spinner className="size-5" />
+          ) : (
+            <HugeiconsIcon icon={ImageUpload01Icon} strokeWidth={2} className="size-5" />
+          )}
+          <span>
+            {uploading ? 'Uploading…' : dragging ? 'Drop to upload' : 'Click or drag an image here'}
+          </span>
+        </button>
+      )}
+      {error ? <span className="text-destructive text-xs">{error}</span> : null}
+    </div>
+  );
+}

package/template/base/src/components/ui/avatar.tsx

@@ -0,0 +1,91 @@
+import { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';
+import type * as React from 'react';
+
+import { cn } from '@saena-io/ui/lib/utils';
+
+function Avatar({
+  className,
+  size = 'default',
+  ...props
+}: AvatarPrimitive.Root.Props & {
+  size?: 'default' | 'sm' | 'lg';
+}) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      data-size={size}
+      className={cn(
+        'group/avatar relative flex size-8 shrink-0 rounded-full select-none after:absolute after:inset-0 after:rounded-full after:border after:border-border after:mix-blend-darken data-[size=lg]:size-10 data-[size=sm]:size-6 dark:after:mix-blend-lighten',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarImage({ className, ...props }: AvatarPrimitive.Image.Props) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn('aspect-square size-full rounded-full object-cover', className)}
+      {...props}
+    />
+  );
+}
+
+function AvatarFallback({ className, ...props }: AvatarPrimitive.Fallback.Props) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        'flex size-full items-center justify-center rounded-full bg-muted text-sm text-muted-foreground group-data-[size=sm]/avatar:text-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarBadge({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="avatar-badge"
+      className={cn(
+        'absolute right-0 bottom-0 z-10 inline-flex items-center justify-center rounded-full bg-primary text-primary-foreground bg-blend-color ring-2 ring-background select-none',
+        'group-data-[size=sm]/avatar:size-2 group-data-[size=sm]/avatar:[&>svg]:hidden',
+        'group-data-[size=default]/avatar:size-2.5 group-data-[size=default]/avatar:[&>svg]:size-2',
+        'group-data-[size=lg]/avatar:size-3 group-data-[size=lg]/avatar:[&>svg]:size-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroup({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group"
+      className={cn(
+        'group/avatar-group flex -space-x-2 *:data-[slot=avatar]:ring-2 *:data-[slot=avatar]:ring-background',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AvatarGroupCount({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="avatar-group-count"
+      className={cn(
+        'relative flex size-8 shrink-0 items-center justify-center rounded-full bg-muted text-xs/relaxed text-muted-foreground ring-2 ring-background group-has-data-[size=lg]/avatar-group:size-10 group-has-data-[size=sm]/avatar-group:size-6 [&>svg]:size-4 group-has-data-[size=lg]/avatar-group:[&>svg]:size-5 group-has-data-[size=sm]/avatar-group:[&>svg]:size-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarBadge };

package/template/base/src/components/ui/badge.tsx

@@ -0,0 +1,50 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps, cva } from 'class-variance-authority';
+
+import { cn } from '@saena-io/ui/lib/utils';
+
+const badgeVariants = cva(
+  'group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-[0.625rem] font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-2.5!',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
+        destructive:
+          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
+        outline:
+          'border-border bg-input/20 text-foreground dark:bg-input/30 [a]:hover:bg-muted [a]:hover:text-muted-foreground',
+        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Badge({
+  className,
+  variant = 'default',
+  render,
+  ...props
+}: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>) {
+  return useRender({
+    defaultTagName: 'span',
+    props: mergeProps<'span'>(
+      {
+        className: cn(badgeVariants({ variant }), className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'badge',
+      variant,
+    },
+  });
+}
+
+export { Badge, badgeVariants };

package/template/base/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,104 @@
+import { mergeProps } from '@base-ui/react/merge-props';
+import { useRender } from '@base-ui/react/use-render';
+import type * as React from 'react';
+
+import { ArrowRight01Icon, MoreHorizontalCircle01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { cn } from '@saena-io/ui/lib/utils';
+
+function Breadcrumb({ className, ...props }: React.ComponentProps<'nav'>) {
+  return (
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" className={cn(className)} {...props} />
+  );
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-xs/relaxed wrap-break-word text-muted-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>) {
+  return useRender({
+    defaultTagName: 'a',
+    props: mergeProps<'a'>(
+      {
+        className: cn('transition-colors hover:text-foreground', className),
+      },
+      props,
+    ),
+    render,
+    state: {
+      slot: 'breadcrumb-link',
+    },
+  });
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({ children, className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <HugeiconsIcon icon={ArrowRight01Icon} strokeWidth={2} />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-4 items-center justify-center [&>svg]:size-3.5', className)}
+      {...props}
+    >
+      <HugeiconsIcon icon={MoreHorizontalCircle01Icon} strokeWidth={2} />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};