@stacksjs/defaults 0.70.88 → 0.70.90

package/app/Actions/Dashboard/Content/TagIndexAction.ts

@@ -1,23 +1,49 @@
 import { Action } from '@stacksjs/actions'
-import { Tag } from '@stacksjs/orm'
+import { db } from '@stacksjs/database'
 
+interface TagRow {
+  id: number
+  name: string | null
+  slug: string | null
+  description: string | null
+  post_count: number | null
+  color: string | null
+  created_at: string | null
+  updated_at: string | null
+}
+
+/**
+ * `GET /api/dashboard/tags` — backs `views/dashboard/content/tags/index.stx`.
+ *
+ * Reads the `tags` table via `db`. The previous `Tag.all()` call threw on every
+ * request (the ORM model exposes no query methods) and the catch turned that
+ * into an empty list, so a broken read looked like a CMS with no tags. It also
+ * returned only `{ name, count }`, while the page renders id, slug, and
+ * description.
+ */
 export default new Action({
   name: 'TagIndexAction',
-  description: 'Returns tags data for the dashboard.',
+  description: 'Returns CMS tags for the dashboard.',
   method: 'GET',
+  apiResponse: true,
   async handle() {
-    try {
-      const allTags = await Tag.all()
+    const rows = await db
+      .selectFrom('tags')
+      .selectAll()
+      .orderBy('created_at', 'desc')
+      .execute() as unknown as TagRow[]
 
-      const tags = allTags.map(t => ({
-        name: String(t.get('name') || ''),
-        count: Number(t.get('count') || t.get('post_count') || 0),
-      }))
+    const tags = rows.map(row => ({
+      id: Number(row.id),
+      name: String(row.name || ''),
+      slug: String(row.slug || ''),
+      description: String(row.description || ''),
+      color: String(row.color || ''),
+      post_count: Number(row.post_count || 0),
+      created_at: row.created_at || null,
+      updated_at: row.updated_at || null,
+    }))
 
-      return { tags }
-    }
-    catch {
-      return { tags: [] }
-    }
+    return { tags }
   },
 })

package/app/Actions/Dashboard/Content/TagStoreAction.ts

@@ -0,0 +1,60 @@
+import type { RequestInstance } from '@stacksjs/types'
+import { Action } from '@stacksjs/actions'
+import { db } from '@stacksjs/database'
+import { response } from '@stacksjs/router'
+import { randomUUIDv7 } from 'bun'
+import { findRow, insertedId, slugify, str, timestamp } from './content-input'
+
+/**
+ * `POST /api/dashboard/tags` — creates a CMS tag from the dashboard.
+ *
+ * The `Tag` model declares `name` and `slug` unique but the table carries no
+ * unique constraint, so the duplicate check has to happen here.
+ */
+export default new Action({
+  name: 'TagStoreAction',
+  description: 'Creates a CMS tag from the dashboard.',
+  method: 'POST',
+  async handle(request: RequestInstance) {
+    const name = str(request.get('name')).trim()
+    const description = str(request.get('description'))
+    const slug = slugify(str(request.get('slug')) || name)
+
+    if (!name)
+      return response.json({ message: 'Name is required.' }, 422)
+
+    if (!slug)
+      return response.json({ message: 'Slug could not be derived from the name; enter one.' }, 422)
+
+    const duplicate = await db
+      .selectFrom('tags')
+      .select(['id'])
+      .where('slug', '=', slug)
+      .executeTakeFirst()
+
+    if (duplicate)
+      return response.json({ message: 'A tag with that slug already exists.' }, 422)
+
+    const now = timestamp()
+
+    const result = await db
+      .insertInto('tags')
+      .values({
+        uuid: randomUUIDv7(),
+        name,
+        slug,
+        description,
+        post_count: 0,
+        created_at: now,
+        updated_at: now,
+      } as any)
+      .executeTakeFirst()
+
+    const id = insertedId(result)
+
+    if (!id)
+      return response.json({ message: 'Could not create tag.' }, 500)
+
+    return response.json(await findRow('tags', id), 201)
+  },
+})

