@palettelab/cli 0.3.53 → 0.3.54

package/README.md

@@ -502,11 +502,14 @@ work without Docker or platform source. The terminal streams local frontend
 requests, frontend rebuilds, and backend process output while `pltt dev` is
 running.
 
-The simulator also provides the same language fields that Palette OS provides:
-`language`, `fallbackLanguage`, `supportedLanguages`, and `setLanguage()`.
-Generated frontend templates include app-owned `frontend/src/translations.ts`
-files wired through `usePluginTranslations()`, so apps can switch when the OS
-language changes without storing copy in the platform.
+The simulator also provides the same OS context fields that Palette OS provides:
+`language`, `fallbackLanguage`, `supportedLanguages`, `setLanguage()`,
+`colorMode`, and `setColorMode()`. Generated frontend templates include
+app-owned `frontend/src/translations.ts` files wired through
+`usePluginTranslations()`, so apps can switch when the OS language changes
+without storing copy in the platform. Apps can read `usePlatform().colorMode`
+or listen for the `palette:theme-change` browser event to react when Palette OS
+changes between light and dark mode.
 
 For Python apps with database tables, `ctx.db` is an async SQLAlchemy session in
 local dev. The simulator imports `backend/api/models.py` when present and creates

package/lib/commands/dev.js

@@ -8,7 +8,7 @@ const { watchFrontend } = require("../bundler")
 const { parseFlags, resolveEnvironment } = require("../environments")
 const { resolveDevPorts } = require("../ports")
 const { startSimulator } = require("../dev-simulator")
-const { loadLocalEnv } = require("../secrets")
+const { loadLocalEnvDetails } = require("../secrets")
 const buildCommand = require("./build")
 const publish = require("./publish")
 const logs = require("./logs")
@@ -98,11 +98,39 @@ function lintMigrationsForDev(cwd, manifest) {
   process.exit(1)
 }
 
