fse-theme-default 0.3.0

package/src/styles/theme.css

@@ -0,0 +1,408 @@
+/*
+  The theme's design layer: tokens, utilities and dark mode. Everything but
+  the `@import "tailwindcss"` itself, so a child theme's own Tailwind root
+  can import it and override tokens afterwards. `@source` makes Tailwind scan
+  this theme's sources wherever it is imported from.
+*/
+@source "../";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial,
+    sans-serif;
+
+  --color-primary-50: #f4f9ee;
+  --color-primary-100: #e6f2d6;
+  --color-primary-200: #cce5ad;
+  --color-primary-300: #aad27e;
+  --color-primary-400: #8bc358;
+  --color-primary-500: #92c355;
+  --color-primary-600: #6a9b3c;
+  --color-primary-700: #527830;
+  --color-primary-800: #3b5622;
+  --color-primary-900: #263715;
+  --color-primary-950: #17220c;
+
+  --color-secondary-50: #f8f5f4;
+  --color-secondary-100: #f1ece8;
+  --color-secondary-200: #e2ddd8;
+  --color-secondary-300: #cfc8c1;
+  --color-secondary-400: #a8a29a;
+  --color-secondary-500: #6b6b67;
+  --color-secondary-600: #57564f;
+  --color-secondary-700: #44433d;
+  --color-secondary-800: #33332e;
+  --color-secondary-900: #282925;
+  --color-secondary-950: #1c1c19;
+}
+
+/*
+  The default border color has changed to `currentcolor` in Tailwind CSS v4,
+  so we've added these compatibility styles to make sure everything still
+  looks the same as it did with Tailwind CSS v3.
+
+  If we ever want to remove these styles, we need to add an explicit border
+  color utility to any element that depends on these defaults.
+*/
+@layer base {
+  *,
+  ::after,
+  ::before,
+  ::backdrop,
+  ::file-selector-button {
+    border-color: var(--color-gray-200, currentcolor);
+  }
+}
+
+@utility section-title {
+  @apply font-extrabold uppercase;
+  font-size: clamp(26px, 3.5vw, 30px);
+  line-height: 1.15;
+  letter-spacing: -0.01em;
+}
+
+@utility btn-primary {
+  @apply px-4 py-2 inline-flex items-center gap-2 justify-center text-sm font-medium text-white bg-primary-600 rounded-lg hover:bg-primary-500 active:bg-primary-700 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary-500 focus-visible:ring-offset-2;
+}
+
+@utility btn-secondary {
+  @apply px-4 py-2 inline-flex items-center gap-2 justify-center text-sm font-medium text-secondary-700 bg-secondary-100 border border-secondary-200 rounded-lg hover:bg-secondary-200 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-secondary-300 focus-visible:ring-offset-2;
+}
+
+@utility btn-ghost {
+  @apply px-4 py-2 inline-flex items-center gap-2 justify-center text-sm font-medium text-secondary-600 rounded-lg hover:bg-secondary-100 hover:text-secondary-900 transition-colors focus-visible:outline-hidden;
+}
+
+@utility btn-danger {
+  @apply px-4 py-2 inline-flex items-center gap-2 justify-center text-sm font-medium text-red-600 bg-red-50 border border-red-200 rounded-lg hover:bg-red-100 transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-red-400 focus-visible:ring-offset-2;
+}
+
+@utility sidebar-closed {
+  /* Mobile: fully hide sidebar off-screen */
+  & aside {
+    @apply -translate-x-full;
+  }
+}
+
+@layer base {
+  /* Light mode tokens — swap these in .dark for dark mode */
+  :root {
+    --color-bg: 248 245 244; /* secondary-50  (offwhite) */
+    --color-surface: 255 255 255; /* white         */
+    --color-border: 226 221 216; /* secondary-200 (warm border) */
+    --color-fg: 40 41 37; /* secondary-900 (charcoal) */
+    --color-fg-muted: 107 107 103; /* secondary-500 */
+    --color-primary: 111 160 58; /* green-dark    */
+  }
+
+  .dark {
+    --color-bg: 28 28 25; /* secondary-950 */
+    --color-surface: 40 41 37; /* secondary-900 (charcoal) */
+    --color-border: 59 59 53; /* raised border */
+    --color-fg: 248 245 244; /* secondary-50  (offwhite) */
+    --color-fg-muted: 168 168 162; /* secondary-400 */
+    --color-primary: 146 195 85; /* primary-500   */
+  }
+
+  body {
+    @apply bg-secondary-50 text-secondary-900 antialiased;
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+}
+
+@layer utilities {
+  .dark {
+    color-scheme: dark;
+    /* Match the focus-ring offset gap to the dark page instead of white. */
+    --tw-ring-offset-color: #1c1c19;
+  }
+
+  .dark body {
+    background-color: #1c1c19;
+    color: #f8f5f4;
+  }
+
+  .dark .btn-primary {
+    background-color: #92c355;
+    color: #10210a;
+  }
+  .dark .btn-primary:hover {
+    background-color: #a7d176;
+  }
+  .dark .btn-primary:active {
+    background-color: #7fb544;
+  }
+
+  .dark .btn-secondary {
+    background-color: #33342f;
+    border-color: #44443d;
+    color: #ece7e2;
+  }
+  .dark .btn-secondary:hover {
+    background-color: #44443d;
+  }
+
+  .dark .btn-ghost {
+    color: #d4cfc8;
+  }
+  .dark .btn-ghost:hover {
+    background-color: #33342f;
+    color: #f8f5f4;
+  }
+
+  .dark .btn-danger {
+    background-color: #2a1416;
+    border-color: #7f1d1d;
+    color: #fca5a5;
+  }
+  .dark .btn-danger:hover {
+    background-color: #3a1a1c;
+  }
+
+  /* ---- Backgrounds ---- */
+  .dark .bg-white {
+    background-color: #282925;
+  }
+  .dark .bg-secondary-50 {
+    background-color: #1c1c19;
+  }
+  .dark .bg-secondary-100 {
+    background-color: #33342f;
+  }
+  .dark .bg-secondary-200 {
+    background-color: #44443d;
+  }
+  .dark .hover\:bg-secondary-100:hover {
+    background-color: #33342f;
+  }
+  .dark .hover\:bg-secondary-50:hover {
+    background-color: #33342f;
+  }
+  .dark .disabled\:bg-secondary-50:disabled {
+    background-color: #232320;
+  }
+
+  .dark .bg-primary-50 {
+    background-color: #1b2913;
+  }
+  .dark .bg-primary-100 {
+    background-color: #25360f;
+  }
+  .dark .aria-\[current\=page\]\:bg-primary-50[aria-current="page"] {
+    background-color: #1b2913;
+  }
+
+  .dark .bg-red-50 {
+    background-color: #2a1416;
+  }
+  .dark .hover\:bg-red-50:hover {
+    background-color: #2a1416;
+  }
+  .dark .bg-green-50 {
+    background-color: #14271a;
+  }
+  .dark .bg-amber-50 {
+    background-color: #2a2213;
+  }
+  .dark .bg-pink-50 {
+    background-color: #2a1420;
+  }
+
+  /* ---- Text ---- */
+  .dark .text-secondary-900,
+  .dark .text-black {
+    color: #f8f5f4;
+  }
+  .dark .text-secondary-800 {
+    color: #ece7e2;
+  }
+  .dark .text-secondary-700 {
+    color: #d4cfc8;
+  }
+  .dark .text-secondary-600 {
+    color: #d4cfc8;
+  }
+  .dark .text-secondary-500 {
+    color: #b8b3ab;
+  }
+  .dark .text-secondary-400 {
+    color: #a8a29a;
+  }
+  .dark .text-secondary-300 {
+    color: #57564f;
+  }
+  .dark .text-secondary-200 {
+    color: #44443d;
+  }
+  .dark .hover\:text-secondary-900:hover {
+    color: #f8f5f4;
+  }
+  .dark .hover\:text-secondary-800:hover {
+    color: #ece7e2;
+  }
+  .dark .hover\:text-secondary-700:hover {
+    color: #d4cfc8;
+  }
+  .dark .peer-disabled\:text-secondary-400:disabled {
+    color: #57564f;
+  }
+
+  .dark .text-primary-900,
+  .dark .text-primary-800,
+  .dark .text-primary-700 {
+    color: #aad27e;
+  }
+  .dark .text-primary-600 {
+    color: #8bc358;
+  }
+  .dark .hover\:text-primary-700:hover {
+    color: #aad27e;
+  }
+  .dark .hover\:text-primary-600:hover {
+    color: #8bc358;
+  }
+  .dark .aria-\[current\=page\]\:text-primary-800[aria-current="page"] {
+    color: #aad27e;
+  }
+
+  .dark .text-red-700,
+  .dark .text-red-600 {
+    color: #fca5a5;
+  }
+  .dark .text-red-500 {
+    color: #f87171;
+  }
+  .dark .hover\:text-red-600:hover {
+    color: #fca5a5;
+  }
+  .dark .text-green-800,
+  .dark .text-green-700,
+  .dark .text-green-600 {
+    color: #86efac;
+  }
+  .dark .text-amber-900,
+  .dark .text-amber-800,
+  .dark .text-amber-700 {
+    color: #fcd34d;
+  }
+  .dark .text-amber-500 {
+    color: #fbbf24;
+  }
+  .dark .text-pink-500 {
+    color: #f9a8d4;
+  }
+
+  /* ---- Borders ---- */
+  .dark .border-secondary-100 {
+    border-color: #33342f;
+  }
+  .dark .border-secondary-200 {
+    border-color: #3b3b35;
+  }
+  .dark .border-secondary-300 {
+    border-color: #44443d;
+  }
+  .dark .border-black {
+    border-color: #3b3b35;
+  }
+  .dark .hover\:border-secondary-300:hover {
+    border-color: #57564f;
+  }
+  .dark .disabled\:border-secondary-200:disabled {
+    border-color: #3b3b35;
+  }
+  .dark .divide-secondary-100 > :not(:last-child) {
+    border-color: #33342f;
+  }
+  .dark .divide-secondary-200 > :not(:last-child) {
+    border-color: #3b3b35;
+  }
+
+  .dark .border-primary-100 {
+    border-color: #25360f;
+  }
+  .dark .border-primary-200 {
+    border-color: #3b5622;
+  }
+  .dark .border-primary-300 {
+    border-color: #527830;
+  }
+  .dark .hover\:border-primary-200:hover {
+    border-color: #3b5622;
+  }
+
+  .dark .border-red-200 {
+    border-color: #7f1d1d;
+  }
+  .dark .border-green-100,
+  .dark .border-green-200 {
+    border-color: #166534;
+  }
+  .dark .border-amber-200 {
+    border-color: #78350f;
+  }
+  .dark .border-pink-100 {
+    border-color: #831843;
+  }
+
+  /* ---- Form fields ---- */
+  .dark input,
+  .dark select,
+  .dark textarea {
+    color: #f4f4f5;
+  }
+  /* Floating-label mask sits over the input border; match the surface colour. */
+  .dark .before\:bg-white::before {
+    background-color: #282925;
+  }
+  /* Override the browser's white autofill background. */
+  .dark input:-webkit-autofill,
+  .dark input:-webkit-autofill:hover,
+  .dark input:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0 1000px #282925 inset;
+    -webkit-text-fill-color: #f8f5f4;
+    caret-color: #f8f5f4;
+  }
+}
+
+html.sidebar-mini #nav-menu-1 {
+  width: 4rem;
+}
+html.sidebar-mini #nav-menu-1 .sidebar-full-logo {
+  display: none;
+}
+html.sidebar-mini #nav-menu-1 .sidebar-label {
+  display: none;
+}
+/* Center icons when labels are hidden */
+html.sidebar-mini #nav-menu-1 nav,
+html.sidebar-mini #nav-menu-1 .border-t > div,
+html.sidebar-mini #nav-menu-1 .border-t {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+html.sidebar-mini #nav-menu-1 nav a,
+html.sidebar-mini #nav-menu-1 nav button,
+html.sidebar-mini #nav-menu-1 .border-t a,
+html.sidebar-mini #nav-menu-1 .border-t button,
+html.sidebar-mini #nav-menu-1 .border-t form button {
+  justify-content: center;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}
+/* Mini header: pull toggle out of absolute so flexbox centers it */
+html.sidebar-mini #nav-menu-1 #sidebar-header {
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+}
+html.sidebar-mini #nav-menu-1 #toggle-sidebar-mini {
+  position: static;
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;
+}