package/app/Actions/Dashboard/Content/comment-input.ts

@@ -0,0 +1,35 @@
+import { str } from './content-input'
+
+/** The `comments.status` CHECK constraint, in one place. */
+export const COMMENT_STATUSES = ['pending', 'approved', 'spam', 'trash'] as const
+
+export type CommentStatus = typeof COMMENT_STATUSES[number]
+
+function isCommentStatus(value: string): value is CommentStatus {
+  return (COMMENT_STATUSES as readonly string[]).includes(value)
+}
+
+/**
+ * Read-side normalization: fold casing and fall back to 'pending'.
+ *
+ * The CHECK constraint keeps SQL honest, but rows predating it (and hand-written
+ * seeds) have been seen with 'Pending', so the dashboard's status filter and
+ * badge styling only ever see one casing.
+ */
+export function normalizeCommentStatus(value: unknown): CommentStatus {
+  const status = str(value).toLowerCase()
+
+  return isCommentStatus(status) ? status : 'pending'
+}
+
+/**
+ * Write-side validation: an unknown status is rejected rather than coerced.
+ *
+ * A moderation write silently landing as 'pending' would be worse than an
+ * error, and the CHECK constraint would reject it anyway — as a 500.
+ */
+export function parseCommentStatus(value: unknown): CommentStatus | undefined {
+  const status = str(value).toLowerCase()
+
+  return isCommentStatus(status) ? status : undefined
+}

package/app/Actions/Dashboard/Content/content-input.ts

