@letterncms/admin 0.0.0-stage → 0.1.1

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Falko Joseph
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,6 +1,26 @@
 {
-  "name": "@letterncms/admin",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@letterncms/admin",
+    "description": "Build a plugin's admin module: the Vite setup and the admin's Tailwind names.",
+    "exports": {
+        "./theme.css": "./src/styles/theme.css",
+        "./vite": "./vite.plugin.mjs"
+    },
+    "dependencies": {
+        "@tailwindcss/vite": "4.3.3",
+        "@vitejs/plugin-react": "6.1.2",
+        "tailwindcss": "4.3.3"
+    },
+    "peerDependencies": {
+        "vite": "8.3.5"
+    },
+    "version": "0.1.1",
+    "type": "module",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/letterncms/cms.git"
+    },
+    "publishConfig": {
+        "access": "public"
+    }
+}

package/src/styles/theme.css

@@ -0,0 +1,70 @@
+/* The admin's design tokens as Tailwind names, shared with plugin admin modules (import "@letterncms/admin/theme.css").
+   Their values live in tokens.css, defined once by the admin theme, so a module never overrides them. */
+
+@custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
+@theme inline {
+  --font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
+
+  --text-2xs: 11px;
+  --text-2xs--line-height: 16px;
+  --text-xs: 12px;
+  --text-xs--line-height: 16px;
+  --text-sm: 13px;
+  --text-sm--line-height: 20px;
+  --text-base: 14px;
+  --text-base--line-height: 22px;
+  --text-lg: 16px;
+  --text-lg--line-height: 24px;
+  --text-xl: 20px;
+  --text-xl--line-height: 28px;
+  --text-2xl: 24px;
+  --text-2xl--line-height: 32px;
+  --text-3xl: 32px;
+  --text-3xl--line-height: 40px;
+
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 10px;
+  --radius-xl: 14px;
+
+  --color-bg: var(--cms-bg);
+  --color-surface: var(--cms-surface);
+  --color-sunken: var(--cms-sunken);
+  --color-hover: var(--cms-hover);
+  --color-active: var(--cms-active);
+  --color-border: var(--cms-border);
+  --color-border-strong: var(--cms-border-strong);
+  --color-border-float: var(--cms-border-float);
+  --color-border-modal: var(--cms-border-modal);
+  --color-ink: var(--cms-ink);
+  --color-ink-contrast: var(--cms-ink-contrast);
+  --color-text: var(--cms-text);
+  --color-muted: var(--cms-muted);
+  --color-faint: var(--cms-faint);
+  --color-signal: var(--cms-signal);
+  --color-signal-ink: var(--cms-signal-ink);
+  --color-focus: var(--cms-focus);
+  --color-success: var(--cms-success);
+  --color-warning: var(--cms-warning);
+  --color-danger: var(--cms-danger);
+  --color-overlay: var(--cms-overlay);
+
+  --shadow-pop: var(--cms-shadow-pop);
+  --shadow-dialog: var(--cms-shadow-dialog);
+
+  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
+  --ease-spring: cubic-bezier(0.32, 1.25, 0.5, 1);
+}
+
+@utility cms-caps {
+  font-size: 11px;
+  line-height: 16px;
+  font-weight: 550;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--cms-muted);
+}
+

package/vite.plugin.mjs