+function formatEnvValue(value) {
+  if (value === undefined || value === null) return ""
+  const str = String(value)
+  if (!str) return ""
+  if (/[\s#"'\\]/.test(str)) return JSON.stringify(str)
+  return str
+}
+
+function writePlatformEnvFile(cwd, localEnv) {
+  const dir = path.join(cwd, ".palette")
+  fs.mkdirSync(dir, { recursive: true })
+  const envPath = path.join(dir, "platform.env")
+  const values = {}
+  for (const [key, value] of Object.entries(localEnv?.values || {})) {
+    values[key] = process.env[key] !== undefined ? process.env[key] : value
+  }
+  const lines = [
+    "# Generated by pltt dev --platform from local env files.",
+    "# Do not commit this file.",
+    "",
+  ]
+  for (const [key, value] of Object.entries(values).sort(([a], [b]) => a.localeCompare(b))) {
+    lines.push(`${key}=${formatEnvValue(value)}`)
+  }
+  fs.writeFileSync(envPath, `${lines.join("\n")}\n`)
+  return envPath
+}
+
 async function run(args, { cwd }) {
   const { flags, rest } = parseFlags(args)
   const cloud = rest.includes("--cloud") || rest.includes("--sandbox")
   const platform = rest.includes("--platform")
-  loadLocalEnv(cwd)
+  const localEnv = loadLocalEnvDetails(cwd, { environment: flags.env })
   if (cloud) {
     const json = args.includes("--json")
     const publishArgs = ["--publish-type", "preview"]
@@ -199,6 +227,9 @@ async function run(args, { cwd }) {
   }
   console.log(`[pltt] frontend: http://localhost:${frontendPort}/apps/${pluginId}`)
   console.log(`[pltt] backend:  http://localhost:${backendPort}/api/v1/plugins/${pluginId}`)
+  if (localEnv.files.length) {
+    console.log(`[pltt] env files: ${localEnv.files.join(", ")}`)
+  }
 
   // Pre-pull so we can give a useful error if the image isn't reachable
   // (common cause: maintainer hasn't pushed it yet, or `docker login ghcr.io`
@@ -210,11 +241,13 @@ async function run(args, { cwd }) {
     process.exit(1)
   }
 
+  const platformEnvFile = writePlatformEnvFile(cwd, localEnv)
   const env = {
     ...process.env,
     PALETTE_DEV_IMAGE: DEFAULT_IMAGE,
     PALETTE_ACTIVE_PLUGIN: pluginId,
     PALETTE_PLUGIN_DIR: cwd,
+    PALETTE_PLUGIN_ENV_FILE: platformEnvFile,
     PALETTE_FRONTEND_PORT: frontendPort,
     PALETTE_BACKEND_PORT: backendPort,
   }

package/lib/commands/publish.js

@@ -228,6 +228,14 @@ function scopesOf(spec) {
   return ["dev"]
 }
 
+function withPluginScope(spec) {
+  const scopes = Array.from(new Set([...scopesOf(spec), "plugin"]))
+  return {
+    ...spec,
+    scope: scopes.length === 1 ? scopes[0] : scopes,
+  }
+}
+
 function cloneManifest(manifest) {
   return JSON.parse(JSON.stringify(manifest))
 }
@@ -235,12 +243,6 @@ function cloneManifest(manifest) {
 function collectPluginSecrets(cwd, manifest, env, flags, log, localEnv) {
   const declared = declaredSecrets(manifest)
   const pluginSecrets = Object.entries(declared).filter(([, spec]) => spec.scope.includes("plugin"))
-  const devRequired = Object.entries(declared).filter(([, spec]) => spec.scope.includes("dev") && spec.required)
-  if (devRequired.length) {
-    log(
-      `[pltt]   dev-only secrets are not uploaded: ${devRequired.map(([name]) => name).join(", ")}`,
-    )
-  }
 
   let fileValues = {}
   if (flags.secretsFile) {
@@ -281,7 +283,14 @@ function collectPluginSecrets(cwd, manifest, env, flags, log, localEnv) {
     }
     const explicitSpec = effectiveManifest.secrets[name]
     if (explicitSpec) {
-      if (scopesOf(explicitSpec).includes("plugin")) values[name] = fileValues[name] ?? process.env[name] ?? localValues[name]
+      const value = fileValues[name] ?? process.env[name] ?? localValues[name]
+      if (scopesOf(explicitSpec).includes("plugin")) {
+        values[name] = value
+      } else if (canAutoUploadEnvKey(name)) {
+        effectiveManifest.secrets[name] = withPluginScope(explicitSpec)
+        values[name] = value
+        autoUploaded.push(name)
+      }
       continue
     }
     if (isReservedAutoEnvKey(name)) {

package/lib/dev-simulator.js

@@ -576,6 +576,21 @@ function normalizePaletteLanguage(language, fallback = "en") {
   return value ? value.split("-")[0] : fallback
 }
 
+function normalizePaletteColorMode(mode, fallback = "light") {
+  return mode === "dark" ? "dark" : fallback
+}
+
+function detectPaletteColorMode() {
+  return window.matchMedia?.("(prefers-color-scheme: dark)")?.matches ? "dark" : "light"
+}
+
+function applyPaletteColorMode(mode) {
+  const normalized = normalizePaletteColorMode(mode)
+  document.documentElement.classList.toggle("dark", normalized === "dark")
+  document.documentElement.style.colorScheme = normalized
+  window.dispatchEvent(new CustomEvent("palette:theme-change", { detail: { colorMode: normalized } }))
+}
+
 function Toasts() {
   const [items, setItems] = React.useState([])
   React.useEffect(() => {
@@ -594,6 +609,7 @@ function Toasts() {
 
 function Shell() {
   const [language, updateLanguage] = React.useState(() => normalizePaletteLanguage(navigator.language))
+  const [colorMode, updateColorMode] = React.useState(() => detectPaletteColorMode())
   const platform = React.useMemo(() => ({
     ...basePlatform,
     language,
@@ -605,18 +621,34 @@ function Shell() {
       document.documentElement.lang = normalized
       window.dispatchEvent(new CustomEvent("palette:language-change", { detail: { language: normalized } }))
     },
-  }), [language])
+    colorMode,
+    setColorMode: (nextMode) => {
+      updateColorMode(normalizePaletteColorMode(nextMode))
+    },
+  }), [language, colorMode])
 
   React.useEffect(() => {
     document.documentElement.lang = language
   }, [language])
 
+  React.useEffect(() => {
+    applyPaletteColorMode(colorMode)
+  }, [colorMode])
+
   React.useEffect(() => {
     const onLanguageChange = () => updateLanguage(normalizePaletteLanguage(navigator.language))
     window.addEventListener("languagechange", onLanguageChange)
     return () => window.removeEventListener("languagechange", onLanguageChange)
   }, [])
 
+  React.useEffect(() => {
+    const media = window.matchMedia?.("(prefers-color-scheme: dark)")
+    if (!media) return
+    const onColorModeChange = () => updateColorMode(detectPaletteColorMode())
+    media.addEventListener?.("change", onColorModeChange)
+    return () => media.removeEventListener?.("change", onColorModeChange)
+  }, [])
+
   return React.createElement(PluginProvider, { value: platform },
     React.createElement("main", { className: "palette-local-shell" },
       React.createElement(Plugin, { platform }),

package/lib/manifest.js

@@ -2,7 +2,7 @@
 
 const fs = require("fs")
 const path = require("path")
-const { SECRET_SCOPES } = require("./secrets")
+const { ENV_KEY_PATTERN, SECRET_SCOPES } = require("./secrets")
 
 const MANIFEST_FILE = "palette-plugin.json"
 const SUPPORTED_MANIFEST_VERSIONS = ["1"]
@@ -127,8 +127,8 @@ function validateSecrets(value, errors) {
   const allowed = new Set(["scope", "required", "label", "help", "validate"])
   for (const [name, spec] of Object.entries(value)) {
     const label = `secrets.${name}`
-    if (!/^[A-Z_][A-Z0-9_]*$/.test(name)) {
-      errors.push(`${label} must be an uppercase environment-style name`)
+    if (!ENV_KEY_PATTERN.test(name)) {
+      errors.push(`${label} must be a valid environment variable name`)
     }
     if (!isObject(spec)) {
       errors.push(`${label} must be an object`)

package/lib/secrets.js

@@ -6,6 +6,7 @@ const path = require("path")
 const LOCAL_ENV_PATH = path.join(".palette", ".env.local")
 const EXAMPLE_ENV_PATH = path.join(".palette", ".env.example")
 const SECRET_SCOPES = new Set(["dev", "plugin", "install", "platform"])
+const ENV_KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/
 const RESERVED_AUTO_ENV_KEYS = new Set([
   "CI",
   "HOME",
@@ -162,7 +163,7 @@ function declaredSecrets(manifest) {
   if (!raw || typeof raw !== "object" || Array.isArray(raw)) return {}
   const out = {}
   for (const [name, meta] of Object.entries(raw)) {
-    if (!/^[A-Z_][A-Z0-9_]*$/.test(name)) continue
+    if (!ENV_KEY_PATTERN.test(name)) continue
     const item = meta && typeof meta === "object" && !Array.isArray(meta) ? meta : {}
     out[name] = {
       ...item,
@@ -210,7 +211,7 @@ function isReservedAutoEnvKey(key) {
 }
 
 function canAutoUploadEnvKey(key) {
-  return /^[A-Z_][A-Z0-9_]*$/.test(key) && !isPublicEnvKey(key) && !isReservedAutoEnvKey(key)
+  return ENV_KEY_PATTERN.test(key) && !isPublicEnvKey(key) && !isReservedAutoEnvKey(key)
 }
 
 function redactValue(value) {
@@ -222,6 +223,7 @@ function redactValue(value) {
 
 module.exports = {
   EXAMPLE_ENV_PATH,
+  ENV_KEY_PATTERN,
   LOCAL_ENV_PATH,
   SECRET_SCOPES,
   declaredSecrets,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@palettelab/cli",
-  "version": "0.3.53",
+  "version": "0.3.54",
   "description": "Developer CLI for building Palette platform plugins — no platform source access required.",
   "bin": {
     "pltt": "bin/pltt.js"

package/platform-dev/docker-compose.yml

@@ -9,6 +9,8 @@
 services:
   platform:
     image: ${PALETTE_DEV_IMAGE:-ghcr.io/palette-lab/platform-dev:latest}
+    env_file:
+      - ${PALETTE_PLUGIN_ENV_FILE:-/dev/null}
     ports:
       - "${PALETTE_FRONTEND_PORT:-7321}:3000"
       - "${PALETTE_BACKEND_PORT:-8732}:8000"
@@ -25,8 +27,8 @@ services:
       STORAGE_BACKEND: "local"
       LOCAL_STORAGE_DIR: "/srv/storage"
       # Disable optional features that need real credentials
-      RAG_ENABLED: "false"
-      OPENAI_API_KEY: ""
+      RAG_ENABLED: "${RAG_ENABLED:-false}"
+      OPENAI_API_KEY: "${OPENAI_API_KEY:-}"
     volumes:
       - "${PALETTE_PLUGIN_DIR}:/plugins/${PALETTE_ACTIVE_PLUGIN}"
     depends_on:

package/template-fallback/package.json

@@ -4,7 +4,7 @@
   "private": true,
   "description": "A Palette platform plugin",
   "dependencies": {
-    "@palettelab/sdk": "^0.1.23"
+    "@palettelab/sdk": "^0.1.24"
   },
   "devDependencies": {
     "typescript": "^5.0.0",

package/template-fallback/templates/consumer-app/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@palettelab/sdk": "^0.1.23",
+    "@palettelab/sdk": "^0.1.24",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   }

package/template-fallback/templates/dashboard/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@palettelab/sdk": "^0.1.23",
+    "@palettelab/sdk": "^0.1.24",
     "react": "^19.0.0"
   }
 }

package/template-fallback/templates/database/package.json

@@ -2,5 +2,5 @@
   "name": "my-db-plugin",
   "version": "1.0.0",
   "private": true,
-  "dependencies": { "@palettelab/sdk": "^0.1.23", "react": "^19.0.0" }
+  "dependencies": { "@palettelab/sdk": "^0.1.24", "react": "^19.0.0" }
 }

package/template-fallback/templates/external-service/package.json

@@ -2,5 +2,5 @@
   "name": "my-external-svc",
   "version": "1.0.0",
   "private": true,
-  "dependencies": { "@palettelab/sdk": "^0.1.23", "react": "^19.0.0" }
+  "dependencies": { "@palettelab/sdk": "^0.1.24", "react": "^19.0.0" }
 }

package/template-fallback/templates/frontend-only/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@palettelab/sdk": "^0.1.23",
+    "@palettelab/sdk": "^0.1.24",
     "react": "^19.0.0"
   }
 }

package/template-fallback/templates/next/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@palettelab/sdk": "^0.1.23",
+    "@palettelab/sdk": "^0.1.24",
     "react": "^19.0.0"
   },
   "devDependencies": {

package/template-fallback/templates/palette-app/package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "private": true,
   "dependencies": {
-    "@palettelab/sdk": "^0.1.23",
+    "@palettelab/sdk": "^0.1.24",
     "react": "^19.0.0"
   },
   "devDependencies": {

package/template-fallback/templates/provider-app/package.json

@@ -2,7 +2,7 @@
   "private": true,
   "type": "module",
   "dependencies": {
-    "@palettelab/sdk": "^0.1.23",
+    "@palettelab/sdk": "^0.1.24",
     "react": "^19.0.0"
   }
 }