@saena-io/create 0.1.0 → 0.2.0

package/dist/index.js

@@ -31,8 +31,8 @@ var SAENA_VERSION = "^0.1.1";
 var PLUGINS = [
   {
     id: "customers",
-    name: "Customers",
-    hint: "storefront identity (customer accounts + auth)",
+    name: "Customer Accounts",
+    hint: "customer accounts + login (identity for commerce)",
     pkg: "@saena-io/customers",
     version: SAENA_VERSION,
     dependsOn: [],
@@ -41,8 +41,8 @@ var PLUGINS = [
   },
   {
     id: "ai",
-    name: "AI",
-    hint: "AI capability (models + credentials) other plugins build on",
+    name: "AI Secrets",
+    hint: "encrypted storage for AI provider keys, shared by AI features",
     pkg: "@saena-io/ai",
     version: SAENA_VERSION,
     dependsOn: [],
@@ -54,8 +54,8 @@ var PLUGINS = [
   },
   {
     id: "translation",
-    name: "Translation",
-    hint: "AI machine-translation in the Translations grid (needs AI)",
+    name: "AI Translate",
+    hint: "machine-translate your content (needs AI Secrets)",
     pkg: "@saena-io/translation",
     version: SAENA_VERSION,
     dependsOn: ["ai"],
@@ -65,8 +65,8 @@ var PLUGINS = [
   },
   {
     id: "content",
-    name: "Content (CMS)",
-    hint: "no-code content editor \u2014 pages, sections, collections",
+    name: "CMS",
+    hint: "client-editable pages, sections & collections",
     pkg: "@saena-io/content",
     version: SAENA_VERSION,
     dependsOn: [],
@@ -212,7 +212,7 @@ async function main() {
       selectedIds = ["content", "ai", "translation"];
     } else {
       const res = await multiselect({
-        message: "Which plugins? (Core already includes auth, RBAC, settings, the translations grid, and Help)",
+        message: "Which plugins? Space toggles, enter confirms \u2014 or select none for a core-only app. (Core already includes auth, RBAC, settings, the translations grid, and Help.)",
         options: PLUGINS.map((p) => ({ value: p.id, label: p.name, hint: p.hint })),
         required: false,
         initialValues: ["content", "ai", "translation"]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saena-io/create",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Scaffold a SAENA app (admin + plugins) from the published @saena-io packages.",
   "type": "module",
   "bin": {

package/template/base/package.json

@@ -8,23 +8,65 @@
     "build": "vite build",
     "start": "vite preview",
     "typecheck": "tsc --noEmit",
+    "ui:update": "bun scripts/ui-update.ts",
     "db:migrate": "bun --env-file=.env scripts/migrate.ts",
     "db:migrate:deploy": "bun scripts/migrate.ts",
     "db:seed": "bun --env-file=.env scripts/seed-staff.ts"
   },
   "dependencies": {
+    "@ai-sdk/react": "^4.0.2",
+    "@base-ui/react": "^1.5.0",
+    "@fontsource-variable/noto-sans": "^5.2.10",
+    "@hugeicons/core-free-icons": "^4.2.0",
+    "@hugeicons/react": "^1.1.6",
+    "@platejs/ai": "^53.2.2",
+    "@platejs/basic-nodes": "^53.0.0",
+    "@platejs/basic-styles": "^53.0.0",
+    "@platejs/code-block": "^53.0.0",
+    "@platejs/dnd": "^53.1.0",
+    "@platejs/docx": "^53.0.0",
+    "@platejs/floating": "^53.0.0",
+    "@platejs/indent": "^53.0.0",
+    "@platejs/juice": "^53.0.0",
+    "@platejs/link": "^53.0.3",
+    "@platejs/list": "^53.1.3",
+    "@platejs/markdown": "^53.2.2",
+    "@platejs/resizable": "^53.0.0",
+    "@platejs/selection": "^53.1.6",
+    "@platejs/table": "^53.0.0",
+    "@platejs/toggle": "^53.0.0",
     "@saena-io/admin": "^0.1.1",
     "@saena-io/catalog": "^0.1.0",
     "@saena-io/core": "^0.1.1",
     "@saena-io/plugin-sdk": "^0.1.0",
-    "@saena-io/ui": "^0.1.1",
+    "@saena-io/ui": "^0.1.2",
     "@tanstack/db": "^0.6.8",
     "@tanstack/query-core": "^5.101.0",
     "@tanstack/query-db-collection": "^1.0.40",
     "@tanstack/react-router": "^1.170.0",
     "@tanstack/react-start": "^1.168.0",
+    "ai": "^7.0.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "embla-carousel-react": "^8.6.0",
+    "input-otp": "^1.4.2",
+    "lowlight": "^3.3.0",
+    "next-themes": "^0.4.6",
+    "platejs": "^53.2.1",
     "react": "^19.2.6",
-    "react-dom": "^19.2.6"
+    "react-day-picker": "^10.0.1",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
+    "react-dom": "^19.2.6",
+    "react-resizable-panels": "^4.11.2",
+    "recharts": "3.8.0",
+    "remark-gfm": "^4.0.1",
+    "shadcn": "^4.11.0",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.6.0",
+    "tw-animate-css": "^1.4.0",
+    "vaul": "^1.1.2"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4",

package/template/base/scripts/ui-update.ts

@@ -0,0 +1,83 @@
+import { copyFileSync, existsSync, mkdirSync, readdirSync, statSync } from 'node:fs';
+import { dirname, join, relative } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+// Re-fetch ejected UI components from the installed @saena-io/ui into src/components/ui (plus src/lib
+// and src/hooks). You OWN these files, so this OVERWRITES the named one(s) with the package's current
+// version — review with `git diff` afterwards and re-apply any edits you'd made. (globals.css is NOT
+// touched here: it carries your own @source/theme customizations.)
+//
+//   bun run ui:update button             # one component
+//   bun run ui:update rich-text/toolbar  # a nested one
+//   bun run ui:update --all              # re-sync everything you've ejected
+
+const appRoot = fileURLToPath(new URL('..', import.meta.url));
+const pkgRoot = join(appRoot, 'node_modules', '@saena-io', 'ui', 'src');
+const localRoot = join(appRoot, 'src');
+const uiDir = join(localRoot, 'components', 'ui');
+
+if (!existsSync(pkgRoot)) {
+  console.error('@saena-io/ui source not found — run `bun install` first.');
+  process.exit(1);
+}
+
+/** Map a local file (under src/) to its @saena-io/ui source counterpart, or null if it isn't an ejected one. */
+function pkgPathFor(localPath: string): string | null {
+  const rel = relative(localRoot, localPath).replace(/\\/g, '/');
+  if (rel.startsWith('components/ui/'))
+    return join(pkgRoot, 'components', rel.slice('components/ui/'.length));
+  if (rel.startsWith('lib/') || rel.startsWith('hooks/')) return join(pkgRoot, rel);
+  return null;
+}
+
+function update(localPath: string): boolean {
+  const pkgPath = pkgPathFor(localPath);
+  if (!pkgPath || !existsSync(pkgPath)) return false;
+  mkdirSync(dirname(localPath), { recursive: true });
+  copyFileSync(pkgPath, localPath);
+  console.log(`  updated ${relative(appRoot, localPath).replace(/\\/g, '/')}`);
+  return true;
+}
+
+function walk(dir: string, out: string[] = []): string[] {
+  if (!existsSync(dir)) return out;
+  for (const entry of readdirSync(dir)) {
+    const full = join(dir, entry);
+    if (statSync(full).isDirectory()) walk(full, out);
+    else if (/\.(ts|tsx)$/.test(entry)) out.push(full);
+  }
+  return out;
+}
+
+const arg = process.argv[2];
+if (!arg) {
+  console.log('Re-fetch ejected UI from @saena-io/ui.\n');
+  console.log('  bun run ui:update <component>   e.g. button · card · rich-text/toolbar');
+  console.log('  bun run ui:update --all         re-sync everything you have ejected');
+  process.exit(0);
+}
+
+let count = 0;
+if (arg === '--all') {
+  console.log('Re-fetching all ejected UI from @saena-io/ui…');
+  const targets = walk(uiDir);
+  const utils = join(localRoot, 'lib', 'utils.ts');
+  if (existsSync(utils)) targets.push(utils);
+  targets.push(...walk(join(localRoot, 'hooks')));
+  for (const t of targets) if (update(t)) count++;
+} else {
+  const name = arg.replace(/\.tsx?$/, '');
+  const ext = existsSync(join(pkgRoot, 'components', `${name}.tsx`))
+    ? 'tsx'
+    : existsSync(join(pkgRoot, 'components', `${name}.ts`))
+      ? 'ts'
+      : null;
+  if (!ext) {
+    console.error(`No component "${name}" in @saena-io/ui.`);
+    process.exit(1);
+  }
+  if (update(join(uiDir, `${name}.${ext}`))) count++;
+}
+
+console.log(`\nDone — ${count} file(s) updated. Review with \`git diff\` and re-apply any local edits.`);
+process.exit(0);

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

@@ -0,0 +1,75 @@
+import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion';
+
+import { ArrowDown01Icon, ArrowUp01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/react';
+import { cn } from '@saena-io/ui/lib/utils';
+
+function Accordion({ className, ...props }: AccordionPrimitive.Root.Props) {
+  return (
+    <AccordionPrimitive.Root
+      data-slot="accordion"
+      className={cn('flex w-full flex-col overflow-hidden rounded-md border', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionItem({ className, ...props }: AccordionPrimitive.Item.Props) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn('not-last:border-b data-open:bg-muted/50', className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({ className, children, ...props }: AccordionPrimitive.Trigger.Props) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          'group/accordion-trigger relative flex flex-1 items-start justify-between gap-6 border border-transparent p-2 text-left text-xs/relaxed font-medium transition-all outline-none hover:underline aria-disabled:pointer-events-none aria-disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <HugeiconsIcon
+          icon={ArrowDown01Icon}
+          strokeWidth={2}
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden"
+        />
+        <HugeiconsIcon
+          icon={ArrowUp01Icon}
+          strokeWidth={2}
+          data-slot="accordion-trigger-icon"
+          className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline"
+        />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({ className, children, ...props }: AccordionPrimitive.Panel.Props) {
+  return (
+    <AccordionPrimitive.Panel
+      data-slot="accordion-content"
+      className="overflow-hidden px-2 text-xs/relaxed data-open:animate-accordion-down data-closed:animate-accordion-up"
+      {...props}
+    >
+      <div
+        className={cn(
+          'h-(--accordion-panel-height) pt-0 pb-4 data-ending-style:h-0 data-starting-style:h-0 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+          className,
+        )}
+      >
+        {children}
+      </div>
+    </AccordionPrimitive.Panel>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/template/base/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,162 @@
+'use client';
+
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog';
+import type * as React from 'react';
+
+import { Button } from '@saena-io/ui/components/button';
+import { cn } from '@saena-io/ui/lib/utils';
+
+function AlertDialog({ ...props }: AlertDialogPrimitive.Root.Props) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({ ...props }: AlertDialogPrimitive.Trigger.Props) {
+  return <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />;
+}
+
+function AlertDialogPortal({ ...props }: AlertDialogPrimitive.Portal.Props) {
+  return <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />;
+}
+
+function AlertDialogOverlay({ className, ...props }: AlertDialogPrimitive.Backdrop.Props) {
+  return (
+    <AlertDialogPrimitive.Backdrop
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        'fixed inset-0 isolate z-50 bg-black/80 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Popup.Props & {
+  size?: 'default' | 'sm';
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Popup
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          'group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-3 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-64 data-[size=default]:sm:max-w-sm 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}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        'grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogMedia({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-8 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        'font-heading text-sm font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        'text-xs/relaxed text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({ className, ...props }: React.ComponentProps<typeof Button>) {
+  return <Button data-slot="alert-dialog-action" className={cn(className)} {...props} />;
+}
+
+function AlertDialogCancel({
+  className,
+  variant = 'outline',
+  size = 'default',
+  ...props
+}: AlertDialogPrimitive.Close.Props &
+  Pick<React.ComponentProps<typeof Button>, 'variant' | 'size'>) {
+  return (
+    <AlertDialogPrimitive.Close
+      data-slot="alert-dialog-cancel"
+      className={cn(className)}
+      render={<Button variant={variant} size={size} />}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+};

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

@@ -0,0 +1,73 @@
+import { type VariantProps, cva } from 'class-variance-authority';
+import type * as React from 'react';
+
+import { cn } from '@saena-io/ui/lib/utils';
+
+const alertVariants = cva(
+  "group/alert relative grid w-full gap-0.5 rounded-lg border px-2 py-1.5 text-left text-xs/relaxed has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-1.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-3.5",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-xs/relaxed text-balance text-muted-foreground md:text-pretty [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn('absolute top-1.5 right-2', className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };