@saena-io/create 0.1.0 → 0.2.0

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

@@ -0,0 +1,451 @@
+'use client';
+
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import * as React from 'react';
+
+import { Button, buttonVariants } from '@saena-io/ui/components/button';
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from '@saena-io/ui/components/dropdown-menu';
+import { cn } from '@saena-io/ui/lib/utils';
+
+// A config-driven, responsive toolbar primitive. The host describes groups of items; this component
+// renders each item as a button/menu when there's room, and folds whole groups into a single dropdown
+// (items become menu entries, nested menus become submenus) when the container gets narrow. Folding is
+// pure CSS via container queries — no measurement, no flicker, SSR-safe. Built on Button + DropdownMenu.
+// Editor-agnostic: a rich-text toolbar, a table toolbar, etc. all build the same `ToolbarGroup[]`.
+
+type IconSvg = React.ComponentProps<typeof HugeiconsIcon>['icon'];
+
+/** Container-query breakpoint at which a group folds into one dropdown (Tailwind `@sm`…`@2xl`). */
+export type ToolbarBreakpoint = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
+
+/** A single control: a toggle (carries `active`) or an action (no `active`). */
+export interface ToolbarButtonNode {
+  kind: 'button';
+  id: string;
+  label: string;
+  icon?: IconSvg;
+  /** Custom glyph (e.g. a bullet shape) when a hugeicon doesn't fit. Wins over `icon`. */
+  iconNode?: React.ReactNode;
+  /** Present ⇒ a toggle (pressed when expanded, checkable when collapsed). Absent ⇒ a one-shot action. */
+  active?: boolean;
+  disabled?: boolean;
+  /** Render as a destructive entry when collapsed (e.g. "Delete table"). */
+  destructive?: boolean;
+  onSelect: () => void;
+}
+
+/** A dropdown of child nodes. Expanded → a trigger + menu; collapsed → a submenu. Nests arbitrarily. */
+export interface ToolbarMenuNode {
+  kind: 'menu';
+  id: string;
+  /** The control's stable name — used for the tooltip / accessible name and the folded submenu label. */
+  label: string;
+  /** `labeled` variant only: the text shown in the trigger (e.g. the current block type). Falls back to
+   *  `label`. Keeps the accessible name stable ("Turn into") while the trigger displays the selection. */
+  valueLabel?: string;
+  icon?: IconSvg;
+  active?: boolean;
+  /** Expanded presentation: icon-only, icon+label, a split button (quick action + chevron), or plain. */
+  variant?: 'icon' | 'labeled' | 'split' | 'plain';
+  /** Split variant only: the primary (left half) action. */
+  onPrimary?: () => void;
+  /** Items are mutually exclusive — render as a radio group with a check on the active one. */
+  radio?: boolean;
+  /** Disable the trigger / submenu (e.g. Cell / Row / Column when the caret isn't in a table). */
+  disabled?: boolean;
+  triggerClassName?: string;
+  items: ToolbarNode[];
+}
+
+/** Escape hatch for genuinely custom UI (a link popover, a grid picker). Supplies either/both forms. */
+export interface ToolbarCustomNode {
+  kind: 'custom';
+  id: string;
+  /** Rendered inline in the expanded toolbar. Omit for content that only ever lives inside a menu. */
+  expanded?: React.ReactNode;
+  /** Rendered as a menu entry when the group folds. Falls back to `expanded` (fine for click-only UI). */
+  collapsed?: React.ReactNode;
+}
+
+/** A divider between items inside a menu. */
+export interface ToolbarSeparatorNode {
+  kind: 'separator';
+  id: string;
+}
+
+export type ToolbarNode =
+  | ToolbarButtonNode
+  | ToolbarMenuNode
+  | ToolbarCustomNode
+  | ToolbarSeparatorNode;
+
+export interface ToolbarGroup {
+  id: string;
+  label: string;
+  icon?: IconSvg;
+  /** Fold into one dropdown below this container width; omit / "never" to always stay expanded. */
+  collapse?: ToolbarBreakpoint | 'never';
+  /** Hide the group entirely (display:none) below this container width — for controls that are redundant
+   *  on small screens (e.g. text styling, which is also in the floating selection toolbar). */
+  hideBelow?: ToolbarBreakpoint;
+  items: ToolbarNode[];
+}
+
+// Static class maps so Tailwind's JIT sees the literal classes (it can't read dynamic `@${bp}:` strings).
+const SHOW_EXPANDED: Record<ToolbarBreakpoint, string> = {
+  sm: 'hidden @sm:flex',
+  md: 'hidden @md:flex',
+  lg: 'hidden @lg:flex',
+  xl: 'hidden @xl:flex',
+  '2xl': 'hidden @2xl:flex',
+};
+const SHOW_COLLAPSED: Record<ToolbarBreakpoint, string> = {
+  sm: 'flex @sm:hidden',
+  md: 'flex @md:hidden',
+  lg: 'flex @lg:hidden',
+  xl: 'flex @xl:hidden',
+  '2xl': 'flex @2xl:hidden',
+};
+// A separator shows only where BOTH neighbouring groups are still expanded (container ≥ the larger of
+// their two breakpoints), so the dividers vanish as soon as groups fold into dropdowns.
+const SEP_SHOW: Record<ToolbarBreakpoint, string> = {
+  sm: 'hidden @sm:block',
+  md: 'hidden @md:block',
+  lg: 'hidden @lg:block',
+  xl: 'hidden @xl:block',
+  '2xl': 'hidden @2xl:block',
+};
+// Hide a whole group below a breakpoint; `contents` at/above it so the group's content rejoins the flow.
+const HIDE_BELOW: Record<ToolbarBreakpoint, string> = {
+  sm: 'hidden @sm:contents',
+  md: 'hidden @md:contents',
+  lg: 'hidden @lg:contents',
+  xl: 'hidden @xl:contents',
+  '2xl': 'hidden @2xl:contents',
+};
+const BP_RANK: Record<string, number> = { never: 0, sm: 1, md: 2, lg: 3, xl: 4, '2xl': 5 };
+const RANK_BP: (ToolbarBreakpoint | 'never')[] = ['never', 'sm', 'md', 'lg', 'xl', '2xl'];
+// The separator shows only where both neighbours are fully present AND expanded — at/above the largest of
+// their collapse + hideBelow breakpoints — so it vanishes when a neighbour folds OR hides.
+function separatorShowBp(
+  prev: ToolbarGroup | undefined,
+  group: ToolbarGroup,
+): ToolbarBreakpoint | 'never' {
+  const ranks = [prev?.collapse, group.collapse, prev?.hideBelow, group.hideBelow].map(
+    (c) => BP_RANK[c ?? 'never'] ?? 0,
+  );
+  return RANK_BP[Math.max(...ranks)] ?? 'never';
+}
+
+function Glyph({
+  icon,
+  node,
+  className,
+}: { icon?: IconSvg; node?: React.ReactNode; className?: string }) {
+  if (node) return <>{node}</>;
+  if (!icon) return null;
+  return <HugeiconsIcon icon={icon} strokeWidth={2} className={className} />;
+}
+
+function Chevron() {
+  return (
+    <HugeiconsIcon icon={ArrowDown01Icon} strokeWidth={2} className="size-3 shrink-0 opacity-60" />
+  );
+}
+
+export function Toolbar({
+  groups,
+  className,
+}: {
+  groups: ToolbarGroup[];
+  className?: string;
+}) {
+  const visible = groups.filter((g) => g.items.length > 0);
+  return (
+    <div className={cn('@container flex flex-wrap items-center border-b px-2 py-1', className)}>
+      {visible.map((group, i) => (
+        <React.Fragment key={group.id}>
+          {i > 0 ? <ToolbarSeparator bp={separatorShowBp(visible[i - 1], group)} /> : null}
+          <ToolbarGroupView group={group} />
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+
+function ToolbarSeparator({ bp }: { bp: ToolbarBreakpoint | 'never' }) {
+  return (
+    <span
+      className={cn('mx-1.5 h-6 w-px shrink-0 bg-border', bp === 'never' ? 'block' : SEP_SHOW[bp])}
+      aria-hidden
+    />
+  );
+}
+
+function ToolbarGroupView({ group }: { group: ToolbarGroup }) {
+  const inner =
+    !group.collapse || group.collapse === 'never' ? (
+      <div className="flex items-center">
+        {group.items.map((n) => (
+          <ExpandedNode key={n.id} node={n} />
+        ))}
+      </div>
+    ) : (
+      // Render both forms; container queries show exactly one based on the toolbar's own width.
+      <>
+        <div className={cn('items-center', SHOW_EXPANDED[group.collapse])}>
+          {group.items.map((n) => (
+            <ExpandedNode key={n.id} node={n} />
+          ))}
+        </div>
+        <div className={cn('items-center', SHOW_COLLAPSED[group.collapse])}>
+          <CollapsedGroup group={group} />
+        </div>
+      </>
+    );
+  // A hidden group is display:none below its breakpoint, `contents` above so its content rejoins the row.
+  if (group.hideBelow) return <div className={HIDE_BELOW[group.hideBelow]}>{inner}</div>;
+  return inner;
+}
+
+/** The whole group folded into one dropdown. */
+function CollapsedGroup({ group }: { group: ToolbarGroup }) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={cn(buttonVariants({ variant: 'ghost', size: 'default' }))}
+        title={group.label}
+        aria-label={group.label}
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        {group.icon ? (
+          <Glyph icon={group.icon} className="size-3.5 shrink-0" />
+        ) : (
+          <span className="text-xs">{group.label}</span>
+        )}
+        <Chevron />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-auto">
+        {group.items.map((n) => (
+          <CollapsedNode key={n.id} node={n} />
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/** A node rendered inline in the expanded toolbar. */
+function ExpandedNode({ node }: { node: ToolbarNode }) {
+  if (node.kind === 'separator') return null; // separators only divide items inside a menu
+  if (node.kind === 'custom') return <>{node.expanded}</>;
+  if (node.kind === 'button') {
+    return (
+      <Button
+        type="button"
+        size="icon"
+        variant={node.active ? 'secondary' : 'ghost'}
+        aria-pressed={node.active}
+        disabled={node.disabled}
+        title={node.label}
+        aria-label={node.label}
+        onMouseDown={(e) => e.preventDefault()}
+        onClick={node.onSelect}
+      >
+        {node.icon || node.iconNode ? (
+          <Glyph icon={node.icon} node={node.iconNode} className="size-3.5" />
+        ) : (
+          <span className="text-xs">{node.label}</span>
+        )}
+      </Button>
+    );
+  }
+  return <ExpandedMenu node={node} />;
+}
+
+function ExpandedMenu({ node }: { node: ToolbarMenuNode }) {
+  const variant = node.variant ?? 'plain';
+  const triggerVariant = node.active ? 'secondary' : 'ghost';
+
+  if (variant === 'split') {
+    return (
+      <div className="inline-flex items-stretch">
+        <Button
+          type="button"
+          size="icon"
+          variant={triggerVariant}
+          aria-pressed={node.active}
+          disabled={node.disabled}
+          className="rounded-r-none"
+          title={node.label}
+          aria-label={node.label}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={node.onPrimary}
+        >
+          <Glyph icon={node.icon} node={undefined} className="size-3.5" />
+        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger
+            className={cn(
+              buttonVariants({ variant: triggerVariant, size: 'icon' }),
+              'w-5 rounded-l-none px-0',
+            )}
+            title={`${node.label} options`}
+            aria-label={`${node.label} options`}
+            onMouseDown={(e) => e.preventDefault()}
+          >
+            <Chevron />
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="start" className="w-auto">
+            <MenuItems node={node} />
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
+    );
+  }
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger
+        className={cn(
+          buttonVariants({ variant: triggerVariant, size: 'default' }),
+          node.triggerClassName,
+        )}
+        title={node.label}
+        aria-label={node.label}
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        <Glyph icon={node.icon} className="size-3.5 shrink-0" />
+        {variant === 'labeled' ? (
+          <span className="flex-1 truncate text-left text-xs">{node.valueLabel ?? node.label}</span>
+        ) : null}
+        <Chevron />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="start" className="w-auto">
+        <MenuItems node={node} />
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+/** A menu's children, rendered as dropdown content (radio group when the menu is mutually exclusive). */
+function MenuItems({ node }: { node: ToolbarMenuNode }) {
+  if (node.radio) {
+    const activeId =
+      node.items.find((it) => (it.kind === 'button' || it.kind === 'menu') && it.active)?.id ?? '';
+    return (
+      <DropdownMenuRadioGroup
+        value={activeId}
+        onValueChange={(val) => {
+          const it = node.items.find((x) => x.id === val);
+          if (it && it.kind === 'button') it.onSelect();
+          else if (it && it.kind === 'menu') it.onPrimary?.();
+        }}
+      >
+        {node.items.map((it) =>
+          it.kind === 'button' ? (
+            <DropdownMenuRadioItem
+              key={it.id}
+              value={it.id}
+              onMouseDown={(e) => e.preventDefault()}
+            >
+              {it.icon || it.iconNode ? (
+                <Glyph icon={it.icon} node={it.iconNode} className="size-4" />
+              ) : null}
+              {it.label}
+            </DropdownMenuRadioItem>
+          ) : (
+            <CollapsedNode key={it.id} node={it} />
+          ),
+        )}
+      </DropdownMenuRadioGroup>
+    );
+  }
+  return (
+    <>
+      {node.items.map((it) => (
+        <CollapsedNode key={it.id} node={it} />
+      ))}
+    </>
+  );
+}
+
+/** A node rendered as a menu entry — inside a collapsed group or inside another menu. */
+function CollapsedNode({ node }: { node: ToolbarNode }) {
+  if (node.kind === 'separator') return <DropdownMenuSeparator />;
+  if (node.kind === 'custom') return <>{node.collapsed ?? node.expanded}</>;
+
+  if (node.kind === 'button') {
+    if (node.active !== undefined) {
+      return (
+        <DropdownMenuCheckboxItem
+          checked={node.active}
+          disabled={node.disabled}
+          onCheckedChange={() => node.onSelect()}
+          onMouseDown={(e) => e.preventDefault()}
+        >
+          {node.icon || node.iconNode ? (
+            <Glyph icon={node.icon} node={node.iconNode} className="size-4" />
+          ) : null}
+          {node.label}
+        </DropdownMenuCheckboxItem>
+      );
+    }
+    return (
+      <DropdownMenuItem
+        variant={node.destructive ? 'destructive' : 'default'}
+        disabled={node.disabled}
+        onClick={node.onSelect}
+        onMouseDown={(e) => e.preventDefault()}
+      >
+        {node.icon || node.iconNode ? (
+          <Glyph icon={node.icon} node={node.iconNode} className="size-4" />
+        ) : null}
+        {node.label}
+      </DropdownMenuItem>
+    );
+  }
+
+  // menu → submenu (this is the arbitrary nesting: a folded group can hold submenus of submenus)
+  return (
+    <DropdownMenuSub>
+      <DropdownMenuSubTrigger disabled={node.disabled}>
+        {node.icon ? <Glyph icon={node.icon} className="size-4" /> : null}
+        {node.label}
+      </DropdownMenuSubTrigger>
+      <DropdownMenuSubContent className="w-auto">
+        <MenuItems node={node} />
+      </DropdownMenuSubContent>
+    </DropdownMenuSub>
+  );
+}
+
+/** Render a flat list of nodes as expanded controls — no group chrome, collapse, or container query. For
+ *  compact surfaces like a floating selection toolbar (where an `@container` would break shrink-to-fit). */
+export function ToolbarItems({
+  items,
+  className,
+}: {
+  items: ToolbarNode[];
+  className?: string;
+}) {
+  return (
+    <div className={cn('flex items-center', className)}>
+      {items.map((n) => (
+        <ExpandedNode key={n.id} node={n} />
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,52 @@
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
+
+import { cn } from '@saena-io/ui/lib/utils';
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = 'top',
+  sideOffset = 4,
+  align = 'center',
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            'z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-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 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/template/base/src/hooks/use-mobile.ts

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/template/base/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template/base/src/routes/__root.tsx

@@ -1,4 +1,4 @@
-import appCss from '@saena-io/ui/globals.css?url';
+import appCss from '../styles/globals.css?url';
 import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router';
 
 export const Route = createRootRoute({

package/template/base/src/server/auth.ts

@@ -3,8 +3,8 @@ import type { Actor } from '@saena-io/plugin-sdk';
 import { getCoreDb } from './core';
 
 const SECRET = process.env.BETTER_AUTH_SECRET ?? 'dev-secret-change-me-0123456789abcdef';
-// Must match the dev server origin (WEB_PORT) so better-auth's origin/CSRF check passes.
-const BASE_URL = process.env.BETTER_AUTH_URL ?? 'http://localhost:3100';
+// Must match the app's origin (PORT) so better-auth's origin/CSRF check passes.
+const BASE_URL = process.env.BETTER_AUTH_URL ?? 'http://localhost:3000';
 
 // Server-only: the staff (admin) better-auth audience (§10). The customer audience moved to @saena-io/customers
 // (roadmap M0); a logged-in storefront wires its instance (createCustomerAuth) post-launch. Lazy so a build