package/src/types/pages.ts

@@ -0,0 +1,58 @@
+/**
+ * Shared page-context types for the theme's auth/admin pages —
+ * mirrors what the framework's auth module renders.
+ */
+
+export interface TableHeader {
+  /** Column heading shown to the user. */
+  title: string;
+  /** Row field this column renders. */
+  key: string;
+  format?: "number" | "delete" | "image";
+}
+
+export interface UserRow {
+  id: number;
+  email: string;
+  role: string;
+  created_at: string;
+  link: string;
+  delete_url: string;
+}
+
+export interface Role {
+  value: string;
+  label: string;
+}
+
+export interface UsersPage {
+  rows: UserRow[];
+  search: string;
+  filter_role: string;
+  roles: Role[];
+  page: number;
+  total_pages: number;
+  total_count: number;
+  per_page: number;
+}
+
+export interface UserPage {
+  id: number;
+  email: string;
+  role: string;
+  roles: Role[];
+}
+
+export interface SettingsPage {
+  current_email: string;
+  first_name: string;
+  last_name: string;
+  success?: string;
+  error?: string;
+  email_success?: string;
+  email_error?: string;
+}
+
+export interface ErrorPage {
+  error: string;
+}

package/src/types.ts

@@ -0,0 +1,154 @@
+/**
+ * Render-context shapes for the generic `fse/*` pages — these mirror the
+ * JSON the framework's generated handlers build (framework/src/models/
+ * routes.rs). Child themes import them via `@parent/types` (or
+ * `fse-theme-default/src/types`).
+ */
+
+export interface ModelColumn {
+  name: string;
+  widget:
+    | "text"
+    | "textarea"
+    | "number"
+    | "checkbox"
+    | "datetime"
+    | "date"
+    | "select"
+    | "relation"
+    | "email"
+    | "url"
+    | "json";
+  /** Enum values for `select`; `{ id, title }` rows the user may pick for
+   * `relation` (null when they may not read the related model). */
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  options: any[] | null;
+  required: boolean;
+  readonly: boolean;
+  nullable: boolean;
+  /** `#[ui(filter)]` kind, `null` when the column isn't a filter. */
+  filter: "exact" | "contains" | "range" | null;
+  /** Query params the filter reads: `[name]`, or `[name_from, name_to]`. */
+  filter_params: string[];
+  /** `#[ui(format = ...)]` kind, if any. */
+  format: string | null;
+  /** The row key to render: `{col}_display` when formatted, else `name`. */
+  display: string;
+  /** For a foreign key with `#[ui(show)]`: the row key holding `{ id, title }`. */
+  relation: string | null;
+}
+
+/** A nested model or link table under a row (`{base_path}/{id}/{segment}`). */
+export interface ModelChild {
+  segment: string;
+  table: string;
+}
+
+/** The parent row of a nested page. */
+export interface ParentContext {
+  meta: { table: string; base_path: string; title_field: string };
+  row: ModelRow;
+}
+
+export interface ModelMetaContext {
+  table: string;
+  base_path: string;
+  can_write: boolean;
+  no_create: boolean;
+  no_edit: boolean;
+  no_delete: boolean;
+  public_read: string | null;
+  title_field: string;
+  /** `#[model(owner = ...)]` column — filled by the server, never a form field. */
+  owner: string | null;
+  /** `#[model(parent = ...)]` column of a nested model. */
+  parent_column: string | null;
+  /** Row actions (`#[model(actions(...))]`). */
+  actions: string[];
+  /** Nested models under each row. */
+  children: ModelChild[];
+  /** `children` or `links` non-empty. */
+  has_subpages: boolean;
+  /** Many-to-many link tables under each row. */
+  links: ModelChild[];
+  list_columns: ModelColumn[];
+  form_columns: ModelColumn[];
+  search_columns: string[];
+  filter_columns: ModelColumn[];
+}
+
+/** One row — column values are only known at runtime, hence `any`. */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type ModelRow = Record<string, any>;
+
+export interface ModelListPage {
+  meta: ModelMetaContext;
+  rows: ModelRow[];
+  total: number;
+  page: number;
+  per_page: number;
+  total_pages: number;
+  has_prev: boolean;
+  has_next: boolean;
+  prev_page: number;
+  next_page: number;
+  search: string | null;
+  sort: string | null;
+  desc: boolean;
+  /** Current value per filter param (`""` = not filtered). */
+  filters: Record<string, string>;
+  /** Write permission, `can_create` hook and `no_create`, combined. */
+  can_create: boolean;
+  /** The parent row, for a nested model (else null). */
+  parent: ParentContext | null;
+}
+
+export interface ModelFormPage {
+  meta: ModelMetaContext;
+  row: ModelRow;
+  errors: { field: string; code: string }[];
+  is_new: boolean;
+  /** Write permission, `no_edit` and the model's `can_edit` hook, combined. */
+  can_edit: boolean;
+  /** Write permission, `no_delete` and the model's `can_delete` hook, combined. */
+  can_delete: boolean;
+  /** Row actions allowed on this row (`can_act`). */
+  actions: string[];
+  /** The parent row, for a nested model (else null). */
+  parent: ParentContext | null;
+}
+
+/** `fse/links` — the rows of another model linked to one row. */
+export interface ModelLinksPage {
+  meta: ModelMetaContext;
+  parent: ParentContext;
+  link: { table: string; segment: string; other_table: string; base_path: string };
+  linked: { id: number; title: string }[];
+  can_write: boolean;
+}
+
+export interface ModelDetailPage {
+  meta: ModelMetaContext;
+  row: ModelRow;
+}
+
+/** One entry of the `nav` list the framework injects into every page. */
+export interface NavItem {
+  table: string;
+  href: string;
+}
+
+/** The signed-in user as injected by the framework (absent when signed out). */
+export interface SessionUser {
+  id: number;
+  role: string;
+  is_admin: boolean;
+  can_read_users: boolean;
+}
+
+/** Context keys every page receives, whatever renders it. */
+export interface ShellContext {
+  nav: NavItem[];
+  user?: SessionUser;
+  lang_prefix: string;
+}

package/theme.json

@@ -0,0 +1,5 @@
+{
+  "name": "fse-theme-default",
+  "version": "0.2.1",
+  "description": "Default full_stack_engine theme: app shell, design system, auth pages, emails and the generic model CRUD pages."
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "extends": "astro/tsconfigs/strict",
+  "include": [".astro/types.d.ts", "**/*"],
+  "exclude": ["dist", "target"]
+}