@@ -0,0 +1,117 @@
+// Shared Vite setup for plugin admin modules.
+//
+//   // plugins/acme/vite.config.mjs
+//   import { cmsAdminModule } from '@letterncms/admin/vite'
+//   export default cmsAdminModule({ entry: 'admin/src/index.tsx' })
+//
+// Modules other plugins expose (e.g. "@letterncms/blocks") are listed in `externals`.
+//
+// Module CSS imports utilities into the "plugins" layer:
+//   @import "tailwindcss/theme" layer(theme);
+//   @import "tailwindcss/utilities" layer(plugins);
+//   @import "@letterncms/admin/theme.css";
+//
+// React, the SDK, the UI kit and dnd-kit are NOT bundled: the admin theme provides
+// them through the import map, so every module shares one copy of each.
+import { rmSync } from 'node:fs'
+import { resolve } from 'node:path'
+import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
+
+export const SHARED = ['react', 'react/jsx-runtime', 'react-dom', 'react-dom/client', '@tanstack/react-query', '@letterncms/sdk', '@letterncms/ui', '@dnd-kit/core', '@dnd-kit/sortable', '@dnd-kit/utilities']
+
+/**
+ * Every admin stylesheet — the theme's and each module's — is built on its own, so the
+ * cascade cannot rely on Tailwind's ordering inside one file: a module's `lg:grid-cols-7`
+ * would lose to the theme's own `.grid-cols-2`. This moves every variant utilities
+ * (responsive, hover, dark, group-…) of a file into the shared `variants` layer, which the
+ * theme declares last, so variants beat plain utilities whichever file they come from.
+ */
+export function layerVariants() {
+  return {
+    name: 'cms-layer-variants',
+    enforce: 'post',
+    generateBundle(_, bundle) {
+      for (const asset of Object.values(bundle)) {
+        if (asset.type === 'asset' && asset.fileName.endsWith('.css')) asset.source = splitVariants(String(asset.source))
+      }
+    },
+  }
+}
+
+export function splitVariants(css) {
+  return statements(css)
+    .map((statement) => {
+      const match = /^\s*@layer\s+(utilities|plugins)\s*\{/.exec(statement)
+      if (!match) return statement
+      const inner = statements(statement.slice(match[0].length, statement.lastIndexOf('}')))
+      // A variant is a rule whose class has a prefix (`md\:`, `hover\:`…) or a breakpoint/container query;
+      // @supports fallbacks of plain utilities stay with them.
+      const variant = (rule) => {
+        const text = rule.trimStart()
+        if (/^@(media|container)\b/.test(text)) return true
+        const inner = text.startsWith('@') ? text.slice(text.indexOf('{') + 1) : text
+        return inner.slice(0, inner.indexOf('{')).includes('\\:')
+      }
+      const base = inner.filter((rule) => !variant(rule)).join('')
+      const variants = inner.filter(variant).join('')
+      return `@layer ${match[1]}{${base}}` + (variants ? `@layer variants{${variants}}` : '')
+    })
+    .join('')
+}
+
+/** Top-level statements of a stylesheet (rules and at-rules), quotes and escapes respected. */
+function statements(css) {
+  const out = []
+  let depth = 0
+  let start = 0
+  let quote = null
+  for (let i = 0; i < css.length; i++) {
+    const c = css[i]
+    if (c === '\\') {
+      i++
+    } else if (quote) {
+      if (c === quote) quote = null
+    } else if (c === '"' || c === "'") {
+      quote = c
+    } else if (c === '{') {
+      depth++
+    } else if (c === '}') {
+      if (--depth === 0) {
+        out.push(css.slice(start, i + 1))
+        start = i + 1
+      }
+    } else if (c === ';' && depth === 0) {
+      out.push(css.slice(start, i + 1))
+      start = i + 1
+    }
+  }
+  if (css.slice(start).trim()) out.push(css.slice(start))
+  return out
+}
+
+// emptyOutDir stays off because a package can build more into dist/ (blocks has dist/runtime),
+// so last build's chunks are cleared here. Left behind, they would ship in the release.
+const cleanChunks = (outDir) => ({
+  name: 'cms-clean-chunks',
+  apply: 'build',
+  buildStart: () => rmSync(resolve(outDir, 'chunks'), { recursive: true, force: true }),
+})
+
+export function cmsAdminModule({ entry, outDir = 'dist', externals = [] }) {
+  return {
+    plugins: [react(), tailwindcss(), layerVariants(), cleanChunks(outDir)],
+    publicDir: false,
+    build: {
+      outDir,
+      emptyOutDir: false,
+      target: 'es2023',
+      cssCodeSplit: false,
+      lib: { entry, formats: ['es'], fileName: () => 'admin.js', cssFileName: 'admin' },
+      rollupOptions: {
+        external: (id) => SHARED.includes(id) || externals.includes(id),
+        output: { chunkFileNames: 'chunks/[name]-[hash].js', assetFileNames: '[name][extname]' },
+      },
+    },
+  }
+}

package/README.md

@@ -1,3 +0,0 @@
-# Temporary Holding Version
-
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.