npm - @tulip-systems/create-app - Versions diffs - 0.12.0 → 0.12.2 - Mend

@tulip-systems/create-app 0.12.0 → 0.12.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/dist/templates/basic/package.json CHANGED Viewed

@@ -25,11 +25,11 @@
     "@orpc/tanstack-query": "^1.14.15",
     "@tailwindcss/typography": "^0.5.20",
     "@tanstack/react-query": "^5.101.4",
-    "@tulip-systems/app": "0.12.0",
-    "@tulip-systems/auth": "0.12.0",
-    "@tulip-systems/commands": "0.12.0",
-    "@tulip-systems/core": "0.12.0",
-    "@tulip-systems/ui": "0.12.0",
+    "@tulip-systems/app": "0.12.2",
+    "@tulip-systems/auth": "0.12.2",
+    "@tulip-systems/commands": "0.12.2",
+    "@tulip-systems/core": "0.12.2",
+    "@tulip-systems/ui": "0.12.2",
     "@vercel/functions": "^3.9.0",
     "better-auth": "^1.6.26",
     "class-variance-authority": "^0.7.1",

package/dist/templates/basic/src/app/layout.tsx CHANGED Viewed

@@ -2,7 +2,11 @@ import "./globals.css";
 import "../server/router/register";
 import { Providers } from "@tulip-systems/app/components/client";
-import { generateRootLayoutMetadata, RootLayout } from "@tulip-systems/app/components/server";
+import {
+  ColorThemeScript,
+  generateRootLayoutMetadata,
+  RootLayout,
+} from "@tulip-systems/app/components/server";
 import type { PropsWithChildren } from "react";
 import { config } from "@/lib/config/base";
