@ai-partner-x/aiko-boot-cli 0.1.4

package/templates/scaffold-default/packages/admin/src/components/admin-ui/theme/theme-provider.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { createContext, useContext, useEffect, useState } from "react";
+
+export type Appearance = "light" | "dark" | "system";
+export type Palette = "default" | "blue" | "green" | "violet" | "rose" | "amber" | "fiori";
+
+export type ThemeState = {
+  appearance: Appearance;
+  palette: Palette;
+  /** Resolved to "light" or "dark" for applying to DOM */
+  resolvedAppearance: "light" | "dark";
+};
+
+type ThemeProviderProps = {
+  children: React.ReactNode;
+  defaultTheme?: Partial<ThemeState>;
+  storageKey?: string;
+};
+
+type ThemeProviderContextValue = ThemeState & {
+  setTheme: (update: Partial<Pick<ThemeState, "appearance" | "palette">>) => void;
+};
+
+const defaultState: ThemeState = {
+  appearance: "system",
+  palette: "fiori",
+  resolvedAppearance: "light",
+};
+
+const ThemeProviderContext = createContext<ThemeProviderContextValue | null>(
+  null
+);
+
+function getStoredTheme(storageKey: string): Partial<ThemeState> {
+  try {
+    const raw = localStorage.getItem(storageKey);
+    if (!raw) return {};
+    if (["light", "dark", "system"].includes(raw)) {
+      return { appearance: raw as Appearance };
+    }
+    const parsed = JSON.parse(raw) as Partial<ThemeState>;
+    return {
+      appearance:
+        parsed.appearance && ["light", "dark", "system"].includes(parsed.appearance)
+          ? parsed.appearance
+          : undefined,
+      palette:
+        parsed.palette &&
+        ["default", "blue", "green", "violet", "rose", "amber", "fiori"].includes(parsed.palette)
+          ? parsed.palette
+          : undefined,
+    };
+  } catch {
+    return {};
+  }
+}
+
+function resolveAppearance(appearance: Appearance): "light" | "dark" {
+  if (appearance === "system") {
+    return typeof window !== "undefined" &&
+      window.matchMedia("(prefers-color-scheme: dark)").matches
+      ? "dark"
+      : "light";
+  }
+  return appearance;
+}
+
+export function ThemeProvider({
+  children,
+  defaultTheme = {},
+  storageKey = "app-theme",
+  ...props
+}: ThemeProviderProps) {
+  const stored = getStoredTheme(storageKey);
+  const [state, setState] = useState<ThemeState>(() => {
+    const appearance = (stored.appearance ?? defaultTheme.appearance ?? "system") as Appearance;
+    const palette = (stored.palette ?? defaultTheme.palette ?? "fiori") as Palette;
+    const resolvedAppearance = resolveAppearance(appearance);
+    return { appearance, palette, resolvedAppearance };
+  });
+
+  useEffect(() => {
+    const appearance: Appearance = state.appearance;
+    const resolved =
+      appearance === "system"
+        ? window.matchMedia("(prefers-color-scheme: dark)").matches
+          ? "dark"
+          : "light"
+        : appearance;
+    setState((prev) =>
+      prev.resolvedAppearance !== resolved
+        ? { ...prev, resolvedAppearance: resolved }
+        : prev
+    );
+  }, [state.appearance]);
+
+  useEffect(() => {
+    const media = window.matchMedia("(prefers-color-scheme: dark)");
+    const handler = () => {
+      if (state.appearance !== "system") return;
+      setState((prev) => ({
+        ...prev,
+        resolvedAppearance: media.matches ? "dark" : "light",
+      }));
+    };
+    media.addEventListener("change", handler);
+    return () => media.removeEventListener("change", handler);
+  }, [state.appearance]);
+
+  useEffect(() => {
+    const root = window.document.documentElement;
+    root.classList.remove("light", "dark");
+    root.classList.add(state.resolvedAppearance);
+    root.setAttribute("data-palette", state.palette);
+  }, [state.resolvedAppearance, state.palette]);
+
+  const setTheme = (update: Partial<Pick<ThemeState, "appearance" | "palette">>) => {
+    setState((prev) => {
+      const next = { ...prev };
+      if (update.appearance !== undefined) {
+        next.appearance = update.appearance;
+        next.resolvedAppearance = resolveAppearance(update.appearance);
+      }
+      if (update.palette !== undefined) next.palette = update.palette;
+      try {
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify({
+            appearance: next.appearance,
+            palette: next.palette,
+          })
+        );
+      } catch {}
+      return next;
+    });
+  };
+
+  const value: ThemeProviderContextValue = { ...state, setTheme };
+
+  return (
+    <ThemeProviderContext.Provider {...props} value={value}>
+      {children}
+    </ThemeProviderContext.Provider>
+  );
+}
+
+export function useTheme() {
+  const context = useContext(ThemeProviderContext);
+  if (context === undefined || context === null) {
+    console.error("useTheme must be used within a ThemeProvider");
+    return {
+      ...defaultState,
+      setTheme: () => {},
+    };
+  }
+  return context;
+}
+
+ThemeProvider.displayName = "ThemeProvider";