@@ -0,0 +1,65 @@
+import type { RequestInstance } from '@stacksjs/types'
+import { db } from '@stacksjs/database'
+
+/**
+ * Helpers shared by the `Dashboard/Content` CRUD actions.
+ *
+ * These actions talk to `db` directly rather than going through the ORM models
+ * or `@stacksjs/cms`: the models expose no query methods, and the CMS helpers
+ * assume columns and pivot tables this schema does not have. See
+ * `PostIndexAction` for the longer version of that story.
+ */
+
+export function str(value: unknown): string {
+  return value == null ? '' : String(value)
+}
+
+/** `YYYY-MM-DD HH:MM:SS`, matching the tables' CURRENT_TIMESTAMP default. */
+export function timestamp(): string {
+  return new Date().toISOString().slice(0, 19).replace('T', ' ')
+}
+
+/** The new row's id, across the driver shapes we may get back from an insert. */
+export function insertedId(result: unknown): number {
+  const row = result as { lastInsertRowid?: number | bigint, insertId?: number | bigint } | undefined
+
+  return Number(row?.lastInsertRowid ?? row?.insertId ?? 0)
+}
+
+/** The `{id}` route param, or 0 when it is not a usable row id. */
+export function rowId(request: RequestInstance): number {
+  const id = Number(request.getParam('id'))
+
+  return Number.isInteger(id) && id > 0 ? id : 0
+}
+
+/** Matches the slug the dashboard dialogs generate client-side. */
+export function slugify(value: string): string {
+  return value
+    .trim()
+    .toLowerCase()
+    .replace(/['"]/g, '')
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+}
+
+/**
+ * Reads a row back after a write.
+ *
+ * The SQLite driver in use does not honour `RETURNING` — `.returningAll()`
+ * resolves to a `{ changes, lastInsertRowid }` summary rather than the row — so
+ * writes re-select instead of trusting the insert/update result.
+ *
+ * `table` is a literal at every call site; the cast is only here because the
+ * query builder's types want a table union rather than a `string`.
+ */
+export async function findRow(table: string, id: number): Promise<unknown> {
+  return await (db as any).selectFrom(table).selectAll().where('id', '=', id).executeTakeFirst()
+}
+
+/** Whether a row with this id exists — the 404 check every write shares. */
+export async function rowExists(table: string, id: number): Promise<boolean> {
+  const row = await (db as any).selectFrom(table).select(['id']).where('id', '=', id).executeTakeFirst()
+
+  return Boolean(row)
+}

package/app/Actions/Dashboard/Content/post-input.ts

@@ -0,0 +1,54 @@
+import type { RequestInstance } from '@stacksjs/types'
+import { db } from '@stacksjs/database'
+import { str } from './content-input'
+
+export { insertedId, timestamp } from './content-input'
+
+export interface PostPayload {
+  title: string
+  excerpt: string
+  content: string
+  poster: string
+  status: string
+}
+
+/**
+ * The `posts` table has a CHECK constraint on ('published', 'draft', 'archived'),
+ * so anything else — including a capitalized 'Draft' — fails the insert. Fold
+ * casing and fall back to 'draft' rather than letting a bad value reach SQL.
+ */
+export function normalizeStatus(value: unknown): string {
+  const status = str(value).toLowerCase()
+
+  return status === 'published' || status === 'archived' ? status : 'draft'
+}
+
+/**
+ * A post only carries a `published_at` while it is published.
+ *
+ * An already-published post keeps its original timestamp so re-saving doesn't
+ * silently republish it, and unpublishing clears the date instead of leaving a
+ * stale one behind.
+ */
+export function publishedAtFor(status: string, existing: string | null, now: string): string | null {
+  if (status !== 'published')
+    return null
+
+  return existing || now
+}
+
+/** Reads a post row back after a write — see `findRow` for why writes re-select. */
+export async function findPost(id: number): Promise<unknown> {
+  return await db.selectFrom('posts').selectAll().where('id', '=', id).executeTakeFirst()
+}
+
+/** Maps a dashboard request body onto the writable post columns. */
+export function postPayload(request: RequestInstance): PostPayload {
+  return {
+    title: str(request.get('title')).trim(),
+    excerpt: str(request.get('excerpt')),
+    content: str(request.get('content') || request.get('body')),
+    poster: str(request.get('poster')),
+    status: normalizeStatus(request.get('status')),
+  }
+}

package/app/Models/Content/Post.ts

@@ -21,7 +21,10 @@ export default defineModel({
     // rendered by BunPress; this model backs the CMS dashboard only.
     categorizable: true,
     taggable: true,
-    commentables: true,
+    // `commentable`, not `commentables`: define-model checks the singular key,
+    // so the plural spelling left the trait inert. Now that the commentable
+    // trait targets the real `commentables` table, activating it is correct.
+    commentable: true,
     useApi: {
       uri: 'posts',
       routes: ['index', 'store', 'show', 'update', 'destroy'],

package/package.json

@@ -2,7 +2,7 @@
   "name": "@stacksjs/defaults",
   "type": "module",
   "sideEffects": false,
-  "version": "0.70.88",
+  "version": "0.70.90",
   "description": "Default Stacks scaffold resources (views, layouts, components, preloader) — shipped so apps consuming the framework from node_modules get the same fallback resources a vendored checkout provides. Source of truth: storage/framework/defaults.",
   "author": "Chris Breuer",
   "license": "MIT",

package/resources/components/Dashboard/FileViewer/MediaCard.stx

@@ -0,0 +1,119 @@
+<!--
+  MediaCard — Meema-style visual file preview
+
+  Ported from meemalabs/file-manager (MediaCard/{Image,Video,Audio,Document}.vue)
+  to stx + Crosswind. Presentational: it renders the preview + label for one
+  file item and derives the media "kind" from `mime_type` (preferred) or the
+  file extension in `type`. Real thumbnails render when the item carries a
+  `thumbnail`/`url`; otherwise a kind-appropriate placeholder is shown, so it
+  works with both live storage listings and demo data.
+
+  The parent supplies the card frame (border, rounded, hover, click, overflow)
+  and any hover action buttons; this component only fills the interior.
+
+  Usage:
+    <MediaCard :item="item" />
+-->
+
+<script>
+interface FileItem {
+  id: number
+  name: string
+  type: string
+  size?: number
+  mime_type?: string
+  url?: string
+  thumbnail?: string
+}
+
+interface Props {
+  item: FileItem
+}
+
+const { item } = defineProps<Props>()
+
+const IMAGE_EXT = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg', 'bmp', 'heic']
+const VIDEO_EXT = ['mp4', 'mov', 'webm', 'mkv', 'avi', 'm4v']
+const AUDIO_EXT = ['mp3', 'wav', 'ogg', 'flac', 'm4a', 'aac']
+const ARCHIVE_EXT = ['zip', 'rar', 'gz', 'tar', '7z']
+const DOC_EXT = ['pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt', 'md', 'csv', 'key', 'pages']
+
+function kindOf(it: FileItem): string {
+  if (it.type === 'folder')
+    return 'folder'
+  const mime = (it.mime_type || '').toLowerCase()
+  if (mime.startsWith('image/'))
+    return 'image'
+  if (mime.startsWith('video/'))
+    return 'video'
+  if (mime.startsWith('audio/'))
+    return 'audio'
+  const ext = (it.type || '').toLowerCase()
+  if (IMAGE_EXT.includes(ext))
+    return 'image'
+  if (VIDEO_EXT.includes(ext))
+    return 'video'
+  if (AUDIO_EXT.includes(ext))
+    return 'audio'
+  if (ARCHIVE_EXT.includes(ext))
+    return 'archive'
+  if (DOC_EXT.includes(ext))
+    return 'document'
+  return 'other'
+}
+
+const kind = kindOf(item)
+const ext = (item.type || '').toUpperCase()
+const previewUrl = item.thumbnail || item.url || ''
+const hasImage = kind === 'image' && !!previewUrl
+
+// A soft, kind-specific backdrop for the preview area (Meema uses colored
+// treatments per media type). Assembled as full class strings because stx
+// binds dynamic classes via :class, not via {{ }} inside class attributes.
+const backdropByKind: Record<string, string> = {
+  image: 'bg-gradient-to-br from-sky-50 to-indigo-100 dark:from-neutral-800 dark:to-neutral-900',
+  video: 'bg-gradient-to-br from-neutral-800 to-neutral-950',
+  audio: 'bg-gradient-to-br from-fuchsia-50 to-purple-100 dark:from-neutral-800 dark:to-neutral-900',
+  document: 'bg-gradient-to-br from-stone-50 to-stone-200 dark:from-neutral-800 dark:to-neutral-900',
+  archive: 'bg-gradient-to-br from-amber-50 to-amber-100 dark:from-neutral-800 dark:to-neutral-900',
+  folder: 'bg-gradient-to-br from-indigo-50 to-indigo-100 dark:from-neutral-800 dark:to-neutral-900',
+  other: 'bg-gradient-to-br from-stone-50 to-stone-200 dark:from-neutral-800 dark:to-neutral-900',
+}
+const glyphByKind: Record<string, string> = {
+  image: 'i-hugeicons-image-01 text-indigo-400/80 dark:text-indigo-300/70',
+  audio: 'i-hugeicons-music-note-01 text-purple-400/80 dark:text-purple-300/70',
+  document: 'i-hugeicons-file-01 text-stone-400 dark:text-neutral-400',
+  archive: 'i-hugeicons-folder-file-storage text-amber-500/80 dark:text-amber-300/70',
+  folder: 'i-hugeicons-folder-02 text-indigo-400 dark:text-indigo-300',
+  other: 'i-hugeicons-file-02 text-stone-400 dark:text-neutral-400',
+}
+
+const previewClass = `relative flex items-center justify-center h-32 w-full overflow-hidden ${backdropByKind[kind] || backdropByKind.other}`
+const glyphClass = `h-10 w-10 ${glyphByKind[kind] || glyphByKind.other}`
+const badgeClass = kind === 'video'
+  ? 'bg-black/55 text-white'
+  : 'bg-white/85 text-stone-600 dark:bg-black/40 dark:text-neutral-200'
+</script>
+
+<div class="flex flex-col">
+  <div :class="previewClass">
+    @if (hasImage)
+      <img src="{{ previewUrl }}" alt="{{ item.name }}" loading="lazy" class="object-cover h-full w-full" />
+    @elseif (kind === 'video')
+      <div class="flex items-center justify-center h-12 w-12 bg-white/90 rounded-full shadow-md">
+        <div class="ml-0.5 h-5 w-5 text-neutral-900 i-hugeicons-play"></div>
+      </div>
+    @else
+      <div :class="glyphClass"></div>
+    @endif
+
+    @if (item.type !== 'folder' && ext)
+      <span class="{{ badgeClass }} absolute left-2 top-2 px-1.5 py-0.5 font-semibold text-[10px] tracking-wide rounded">{{ ext }}</span>
+    @endif
+  </div>
+
+  <div class="px-3 py-2.5">
+    <p class="font-medium text-[13px] text-stone-800 truncate dark:text-white" title="{{ item.name }}">{{ item.name }}</p>
+    <p class="mt-0.5 capitalize text-[11px] text-stone-400 dark:text-neutral-500">{{ item.type === 'folder' ? 'Folder' : kind }}</p>
+  </div>
+</div>

package/resources/components/Dashboard/FileViewer/MediaInfoPanel.stx

@@ -0,0 +1,143 @@
+<!--
+  MediaInfoPanel — file preview + metadata
+
+  Ported from meemalabs/file-manager (MediaInformation/{FilePreviewSection,
+  MetaDataSection,SharingSection}.vue) to stx + Crosswind. Presentational: it
+  renders a large preview and a metadata list for one selected file. The parent
+  owns the slide-over shell (visibility, positioning, close button) and passes
+  the current item in.
+
+  Usage:
+    <MediaInfoPanel :item="selectedItem()" />
+-->
+
+<script>
+interface FileItem {
+  id: number
+  name: string
+  type: string
+  size?: number
+  path?: string
+  mime_type?: string
+  url?: string
+  thumbnail?: string
+  lastModified?: string
+  starred?: boolean
+  shared?: boolean
+}
+
+interface Props {
+  item: FileItem
+}
+
+const { item } = defineProps<Props>()
+
+const IMAGE_EXT = ['jpg', 'jpeg', 'png', 'gif', 'webp', 'avif', 'svg', 'bmp', 'heic']
+const VIDEO_EXT = ['mp4', 'mov', 'webm', 'mkv', 'avi', 'm4v']
+const AUDIO_EXT = ['mp3', 'wav', 'ogg', 'flac', 'm4a', 'aac']
+
+function kindOf(it: FileItem): string {
+  if (it.type === 'folder')
+    return 'folder'
+  const mime = (it.mime_type || '').toLowerCase()
+  if (mime.startsWith('image/'))
+    return 'image'
+  if (mime.startsWith('video/'))
+    return 'video'
+  if (mime.startsWith('audio/'))
+    return 'audio'
+  const ext = (it.type || '').toLowerCase()
+  if (IMAGE_EXT.includes(ext))
+    return 'image'
+  if (VIDEO_EXT.includes(ext))
+    return 'video'
+  if (AUDIO_EXT.includes(ext))
+    return 'audio'
+  return 'document'
+}
+
+const kind = kindOf(item)
+const previewUrl = item.thumbnail || item.url || ''
+const hasImage = kind === 'image' && !!previewUrl
+
+const glyphByKind: Record<string, string> = {
+  image: 'i-hugeicons-image-01 text-indigo-300',
+  video: 'i-hugeicons-video-01 text-neutral-300',
+  audio: 'i-hugeicons-music-note-01 text-purple-300',
+  folder: 'i-hugeicons-folder-02 text-indigo-300',
+  document: 'i-hugeicons-file-01 text-stone-300',
+}
+const glyphClass = `h-14 w-14 ${glyphByKind[kind] || glyphByKind.document}`
+const previewBg = kind === 'video'
+  ? 'bg-gradient-to-br from-neutral-800 to-neutral-950'
+  : 'bg-gradient-to-br from-stone-100 to-stone-200 dark:from-neutral-800 dark:to-neutral-900'
+
+function formatBytes(bytes: number): string {
+  if (!bytes)
+    return '0 Bytes'
+  const k = 1024
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB']
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${Number.parseFloat((bytes / k ** i).toFixed(2))} ${sizes[i]}`
+}
+
+function formatWhen(value?: string): string {
+  if (!value)
+    return '-'
+  const d = new Date(value)
+  return Number.isNaN(d.getTime())
+    ? '-'
+    : d.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' })
+}
+
+const sizeLabel = item.type === 'folder' ? '-' : formatBytes(item.size ?? 0)
+const modifiedLabel = formatWhen(item.lastModified)
+const locationLabel = item.path || '/'
+const kindLabel = item.type === 'folder' ? 'Folder' : `${kind}${item.type ? ` (.${item.type})` : ''}`
+</script>
+
+<div class="flex flex-col">
+  <div :class="previewBg" class="flex overflow-hidden items-center justify-center h-48 rounded-xl">
+    @if (hasImage)
+      <img src="{{ previewUrl }}" alt="{{ item.name }}" class="object-contain h-full w-full" />
+    @elseif (kind === 'video')
+      <div class="flex items-center justify-center h-14 w-14 bg-white/90 rounded-full shadow-md">
+        <div class="ml-0.5 h-6 w-6 text-neutral-900 i-hugeicons-play"></div>
+      </div>
+    @else
+      <div :class="glyphClass"></div>
+    @endif
+  </div>
+
+  <h4 class="mt-4 break-words font-semibold text-[15px] text-stone-800 dark:text-white">{{ item.name }}</h4>
+
+  <dl class="mt-4 space-y-3 text-[13px]">
+    <div class="flex gap-4 items-start justify-between">
+      <dt class="text-stone-400 dark:text-neutral-500">Type</dt>
+      <dd class="capitalize font-medium text-right text-stone-700 dark:text-neutral-200">{{ kindLabel }}</dd>
+    </div>
+    <div class="flex gap-4 items-start justify-between">
+      <dt class="text-stone-400 dark:text-neutral-500">Size</dt>
+      <dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ sizeLabel }}</dd>
+    </div>
+    <div class="flex gap-4 items-start justify-between">
+      <dt class="text-stone-400 dark:text-neutral-500">Location</dt>
+      <dd class="break-all font-medium text-right text-stone-700 dark:text-neutral-200">{{ locationLabel }}</dd>
+    </div>
+    <div class="flex gap-4 items-start justify-between">
+      <dt class="text-stone-400 dark:text-neutral-500">Modified</dt>
+      <dd class="font-medium text-right text-stone-700 dark:text-neutral-200">{{ modifiedLabel }}</dd>
+    </div>
+  </dl>
+
+  <div class="flex gap-2 mt-5">
+    <span :show="item.starred" class="inline-flex gap-1 items-center px-2 py-1 font-medium text-[11px] text-yellow-700 dark:text-yellow-300 bg-yellow-100 dark:bg-yellow-500/15 rounded-full">
+      <div class="h-3 w-3 i-hugeicons-star"></div>
+      Starred
+    </span>
+    <span :show="item.shared" class="inline-flex gap-1 items-center px-2 py-1 font-medium text-[11px] text-indigo-700 dark:text-indigo-300 bg-indigo-100 dark:bg-indigo-500/15 rounded-full">
+      <div class="h-3 w-3 i-hugeicons-share-01"></div>
+      Shared
+    </span>
+  </div>
+</div>

package/resources/components/Dashboard/SidebarModern.stx

@@ -97,6 +97,7 @@ const sections = [
     items: [
       { id: 'content-dashboard', label: 'Dashboard', icon: 'i-hugeicons-dashboard-speed-01', href: '/content/dashboard' },
       { id: 'files', label: 'Files', icon: 'i-hugeicons-apple-finder', href: '/content/files' },
+      { id: 'blog', label: 'Blog', icon: 'i-hugeicons-quill-write-02', href: '/content/blog' },
       { id: 'pages', label: 'Pages', icon: 'i-hugeicons-file-02', href: '/content/pages' },
       { id: 'posts', label: 'Posts', icon: 'i-hugeicons-message-edit-02', href: '/content/posts' },
       { id: 'categories', label: 'Categories', icon: 'i-hugeicons-tags', href: '/content/categories' },