create-nala 3.0.0

package/template/src/style.css

@@ -0,0 +1,587 @@
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+@font-face {
+  font-family: 'Inter';
+  src: url('./assets/fonts/InterVariable.woff2') format('woff2-variations');
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Static';
+  src: url('./assets/fonts/inter-v20-latin-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Static';
+  src: url('./assets/fonts/inter-v20-latin-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Static';
+  src: url('./assets/fonts/inter-v20-latin-600.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Inter Static';
+  src: url('./assets/fonts/inter-v20-latin-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --radius: 0.375rem;
+  --background: oklch(0.978 0.003 159);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.55 0.145 163.2);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.955 0.003 159);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.955 0.003 159);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.955 0.003 159);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(0.92 0.003 159);
+  --input: oklch(0.92 0.003 159);
+  --ring: oklch(0.55 0.145 163.2 / 35%);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.55 0.145 163.2);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0.003 159);
+  --sidebar-foreground: oklch(0.42 0.005 159);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.945 0.005 159);
+  --sidebar-accent-foreground: oklch(0.145 0 0);
+  --sidebar-border: oklch(0.92 0.003 159);
+  --sidebar-ring: oklch(0.708 0 0);
+
+  /* Unovis CSS Variable Resets (eliminates default white outer card/padding) */
+  --vis-tooltip-background-color: transparent;
+  --vis-tooltip-border-color: transparent;
+  --vis-tooltip-shadow-color: transparent;
+  --vis-tooltip-backdrop-filter: none;
+  --vis-tooltip-padding: 0px;
+  --vis-tooltip-border-radius: 0px;
+  --vis-tooltip-box-shadow: none;
+  --vis-dark-tooltip-background-color: transparent;
+  --vis-dark-tooltip-border-color: transparent;
+  --vis-dark-tooltip-shadow-color: transparent;
+}
+
+@theme inline {
+  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+  --font-heading: var(--font-sans);
+
+  /* Supabase Emerald Brand Color Palette */
+  --color-brand-50: oklch(0.979 0.021 166.113);
+  --color-brand-100: oklch(0.945 0.055 165.2);
+  --color-brand-200: oklch(0.905 0.093 164.15);
+  --color-brand-300: oklch(0.845 0.143 164.978);
+  --color-brand-400: oklch(0.765 0.177 163.223);
+  --color-brand-500: oklch(0.696 0.17 162.48);
+  --color-brand-600: oklch(0.596 0.145 163.225);
+  --color-brand-700: oklch(0.508 0.118 165.612);
+  --color-brand-800: oklch(0.442 0.098 167.2);
+  --color-brand-900: oklch(0.378 0.077 168.94);
+  --color-brand-950: oklch(0.262 0.051 172.552);
+  --color-brand: var(--color-brand-500);
+  --color-brand-foreground: oklch(0.985 0 0);
+
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-xs: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 2px);
+  --radius-md: var(--radius);
+  --radius-lg: calc(var(--radius) + 2px);
+  --radius-xl: calc(var(--radius) + 4px);
+
+  /* Supabase Compact Typography Scale */
+  --text-xs: 0.75rem;
+  --text-xs--line-height: calc(1 / 0.75);
+  --text-sm: 0.8125rem;
+  --text-sm--line-height: calc(1.25 / 0.8125);
+  --text-base: 0.9375rem;
+  --text-base--line-height: 1.5;
+  --text-lg: 1rem;
+  --text-lg--line-height: 1.5;
+  --text-xl: 1.125rem;
+  --text-xl--line-height: 1.4;
+  --text-2xl: 1.375rem;
+  --text-2xl--line-height: 1.35;
+  --text-3xl: 1.75rem;
+  --text-3xl--line-height: 1.25;
+  --font-weight-normal: 450;
+
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+  --animate-collapsible-down: collapsible-down 0.2s ease-out;
+  --animate-collapsible-up: collapsible-up 0.2s ease-out;
+}
+
+.dark {
+  --background: oklch(0.17 0.006 159);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0.007 159);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0.007 159);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.48 0.125 163.2);
+  --primary-foreground: oklch(0.99 0 0);
+  --secondary: oklch(0.26 0.008 159);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.26 0.008 159);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.26 0.008 159);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --destructive-foreground: oklch(0.985 0 0);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.55 0.145 163.2 / 35%);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.55 0.145 163.2);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.15 0.006 159);
+  --sidebar-foreground: oklch(0.72 0.006 159);
+  --sidebar-primary: oklch(0.48 0.125 163.2);
+  --sidebar-primary-foreground: oklch(0.99 0 0);
+  --sidebar-accent: oklch(0.22 0.008 159);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 8%);
+  --sidebar-ring: oklch(0.55 0.145 163.2 / 35%);
+
+  /* Unovis CSS Variable Resets (Dark) */
+  --vis-tooltip-background-color: transparent;
+  --vis-tooltip-border-color: transparent;
+  --vis-tooltip-shadow-color: transparent;
+  --vis-tooltip-backdrop-filter: none;
+  --vis-tooltip-padding: 0px;
+  --vis-tooltip-border-radius: 0px;
+  --vis-tooltip-box-shadow: none;
+  --vis-dark-tooltip-background-color: transparent;
+  --vis-dark-tooltip-border-color: transparent;
+  --vis-dark-tooltip-shadow-color: transparent;
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+    scrollbar-width: thin;
+    scrollbar-color: oklch(0.145 0 0 / 20%) transparent;
+  }
+  .dark * {
+    scrollbar-color: oklch(0.985 0 0 / 20%) transparent;
+  }
+
+  html, body {
+    @apply bg-background text-foreground font-sans antialiased;
+    font-weight: 450;
+    letter-spacing: -0.011em;
+    height: 100%;
+  }
+
+  #app {
+    height: 100%;
+  }
+
+  /* Disable spinner buttons / arrows on type="number" inputs globally */
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+  }
+
+  input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+  }
+}
+
+/* Custom Minimalist & Modern Scrollbar Style */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: oklch(0.145 0 0 / 18%);
+  border-radius: 9999px;
+  transition: background-color 0.2s ease;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.145 0 0 / 35%);
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: oklch(0.985 0 0 / 18%);
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.985 0 0 / 35%);
+}
+
+/* Animation Keyframes */
+@keyframes tw-shimmer {
+  0% {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+@keyframes pulse-radar {
+  0% {
+    transform: scale(1);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+@keyframes accordion-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-accordion-content-height, var(--radix-accordion-content-height, auto));
+  }
+}
+
+@keyframes accordion-up {
+  from {
+    height: var(--reka-accordion-content-height, var(--radix-accordion-content-height, auto));
+  }
+  to {
+    height: 0;
+  }
+}
+
+@keyframes collapsible-down {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--reka-collapsible-content-height, var(--radix-collapsible-content-height, auto));
+  }
+}
+
+@keyframes collapsible-up {
+  from {
+    height: var(--reka-collapsible-content-height, var(--radix-collapsible-content-height, auto));
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer utilities {
+  /* Heading Text Gradients */
+  .heading-gradient {
+    background-image: linear-gradient(to bottom, var(--foreground), oklch(from var(--foreground) l c h / 70%));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  .heading-gradient-brand {
+    background-image: linear-gradient(135deg, var(--color-brand-400), var(--color-brand-600));
+    -webkit-background-clip: text;
+    background-clip: text;
+    color: transparent;
+  }
+
+  /* Shimmer Animation */
+  .shimmer {
+    --shimmer-spread: calc(3ch + 40px);
+    background-image: linear-gradient(
+      110deg,
+      transparent calc(50% - var(--shimmer-spread)),
+      oklch(from currentColor l c h / 20%) 50%,
+      transparent calc(50% + var(--shimmer-spread))
+    );
+    background-repeat: no-repeat;
+    background-size: 200% 100%;
+    animation: tw-shimmer 2.5s linear infinite;
+  }
+
+  /* Subtle Card Top Highlight */
+  .highlight-card {
+    box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 8%);
+  }
+
+  .dark .highlight-card {
+    box-shadow: inset 0 1px 0 0 oklch(1 0 0 / 12%);
+  }
+
+  /* Interactive Hit-Area Expansion */
+  .hit-area-6 {
+    position: relative;
+  }
+  .hit-area-6::before {
+    content: "";
+    position: absolute;
+    inset: -6px;
+    pointer-events: inherit;
+  }
+
+  /* Ambient Glow Area for Cards / Badges */
+  .glow-area {
+    position: relative;
+    overflow: hidden;
+  }
+  .glow-area::after {
+    content: "";
+    position: absolute;
+    inset: -50%;
+    background: radial-gradient(circle at center, oklch(from var(--primary) l c h / 15%), transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+  }
+
+  /* Live Status Indicator (Pulse Radar Dot) */
+  .status-dot {
+    position: relative;
+    display: inline-flex;
+    width: 0.5rem;
+    height: 0.5rem;
+    border-radius: 9999px;
+    background-color: var(--color-brand-500);
+    flex-shrink: 0;
+  }
+  .status-dot::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    border-radius: 9999px;
+    background-color: inherit;
+    animation: pulse-radar 2s cubic-bezier(0, 0, 0.2, 1) infinite;
+  }
+  .status-dot-amber { background-color: oklch(0.75 0.16 70); }
+  .status-dot-red { background-color: oklch(0.63 0.22 25); }
+  .status-dot-blue { background-color: oklch(0.65 0.18 240); }
+
+  /* Smooth Edge Fade Masks */
+  .mask-fade-x {
+    -webkit-mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
+    mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent 100%);
+  }
+  .mask-fade-y {
+    -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 2.5rem), transparent 100%);
+    mask-image: linear-gradient(to bottom, black calc(100% - 2.5rem), transparent 100%);
+  }
+
+  /* Studio-style Monospace Subtitle / Label */
+  .label-mono {
+    font-family: var(--font-mono, monospace);
+    font-size: 0.6875rem;
+    font-weight: 500;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--muted-foreground);
+  }
+
+  /* Modern Subtle Background Patterns */
+  .bg-grid-pattern {
+    background-size: 24px 24px;
+    background-image: linear-gradient(to right, oklch(0.145 0 0 / 5%) 1px, transparent 1px),
+                      linear-gradient(to bottom, oklch(0.145 0 0 / 5%) 1px, transparent 1px);
+  }
+  .dark .bg-grid-pattern {
+    background-image: linear-gradient(to right, oklch(0.985 0 0 / 5%) 1px, transparent 1px),
+                      linear-gradient(to bottom, oklch(0.985 0 0 / 5%) 1px, transparent 1px);
+  }
+
+  .bg-dot-pattern {
+    background-size: 20px 20px;
+    background-image: radial-gradient(circle, oklch(0.145 0 0 / 8%) 1px, transparent 1px);
+  }
+  .dark .bg-dot-pattern {
+    background-image: radial-gradient(circle, oklch(0.985 0 0 / 8%) 1px, transparent 1px);
+  }
+
+  /* Page Route Transitions */
+  .page-enter-active,
+  .page-leave-active {
+    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
+  }
+
+  .page-enter-from {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+
+  .page-leave-to {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .page-enter-active,
+    .page-leave-active {
+      transition: none;
+    }
+    .page-enter-from,
+    .page-leave-to {
+      transform: none;
+      opacity: 1;
+    }
+  }
+
+  /* Print Stylesheet (Clean PDF/Paper Export) */
+  @media print {
+    header,
+    aside,
+    nav,
+    .no-print,
+    [data-sidebar="sidebar"],
+    button:not(.print-include) {
+      display: none !important;
+    }
+
+    body {
+      background: white !important;
+      color: black !important;
+      font-size: 11pt !important;
+    }
+
+    main {
+      padding: 0 !important;
+      overflow: visible !important;
+      max-height: none !important;
+    }
+
+    [class*="shadow-"] {
+      box-shadow: none !important;
+    }
+  }
+
+}
+
+/* ─── Unovis Chart Global Styling ─────────────────────────────────────────── */
+.unovis-xy-container svg,
+.unovis-single-container svg {
+  overflow: visible;
+}
+
+/* Grid lines — light mode */
+.unovis-axis g line {
+  stroke: oklch(0.92 0.003 159) !important;
+  stroke-dasharray: 4 4 !important;
+  stroke-opacity: 0.7 !important;
+}
+
+/* Grid lines — dark mode */
+.dark .unovis-axis g line {
+  stroke: oklch(1 0 0 / 12%) !important;
+  stroke-dasharray: 4 4 !important;
+  stroke-opacity: 1 !important;
+}
+
+/* Hide axis domain & tick lines */
+.unovis-axis path.domain {
+  display: none !important;
+}
+
+/* Axis tick text */
+.unovis-axis text {
+  fill: oklch(0.556 0 0) !important;
+  font-size: 11px !important;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
+}
+.dark .unovis-axis text {
+  fill: oklch(0.708 0 0) !important;
+}
+
+/* Crosshair */
+.unovis-crosshair line {
+  stroke: oklch(0.48 0.125 163.2) !important;
+  stroke-dasharray: 3 3 !important;
+  stroke-opacity: 0.6 !important;
+}
+.dark .unovis-crosshair line {
+  stroke: oklch(0.48 0.125 163.2) !important;
+}
+
+/* Crosshair circle dots */
+.unovis-crosshair circle {
+  stroke-width: 2px !important;
+}
+
+/* Tooltip outer wrapper resets (eliminates outer white card & padding) */
+[data-unovis-tooltip],
+.unovis-tooltip,
+div[class*="tooltip_root"],
+div[class*="tooltip"] {
+  background-color: transparent !important;
+  background: transparent !important;
+  border: none !important;
+  box-shadow: none !important;
+  padding: 0 !important;
+  border-radius: 0 !important;
+  backdrop-filter: none !important;
+}