package/templates/scaffold-default/packages/admin/src/components/admin-ui/theme/theme-select.tsx

@@ -0,0 +1,129 @@
+"use client";
+
+import React from "react";
+import { useTheme } from "./theme-provider";
+import type { Appearance, Palette } from "./theme-provider";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  DropdownMenuSeparator,
+  DropdownMenuLabel,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Moon, Sun, Monitor, ChevronDown, Check, Palette as PaletteIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+const appearanceOptions: { value: Appearance; labelKey: string; icon: React.ReactNode }[] = [
+  { value: "light", labelKey: "theme.light", icon: <Sun className="h-4 w-4" /> },
+  { value: "dark", labelKey: "theme.dark", icon: <Moon className="h-4 w-4" /> },
+  { value: "system", labelKey: "theme.system", icon: <Monitor className="h-4 w-4" /> },
+];
+
+const paletteOptions: { value: Palette; labelKey: string; color: string }[] = [
+  { value: "default", labelKey: "theme.palette.default", color: "oklch(0.55 0 0)" },
+  { value: "blue", labelKey: "theme.palette.blue", color: "oklch(0.55 0.22 264)" },
+  { value: "green", labelKey: "theme.palette.green", color: "oklch(0.55 0.18 142)" },
+  { value: "violet", labelKey: "theme.palette.violet", color: "oklch(0.55 0.26 293)" },
+  { value: "rose", labelKey: "theme.palette.rose", color: "oklch(0.58 0.25 27)" },
+  { value: "amber", labelKey: "theme.palette.amber", color: "oklch(0.58 0.2 75)" },
+  { value: "fiori", labelKey: "theme.palette.fiori", color: "rgb(0 112 242)" },
+];
+
+export function ThemeSelect() {
+  const { appearance, palette, setTheme } = useTheme();
+  const { t } = useTranslation();
+
+  const currentAppearance = appearanceOptions.find((o) => o.value === appearance);
+  const currentPalette = paletteOptions.find((o) => o.value === palette);
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant="ghost"
+          size="lg"
+          className={cn(
+            "w-full",
+            "justify-between",
+            "px-3",
+            "text-left",
+            "text-sm",
+            "font-normal",
+            "text-foreground",
+            "hover:bg-accent",
+            "hover:text-accent-foreground",
+            "focus-visible:outline-none",
+            "focus-visible:ring-2",
+            "focus-visible:ring-ring"
+          )}
+        >
+          <div className="flex items-center gap-2">
+            {currentAppearance?.icon}
+            <span>{currentAppearance ? t(currentAppearance.labelKey) : ""}</span>
+            <span className="text-muted-foreground">/</span>
+            <span className="truncate">
+              {currentPalette ? t(currentPalette.labelKey) : ""}
+            </span>
+          </div>
+          <ChevronDown className="h-4 w-4 opacity-50 shrink-0" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="min-w-44 space-y-1">
+        <DropdownMenuLabel className="text-muted-foreground text-xs font-normal">
+          {t("theme.appearance")}
+        </DropdownMenuLabel>
+        {appearanceOptions.map((option) => {
+          const isSelected = appearance === option.value;
+          return (
+            <DropdownMenuItem
+              key={option.value}
+              onClick={() => setTheme({ appearance: option.value })}
+              className={cn(
+                "flex items-center gap-2 cursor-pointer relative pr-8",
+                { "bg-accent text-accent-foreground": isSelected }
+              )}
+            >
+              {option.icon}
+              <span>{t(option.labelKey)}</span>
+              {isSelected && (
+                <Check className="h-4 w-4 absolute right-2 text-primary" />
+              )}
+            </DropdownMenuItem>
+          );
+        })}
+        <DropdownMenuSeparator />
+        <DropdownMenuLabel className="text-muted-foreground text-xs font-normal flex items-center gap-1.5">
+          <PaletteIcon className="h-3.5 w-3.5" />
+          {t("theme.paletteLabel")}
+        </DropdownMenuLabel>
+        {paletteOptions.map((option) => {
+          const isSelected = palette === option.value;
+          return (
+            <DropdownMenuItem
+              key={option.value}
+              onClick={() => setTheme({ palette: option.value })}
+              className={cn(
+                "flex items-center gap-2 cursor-pointer relative pr-8",
+                { "bg-accent text-accent-foreground": isSelected }
+              )}
+            >
+              <span
+                className="h-4 w-4 rounded-full border border-border shrink-0"
+                style={{ backgroundColor: option.color }}
+              />
+              <span>{t(option.labelKey)}</span>
+              {isSelected && (
+                <Check className="h-4 w-4 absolute right-2 text-primary" />
+              )}
+            </DropdownMenuItem>
+          );
+        })}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+
+ThemeSelect.displayName = "ThemeSelect";

package/templates/scaffold-default/packages/admin/src/components/admin-ui/theme/theme-toggle.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useTheme } from "@/components/admin-ui/theme/theme-provider";
+import type { Appearance } from "@/components/admin-ui/theme/theme-provider";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { Moon, Sun, Monitor } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+type ThemeToggleProps = {
+  className?: string;
+};
+
+export function ThemeToggle({ className }: ThemeToggleProps) {
+  const { appearance, setTheme } = useTheme();
+  const { t } = useTranslation();
+
+  const cycleAppearance = () => {
+    const next: Appearance =
+      appearance === "light"
+        ? "dark"
+        : appearance === "dark"
+          ? "system"
+          : "light";
+    setTheme({ appearance: next });
+  };
+
+  return (
+    <Button
+      variant="outline"
+      size="icon"
+      onClick={cycleAppearance}
+      className={cn(
+        "rounded-full",
+        "border-sidebar-border",
+        "bg-transparent",
+        className,
+        "h-10",
+        "w-10"
+      )}
+    >
+      <Sun
+        className={cn(
+          "h-[1.2rem]",
+          "w-[1.2rem]",
+          "rotate-0",
+          "scale-100",
+          "transition-all",
+          "duration-200",
+          {
+            "-rotate-90 scale-0": appearance === "dark" || appearance === "system",
+          }
+        )}
+      />
+      <Moon
+        className={cn(
+          "absolute",
+          "h-[1.2rem]",
+          "w-[1.2rem]",
+          "rotate-90",
+          "scale-0",
+          "transition-all",
+          "duration-200",
+          {
+            "rotate-0 scale-100": appearance === "dark",
+            "rotate-90 scale-0": appearance === "light" || appearance === "system",
+          }
+        )}
+      />
+      <Monitor
+        className={cn(
+          "absolute",
+          "h-[1.2rem]",
+          "w-[1.2rem]",
+          "rotate-0",
+          "scale-0",
+          "transition-all",
+          "duration-200",
+          {
+            "scale-100": appearance === "system",
+            "scale-0": appearance === "light" || appearance === "dark",
+          }
+        )}
+      />
+      <span className="sr-only">{t("theme.toggleLabel")}</span>
+    </Button>
+  );
+}
+
+ThemeToggle.displayName = "ThemeToggle";

