@plutocms/pluto 0.0.1-alpha.1

package/.editorconfig

@@ -0,0 +1,12 @@
+# EditorConfig is awesome: https://EditorConfig.org
+
+# top-most EditorConfig file
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

package/.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
+
+version: 2
+updates:
+  - package-ecosystem: bun # See documentation for possible values
+    directory: / # Location of package manifests
+    schedule:
+      interval: weekly

package/.github/workflows/publish.yml

@@ -0,0 +1,32 @@
+name: Publish to NPM
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  publish:
+    name: Publish Package
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Setup Bun
+        uses: oven-sh/setup-bun@v1
+        with:
+          bun-version: 'latest'
+
+      - name: Install dependencies
+        run: bun install
+
+      - name: Run build
+        run: bun run build
+
+      - name: Configure NPM auth
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
+
+      - name: Publish to NPM
+        run: bun publish --access public

package/.prettierrc

@@ -0,0 +1,10 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "singleQuote": true,
+  "semi": false,
+  "trailingComma": "es5",
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

package/.vscode/extensions.json

@@ -0,0 +1,14 @@
+{
+  "recommendations": [
+    "Vue.volar",
+    "EditorConfig.EditorConfig",
+    "esbenp.prettier-vscode",
+    "dbaeumer.vscode-eslint",
+    "bradlc.vscode-tailwindcss",
+    "antfu.goto-alias",
+    "antfu.iconify",
+    "streetsidesoftware.code-spell-checker",
+    "usernamehw.errorlens"
+  ],
+  "unwantedRecommendations": ["octref.vetur"]
+}

package/.vscode/settings.json

@@ -0,0 +1,72 @@
+{
+  "css.lint.unknownAtRules": "ignore",
+  "less.lint.unknownAtRules": "ignore",
+  "scss.lint.unknownAtRules": "ignore",
+  "tailwindCSS.classAttributes": ["class", ".*-class(es)?", "theme", "ui"],
+  "tailwindCSS.experimental.classRegex": [
+    ["Theme \\=([^;]*);?", "'([^']*)'"],
+    ["Theme \\=([^;]*);?", "\"([^\"]*)\""],
+    ["Theme \\=([^;]*);?", "\\`([^\\`]*)\\`"],
+    ["Class \\=([^;]*);?", "'([^']*)'"],
+    ["Classes \\=([^;]*);?", "'([^']*)'"],
+    ["Class \\=([^;]*);?", "\"([^\"]*)\""],
+    ["Classes \\=([^;]*);?", "\"([^\"]*)\""],
+    ["Class \\=([^;]*);?", "\\`([^\\`]*)\\`"],
+    ["Classes \\=([^;]*);?", "\\`([^\\`]*)\\`"],
+    ["tw`(.*?)`", "tw\\('(.*?)'\\)", "tw\\(\\s*('(.*?)'|\"(.*?)\")\\s*\\)"],
+    ["ui:\\s*{([^)]*)\\s*}", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
+  ],
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+
+  "editor.codeActionsOnSave": {
+    "source.fixAll": "never",
+    "source.fixAll.eslint": "explicit"
+  },
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
+  "editor.gotoLocation.multipleDefinitions": "goto",
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+
+  "cSpell.words": [
+    "bunx",
+    "defu",
+    "nuxt",
+    "nuxtjs",
+    "oklch",
+    "pinia",
+    "plutocms",
+    "tailwindcss"
+  ],
+
+  "eslint.useFlatConfig": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact",
+    "vue",
+    "html",
+    "markdown",
+    "json",
+    "jsonc",
+    "yaml",
+    "toml",
+    "xml",
+    "gql",
+    "graphql",
+    "astro",
+    "svelte",
+    "css",
+    "less",
+    "scss",
+    "pcss",
+    "postcss",
+    "mjs"
+  ],
+
+  "vue.inlayHints.missingProps": true
+}

package/.vscode/vue.code-snippets

@@ -0,0 +1,16 @@
+{
+  "Vue Component": {
+    "prefix": ["vue", "tem", "template", "setup"],
+    "body": [
+      "<script setup lang=\"ts\">",
+      "$1",
+      "</script>",
+      "",
+      "<template>",
+      "  <div>$2</div>",
+      "</template>",
+      "",
+    ],
+    "description": "Vue Component (Script first)",
+  },
+}

package/README.md