package/template/src/views/_starter/BlankView.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * Blank Page Template
+ *
+ * Vue reactivity (ref, computed, watch, onMounted, useRoute, useRouter, ...)
+ * and UI components (Button, Card, CardContent, CardHeader, CardTitle, PageHeader, Input, Badge, ...)
+ * are AUTO-IMPORTED — no need to write imports for them.
+ *
+ * Only Lucide icons need to be imported explicitly:
+ * import { Plus, Search } from '@lucide/vue'
+ */
+import { Plus } from '@lucide/vue'
+
+// Example reactive state
+const searchQuery = ref('')
+</script>
+
+<template>
+  <div class="space-y-6 w-full mx-auto pb-12">
+    <!-- ─── Page Header ────────────────────────────────────────────── -->
+    <PageHeader
+      title="Page Title"
+      description="Short description of this page."
+    >
+      <template #actions>
+        <Button size="sm" class="gap-1.5 shrink-0">
+          <Plus class="h-3.5 w-3.5" />
+          New Item
+        </Button>
+      </template>
+    </PageHeader>
+
+    <!-- ─── Main Content Card ─────────────────────────────────────── -->
+    <Card flush>
+      <CardHeader section class="flex flex-row items-center justify-between">
+        <div>
+          <CardTitle class="text-base font-semibold">Section Title</CardTitle>
+        </div>
+        <Input v-model="searchQuery" placeholder="Search..." class="h-8 w-56 text-xs" />
+      </CardHeader>
+      <CardContent class="p-6">
+        <!-- Content goes here -->
+        <p class="text-sm text-muted-foreground">Your content here.</p>
+      </CardContent>
+    </Card>
+  </div>
+</template>