package/templates/scaffold-default/packages/admin/src/components/ui/accordion.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDownIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+
+function Accordion({
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
+}
+
+function AccordionItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+  return (
+    <AccordionPrimitive.Item
+      data-slot="accordion-item"
+      className={cn("border-b last:border-b-0", className)}
+      {...props}
+    />
+  );
+}
+
+function AccordionTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
+  return (
+    <AccordionPrimitive.Header className="flex">
+      <AccordionPrimitive.Trigger
+        data-slot="accordion-trigger"
+        className={cn(
+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      </AccordionPrimitive.Trigger>
+    </AccordionPrimitive.Header>
+  );
+}
+
+function AccordionContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
+  return (
+    <AccordionPrimitive.Content
+      data-slot="accordion-content"
+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+      {...props}
+    >
+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    </AccordionPrimitive.Content>
+  );
+}
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };

package/templates/scaffold-default/packages/admin/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,157 @@
+"use client";
+
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  );
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  );
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  );
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn("text-lg font-semibold", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogAction({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+  return (
+    <AlertDialogPrimitive.Action
+      className={cn(buttonVariants(), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDialogCancel({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+  return (
+    <AlertDialogPrimitive.Cancel
+      className={cn(buttonVariants({ variant: "outline" }), className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/templates/scaffold-default/packages/admin/src/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    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(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription };

package/templates/scaffold-default/packages/admin/src/components/ui/aspect-ratio.tsx

@@ -0,0 +1,9 @@
+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+
+function AspectRatio({
+  ...props
+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
+}
+
+export { AspectRatio };