@@ -0,0 +1,114 @@
+<img width="335" height="105" alt="image" src="https://github.com/user-attachments/assets/1cf11470-ea54-416e-a940-7221fffef1e2" />
+
+# Pluto
+
+> [!WARNING]
+> 🚧 Work In Progress: Pluto is experimental. Breaking changes are expected. Not production ready yet.
+
+Pluto is a modular, layer-driven Content Management System (CMS) built with Nuxt. A modern alternative to monolithic systems like WordPress. Extend functionality through Nuxt Layers: choose only what is needed (auth, storage, e-commerce, blog, database connectors, etc.).
+
+## Highlights
+
+- Nuxt + Nuxt Layers architecture
+- Headless-first: consume via API (_with typed routes!_) or built-in composables (like `useAuth` or `useProduct`)
+- Opt-in feature layers (Supabase, Blog, Shop, DB connectors, etc.)
+- Core primitives: Content Types, Taxonomies, Custom Fields, Media, Permissions
+- Deploy anywhere: Node, Edge, Serverless, Static (hybrid), Docker
+- Developer-focused: composables, typed schemas, minimal core
+- Dashboard is owned: fork as needed or just use it as is
+
+## Getting Started
+
+First, install `typescript` as a dev dependency if you haven't already. This is required for Nuxt Layers to function properly.
+
+```bash
+npm i -D typescript
+```
+
+Then, extend your Nuxt configuration to include the Pluto layer, setting the install option to true, so Pluto's dependencies are installed automatically.
+
+```ts
+// nuxt.config.ts
+export default defineNuxtConfig({
+  extends: [
+    ['github:plutocms/pluto', { install: true }],
+
+    // Then, add any additional layers you want to use here
+    ['github:plutocms/supabase', { install: true }],
+    ['github:plutocms/blog', { install: true }],
+    ['github:plutocms/shop', { install: true }],
+  ],
+})
+```
+
+## Core Concepts
+
+- Content Types: Define structured entities (e.g. Post, Product, Page)
+- Fields: Primitive & custom (string, rich text, media, relation, JSON, computed)
+- Taxonomies: Hierarchical or flat classification
+- Media: Pluggable storage (e.g. Supabase, S3, local)
+- Auth & Identity: Provided by optional layers (e.g. Supabase)
+- Policies: Role / capability mapping (planned)
+
+## Layer Examples (Planned / In Progress)
+
+| Layer                     | Purpose                                         |
+| ------------------------- | ----------------------------------------------- |
+| core                      | Base CMS engine + schema registry               |
+| supabase                  | Auth, file storage, row-level security hooks    |
+| blog                      | Post model, categories, tags, markdown pipeline |
+| shop                      | Product model, pricing, inventory abstraction   |
+| mysql / postgres / sqlite | Database connectors                             |
+| analytics                 | Basic event/log capture                         |
+| search                    | Index + query adapters (e.g. Meilisearch)       |
+
+> [!NOTE]
+> Actual availability depends on roadmap progress.
+
+For now, some layers are being developed (`/layers` directory) in this same repository, but will eventually be extracted into their own packages.
+
+> [!NOTE]
+> Optional layers may require environment variables; see ./env.example when added.
+
+## Roadmap (Subject to Change)
+
+Check [the roadmap here](https://github.com/ojvribeiro/pluto/issues/47).
+
+## Contributing
+
+- Open issues for design discussion before large PRs
+- Keep layers isolated and opt-in
+- Prefer typed contracts and explicit interfaces
+- Add tests where possible (testing stack TBD)
+
+## Philosophy
+
+- Minimal core, everything is a layer
+- Transparent, hackable dashboard (no locked UI bundle)
+- Declarative schemas
+- Runtime flexibility: choose infra, not dictated by core
+
+## Why Not Just WordPress?
+
+- Modern SSR + SPA hydration via Nuxt
+- TypeScript-first developer experience
+- Layer-based opt-in features instead of plugin global mutations
+- Deployment portability (Edge / Serverless friendly)
+- Headless usage is primary, not an afterthought
+- If you're a Vue developer, you'll feel right at home.
+
+## Security
+
+Do not deploy to production yet. No security audit performed. Auth / ACL model incomplete.
+
+## License
+
+TBD (likely MIT). Not final.
+
+## Status
+
+Experimental. Expect refactors.
+
+## Naming Note
+
+"Pluto" is a working name; subject to rename if conflicts arise.

package/app/app.config.ts

@@ -0,0 +1,41 @@
+export default defineAppConfig({
+  ui: {
+    button: {
+      compoundVariants: [
+        {
+          size: 'xl',
+          class: 'px-6 py-2',
+          square: false,
+        },
+      ],
+
+      defaultVariants: {
+        color: 'primary',
+        variant: 'solid',
+        size: 'xl',
+      },
+    },
+
+    formField: {
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+
+    input: {
+      slots: {
+        root: 'w-full',
+      },
+
+      compoundVariants: [
+        {
+          class: 'w-full',
+        },
+      ],
+
+      defaultVariants: {
+        size: 'xl',
+      },
+    },
+  },
+})

package/app/app.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+const websiteName = 'Pluto Admin'
+
+useHead({
+  titleTemplate: (title) => (title ? `${title} - ${websiteName}` : websiteName),
+})
+</script>
+
+<template>
+  <PlutoRoot>
+    <NuxtPage />
+  </PlutoRoot>
+</template>

package/app/assets/css/tailwind.css

@@ -0,0 +1,12 @@
+@import 'tailwindcss';
+@import '@nuxt/ui';
+
+@source '../..';
+@source '../../../../../app/**';
+
+@theme {
+  --color-admin-content: var(--color-slate-800);
+  --color-admin-sidebar: var(--color-slate-900);
+
+  --font-outfit: 'Outfit', sans-serif;
+}

package/app/components/AdminView.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts"></script>
+
+<template>
+  <UContainer class="flex max-w-300 flex-col gap-y-8 py-10">
+    <slot />
+  </UContainer>
+</template>

package/app/components/ColorModeButton.vue

@@ -0,0 +1,28 @@
+<script setup>
+const colorMode = useColorMode()
+
+const isDark = computed({
+  get() {
+    return colorMode.value === 'dark'
+  },
+  set() {
+    colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
+  },
+})
+</script>
+
+<template>
+  <ClientOnly v-if="!colorMode?.forced">
+    <UButton
+      :icon="isDark ? 'i-lucide-moon' : 'i-lucide-sun'"
+      color="neutral"
+      variant="solid"
+      size="sm"
+      @click="isDark = !isDark"
+    />
+
+    <template #fallback>
+      <div class="size-8" />
+    </template>
+  </ClientOnly>
+</template>

package/app/components/Container.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ClassNameValue } from 'tailwind-merge'
+import { twMerge } from 'tailwind-merge'
+
+const props = defineProps<{
+  class?: ClassNameValue
+}>()
+
+const resolvedClasses = computed(() => {
+  const defaultClasses = 'mx-auto max-w-full transition-all px-4 sm:px-6 w-350'
+
+  return twMerge([defaultClasses, props.class])
+})
+</script>
+
+<template>
+  <div :class="resolvedClasses">
+    <slot />
+  </div>
+</template>

package/app/components/Pluto/Navbar/PlutoNavbarAdmin.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts"></script>
+
+<template>
+  <nav
+    class="light:bg-white light:border-black/10 font-outfit sticky top-0 z-50 h-10 shrink-0 border-b dark:border-white/5 dark:bg-black dark:text-white"
+  >
+    <slot />
+  </nav>
+</template>

package/app/components/Pluto/Navbar/PlutoNavbarAdminActions.vue

@@ -0,0 +1,7 @@
+<script setup lang="ts">
+const { actions } = useNavbarAdminActions()
+</script>
+
+<template>
+  <component :is="action" v-for="(action, i) in actions" :key="i" />
+</template>

package/app/components/Pluto/PlutoRoot.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="grow">
+    <UApp>
+      <NuxtRouteAnnouncer />
+      <NuxtLoadingIndicator />
+
+      <NuxtLayout>
+        <slot />
+      </NuxtLayout>
+    </UApp>
+  </div>
+</template>
+
+<style>
+html,
+body {
+  height: 100%;
+}
+
+#__nuxt {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+</style>

package/app/components/ScrollArea.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { ClassNameValue } from 'tailwind-merge'
+import { twMerge } from 'tailwind-merge'
+
+interface Props {
+  class?: ClassNameValue
+  trackClass?: ClassNameValue
+  thumbClass?: ClassNameValue
+  hideDelay?: number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  hideDelay: 0,
+  class: '',
+  thumbClass: '',
+  trackClass: '',
+})
+
+const resolvedClasses = computed(() => {
+  const defaultClasses = `
+      h-full
+      transition-opacity
+      duration-300
+    `
+
+  return twMerge([defaultClasses, props.class])
+})
+
+const resolvedTrackClasses = computed(() => {
+  const defaultClasses = `
+      relative
+      w-2
+      rounded-full
+      bg-transparent
+      transition-colors duration-300
+      hover:bg-black/10
+    `
+
+  return twMerge([defaultClasses, props.trackClass])
+})
+
+const resolvedThumbClasses = computed(() => {
+  const defaultClasses = `
+      rounded-full
+      bg-black/40
+      hover:bg-black/40
+      active:bg-black/60
+    `
+
+  return twMerge([defaultClasses, props.thumbClass])
+})
+</script>
+
+<template>
+  <RekaScrollAreaRoot
+    :scroll-hide-delay="props.hideDelay"
+    class="h-full shrink-0 overflow-hidden transition-opacity duration-300"
+  >
+    <RekaScrollAreaViewport :class="resolvedClasses">
+      <slot />
+    </RekaScrollAreaViewport>
+
+    <Transition name="fade">
+      <RekaScrollAreaScrollbar
+        :class="resolvedTrackClasses"
+        orientation="vertical"
+      >
+        <RekaScrollAreaThumb :class="resolvedThumbClasses" />
+      </RekaScrollAreaScrollbar>
+    </Transition>
+
+    <RekaScrollAreaCorner />
+  </RekaScrollAreaRoot>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>