@@ -11,6 +15,7 @@ export const { metadata, viewport } = generateRootLayoutMetadata(config);
 export default function Layout({ children }: PropsWithChildren) {
   return (
     <RootLayout>
+      <ColorThemeScript />
       <Providers>{children}</Providers>
     </RootLayout>
   );

package/dist/templates/code/package.json CHANGED Viewed

@@ -49,19 +49,20 @@
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-table": "^8.21.3",
     "@tanstack/react-virtual": "^3.14.9",
-    "@tulip-systems/ai": "0.12.0",
-    "@tulip-systems/app": "0.12.0",
-    "@tulip-systems/auth": "0.12.0",
-    "@tulip-systems/commands": "0.12.0",
-    "@tulip-systems/core": "0.12.0",
-    "@tulip-systems/data-tables": "0.12.0",
-    "@tulip-systems/drive": "0.12.0",
-    "@tulip-systems/drive-google": "0.12.0",
-    "@tulip-systems/editor": "0.12.0",
-    "@tulip-systems/inline": "0.12.0",
-    "@tulip-systems/query": "0.12.0",
-    "@tulip-systems/storage": "0.12.0",
-    "@tulip-systems/ui": "0.12.0",
+    "@tulip-systems/ai": "0.12.2",
+    "@tulip-systems/app": "0.12.2",
+    "@tulip-systems/auth": "0.12.2",
+    "@tulip-systems/commands": "0.12.2",
+    "@tulip-systems/core": "0.12.2",
+    "@tulip-systems/data-tables": "0.12.2",
+    "@tulip-systems/drive": "0.12.2",
+    "@tulip-systems/drive-google": "0.12.2",
+    "@tulip-systems/editor": "0.12.2",
+    "@tulip-systems/editor-storage": "0.12.2",
+    "@tulip-systems/inline": "0.12.2",
+    "@tulip-systems/query": "0.12.2",
+    "@tulip-systems/storage": "0.12.2",
+    "@tulip-systems/ui": "0.12.2",
     "@uidotdev/usehooks": "^2.4.1",
     "@vercel/functions": "^3.9.0",
     "@vercel/otel": "^2.1.3",
@@ -91,8 +92,8 @@
     "react-pdf-tailwind": "^3.0.0",
     "recharts": "3.10.1",
     "resend": "^6.18.1",
-    "sharp": "^0.35.3",
     "server-only": "^0.0.1",
+    "sharp": "^0.35.3",
     "usehooks-ts": "^3.1.1",
     "uuid": "^14.0.1",
     "xlsx": "^0.18.5",

package/dist/templates/code/src/app/admin/employees/_components/combobox-dropdown.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ import {
 } from "@tulip-systems/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/ui/popover";
 import { Check, ChevronsUpDownIcon } from "lucide-react";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import type { Employee } from "../_lib/validators";
 export type EmployeeComboboxDropdownFieldProps = {

package/dist/templates/code/src/app/admin/employees/_components/tables.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ import {
   useSorting,
 } from "@tulip-systems/query/client";
 import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import { orpc } from "@/server/router/client";
 import { employeesFilters } from "../_config/filters";
 import { employeeTableSorts } from "../_config/sorting";

package/dist/templates/code/src/app/admin/employees/_config/commands.tsx CHANGED Viewed

@@ -15,7 +15,7 @@ import { toast } from "@tulip-systems/ui/sonner";
 import { KeyRoundIcon, LockIcon, LockOpenIcon } from "lucide-react";
 import { Icons } from "@/components/icons";
 import { authClient } from "@/server/auth/client";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import { orpc } from "@/server/router/client";
 import { CreateEmployeeCommand, CreateEmployeeCommandTrigger } from "../_components/create-command";

package/dist/templates/code/src/app/admin/employees/_lib/validators.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { createUserSchema } from "@tulip-systems/auth";
 import { createInsertSchema, createUpdateSchema } from "drizzle-zod";
 import type { z } from "zod";
-import { updateUserSchema } from "@/server/auth/schema";
+import { updateUserSchema } from "@/server/auth/validators";
 import { employees } from "./schema";
 /**

package/dist/templates/code/src/app/admin/settings/layout.tsx CHANGED Viewed

@@ -33,6 +33,11 @@ export default function Layout(props: PropsWithChildren) {
                 href: "/admin/settings/installation",
                 segment: "installation",
               },
+              {
+                name: "Thema",
+                href: "/admin/settings/theme",
+                segment: "theme",
+              },
             ]}
           />
         </BottomBar>

package/dist/templates/code/src/app/admin/settings/theme/_components/demo-gallery.tsx ADDED Viewed

@@ -0,0 +1,632 @@
+"use client";
+import { Badge } from "@tulip-systems/ui/badge";
+import { Button } from "@tulip-systems/ui/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@tulip-systems/ui/card";
+import { Input } from "@tulip-systems/ui/input";
+import { Label } from "@tulip-systems/ui/label";
+import { Progress } from "@tulip-systems/ui/progress";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@tulip-systems/ui/recharts";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@tulip-systems/ui/select";
+import { Separator } from "@tulip-systems/ui/separator";
+import { Switch } from "@tulip-systems/ui/switch";
+import { Textarea } from "@tulip-systems/ui/textarea";
+import { ArrowRightIcon, Clock3Icon, LockIcon, WalletIcon } from "lucide-react";
+import * as React from "react";
+import {
+  Area,
+  AreaChart,
+  Bar,
+  BarChart,
+  CartesianGrid,
+  Pie,
+  PieChart,
+  Label as RechartsLabel,
+  XAxis,
+} from "recharts";
+const revenueData = [
+  { period: "Q1", retainers: 120, projects: 84, support: 56, operations: 72, growth: 64 },
+  { period: "Q2", retainers: 148, projects: 94, support: 61, operations: 78, growth: 72 },
+  { period: "Q3", retainers: 136, projects: 88, support: 58, operations: 74, growth: 68 },
+  { period: "Q4", retainers: 164, projects: 102, support: 66, operations: 83, growth: 79 },
+] as const;
+const revenueConfig = {
+  retainers: { label: "Retainers", color: "var(--chart-1)" },
+  projects: { label: "Projects", color: "var(--chart-2)" },
+  support: { label: "Support", color: "var(--chart-3)" },
+  operations: { label: "Ops", color: "var(--chart-4)" },
+  growth: { label: "Growth", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+const channelData = [
+  { name: "Direct", value: 348, fill: "var(--color-direct)" },
+  { name: "Partners", value: 254, fill: "var(--color-partners)" },
+  { name: "Inbound", value: 198, fill: "var(--color-inbound)" },
+  { name: "Referrals", value: 167, fill: "var(--color-referrals)" },
+  { name: "Other", value: 121, fill: "var(--color-other)" },
+] as const;
+const channelConfig = {
+  direct: { label: "Direct", color: "var(--chart-1)" },
+  partners: { label: "Partners", color: "var(--chart-2)" },
+  inbound: { label: "Inbound", color: "var(--chart-3)" },
+  referrals: { label: "Referrals", color: "var(--chart-4)" },
+  other: { label: "Other", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+const trendData = [
+  { month: "Jan", active: 180, target: 160 },
+  { month: "Feb", active: 210, target: 182 },
+  { month: "Mar", active: 198, target: 190 },
+  { month: "Apr", active: 246, target: 205 },
+  { month: "May", active: 232, target: 214 },
+  { month: "Jun", active: 274, target: 228 },
+] as const;
+const trendConfig = {
+  active: { label: "Active", color: "var(--chart-1)" },
+  target: { label: "Target", color: "var(--chart-5)" },
+} satisfies ChartConfig;
+const transactions = [
+  { title: "Blue Bottle Coffee", meta: "Food & Drink", date: "Today, 10:24", amount: "-$6.50" },
+  { title: "Whole Foods Market", meta: "Groceries", date: "Yesterday", amount: "-$142.30" },
+  { title: "Stripe Payout", meta: "Income", date: "Oct 12", amount: "+$4,200.00" },
+  { title: "Uber Technologies", meta: "Transport", date: "Oct 11", amount: "-$24.10" },
+] as const;
+const targets = [
+  { label: "Retainers", value: "$420,000", progress: 65, meta: "$273,000 secured" },
+  { label: "Implementations", value: "$85,000", progress: 32, meta: "$27,200 secured" },
+] as const;
+const statCards = [
+  { label: "Card balance", value: "US$12.94", meta: "US$11,337.06 available" },
+  { label: "Payment due", value: "1 Apr", meta: "Pay early available" },
+  { label: "Review queue", value: "08", meta: "2 blocked items" },
+] as const;
+const activityRows = [
+  { label: "Releases", value: 76, color: "var(--chart-1)" },
+  { label: "Invoices", value: 58, color: "var(--chart-2)" },
+  { label: "Approvals", value: 43, color: "var(--chart-3)" },
+  { label: "Payouts", value: 65, color: "var(--chart-4)" },
+  { label: "Reviews", value: 51, color: "var(--chart-5)" },
+] as const;
+const bottomStats = [
+  {
+    label: "Tax reserve",
+    value: "$3,240",
+    meta: "Held back automatically from quarterly payouts.",
+  },
+  {
+    label: "Next review",
+    value: "Thu 14:00",
+    meta: "Operational sync for invoices, approvals, and transfers.",
+  },
+  {
+    label: "Export status",
+    value: "Ready",
+    meta: "Latest payout statement is prepared for accounting.",
+  },
+] as const;
+const accountStats = [
+  {
+    label: "Connected account",
+    value: "Main Checking",
+    meta: "••8402 — $12,450.00 available",
+  },
+  {
+    label: "Transfer target",
+    value: "High Yield Savings",
+    meta: "••1192 — $42,100.00 balance",
+  },
+] as const;
+export function ThemeDemoGallery() {
+  const totalChannelValue = React.useMemo(
+    () => channelData.reduce((sum, item) => sum + item.value, 0),
+    [],
+  );
+  return (
+    <div className="rounded-2xl border bg-muted/20 p-4 sm:p-6">
+      <div className="columns-1 gap-x-4 md:columns-2 2xl:columns-3">
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Revenue Mix</CardTitle>
+            <CardDescription>
+              Compare the five chart tokens in a denser chart with labels, grid lines, and legend.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={revenueConfig} className="h-64 w-full">
+              <BarChart accessibilityLayer data={revenueData} barGap={8}>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey="period" tickLine={false} axisLine={false} tickMargin={10} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+                <ChartLegend content={<ChartLegendContent />} />
+                <Bar dataKey="retainers" fill="var(--color-retainers)" radius={6} />
+                <Bar dataKey="projects" fill="var(--color-projects)" radius={6} />
+                <Bar dataKey="support" fill="var(--color-support)" radius={6} />
+                <Bar dataKey="operations" fill="var(--color-operations)" radius={6} />
+                <Bar dataKey="growth" fill="var(--color-growth)" radius={6} />
+              </BarChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-0">
+            <CardTitle className="text-base">Account Access</CardTitle>
+            <CardDescription>
+              Inputs, labels, buttons, and quiet borders together in one compact form.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="flex flex-col gap-4 pt-6">
+            <div className="space-y-2">
+              <Label htmlFor="theme-email">Email address</Label>
+              <Input id="theme-email" defaultValue="artist@studio.inc" />
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-2">
+                <Label htmlFor="theme-password">Current password</Label>
+                <button
+                  type="button"
+                  className="text-muted-foreground text-xs uppercase tracking-[0.12em]"
+                >
+                  Forgot?
+                </button>
+              </div>
+              <Input id="theme-password" type="password" defaultValue="secret-password" />
+            </div>
+            <Separator />
+            <Button className="w-full">
+              <LockIcon data-icon="inline-start" />
+              Update security
+            </Button>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-0">
+            <CardTitle className="text-base">Channel Split</CardTitle>
+            <CardDescription>Palette balance in a smaller circular chart.</CardDescription>
+          </CardHeader>
+          <CardContent className="pb-0">
+            <ChartContainer config={channelConfig} className="mx-auto h-64">
+              <PieChart>
+                <ChartTooltip cursor={false} content={<ChartTooltipContent hideLabel />} />
+                <Pie
+                  data={channelData}
+                  dataKey="value"
+                  nameKey="name"
+                  innerRadius={62}
+                  strokeWidth={6}
+                >
+                  <RechartsLabel
+                    content={({ viewBox }) => {
+                      if (!viewBox || !("cx" in viewBox) || !("cy" in viewBox)) {
+                        return null;
+                      }
+                      return (
+                        <text
+                          x={viewBox.cx}
+                          y={viewBox.cy}
+                          textAnchor="middle"
+                          dominantBaseline="middle"
+                        >
+                          <tspan
+                            x={viewBox.cx}
+                            y={viewBox.cy}
+                            className="fill-foreground font-semibold text-2xl"
+                          >
+                            {totalChannelValue}
+                          </tspan>
+                          <tspan
+                            x={viewBox.cx}
+                            y={(viewBox.cy || 0) + 24}
+                            className="fill-muted-foreground text-xs"
+                          >
+                            total leads
+                          </tspan>
+                        </text>
+                      );
+                    }}
+                  />
+                </Pie>
+              </PieChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Payout Threshold</CardTitle>
+            <CardDescription>Form controls, progress feedback, and secondary copy.</CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="space-y-2">
+              <Label>Preferred currency</Label>
+              <Select defaultValue="usd">
+                <SelectTrigger className="w-full">
+                  <SelectValue placeholder="Choose a currency" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="usd">USD - United States Dollar</SelectItem>
+                  <SelectItem value="eur">EUR - Euro</SelectItem>
+                  <SelectItem value="gbp">GBP - British Pound</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+            <div className="space-y-2">
+              <div className="flex items-center justify-between gap-4">
+                <Label htmlFor="theme-threshold">Minimum payout amount</Label>
+                <span className="font-semibold text-2xl">$2,500.00</span>
+              </div>
+              <Progress value={25} className="h-2" />
+              <div className="flex items-center justify-between text-muted-foreground text-sm">
+                <span>$50 minimum</span>
+                <span>$10,000 maximum</span>
+              </div>
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="theme-notes">Notes</Label>
+              <Textarea
+                id="theme-notes"
+                rows={4}
+                defaultValue="Add any notes for this payout configuration or payout batching rule."
+              />
+            </div>
+            <Button className="w-full">Save threshold</Button>
+          </CardContent>
+        </Card>
+        <div className="mb-4 grid break-inside-avoid gap-4 sm:grid-cols-3 md:grid-cols-1 xl:grid-cols-1 2xl:grid-cols-3">
+          {statCards.map((item) => (
+            <Card key={item.label}>
+              <CardContent className="p-4">
+                <div className="text-muted-foreground text-sm">{item.label}</div>
+                <div className="mt-2 font-semibold text-3xl leading-none">{item.value}</div>
+                <div className="mt-2 text-muted-foreground text-sm">{item.meta}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Release Snapshot</CardTitle>
+            <CardDescription>
+              A simple mix of stronger primary surfaces with calmer supporting panels.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-3 sm:grid-cols-[1.15fr_0.85fr]">
+            <div className="rounded-xl border border-primary px-4 py-5 text-primary-foreground shadow">
+              <div className="text-primary-foreground/75 text-xs uppercase tracking-[0.18em]">
+                Distribution track
+              </div>
+              <div className="mt-3 font-semibold text-3xl leading-none">Northern Lights EP</div>
+              <div className="mt-2 max-w-sm text-primary-foreground/80 text-sm">
+                Scheduled assets, metadata, and publishing checks are all lined up for next week.
+              </div>
+              <div className="mt-5 flex items-center gap-2">
+                <Badge className="border-primary-foreground/15 bg-primary-foreground/10 text-primary-foreground hover:bg-primary-foreground/10">
+                  Ready to publish
+                </Badge>
+                <span className="text-primary-foreground/75 text-xs">12 files reviewed</span>
+              </div>
+            </div>
+            <div className="grid gap-3">
+              <div className="rounded-2xl border bg-card p-4">
+                <div className="text-muted-foreground text-xs uppercase tracking-[0.16em]">
+                  Next payout
+                </div>
+                <div className="mt-3 font-semibold text-2xl">May 25, 2024</div>
+                <div className="mt-1 text-muted-foreground text-sm">$1,000 scheduled</div>
+              </div>
+              <div className="rounded-2xl border bg-accent/35 p-4 text-accent-foreground">
+                <div className="flex items-center gap-2">
+                  <Clock3Icon className="size-4" />
+                  <span className="font-medium text-sm">Auto-save plan</span>
+                </div>
+                <div className="mt-3 font-semibold text-2xl">Accelerated</div>
+                <div className="mt-1 text-accent-foreground/80 text-sm">Recurring weekly</div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Preferences</CardTitle>
+            <CardDescription>
+              Muted surfaces, switches, badges, and supporting text.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div className="flex items-start justify-between gap-4 rounded-xl border bg-card p-4">
+              <div>
+                <div className="font-medium text-sm">Weekly summary</div>
+                <div className="mt-1 text-muted-foreground text-sm">
+                  Receive a Friday summary of revenue, payouts, and overdue invoices.
+                </div>
+              </div>
+              <Switch defaultChecked aria-label="Weekly summary" />
+            </div>
+            <div className="flex items-start justify-between gap-4 rounded-xl border bg-card p-4">
+              <div>
+                <div className="font-medium text-sm">Approval alerts</div>
+                <div className="mt-1 text-muted-foreground text-sm">
+                  Notify finance when large orders need a second review.
+                </div>
+              </div>
+              <Switch aria-label="Approval alerts" />
+            </div>
+            <Separator />
+            <div className="flex flex-wrap items-center gap-2">
+              <Badge variant="outline">Draft</Badge>
+              <Badge variant="outline">Preview</Badge>
+              <span className="text-muted-foreground text-sm">
+                These compact states help compare accent and border contrast.
+              </span>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Quick Notes</CardTitle>
+            <CardDescription>
+              Small neutral utility card to judge quiet surfaces and text hierarchy.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            <div className="rounded-xl border bg-card p-4 text-sm">
+              <div className="font-medium">Transfer funds</div>
+              <div className="mt-1 text-muted-foreground">
+                Move money between connected accounts before the next payout run.
+              </div>
+            </div>
+            <div className="rounded-xl border bg-muted/25 p-4 text-sm">
+              <div className="font-medium">Change transfer limit</div>
+              <div className="mt-1 text-muted-foreground">
+                Adjust how much can be sent from your balance each day.
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Recent Transactions</CardTitle>
+            <CardDescription>
+              Denser list styling to preview separators, icons, muted labels, and positive states.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {transactions.map((transaction, index) => (
+              <div key={transaction.title}>
+                <div className="flex items-center gap-3 rounded-xl px-1 py-2">
+                  <div className="flex size-10 items-center justify-center rounded-xl bg-muted text-muted-foreground">
+                    <WalletIcon className="size-4" />
+                  </div>
+                  <div className="min-w-0 flex-1">
+                    <div className="font-medium text-sm">{transaction.title}</div>
+                    <div className="text-muted-foreground text-sm">{transaction.meta}</div>
+                  </div>
+                  <div className="text-right">
+                    <div className="text-muted-foreground text-sm">{transaction.date}</div>
+                    <div
+                      className={
+                        transaction.amount.startsWith("+")
+                          ? "font-medium text-primary"
+                          : "font-medium"
+                      }
+                    >
+                      {transaction.amount}
+                    </div>
+                  </div>
+                </div>
+                {index < transactions.length - 1 && <Separator />}
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Claimable Balance</CardTitle>
+            <CardDescription>
+              A compact KPI strip with stronger hierarchy, utility rows, and a quieter CTA zone.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="grid gap-4 lg:grid-cols-[0.9fr_1.1fr_0.8fr]">
+            <div>
+              <div className="font-semibold text-5xl leading-none">$12,480</div>
+              <div className="mt-3 flex items-center gap-2">
+                <Badge variant="outline">Pending setup</Badge>
+                <span className="text-muted-foreground text-sm">
+                  Monthly distribution on the 15th
+                </span>
+              </div>
+            </div>
+            <div className="rounded-2xl border bg-card p-4">
+              <div className="space-y-2 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Net royalties</span>
+                  <span>$12,640.00</span>
+                </div>
+                <div className="flex items-center justify-between">
+                  <span className="text-muted-foreground">Processing fees</span>
+                  <span>-$160.00</span>
+                </div>
+                <Separator className="my-3" />
+                <div className="flex items-center justify-between font-medium">
+                  <span>Total ready to claim</span>
+                  <span>$12,480.00</span>
+                </div>
+              </div>
+            </div>
+            <div className="flex flex-col justify-between gap-4 rounded-2xl border bg-muted/20 p-4">
+              <div>
+                <div className="text-muted-foreground text-xs uppercase tracking-[0.16em]">
+                  Processing
+                </div>
+                <div className="mt-3 font-semibold text-2xl">1.28%</div>
+                <div className="mt-1 text-muted-foreground text-sm">
+                  Fees are automatically reconciled before every release.
+                </div>
+              </div>
+              <Button className="w-full">
+                View payout details
+                <ArrowRightIcon data-icon="inline-end" />
+              </Button>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Activity Snapshot</CardTitle>
+            <CardDescription>
+              Compact activity rows to compare chart colors against labels, borders, and muted
+              surfaces.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4 rounded-2xl border bg-card p-4">
+              <div className="mb-4 flex items-center justify-between">
+                <span className="text-muted-foreground text-sm">Last 30 days</span>
+                <Badge variant="outline">Live mix</Badge>
+              </div>
+              <div className="space-y-3">
+                {activityRows.map((item) => (
+                  <div key={item.label} className="space-y-1.5">
+                    <div className="flex items-center justify-between text-sm">
+                      <span className="text-muted-foreground">{item.label}</span>
+                      <span className="font-medium">{item.value}</span>
+                    </div>
+                    <div className="h-2 rounded-full bg-muted">
+                      <div
+                        className="h-full rounded-full"
+                        style={{ width: `${item.value}%`, backgroundColor: item.color }}
+                      />
+                    </div>
+                  </div>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Savings Targets</CardTitle>
+            <CardDescription>
+              Compare borders, muted fills, and progress colors in a calmer stack.
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-3">
+            {targets.map((target) => (
+              <div key={target.label} className="rounded-xl border bg-muted/30 p-4">
+                <div className="mb-3 flex items-start justify-between gap-3">
+                  <div>
+                    <div className="text-muted-foreground text-xs uppercase tracking-[0.16em]">
+                      {target.label}
+                    </div>
+                    <div className="mt-2 font-semibold text-3xl leading-none">{target.value}</div>
+                  </div>
+                  <Badge variant="outline">{target.progress}%</Badge>
+                </div>
+                <div className="h-1.5 rounded-full bg-border/70">
+                  <div
+                    className="h-full rounded-full bg-primary"
+                    style={{ width: `${target.progress}%` }}
+                  />
+                </div>
+                <div className="mt-3 text-muted-foreground text-sm">{target.meta}</div>
+              </div>
+            ))}
+          </CardContent>
+        </Card>
+        <Card className="mb-4 break-inside-avoid">
+          <CardHeader className="pb-3">
+            <CardTitle className="text-base">Active Pipelines</CardTitle>
+            <CardDescription>
+              Primary and fifth chart colors side by side in a simpler trend view.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <ChartContainer config={trendConfig} className="h-64 w-full">
+              <AreaChart accessibilityLayer data={trendData} margin={{ left: 0, right: 0 }}>
+                <CartesianGrid vertical={false} />
+                <XAxis dataKey="month" tickLine={false} axisLine={false} tickMargin={10} />
+                <ChartTooltip cursor={false} content={<ChartTooltipContent indicator="line" />} />
+                <Area
+                  dataKey="target"
+                  type="monotone"
+                  fill="var(--color-target)"
+                  fillOpacity={0.08}
+                  stroke="var(--color-target)"
+                  strokeWidth={2}
+                />
+                <Area
+                  dataKey="active"
+                  type="monotone"
+                  fill="var(--color-active)"
+                  fillOpacity={0.18}
+                  stroke="var(--color-active)"
+                  strokeWidth={2}
+                />
+              </AreaChart>
+            </ChartContainer>
+          </CardContent>
+        </Card>
+        <div className="mb-4 grid break-inside-avoid gap-4 sm:grid-cols-2 xl:grid-cols-1 2xl:grid-cols-3">
+          {bottomStats.map((item) => (
+            <Card key={item.label}>
+              <CardContent className="p-4">
+                <div className="text-muted-foreground text-sm">{item.label}</div>
+                <div className="mt-2 font-semibold text-3xl leading-none">{item.value}</div>
+                <div className="mt-2 text-muted-foreground text-sm">{item.meta}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+        <div className="mb-4 grid break-inside-avoid gap-4 sm:grid-cols-2">
+          {accountStats.map((item) => (
+            <Card key={item.label}>
+              <CardContent className="p-4">
+                <div className="text-muted-foreground text-sm">{item.label}</div>
+                <div className="mt-2 font-semibold text-2xl leading-tight">{item.value}</div>
+                <div className="mt-2 text-muted-foreground text-sm">{item.meta}</div>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/settings/theme/page.tsx ADDED Viewed

@@ -0,0 +1,105 @@
+"use client";
+import { useColorTheme } from "@tulip-systems/app/components/client";
+import { Badge } from "@tulip-systems/ui/badge";
+import { cn } from "@tulip-systems/ui/cn";
+import { ThemeDemoGallery } from "./_components/demo-gallery";
+const themeLabels: Record<string, string> = {
+  tulip: "Tulip",
+  rose: "Rose",
+  iris: "Iris",
+  sage: "Sage",
+};
+export default function Page() {
+  const { colorTheme, setColorTheme, colorThemes } = useColorTheme();
+  return (
+    <div className="space-y-10 p-content">
+      <section className="space-y-4">
+        <h2 className="font-bold text-lg">Weergave</h2>
+        <p className="text-muted-foreground text-sm">
+          Kies een kleurenthema voor je interface. Donker/licht modus kan je wijzigen via het
+          gebruikersmenu.
+        </p>
+      </section>
+      <section className="space-y-4">
+        <div className="flex items-center justify-between gap-3">
+          <div>
+            <h3 className="font-semibold text-base">Kleurenthema</h3>
+            <p className="text-muted-foreground text-sm">
+              Elke optie behoudt hetzelfde systeem, maar verschuift de nadruk in primaries, accents
+              en chartvolgorde.
+            </p>
+          </div>
+          <Badge variant="outline">Live preview</Badge>
+        </div>
+        <div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-4">
+          {colorThemes.map((themeOption) => {
+            const isActive = colorTheme === themeOption;
+            return (
+              <button
+                key={themeOption}
+                type="button"
+                onClick={() => setColorTheme(themeOption)}
+                className={cn(
+                  "rounded-lg border p-4 text-left transition-colors",
+                  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                  isActive
+                    ? "border-primary bg-primary/10"
+                    : "border-border bg-card hover:border-primary/50",
+                )}
+              >
+                <div className="mb-4 flex items-center justify-between">
+                  <span className="font-medium">{themeLabels[themeOption] ?? themeOption}</span>
+                  {isActive && <span className="text-primary text-xs">Actief</span>}
+                </div>
+                <div
+                  data-theme={themeOption}
+                  className="space-y-3 rounded-md border bg-background p-3"
+                >
+                  <div className="grid grid-cols-4 gap-2">
+                    <span className="h-10 rounded-md border bg-primary" />
+                    <span className="h-10 rounded-md border bg-accent" />
+                    <span className="h-10 rounded-md border bg-secondary" />
+                    <span className="h-10 rounded-md border bg-muted" />
+                  </div>
+                  <div className="flex items-center gap-1.5">
+                    <span className="h-3 w-3 rounded-full border bg-chart-1" />
+                    <span className="h-3 w-3 rounded-full border bg-chart-2" />
+                    <span className="h-3 w-3 rounded-full border bg-chart-3" />
+                    <span className="h-3 w-3 rounded-full border bg-chart-4" />
+                    <span className="h-3 w-3 rounded-full border bg-chart-5" />
+                  </div>
+                  <div className="flex items-center justify-between text-xs">
+                    <span className="text-muted-foreground">Primary, accent, surfaces</span>
+                    <span className="text-muted-foreground">+ chart set</span>
+                  </div>
+                </div>
+              </button>
+            );
+          })}
+        </div>
+      </section>
+      <section className="space-y-4">
+        <div className="space-y-1">
+          <h3 className="font-semibold text-base">Component gallery</h3>
+          <p className="text-muted-foreground text-sm">
+            Een uitgebreid overzicht van charts, cards, forms, inputs en feedback states binnen je
+            huidige combinatie van kleurenthema en lichtmodus.
+          </p>
+        </div>
+        <ThemeDemoGallery />
+      </section>
+    </div>
+  );
+}

package/dist/templates/code/src/app/admin/tasks/[id]/(default)/@dashboard/page.tsx CHANGED Viewed

@@ -2,6 +2,7 @@
 import { useSuspenseQueries, useSuspenseQuery } from "@tanstack/react-query";
 import { EditorContent, EditorMenuFixed } from "@tulip-systems/editor/client";
+import { createFileHandlerUploadStrategy } from "@tulip-systems/editor-storage";
 import {
   InlineComboboxDropdown,
   InlineEditor,
@@ -17,10 +18,12 @@ import {
   InlineStringInput,
 } from "@tulip-systems/inline/client";
 import { DataStackLayout, DataStackRow } from "@tulip-systems/ui/data-stack";
+import { toast } from "@tulip-systems/ui/sonner";
 import { notFound } from "next/navigation";
 import { use } from "react";
 import { z } from "zod";
 import { orpc } from "@/server/router/client";
+import { uploadClient } from "@/server/storage/client";
 import { storyPointsConfig } from "../../../_lib/constants";
 const taskMutation = orpc.tasks.update.mutationOptions();
@@ -172,6 +175,22 @@ export default function TaskDetailPage(props: PageProps<"/admin/tasks/[id]">) {
                 mutate: { on: "change", debounceMs: 700 },
                 validate: { change: z.any() },
               }}
+              extensions={{
+                fileHandler: createFileHandlerUploadStrategy({
+                  allowedMimeTypes: ["image/png", "image/jpeg", "image/gif", "image/webp"],
+                  variables: {},
+                  uploadClient,
+                  onUploadCompleted: (fileNode) => {
+                    toast.success(`Succesvol geupload: ${fileNode.name}`);
+                  },
+                  onUploadFailed: (error) => {
+                    console.error("Upload error: ", error);
+                    toast.error("Bestand uploaden mislukt", {
+                      description: error instanceof Error ? error.message : undefined,
+                    });
+                  },
+                }),
+              }}
               className="min-h-40"
             >
               <EditorMenuFixed />

package/dist/templates/code/src/app/admin/tasks/_components/tables.tsx CHANGED Viewed

@@ -17,7 +17,7 @@ import {
   useSorting,
 } from "@tulip-systems/query/client";
 import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import { orpc } from "@/server/router/client";
 import type { Domain } from "../../domains/_lib/validators";
 import type { Employee } from "../../employees/_lib/validators";

package/dist/templates/code/src/app/admin/time/_config/columns-data.tsx CHANGED Viewed

@@ -4,7 +4,7 @@ import { formatDateTime, formatDuration } from "@tulip-systems/core";
 import { TableCell, type TableColumnDef, TableColumnHeader } from "@tulip-systems/data-tables";
 import { createTableSelectCell } from "@tulip-systems/data-tables/client";
 import Link from "next/link";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import type { Customer } from "../../customers/_lib/validators";
 import type { Employee } from "../../employees/_lib/validators";
 import type { Project } from "../../projects/_lib/validators";

package/dist/templates/code/src/app/layout.tsx CHANGED Viewed

@@ -2,7 +2,11 @@ import "./globals.css";
 import "../server/router/register";
 import { ColorThemeProvider, Providers } from "@tulip-systems/app/components/client";
-import { generateRootLayoutMetadata, RootLayout } from "@tulip-systems/app/components/server";
+import {
+  ColorThemeScript,
+  generateRootLayoutMetadata,
+  RootLayout,
+} from "@tulip-systems/app/components/server";
 import { DriveViewScript } from "@tulip-systems/drive/server";
 import type { PropsWithChildren } from "react";
 import { config } from "@/lib/config/base";
@@ -12,6 +16,7 @@ export const { metadata, viewport } = generateRootLayoutMetadata(config);
 export default function Layout({ children }: PropsWithChildren) {
   return (
     <RootLayout>
+      <ColorThemeScript />
       <DriveViewScript />
       <ColorThemeProvider defaultTheme="tulip">

package/dist/templates/code/src/server/auth/schema.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 import { relations, type SQL, sql } from "drizzle-orm";
 import { index, pgTable } from "drizzle-orm/pg-core";
-import { createInsertSchema } from "drizzle-zod";
-import type { z } from "zod";
 import { baseColumns } from "@/server/db/helpers";
 /**
@@ -124,19 +122,6 @@ export const passkeysRelations = relations(passkeys, ({ one }) => ({
   }),
 }));
-export type User = typeof users.$inferSelect;
-export const selectUserSchema = createInsertSchema(users);
-export type SelectUserSchema = z.infer<typeof selectUserSchema>;
-export const updateUserSchema = createInsertSchema(users).pick({
-  firstName: true,
-  lastName: true,
-  email: true,
-  image: true,
-});
-export type UpdateUserSchema = z.infer<typeof updateUserSchema>;
 /**
  * The jwkss table stores the JSON Web Key Sets (JWKS) used for signing and verifying JWTs in the authentication system. Each entry in the table represents a JWKS, which contains a set of cryptographic keys.
  */

package/dist/templates/code/src/server/auth/validators.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { createInsertSchema } from "drizzle-zod";
+import type z from "zod";
+import { accounts, users } from "./schema";
+/**
+ * Users
+ */
+export type User = typeof users.$inferSelect;
+/**
+ * Select user schema
+ */
+export const selectUserSchema = createInsertSchema(users);
+export type SelectUserSchema = z.infer<typeof selectUserSchema>;
+/**
+ * Create user schema
+ */
+export const createUserSchema = createInsertSchema(users)
+  .pick({
+    firstName: true,
+    lastName: true,
+    email: true,
+    role: true,
+  })
+  .extend({
+    password: createInsertSchema(accounts).shape.password.unwrap(),
+  });
+export type CreateUserSchema = z.infer<typeof createUserSchema>;
+/**
+ * Update user schema
+ */
+export const updateUserSchema = createInsertSchema(users).pick({
+  firstName: true,
+  lastName: true,
+  email: true,
+  image: true,
+});
+export type UpdateUserSchema = z.infer<typeof updateUserSchema>;

package/dist/templates/spark/package.json CHANGED Viewed

@@ -35,19 +35,19 @@
     "@tanstack/db": "^0.6.17",
     "@tanstack/react-query": "^5.101.4",
     "@tanstack/react-table": "^8.21.3",
-    "@tulip-systems/app": "0.12.0",
-    "@tulip-systems/auth": "0.12.0",
-    "@tulip-systems/commands": "0.12.0",
-    "@tulip-systems/core": "0.12.0",
-    "@tulip-systems/data-tables": "0.12.0",
-    "@tulip-systems/drive": "0.12.0",
-    "@tulip-systems/drive-local": "0.12.0",
-    "@tulip-systems/editor": "0.12.0",
-    "@tulip-systems/editor-storage": "0.12.0",
-    "@tulip-systems/inline": "0.12.0",
-    "@tulip-systems/query": "0.12.0",
-    "@tulip-systems/storage": "0.12.0",
-    "@tulip-systems/ui": "0.12.0",
+    "@tulip-systems/app": "0.12.2",
+    "@tulip-systems/auth": "0.12.2",
+    "@tulip-systems/commands": "0.12.2",
+    "@tulip-systems/core": "0.12.2",
+    "@tulip-systems/data-tables": "0.12.2",
+    "@tulip-systems/drive": "0.12.2",
+    "@tulip-systems/drive-local": "0.12.2",
+    "@tulip-systems/editor": "0.12.2",
+    "@tulip-systems/editor-storage": "0.12.2",
+    "@tulip-systems/inline": "0.12.2",
+    "@tulip-systems/query": "0.12.2",
+    "@tulip-systems/storage": "0.12.2",
+    "@tulip-systems/ui": "0.12.2",
     "@vercel/functions": "^3.9.0",
     "@zip.js/zip.js": "^2.8.34",
     "better-auth": "^1.6.26",

package/dist/templates/spark/src/app/admin/employees/_components/combobox-dropdown.tsx CHANGED Viewed

@@ -14,7 +14,7 @@ import {
 } from "@tulip-systems/ui/command";
 import { Popover, PopoverContent, PopoverTrigger } from "@tulip-systems/ui/popover";
 import { Check, ChevronsUpDownIcon } from "lucide-react";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 export type EmployeeComboboxDropdownFieldProps = {
   values: string[];

package/dist/templates/spark/src/app/admin/employees/_components/tables.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ import {
   useSorting,
 } from "@tulip-systems/query/client";
 import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import { orpc } from "@/server/router/client";
 import { employeesFilters } from "../_config/filters";
 import { employeeTableSorts } from "../_config/sorting";

package/dist/templates/spark/src/app/admin/employees/_lib/helpers.server.ts CHANGED Viewed

@@ -3,7 +3,7 @@ import "server-cli-only";
 import { eq } from "drizzle-orm";
 import type { NodePgDatabase } from "drizzle-orm/node-postgres";
 import { DRIVE_NAMESPACES } from "@/app/admin/drive/_config/namespaces";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import type { DatabaseSchema } from "@/server/db/types";
 import { drive } from "../../drive/_lib/service.server";
 import { employees } from "./schema";

package/dist/templates/spark/src/app/admin/employees/_lib/validators.ts CHANGED Viewed

@@ -1,7 +1,7 @@
 import { createUserSchema } from "@tulip-systems/auth";
 import { createInsertSchema, createSelectSchema, createUpdateSchema } from "drizzle-zod";
 import type { z } from "zod";
-import { selectUserSchema, updateUserSchema } from "@/server/auth/schema";
+import { selectUserSchema, updateUserSchema } from "@/server/auth/validators";
 export type { EmployeeFiltersSchema } from "../_config/filters";
 export { employeeFiltersSchema } from "../_config/filters";

package/dist/templates/spark/src/app/admin/registrations/_components/tables.tsx CHANGED Viewed

@@ -16,7 +16,7 @@ import {
   useSorting,
 } from "@tulip-systems/query/client";
 import { type PropsWithChildren, useDeferredValue, useMemo } from "react";
-import type { User } from "@/server/auth/schema";
+import type { User } from "@/server/auth/validators";
 import { orpc } from "@/server/router/client";
 import type { Employee } from "../../employees/_lib/validators";
 import { registrationsFilters } from "../_config/filters";

package/dist/templates/spark/src/app/layout.tsx CHANGED Viewed

@@ -2,17 +2,25 @@ import "./globals.css";
 import "../server/router/register";
 import { ColorThemeProvider, Providers } from "@tulip-systems/app/components/client";
-import { generateRootLayoutMetadata, RootLayout } from "@tulip-systems/app/components/server";
+import {
+  ColorThemeScript,
+  generateRootLayoutMetadata,
+  RootLayout,
+} from "@tulip-systems/app/components/server";
 import { DriveViewScript } from "@tulip-systems/drive/server";
 import { config } from "@/lib/config/base";
 export const { metadata, viewport } = generateRootLayoutMetadata(config);
+const defaultTheme = "iris";
 export default function Layout({ children }: LayoutProps<"/">) {
   return (
-    <RootLayout defaultColorTheme="iris">
+    <RootLayout>
+      <ColorThemeScript defaultTheme={defaultTheme} />
       <DriveViewScript />
-      <ColorThemeProvider defaultTheme="iris">
+      <ColorThemeProvider defaultTheme={defaultTheme}>
         <Providers>{children}</Providers>
       </ColorThemeProvider>
     </RootLayout>

package/dist/templates/spark/src/server/auth/schema.ts CHANGED Viewed

@@ -1,7 +1,5 @@
 import { relations, type SQL, sql } from "drizzle-orm";
 import { pgTable } from "drizzle-orm/pg-core";
-import { createInsertSchema } from "drizzle-zod";
-import type { z } from "zod";
 import { baseColumns } from "@/server/db/helpers";
 export const users = pgTable("users", (t) => ({
@@ -108,16 +106,3 @@ export const passkeysRelations = relations(passkeys, ({ one }) => ({
     references: [users.id],
   }),
 }));
-export type User = typeof users.$inferSelect;
-export const selectUserSchema = createInsertSchema(users);
-export type SelectUserSchema = z.infer<typeof selectUserSchema>;
-export const updateUserSchema = createInsertSchema(users).pick({
-  firstName: true,
-  lastName: true,
-  email: true,
-  image: true,
-});
-export type UpdateUserSchema = z.infer<typeof updateUserSchema>;

package/dist/templates/spark/src/server/auth/validators.ts ADDED Viewed

@@ -0,0 +1,40 @@
+import { createInsertSchema } from "drizzle-zod";
+import type z from "zod";
+import { accounts, users } from "./schema";
+/**
+ * Users
+ */
+export type User = typeof users.$inferSelect;
+/**
+ * Select user schema
+ */
+export const selectUserSchema = createInsertSchema(users);
+export type SelectUserSchema = z.infer<typeof selectUserSchema>;
+/**
+ * Create user schema
+ */
+export const createUserSchema = createInsertSchema(users)
+  .pick({
+    firstName: true,
+    lastName: true,
+    email: true,
+    role: true,
+  })
+  .extend({
+    password: createInsertSchema(accounts).shape.password.unwrap(),
+  });
+export type CreateUserSchema = z.infer<typeof createUserSchema>;
+/**
+ * Update user schema
+ */
+export const updateUserSchema = createInsertSchema(users).pick({
+  firstName: true,
+  lastName: true,
+  email: true,
+  image: true,
+});
+export type UpdateUserSchema = z.infer<typeof updateUserSchema>;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@tulip-systems/create-app",
-  "version": "0.12.0",
+  "version": "0.12.2",
   "type": "module",
   "sideEffects": false,
   "license": "AGPL-3.0",