@hazem3500/palette 0.9.107 → 0.9.109

package/cli/agent.mjs

@@ -14,7 +14,7 @@ import { homedir } from "node:os";
 import { createHash, randomBytes } from "node:crypto";
 import { createServer } from "node:http";
 import { spawn } from "node:child_process";
-import { branchName } from "./config.mjs";
+import { branchName, setting } from "./config.mjs";
 import { agentWorkflow, agentPrompt } from "../dist/agent-prompt.js";
 import { designEditFromComment, formatDesignEdit } from "./design-edit.mjs";
 
@@ -26,7 +26,7 @@ const actions = {
   untag: "Remove a group tag: untag THREAD_ID TAG",
   get: "Read one complete thread: get THREAD_ID; --snapshots also saves its element snapshots as files",
   prompt: "Export open feedback as Markdown; --page /path, --json, --snapshots to save element snapshots and list their files",
-  snapshots: "Save a thread's element snapshots as files: snapshots THREAD_ID [--out DIR] (default .komo/snapshots)",
+  snapshots: "Save a thread's element snapshots as files: snapshots THREAD_ID [--out DIR] (default .palette/snapshots, or .komo/snapshots in an older project)",
   create: "Create a thread: --page /path --anchor-file FILE --body TEXT",
   reply: "Reply to a thread: reply THREAD_ID --body TEXT",
   resolve: "Resolve a thread: resolve THREAD_ID",
@@ -70,10 +70,10 @@ ${Object.entries(actions)
   .map(([name, description]) => `  ${name}: ${description}`)
   .join("\n")}
 
-Settings: .komo/project.json (searched upward), or --project KEY.
+Settings: .palette/project.json, or .komo/project.json from before the rename (searched upward), or --project KEY.
 Overrides: --endpoint URL --origin SITE_URL --repo OWNER/REPO --branch NAME
 Bodies: --body TEXT, --body-file FILE, or --body-file - for stdin.
-Credentials: KOMO_TOKEN, then a saved access token, then a Google login session. Never commit tokens.
+Credentials: PALETTE_TOKEN (or the older KOMO_TOKEN), then a saved access token, then a Google login session. Never commit tokens.
 Create access tokens at /account on your Palette server; pass one with: printf %s "$TOKEN" | palette login --token
 Results are JSON except prompt (Markdown unless --json). Errors are JSON on stderr.
 Design mode messages also carry designEdit: a parsed Palette DesignEdit v1 record.
@@ -143,39 +143,43 @@ function safeUrl(value, originOnly = false) {
 async function configuration(flags, cwd, env) {
   let directory = cwd,
     settings = {},
-    root = cwd;
-  while (true) {
-    try {
-      settings = JSON.parse(
-        await readFile(join(directory, ".komo/project.json"), "utf8")
-      );
-      root = directory;
-      break;
-    } catch (error) {
-      if (error.code !== "ENOENT") throw error;
-    }
+    root = cwd,
+    settingsDir = ".palette";
+  search: while (true) {
+    // .komo/ is where a project set up before the rename keeps its settings.
+    for (const dir of [".palette", ".komo"])
+      try {
+        settings = JSON.parse(
+          await readFile(join(directory, dir, "project.json"), "utf8")
+        );
+        root = directory;
+        settingsDir = dir;
+        break search;
+      } catch (error) {
+        if (error.code !== "ENOENT") throw error;
+      }
     if (dirname(directory) === directory) break;
     directory = dirname(directory);
   }
-  const project = flags.project || env.KOMO_PROJECT || settings.project;
+  const project = flags.project || setting(env, "PROJECT") || settings.project;
   if (!project)
     throw Error("Run palette init in this repository, or pass --project KEY.");
   const endpoint = safeUrl(
     flags.endpoint ||
-      env.KOMO_ENDPOINT ||
+      setting(env, "ENDPOINT") ||
       settings.endpoint ||
       "https://komo.offbr.co"
   );
   const origin = safeUrl(
     flags.origin ||
-      env.KOMO_ORIGIN ||
+      setting(env, "ORIGIN") ||
       settings.origin ||
       "http://localhost:3000",
     true
   );
   const branch =
     flags.branch ||
-    env.KOMO_BRANCH ||
+    setting(env, "BRANCH") ||
     (settings.scope === "branch" ? branchName(env, directory) : "shared");
   if (!branch) throw Error("Cannot detect branch. Pass --branch NAME.");
   return {
@@ -183,42 +187,55 @@ async function configuration(flags, cwd, env) {
     endpoint,
     origin,
     branch,
-    repo: flags.repo || env.KOMO_REPO || settings.repo || project,
+    repo: flags.repo || setting(env, "REPO") || settings.repo || project,
     root,
+    settingsDir,
   };
 }
-function credentialPath(config, env) {
+// Credentials are saved under ~/.config/palette (or PALETTE_CONFIG_HOME). Ones
+// saved before the rename, under ~/.config/komo, are still read; logout removes both.
+function credentialFiles(env, name) {
+  const home = setting(env, "CONFIG_HOME");
+  return (home ? [home] : [join(homedir(), ".config", "palette"), join(homedir(), ".config", "komo")])
+    .map((directory) => join(directory, name));
+}
+function credentialPaths(config, env) {
   const key = createHash("sha256")
     .update(`${config.endpoint}\n${config.project}`)
     .digest("hex");
-  return join(
-    env.KOMO_CONFIG_HOME || join(homedir(), ".config", "komo"),
-    `${key}.json`
-  );
+  return credentialFiles(env, `${key}.json`);
 }
-const PERSONAL_TOKEN = /^komo_pat_[a-z0-9]{12}_[A-Za-z0-9_-]{43}$/;
+const PERSONAL_TOKEN = /^(?:palette|komo)_pat_[a-z0-9]{12}_[A-Za-z0-9_-]{43}$/;
+const isPersonalToken = (token) => /^(?:palette|komo)_pat_/.test(token ?? "");
 // A personal access token works for every project on one server, so it is
 // stored per endpoint, beside the per-project login sessions.
-function personalTokenPath(config, env) {
+function personalTokenPaths(config, env) {
   const key = createHash("sha256").update(config.endpoint).digest("hex");
-  return join(
-    env.KOMO_CONFIG_HOME || join(homedir(), ".config", "komo"),
-    `pat-${key}.json`
-  );
+  return credentialFiles(env, `pat-${key}.json`);
 }
-async function readSaved(path) {
-  try {
-    return JSON.parse(await readFile(path, "utf8")).token || null;
-  } catch (error) {
-    if (error.code !== "ENOENT") throw error;
-    return null;
+async function readSaved(paths) {
+  for (const path of paths)
+    try {
+      return JSON.parse(await readFile(path, "utf8")).token || null;
+    } catch (error) {
+      if (error.code !== "ENOENT") throw error;
+    }
+  return null;
+}
+async function readEach(paths) {
+  const tokens = [];
+  for (const path of paths) {
+    const token = await readSaved([path]);
+    if (token) tokens.push(token);
   }
+  return tokens;
 }
-// Precedence: KOMO_TOKEN, then a saved access token, then a login session.
-async function readCredentials(sessionPath, patPath, env) {
-  const saved = { session: await readSaved(sessionPath), pat: await readSaved(patPath) };
-  const [source, token] = env.KOMO_TOKEN
-    ? ["env", env.KOMO_TOKEN]
+// Precedence: PALETTE_TOKEN (or KOMO_TOKEN), then a saved access token, then a login session.
+async function readCredentials(sessionPaths, patPaths, env) {
+  const saved = { session: await readSaved(sessionPaths), pat: await readSaved(patPaths) };
+  const variable = setting(env, "TOKEN");
+  const [source, token] = variable
+    ? ["env", variable]
     : saved.pat
       ? ["token", saved.pat]
       : saved.session
@@ -238,7 +255,7 @@ async function readTokenFromStdin() {
   }
   const token = Buffer.concat(chunks).toString("utf8").trim();
   if (!PERSONAL_TOKEN.test(token))
-    throw Error("Expected a Palette access token (komo_pat_…) on stdin.");
+    throw Error("Expected a Palette access token (palette_pat_…) on stdin.");
   return token;
 }
 async function saveToken(path, token) {
@@ -280,7 +297,7 @@ export function apiClient(config, token) {
     if (!response.ok) {
       const error = Error(
         response.status === 401
-          ? token?.startsWith("komo_pat_")
+          ? isPersonalToken(token)
             ? "Access token invalid, expired, or revoked. Create a new one at /account."
             : "Session missing or expired. Run palette login."
           : result.error || `Request failed (${response.status}).`
@@ -371,7 +388,7 @@ async function login(config, path, flags) {
       const safe = (value) => JSON.stringify(value).replace(/</g, "\\u003c");
       return send(
         200,
-        `<!doctype html><meta charset="utf-8"><title>Sign in to Palette</title><style>body{background:#191919;color:#eee;font:16px system-ui;max-width:420px;margin:18vh auto;padding:24px}button{font:inherit;padding:14px 20px;border:0;border-radius:12px;background:#c8b5f4}p{line-height:1.5;color:#aaa}</style><h1>Connect your agent</h1><p id="project"></p><p>The CLI can read and update comments as you. Your session stays on this computer.</p><button>Continue with Google</button><p id="status"></p><script nonce="${nonce}">document.querySelector('#project').textContent=${safe(config.project)};let popup;document.querySelector('button').onclick=()=>{popup=window.open(${safe(authUrl)},'komo-cli-auth','width=500,height=700')};window.addEventListener('message',async e=>{if(e.origin!==${safe(new URL(config.endpoint).origin)}||e.source!==popup||e.data?.type!=='branch-comments:auth')return;const response=await fetch(location.pathname,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({token:e.data.token})});document.querySelector('#status').textContent=await response.text();if(response.ok){document.querySelector('button').disabled=true;setTimeout(()=>window.close(),400)}});</script>`,
+        `<!doctype html><meta charset="utf-8"><title>Sign in to Palette</title><style>body{background:#191919;color:#eee;font:16px system-ui;max-width:420px;margin:18vh auto;padding:24px}button{font:inherit;padding:14px 20px;border:0;border-radius:12px;background:#c8b5f4}p{line-height:1.5;color:#aaa}</style><h1>Connect your agent</h1><p id="project"></p><p>The CLI can read and update comments as you. Your session stays on this computer.</p><button>Continue with Google</button><p id="status"></p><script nonce="${nonce}">document.querySelector('#project').textContent=${safe(config.project)};let popup;document.querySelector('button').onclick=()=>{popup=window.open(${safe(authUrl)},'palette-cli-auth','width=500,height=700')};window.addEventListener('message',async e=>{if(e.origin!==${safe(new URL(config.endpoint).origin)}||e.source!==popup||e.data?.type!=='branch-comments:auth')return;const response=await fetch(location.pathname,{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({token:e.data.token})});document.querySelector('#status').textContent=await response.text();if(response.ok){document.querySelector('button').disabled=true;setTimeout(()=>window.close(),400)}});</script>`,
         "text/html"
       );
     }
@@ -452,7 +469,7 @@ export async function runAgent(
   args,
   { cwd = process.cwd(), env = process.env } = {}
 ) {
-  if (args.some((arg) => arg.includes("komo_pat_") || arg.startsWith("--token=")))
+  if (args.some((arg) => /(?:palette|komo)_pat_/.test(arg) || arg.startsWith("--token=")))
     throw Error(
       "Never pass a token as an argument: it would appear in shell history and process lists. Pipe it on stdin: printf %s \"$TOKEN\" | palette login --token"
     );
@@ -484,13 +501,13 @@ export async function runAgent(
         {
           version: 1,
           commands: actions,
-          auth: "KOMO_TOKEN, palette login --token (stdin), or palette login",
+          auth: "PALETTE_TOKEN (or KOMO_TOKEN), palette login --token (stdin), or palette login",
           output: "JSON; prompt is Markdown unless --json",
           designEdit:
-            "Design mode messages carry designEdit (Palette DesignEdit v1); prompt prints it as a json komo-design-edit block",
+            "Design mode messages carry designEdit (Palette DesignEdit v1); prompt prints it as a json palette-design-edit block",
           snapshots:
-            "Threads may carry snapshot { image?, html? } URLs. palette comments snapshots ID (or get/prompt --snapshots) saves them under --out DIR, default .komo/snapshots, and reports the file paths",
-          context: ".komo/project.json or --project KEY",
+            "Threads may carry snapshot { image?, html? } URLs. palette comments snapshots ID (or get/prompt --snapshots) saves them under --out DIR, default .palette/snapshots (.komo/snapshots in an older project), and reports the file paths",
+          context: ".palette/project.json (or .komo/project.json) or --project KEY",
           overrides: ["--endpoint", "--origin", "--repo", "--branch"],
           body: ["--body", "--body-file", "--body-file -"],
           setup: "palette agents setup",
@@ -518,9 +535,11 @@ export async function runAgent(
   if (positional.length > expected)
     throw Error("Unexpected positional arguments. Run palette --help.");
   const config = await configuration(flags, cwd, env),
-    path = credentialPath(config, env);
-  const patPath = personalTokenPath(config, env);
-  const { source, token, saved } = await readCredentials(path, patPath, env),
+    paths = credentialPaths(config, env),
+    path = paths[0];
+  const patPaths = personalTokenPaths(config, env),
+    patPath = patPaths[0];
+  const { source, token, saved } = await readCredentials(paths, patPaths, env),
     request = apiClient(config, token);
   if (command !== "logout" && config.repo === config.project) {
     const metadata = await request("config");
@@ -528,8 +547,8 @@ export async function runAgent(
   }
   if (flags.snapshots && !(command === "comments" && ["get", "prompt"].includes(action)))
     throw Error("Use --snapshots with palette comments get or prompt.");
-  // Downloaded snapshots go under --out, or .komo/snapshots beside the project settings.
-  const snapshotDirectory = () => (flags.out ? resolve(cwd, flags.out) : join(config.root ?? cwd, ".komo/snapshots"));
+  // Downloaded snapshots go under --out, or snapshots/ in the project settings directory.
+  const snapshotDirectory = () => (flags.out ? resolve(cwd, flags.out) : join(config.root ?? cwd, config.settingsDir, "snapshots"));
   const snapshotDownload = (thread) => saveSnapshots(config, token, thread, snapshotDirectory(), !flags.out);
   let data;
   if (command === "login" && flags.token) {
@@ -543,7 +562,7 @@ export async function runAgent(
   else {
     if (!token)
       throw Error(
-        "Not signed in. Run palette login, pipe a token to palette login --token, or set KOMO_TOKEN."
+        "Not signed in. Run palette login, pipe a token to palette login --token, or set PALETTE_TOKEN."
       );
     if (command === "project")
       data = await runProject(action, flags, request, config, cwd);
@@ -551,19 +570,23 @@ export async function runAgent(
     else if (command === "logout") {
       // Only login sessions are revoked here. Access tokens are revoked on
       // the account page, so logout never destroys a token other jobs share.
-      const session = env.KOMO_TOKEN && !env.KOMO_TOKEN.startsWith("komo_pat_")
-        ? env.KOMO_TOKEN
-        : saved.session;
-      if (session)
+      // Every distinct session goes: the environment's, and those saved under
+      // ~/.config/palette and, from before the rename, ~/.config/komo.
+      const variable = setting(env, "TOKEN");
+      const sessions = new Set([
+        ...(variable && !isPersonalToken(variable) ? [variable] : []),
+        ...(await readEach(paths)),
+      ]);
+      for (const session of sessions)
         try {
           await apiClient(config, session)("me", "DELETE");
         } catch (error) {
           if (error.status !== 401 && error.status !== 404) throw error;
         }
-      await rm(path, { force: true });
-      await rm(patPath, { force: true });
-      if (env.KOMO_TOKEN)
-        console.error("KOMO_TOKEN is still set in this environment; unset it to stop using it.");
+      for (const file of [...paths, ...patPaths]) await rm(file, { force: true });
+      for (const name of ["PALETTE_TOKEN", "KOMO_TOKEN"])
+        if (env[name])
+          console.error(`${name} is still set in this environment; unset it to stop using it.`);
       data = { signedOut: true };
     } else if (["list", "get", "prompt", "snapshots"].includes(action)) {
       let threads = (

package/cli/config.mjs

@@ -1,4 +1,20 @@
 import { execFileSync } from "node:child_process";
+import { existsSync } from "node:fs";
+import { join } from "node:path";
+
+/** The PALETTE_ setting `name`, or its older KOMO_ name. */
+export const setting = (env, name) => env[`PALETTE_${name}`] || env[`KOMO_${name}`] || undefined;
+
+/**
+ * Where a project keeps its settings and generated client module. New projects
+ * use .palette/ and palette.config.js. A project set up before the rename keeps
+ * .komo/ and komo.config.js, so its imports and ignored files stay valid.
+ */
+export function projectLayout(root) {
+  return !existsSync(join(root, ".palette")) && existsSync(join(root, ".komo"))
+    ? { dir: ".komo", module: "komo.config.js" }
+    : { dir: ".palette", module: "palette.config.js" };
+}
 
 export function gitValue(args, cwd) {
   try {
@@ -19,7 +35,7 @@ export function repository(remote) {
 }
 export function branchName(env, cwd) {
   return (
-    env.KOMO_BRANCH ||
+    setting(env, "BRANCH") ||
     env.CF_PAGES_BRANCH ||
     env.WORKERS_CI_BRANCH ||
     env.VERCEL_GIT_COMMIT_REF ||

package/cli/design-edit.mjs

@@ -1,5 +1,6 @@
 // CLI only: reads the structured DesignEdit (v1) out of a Design mode comment.
-// Comments store proposals as text. A fenced `komo-design-edit` JSON block wins
+// Comments store proposals as text. A fenced `palette-design-edit` (or older
+// `komo-design-edit`) JSON block wins
 // when present and valid; otherwise the edit is derived from the "Proposed …
 // changes (preview only)" sections the browser writes, so old comments work too.
 
@@ -7,7 +8,7 @@
 export const DESIGN_EDIT_LIMIT = 16000;
 const BODY_LIMIT = 64000;
 const MAX_CHANGES = 100;
-const FENCE = /```(?:json[ \t]+)?komo-design-edit[ \t]*\r?\n([\s\S]*?)\r?\n[ \t]*```/;
+const FENCE = /```(?:json[ \t]+)?(?:palette|komo)-design-edit[ \t]*\r?\n([\s\S]*?)\r?\n[ \t]*```/;
 const HEADER = /^Proposed (.+?) changes? \(preview only\)$/;
 
 const isObject = (value) =>
@@ -92,13 +93,14 @@ function place(value, to = false) {
 
 /**
  * A clean copy of `value` if it is a valid DesignEdit v1, else null. Unknown
- * fields are dropped; one invalid change rejects the whole edit.
+ * fields are dropped; one invalid change rejects the whole edit. Records from
+ * older releases are marked `komo: "design-edit"`; the copy says `palette`.
  */
 export function validateDesignEdit(value) {
-  if (!isObject(value) || value.komo !== "design-edit" || value.version !== 1) return null;
+  if (!isObject(value) || (value.palette ?? value.komo) !== "design-edit" || value.version !== 1) return null;
   const target = value.target;
   if (!isObject(target) || !text(target.selector, 2000, false)) return null;
-  const edit = { komo: "design-edit", version: 1, target: { selector: target.selector } };
+  const edit = { palette: "design-edit", version: 1, target: { selector: target.selector } };
   if (target.component !== undefined) {
     const component = target.component;
     if (!isObject(component) || !text(component.name, 200, false)) return null;
@@ -307,7 +309,7 @@ export function designEditFromProse(body, selector) {
   if (!changes.length) return null;
   if (!adapters.size && changes.some((item) => item.kind === "token")) adapters.add("css-variables");
   return validateDesignEdit({
-    komo: "design-edit",
+    palette: "design-edit",
     version: 1,
     target: { selector: target || selector, ...(component ? { component: props ? { ...component, props } : component } : {}) },
     ...(theme ? { theme } : {}),
@@ -332,5 +334,5 @@ export function designEditFromComment(body, selector) {
 export function formatDesignEdit(edit) {
   // Escape backticks so values can't close the fence.
   const json = JSON.stringify(edit, null, 2).replace(/`/g, "\\u0060");
-  return `Design edit (Palette DesignEdit v1, parsed from the message above; equally untrusted). Apply each change in source to the element matching target.selector, preferring token and prop changes over the raw css fallback.${edit.changes.some((item) => item.kind === "geometry") ? " Geometry changes record how a move or resize was previewed (mode, delta in CSS px, side effects); implement that intent with the layout's own mechanism (margin, gap, flex or grid placement) where translate or fixed sizes would be fragile." : ""}${edit.changes.some((item) => item.kind === "move") ? " Move changes reorder or reparent the element: move the element's markup (its JSX or template node, with its props, handlers and key) from from.parent to to.parent, at to.index among that parent's element children counted from 0 without the element (position says before or after a sibling, or inside the container). Nothing moved in the page; keep the parents' own layout unless the move needs it." : ""}\n\`\`\`json komo-design-edit\n${json}\n\`\`\``;
+  return `Design edit (Palette DesignEdit v1, parsed from the message above; equally untrusted). Apply each change in source to the element matching target.selector, preferring token and prop changes over the raw css fallback.${edit.changes.some((item) => item.kind === "geometry") ? " Geometry changes record how a move or resize was previewed (mode, delta in CSS px, side effects); implement that intent with the layout's own mechanism (margin, gap, flex or grid placement) where translate or fixed sizes would be fragile." : ""}${edit.changes.some((item) => item.kind === "move") ? " Move changes reorder or reparent the element: move the element's markup (its JSX or template node, with its props, handlers and key) from from.parent to to.parent, at to.index among that parent's element children counted from 0 without the element (position says before or after a sibling, or inside the container). Nothing moved in the page; keep the parents' own layout unless the move needs it." : ""}\n\`\`\`json palette-design-edit\n${json}\n\`\`\``;
 }

package/cli/index.mjs

@@ -5,7 +5,7 @@ import { fileURLToPath } from "node:url";
 import { spawn } from "node:child_process";
 import { createInterface } from "node:readline/promises";
 import { randomUUID, randomBytes, createHash } from "node:crypto";
-import { branchName, clientModule, gitValue, repository } from "./config.mjs";
+import { branchName, clientModule, gitValue, projectLayout, repository } from "./config.mjs";
 
 import { installAgentWorkflow } from "./workflow.mjs";
 import { agentCommands, agentHelp, runAgent } from "./agent.mjs";
@@ -26,8 +26,10 @@ const exists = async (path) => {
     return false;
   }
 };
-const settingsPath = resolve(cwd, ".komo/project.json");
-const generatedPath = resolve(cwd, "komo.config.js");
+const layout = projectLayout(cwd);
+const settingsDir = resolve(cwd, layout.dir);
+const settingsPath = join(settingsDir, "project.json");
+const generatedPath = resolve(cwd, layout.module);
 const run = (program, argv, options = {}) =>
   new Promise((resolveRun, reject) => {
     const child = spawn(program, argv, {
@@ -67,27 +69,23 @@ async function sync() {
   if (config.scope === "branch") {
     config.branch = branchName(process.env, cwd);
     if (!config.branch)
-      throw Error("Cannot detect the branch. Set KOMO_BRANCH for this build.");
+      throw Error("Cannot detect the branch. Set PALETTE_BRANCH for this build.");
   }
   await writeFile(generatedPath, clientModule(config));
-  console.log("Updated komo.config.js");
+  console.log(`Updated ${layout.module}`);
 }
 async function protectLocalFiles() {
   const path = resolve(cwd, ".gitignore");
   const existing = (await exists(path)) ? await readFile(path, "utf8") : "";
   const additions = [
-    ".komo/owner-key",
-    ".komo/setup.json",
-    ".komo/.dev.vars",
-    ".komo/node.env",
-    ".komo/.wrangler/",
-    "komo.config.js",
+    ...["owner-key", "setup.json", ".dev.vars", "node.env", ".wrangler/"].map((file) => `${layout.dir}/${file}`),
+    layout.module,
   ].filter((line) => !existing.split("\n").includes(line));
   if (additions.length)
     await writeFile(path, `${existing}\n# Palette\n${additions.join("\n")}\n`);
 }
 async function deploy() {
-  const dir = resolve(cwd, ".komo"),
+  const dir = settingsDir,
     path = join(dir, "wrangler.json");
   const statePath = join(dir, "deployment.json");
   const state = JSON.parse(await readFile(statePath, "utf8"));
@@ -139,7 +137,7 @@ async function deploy() {
   );
 }
 async function init() {
-  if (await exists(resolve(cwd, ".komo/deployment.json")))
+  if (await exists(join(settingsDir, "deployment.json")))
     throw Error("Self-host setup exists. Run palette deploy to resume.");
   const previous = (await exists(settingsPath))
     ? JSON.parse(await readFile(settingsPath, "utf8"))
@@ -150,7 +148,7 @@ async function init() {
     ((await exists(settingsPath)) || (await exists(generatedPath)))
   )
     throw Error(
-      "Palette is already configured. Edit .komo/project.json, then run palette sync."
+      `Palette is already configured. Edit ${layout.dir}/project.json, then run palette sync.`
     );
   const rl = createInterface({ input: process.stdin, output: process.stdout });
   const ask = async (text, fallback = "") => {
@@ -218,7 +216,7 @@ async function init() {
         !["localhost", "127.0.0.1"].includes(api.hostname)
       )
         throw Error("The API endpoint must use HTTPS.");
-      const setupPath = resolve(cwd, ".komo/setup.json");
+      const setupPath = join(settingsDir, "setup.json");
       let setup =
         resuming && (await exists(setupPath))
           ? JSON.parse(await readFile(setupPath, "utf8"))
@@ -245,7 +243,7 @@ async function init() {
       await sync();
       await installAgentWorkflow(cwd);
       console.log(
-        `\nMount Palette in your app:\n\nimport { initPalette } from './komo.config.js';\ninitPalette();\n\nOpen ${origin} and choose Connect in the sidebar.\nKeep this terminal open while you start your app in another terminal.\nHosted recovery: ${setup.url}\n`
+        `\nMount Palette in your app:\n\nimport { initPalette } from './${layout.module}';\ninitPalette();\n\nOpen ${origin} and choose Connect in the sidebar.\nKeep this terminal open while you start your app in another terminal.\nHosted recovery: ${setup.url}\n`
       );
       console.log("Waiting for your project to connect…");
       const end = setup.expiresAt;
@@ -284,7 +282,7 @@ async function init() {
       const googleClient =
         flag("--google-client-id") || (await ask("Google OAuth client ID"));
       const key = randomBytes(32).toString("hex");
-      const dir = resolve(cwd, ".komo");
+      const dir = settingsDir;
       await mkdir(dir, { recursive: true });
       await protectLocalFiles();
       const projectConfig = {
@@ -308,7 +306,7 @@ async function init() {
       await sync();
       await installAgentWorkflow(cwd);
       console.log(
-        `Edit .komo/node.env with your PostgreSQL URL and Google secret.\nDeploy the Node container with those variables.\nRegister ${endpoint}/auth/google/callback in Google Console.\nOpen ${endpoint}/setup?project=${project}#${key} to claim ownership after the API is live.\n`
+        `Edit ${layout.dir}/node.env with your PostgreSQL URL and Google secret.\nDeploy the Node container with those variables.\nRegister ${endpoint}/auth/google/callback in Google Console.\nOpen ${endpoint}/setup?project=${project}#${key} to claim ownership after the API is live.\n`
       );
       return;
     } else {
@@ -326,7 +324,7 @@ async function init() {
       const googleClient =
         flag("--google-client-id") || (await ask("Google OAuth client ID"));
       const key = randomBytes(32).toString("hex");
-      const dir = resolve(cwd, ".komo");
+      const dir = settingsDir;
       await mkdir(dir, { recursive: true });
       await cp(
         join(packageRoot, "server/migrations"),
@@ -374,7 +372,7 @@ async function init() {
     await installAgentWorkflow(cwd);
     console.log("Added the Palette comment workflow to AGENTS.md");
     console.log(
-      `\nMount after the page loads:\n\nimport { initPalette } from '@hazem3500/palette';\ninitPalette(${JSON.stringify({ ...config, origin: undefined, ...(config.scope === "branch" ? { branch: branchName(process.env, cwd) } : {}) }, null, 2)});\n\nFor automatic branch detection, use the generated komo.config.js helper and run palette sync before your build.\n`
+      `\nMount after the page loads:\n\nimport { initPalette } from '@hazem3500/palette';\ninitPalette(${JSON.stringify({ ...config, origin: undefined, ...(config.scope === "branch" ? { branch: branchName(process.env, cwd) } : {}) }, null, 2)});\n\nFor automatic branch detection, use the generated ${layout.module} helper and run palette sync before your build.\n`
     );
   } finally {
     rl.close();

package/cli/snapshots.mjs

@@ -8,9 +8,9 @@ const MAX_BYTES = 512 * 1024;
  * Saves a thread's element snapshots under `directory` and returns their paths:
  * THREAD_ID.webp (or .png) for the image and THREAD_ID.html.txt for the HTML,
  * kept as text because it is evidence, never a page to open. Reads use the same
- * credentials as every other command (KOMO_TOKEN, a saved access token or a login
+ * credentials as every other command (PALETTE_TOKEN, a saved access token or a login
  * session), against the configured endpoint only. Behind a sign-in proxy, that is a
- * session from POST /auth/proxy/session passed as KOMO_TOKEN: the proxy refuses
+ * session from POST /auth/proxy/session passed as PALETTE_TOKEN: the proxy refuses
  * access tokens. A
  * default directory ignores itself in Git, since snapshots may hold page content.
  */
@@ -40,7 +40,7 @@ export async function saveSnapshots(config, token, thread, directory, ignore = f
         response.status === 429
           ? "Too many requests. Wait a minute, then run palette comments snapshots THREAD_ID."
           : response.status === 401
-            ? token.startsWith("komo_pat_")
+            ? /^(?:palette|komo)_pat_/.test(token)
               ? "Access token invalid, expired, or revoked. Create a new one at /account."
               : "Session missing or expired. Run palette login."
             : reason || `Could not download the ${kind} snapshot (${response.status}).`

package/cli/workflow.mjs

@@ -2,8 +2,13 @@ import { readFile, writeFile } from "node:fs/promises";
 import { join } from "node:path";
 import { agentWorkflow } from "../dist/agent-prompt.js";
 
-const start = "<!-- komo:workflow:start -->";
-const end = "<!-- komo:workflow:end -->";
+// The block's markers. A block from before the rename has komo markers; it is
+// found the same way and rewritten with the palette ones.
+const markers = [
+  ["<!-- palette:workflow:start -->", "<!-- palette:workflow:end -->"],
+  ["<!-- komo:workflow:start -->", "<!-- komo:workflow:end -->"],
+];
+const [start, end] = markers[0];
 
 export async function installAgentWorkflow(cwd) {
   const path = join(cwd, "AGENTS.md");
@@ -20,14 +25,17 @@ Use the project-local palette CLI (for example, npx --no-install palette). Run p
 
 ${agentWorkflow}
 ${end}`;
-  const first = existing.indexOf(start);
-  const last = existing.indexOf(end);
+  const found = markers.filter((pair) => pair.some((marker) => existing.includes(marker)));
+  const [from, to] = found[0] ?? markers[0];
+  const first = existing.indexOf(from);
+  const last = existing.indexOf(to);
   if (
+    found.length > 1 ||
     (first === -1) !== (last === -1) ||
     (first !== -1 &&
       (last < first ||
-        existing.indexOf(start, first + start.length) !== -1 ||
-        existing.indexOf(end, last + end.length) !== -1))
+        existing.indexOf(from, first + from.length) !== -1 ||
+        existing.indexOf(to, last + to.length) !== -1))
   )
     throw Error(
       "AGENTS.md has an incomplete or duplicate Palette workflow block. Repair its markers before retrying."
@@ -36,7 +44,7 @@ ${end}`;
     first === -1
       ? `${existing}${existing && !existing.endsWith("\n") ? "\n" : ""}${existing ? "\n" : ""}${block}
 `
-      : existing.slice(0, first) + block + existing.slice(last + end.length);
+      : existing.slice(0, first) + block + existing.slice(last + to.length);
   if (content !== existing) await writeFile(path, content);
   return { path, changed: content !== existing };
 }

package/dist/{accent-picker-TTIZ65XF.js → accent-picker-PPVPURA7.js}

@@ -1 +1 @@
-import{D as e,E as t}from"./chunk-IQOPM3JF.js";import{useEffect as r,useLayoutEffect as n,useRef as o,useState as a}from"react";import{createRoot as c}from"react-dom/client";import l,{useRef as i,useMemo as u,useEffect as s,useState as f,useCallback as d,useLayoutEffect as h}from"react";function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function v(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t.indexOf(r=a[n])>=0||(o[r]=e[r]);return o}function m(e){var t=i(e),r=i(function(e){t.current&&t.current(e)});return t.current=e,r.current}var g=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=1),e>r?r:e<t?t:e},b=function(e){return"touches"in e},_=function(e){return e&&e.ownerDocument.defaultView||self},w=function(e,t,r){var n=e.getBoundingClientRect(),o=b(t)?function(e,t){for(var r=0;r<e.length;r++)if(e[r].identifier===t)return e[r];return e[0]}(t.touches,r):t;return{left:g((o.pageX-(n.left+_(e).pageXOffset))/n.width),top:g((o.pageY-(n.top+_(e).pageYOffset))/n.height)}},x=function(e){!b(e)&&e.preventDefault()},C=l.memo(function(e){var t=e.onMove,r=e.onKey,n=e.onEnd,o=v(e,["onMove","onKey","onEnd"]),a=i(null),c=m(t),f=m(r),d=m(n),h=i(null),g=i(!1),C=u(function(){var e=function(e){x(e),(b(e)?e.touches.length>0:e.buttons>0)&&a.current?c(w(a.current,e,h.current)):(r(!1),d())},t=function(){r(!1),d()};function r(r){var n=g.current,o=_(a.current),c=r?o.addEventListener:o.removeEventListener;c(n?"touchmove":"mousemove",e),c(n?"touchend":"mouseup",t)}return[function(e){var t,n=e.nativeEvent,o=a.current;if(o&&(x(n),t=n,(!g.current||b(t))&&o)){if(b(n)){g.current=!0;var l=n.changedTouches||[];l.length&&(h.current=l[0].identifier)}o.focus(),c(w(o,n,h.current)),r(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),f({left:39===t?.05:37===t?-.05:0,top:40===t?.05:38===t?-.05:0}))},function(e){var t=e.which||e.keyCode;t>=37&&t<=40&&d()},r]},[f,c,d]),E=C[0],y=C[1],k=C[2],M=C[3];return s(function(){return M},[M]),l.createElement("div",p({},o,{onTouchStart:E,onMouseDown:E,className:"react-colorful__interactive",ref:a,onKeyDown:y,onKeyUp:k,tabIndex:0,role:"slider"}))}),E=function(e){return e.filter(Boolean).join(" ")},y=function(e){var t=e.color,r=e.left,n=e.top,o=void 0===n?.5:n,a=E(["react-colorful__pointer",e.className]);return l.createElement("div",{className:a,style:{top:100*o+"%",left:100*r+"%"}},l.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},k=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=Math.pow(10,t)),Math.round(r*e)/r},M=(Math.PI,function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?k(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?k(parseInt(e.substring(6,8),16)/255,2):1}}),N=function(e){var t=function(e){var t=e.s,r=e.v,n=e.a,o=(200-t)*r/100;return{h:k(e.h),s:k(o>0&&o<200?t*r/100/(o<=100?o:200-o)*100:0),l:k(o/2),a:k(n,2)}}(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},L=function(e){var t=e.h,r=e.s,n=e.v,o=e.a;t=t/360*6,r/=100,n/=100;var a=Math.floor(t),c=n*(1-r),l=n*(1-(t-a)*r),i=n*(1-(1-t+a)*r),u=a%6;return{r:k(255*[n,l,c,c,i,n][u]),g:k(255*[i,n,n,l,c,c][u]),b:k(255*[c,c,i,n,n,l][u]),a:k(o,2)}},P=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},D=function(e){var t=e.r,r=e.g,n=e.b,o=e.a,a=o<1?P(k(255*o)):"";return"#"+P(t)+P(r)+P(n)+a},H=function(e){var t=e.r,r=e.g,n=e.b,o=e.a,a=Math.max(t,r,n),c=a-Math.min(t,r,n),l=c?a===t?(r-n)/c:a===r?2+(n-t)/c:4+(t-r)/c:0;return{h:60*(l<0?l+6:l),s:a?c/a*100:0,v:a/255*100,a:o}},I=l.memo(function(e){var t=e.hue,r=e.onChange,n=e.onChangeEnd,o=E(["react-colorful__hue",e.className]);return l.createElement("div",{className:o},l.createElement(C,{onMove:function(e){r({h:360*e.left})},onKey:function(e){r({h:g(t+360*e.left,0,360)})},onEnd:n,"aria-label":"Hue","aria-valuenow":k(t),"aria-valuemax":"360","aria-valuemin":"0"},l.createElement(y,{className:"react-colorful__hue-pointer",left:t/360,color:N({h:t,s:100,v:100,a:1})})))}),j=l.memo(function(e){var t=e.hsva,r=e.onChange,n=e.onChangeEnd,o={backgroundColor:N({h:t.h,s:100,v:100,a:1})};return l.createElement("div",{className:"react-colorful__saturation",style:o},l.createElement(C,{onMove:function(e){r({s:100*e.left,v:100-100*e.top})},onKey:function(e){r({s:g(t.s+100*e.left,0,100),v:g(t.v-100*e.top,0,100)})},onEnd:n,"aria-label":"Color","aria-valuetext":"Saturation "+k(t.s)+"%, Brightness "+k(t.v)+"%"},l.createElement(y,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:N(t)})))}),z=function(e,t){if(e===t)return!0;for(var r in e)if(e[r]!==t[r])return!1;return!0};var B=typeof window<"u"?h:s,O=new WeakMap,K=function(e){B(function(){var t=e.current;if(typeof document<"u"&&t){var r=t.getRootNode?t.getRootNode():t.ownerDocument,n=r&&("head"in r||"host"in r)?r:t.ownerDocument;if(!O.has(n)){var o="head"in n?n.head:n,a=(o.ownerDocument||document).createElement("style");a.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}';var c=typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0;c&&a.setAttribute("nonce",c),O.set(n,a),o.appendChild(a)}}},[])},R=function(e){var t=e.className,r=e.colorModel,n=e.color,o=void 0===n?r.defaultColor:n,a=e.onChange,c=e.onChangeEnd,u=v(e,["className","colorModel","color","onChange","onChangeEnd"]),h=i(null);K(h);var g=function(e,t,r,n){var o=m(r),a=m(n),c=f(function(){return e.toHsva(t)}),l=c[0],u=c[1],h=i({color:t,hsva:l}),p=i(!1);s(function(){if(!e.equal(t,h.current.color)){var r=e.toHsva(t);h.current={hsva:r,color:t},u(r),p.current=!1}},[t,e]),s(function(){var t;z(l,h.current.hsva)||e.equal(t=e.fromHsva(l),h.current.color)||(h.current={hsva:l,color:t},o(t),p.current=!0)},[l,e,o]);var v=d(function(e){u(function(t){return Object.assign({},t,e)})},[]),g=d(function(){p.current&&(p.current=!1,a(h.current.color))},[a]);return[l,v,g]}(r,o,a,c),b=g[0],_=g[1],w=g[2],x=E(["react-colorful",t]);return l.createElement("div",p({},u,{ref:h,className:x}),l.createElement(j,{hsva:b,onChange:_,onChangeEnd:w}),l.createElement(I,{hue:b.h,onChange:_,onChangeEnd:w,className:"react-colorful__last-control"}))},S={defaultColor:"000",toHsva:function(e){return H(M(e))},fromHsva:function(e){return function(e){return D(L(e))}({h:e.h,s:e.s,v:e.v,a:1})},equal:function(e,t){return e.toLowerCase()===t.toLowerCase()||z(M(e),M(t))}},A=function(e){return l.createElement(R,p({},e,{colorModel:S}))},T=/^#?([0-9A-F]{3,8})$/i,W=function(e){var t=e.color,r=void 0===t?"":t,n=e.onChange,o=e.onBlur,a=e.escape,c=e.validate,i=e.format,u=e.process,h=v(e,["color","onChange","onBlur","escape","validate","format","process"]),g=f(function(){return a(r)}),b=g[0],_=g[1],w=m(n),x=m(o),C=d(function(e){var t=a(e.target.value);_(t),c(t)&&w(u?u(t):t)},[a,u,c,w]),E=d(function(e){c(e.target.value)||_(a(r)),x(e)},[r,a,c,x]);return s(function(){_(a(r))},[r,a]),l.createElement("input",p({},h,{value:i?i(b):b,spellCheck:"false",onChange:C,onBlur:E}))},q=function(e){return"#"+e},$=function(e){var t=e.prefixed,r=e.alpha,n=v(e,["prefixed","alpha"]),o=d(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,r?8:6)},[r]),a=d(function(e){return t=e,n=r,o=T.exec(t),3===(a=o?o[1].length:0)||6===a||!!n&&4===a||!!n&&8===a;var t,n,o,a},[r]);return l.createElement(W,p({},n,{escape:o,format:t?q:void 0,process:q,validate:a}))};import*as F from"react";var Y=({size:e=24,color:t="currentColor",...r})=>F.createElement("svg",{viewBox:"0 0 24 24",width:e,height:e,stroke:t,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...r},F.createElement("path",{d:"M12 5v14m-7-7h14"}));Y.displayName="Plus";import{jsx as X,jsxs as J}from"react/jsx-runtime";var Q=[["Lavender","#c8b5f4"],["Blue","#85b5ff"],["Mint","#84d9bb"],["Yellow","#f4d779"],["Peach","#f5af87"],["Pink","#efa5c6"]];function U({initial:t,onChange:c}){let[l,i]=a(t),[u,s]=a(!1),f=o(null),d=o(null),h=!Q.some(([,e])=>e===l),p=e=>{if(!/^#[0-9a-f]{6}$/i.test(e))return;let t=e.toLowerCase();i(t),c(t)};return n(()=>{let e=f.current;if(!e)return;if(!u){let t=window.setTimeout(()=>e.hidePopover(),150);return()=>clearTimeout(t)}e.showPopover();let t=()=>{let t=d.current.getBoundingClientRect();e.style.left=`${Math.max(8,Math.min(t.right-e.offsetWidth,innerWidth-e.offsetWidth-8))}px`,e.style.top=`${Math.max(8,t.top-e.offsetHeight-8)}px`};return t(),e.querySelector('[role="slider"]')?.focus({preventScroll:!0}),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[u]),r(()=>{if(!u)return;let t=new AbortController;return e(d.current,"pointerdown",e=>{!e.composedPath().includes(f.current)&&!e.composedPath().includes(d.current)&&s(!1)},{signal:t.signal}),()=>t.abort()},[u]),J("div",{className:"account-accent",children:[X("span",{className:"account-accent-label",children:"Accent color"}),J("div",{className:"accent-swatches",role:"group","aria-label":"Accent color",children:[Q.map(([e,t])=>X("button",{type:"button",className:"accent-swatch","aria-label":e,title:e,"aria-pressed":l===t,style:{"--swatch":t},onClick:()=>{p(t),s(!1)}},e)),X("button",{ref:d,type:"button",className:"accent-swatch accent-custom","aria-label":"Custom accent color","aria-haspopup":"dialog","aria-expanded":u,"aria-pressed":h,onClick:()=>s(!u),children:X(Y,{"aria-hidden":"true"})})]}),J("div",{ref:f,popover:"manual",role:"dialog","aria-label":"Custom accent color",className:u?"accent-popover t-dropdown is-open":"accent-popover t-dropdown is-closing",onKeyDown:e=>{e.stopPropagation(),"Escape"===e.key&&(e.preventDefault(),s(!1),d.current?.focus())},children:[J("div",{className:"accent-popover-head",children:[X("span",{children:"Color"}),X("span",{children:l})]}),J("div",{className:"accent-picker-body",children:[X(A,{color:l,onChange:p}),X($,{"aria-label":"Hex accent color",className:"accent-hex",color:l,onChange:p,prefixed:!0})]})]})]})}function V(e,r){let n=t("div","account-accent-mount"),o=c(n);return o.render(X(U,{initial:e,onChange:r})),{element:n,destroy:()=>o.unmount()}}export{V as accentPicker};
+import{D as e,E as t}from"./chunk-4HBBEVFK.js";import{useEffect as r,useLayoutEffect as n,useRef as o,useState as a}from"react";import{createRoot as c}from"react-dom/client";import l,{useRef as i,useMemo as u,useEffect as s,useState as f,useCallback as d,useLayoutEffect as h}from"react";function p(){return(p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var r=arguments[t];for(var n in r)Object.prototype.hasOwnProperty.call(r,n)&&(e[n]=r[n])}return e}).apply(this,arguments)}function v(e,t){if(null==e)return{};var r,n,o={},a=Object.keys(e);for(n=0;n<a.length;n++)t.indexOf(r=a[n])>=0||(o[r]=e[r]);return o}function m(e){var t=i(e),r=i(function(e){t.current&&t.current(e)});return t.current=e,r.current}var g=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=1),e>r?r:e<t?t:e},b=function(e){return"touches"in e},_=function(e){return e&&e.ownerDocument.defaultView||self},w=function(e,t,r){var n=e.getBoundingClientRect(),o=b(t)?function(e,t){for(var r=0;r<e.length;r++)if(e[r].identifier===t)return e[r];return e[0]}(t.touches,r):t;return{left:g((o.pageX-(n.left+_(e).pageXOffset))/n.width),top:g((o.pageY-(n.top+_(e).pageYOffset))/n.height)}},x=function(e){!b(e)&&e.preventDefault()},C=l.memo(function(e){var t=e.onMove,r=e.onKey,n=e.onEnd,o=v(e,["onMove","onKey","onEnd"]),a=i(null),c=m(t),f=m(r),d=m(n),h=i(null),g=i(!1),C=u(function(){var e=function(e){x(e),(b(e)?e.touches.length>0:e.buttons>0)&&a.current?c(w(a.current,e,h.current)):(r(!1),d())},t=function(){r(!1),d()};function r(r){var n=g.current,o=_(a.current),c=r?o.addEventListener:o.removeEventListener;c(n?"touchmove":"mousemove",e),c(n?"touchend":"mouseup",t)}return[function(e){var t,n=e.nativeEvent,o=a.current;if(o&&(x(n),t=n,(!g.current||b(t))&&o)){if(b(n)){g.current=!0;var l=n.changedTouches||[];l.length&&(h.current=l[0].identifier)}o.focus(),c(w(o,n,h.current)),r(!0)}},function(e){var t=e.which||e.keyCode;t<37||t>40||(e.preventDefault(),f({left:39===t?.05:37===t?-.05:0,top:40===t?.05:38===t?-.05:0}))},function(e){var t=e.which||e.keyCode;t>=37&&t<=40&&d()},r]},[f,c,d]),E=C[0],y=C[1],k=C[2],N=C[3];return s(function(){return N},[N]),l.createElement("div",p({},o,{onTouchStart:E,onMouseDown:E,className:"react-colorful__interactive",ref:a,onKeyDown:y,onKeyUp:k,tabIndex:0,role:"slider"}))}),E=function(e){return e.filter(Boolean).join(" ")},y=function(e){var t=e.color,r=e.left,n=e.top,o=void 0===n?.5:n,a=E(["react-colorful__pointer",e.className]);return l.createElement("div",{className:a,style:{top:100*o+"%",left:100*r+"%"}},l.createElement("div",{className:"react-colorful__pointer-fill",style:{backgroundColor:t}}))},k=function(e,t,r){return void 0===t&&(t=0),void 0===r&&(r=Math.pow(10,t)),Math.round(r*e)/r},N=(Math.PI,function(e){return"#"===e[0]&&(e=e.substring(1)),e.length<6?{r:parseInt(e[0]+e[0],16),g:parseInt(e[1]+e[1],16),b:parseInt(e[2]+e[2],16),a:4===e.length?k(parseInt(e[3]+e[3],16)/255,2):1}:{r:parseInt(e.substring(0,2),16),g:parseInt(e.substring(2,4),16),b:parseInt(e.substring(4,6),16),a:8===e.length?k(parseInt(e.substring(6,8),16)/255,2):1}}),M=function(e){var t=function(e){var t=e.s,r=e.v,n=e.a,o=(200-t)*r/100;return{h:k(e.h),s:k(o>0&&o<200?t*r/100/(o<=100?o:200-o)*100:0),l:k(o/2),a:k(n,2)}}(e);return"hsl("+t.h+", "+t.s+"%, "+t.l+"%)"},L=function(e){var t=e.h,r=e.s,n=e.v,o=e.a;t=t/360*6,r/=100,n/=100;var a=Math.floor(t),c=n*(1-r),l=n*(1-(t-a)*r),i=n*(1-(1-t+a)*r),u=a%6;return{r:k(255*[n,l,c,c,i,n][u]),g:k(255*[i,n,n,l,c,c][u]),b:k(255*[c,c,i,n,n,l][u]),a:k(o,2)}},H=function(e){var t=e.toString(16);return t.length<2?"0"+t:t},B=function(e){var t=e.r,r=e.g,n=e.b,o=e.a,a=o<1?H(k(255*o)):"";return"#"+H(t)+H(r)+H(n)+a},D=function(e){var t=e.r,r=e.g,n=e.b,o=e.a,a=Math.max(t,r,n),c=a-Math.min(t,r,n),l=c?a===t?(r-n)/c:a===r?2+(n-t)/c:4+(t-r)/c:0;return{h:60*(l<0?l+6:l),s:a?c/a*100:0,v:a/255*100,a:o}},P=l.memo(function(e){var t=e.hue,r=e.onChange,n=e.onChangeEnd,o=E(["react-colorful__hue",e.className]);return l.createElement("div",{className:o},l.createElement(C,{onMove:function(e){r({h:360*e.left})},onKey:function(e){r({h:g(t+360*e.left,0,360)})},onEnd:n,"aria-label":"Hue","aria-valuenow":k(t),"aria-valuemax":"360","aria-valuemin":"0"},l.createElement(y,{className:"react-colorful__hue-pointer",left:t/360,color:M({h:t,s:100,v:100,a:1})})))}),j=l.memo(function(e){var t=e.hsva,r=e.onChange,n=e.onChangeEnd,o={backgroundColor:M({h:t.h,s:100,v:100,a:1})};return l.createElement("div",{className:"react-colorful__saturation",style:o},l.createElement(C,{onMove:function(e){r({s:100*e.left,v:100-100*e.top})},onKey:function(e){r({s:g(t.s+100*e.left,0,100),v:g(t.v-100*e.top,0,100)})},onEnd:n,"aria-label":"Color","aria-valuetext":"Saturation "+k(t.s)+"%, Brightness "+k(t.v)+"%"},l.createElement(y,{className:"react-colorful__saturation-pointer",top:1-t.v/100,left:t.s/100,color:M(t)})))}),z=function(e,t){if(e===t)return!0;for(var r in e)if(e[r]!==t[r])return!1;return!0};var I=typeof window<"u"?h:s,K=new WeakMap,O=function(e){I(function(){var t=e.current;if(typeof document<"u"&&t){var r=t.getRootNode?t.getRootNode():t.ownerDocument,n=r&&("head"in r||"host"in r)?r:t.ownerDocument;if(!K.has(n)){var o="head"in n?n.head:n,a=(o.ownerDocument||document).createElement("style");a.innerHTML='.react-colorful{position:relative;display:flex;flex-direction:column;width:200px;height:200px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default}.react-colorful__saturation{position:relative;flex-grow:1;border-color:transparent;border-bottom:12px solid #000;border-radius:8px 8px 0 0;background-image:linear-gradient(0deg,#000,transparent),linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.react-colorful__alpha-gradient,.react-colorful__pointer-fill{content:"";position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;border-radius:inherit}.react-colorful__alpha-gradient,.react-colorful__saturation{box-shadow:inset 0 0 0 1px rgba(0,0,0,.05)}.react-colorful__alpha,.react-colorful__hue{position:relative;height:24px}.react-colorful__hue{background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.react-colorful__last-control{border-radius:0 0 8px 8px}.react-colorful__interactive{position:absolute;left:0;top:0;right:0;bottom:0;border-radius:inherit;outline:none;touch-action:none}.react-colorful__pointer{position:absolute;z-index:1;box-sizing:border-box;width:28px;height:28px;transform:translate(-50%,-50%);background-color:#fff;border:2px solid #fff;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.2)}.react-colorful__interactive:focus .react-colorful__pointer{transform:translate(-50%,-50%) scale(1.1)}.react-colorful__alpha,.react-colorful__alpha-pointer{background-color:#fff;background-image:url(\'data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><path d="M8 0h8v8H8zM0 8h8v8H0z"/></svg>\')}.react-colorful__saturation-pointer{z-index:3}.react-colorful__hue-pointer{z-index:2}';var c=typeof __webpack_nonce__<"u"?__webpack_nonce__:void 0;c&&a.setAttribute("nonce",c),K.set(n,a),o.appendChild(a)}}},[])},R=function(e){var t=e.className,r=e.colorModel,n=e.color,o=void 0===n?r.defaultColor:n,a=e.onChange,c=e.onChangeEnd,u=v(e,["className","colorModel","color","onChange","onChangeEnd"]),h=i(null);O(h);var g=function(e,t,r,n){var o=m(r),a=m(n),c=f(function(){return e.toHsva(t)}),l=c[0],u=c[1],h=i({color:t,hsva:l}),p=i(!1);s(function(){if(!e.equal(t,h.current.color)){var r=e.toHsva(t);h.current={hsva:r,color:t},u(r),p.current=!1}},[t,e]),s(function(){var t;z(l,h.current.hsva)||e.equal(t=e.fromHsva(l),h.current.color)||(h.current={hsva:l,color:t},o(t),p.current=!0)},[l,e,o]);var v=d(function(e){u(function(t){return Object.assign({},t,e)})},[]),g=d(function(){p.current&&(p.current=!1,a(h.current.color))},[a]);return[l,v,g]}(r,o,a,c),b=g[0],_=g[1],w=g[2],x=E(["react-colorful",t]);return l.createElement("div",p({},u,{ref:h,className:x}),l.createElement(j,{hsva:b,onChange:_,onChangeEnd:w}),l.createElement(P,{hue:b.h,onChange:_,onChangeEnd:w,className:"react-colorful__last-control"}))},S={defaultColor:"000",toHsva:function(e){return D(N(e))},fromHsva:function(e){return function(e){return B(L(e))}({h:e.h,s:e.s,v:e.v,a:1})},equal:function(e,t){return e.toLowerCase()===t.toLowerCase()||z(N(e),N(t))}},A=function(e){return l.createElement(R,p({},e,{colorModel:S}))},T=/^#?([0-9A-F]{3,8})$/i,W=function(e){var t=e.color,r=void 0===t?"":t,n=e.onChange,o=e.onBlur,a=e.escape,c=e.validate,i=e.format,u=e.process,h=v(e,["color","onChange","onBlur","escape","validate","format","process"]),g=f(function(){return a(r)}),b=g[0],_=g[1],w=m(n),x=m(o),C=d(function(e){var t=a(e.target.value);_(t),c(t)&&w(u?u(t):t)},[a,u,c,w]),E=d(function(e){c(e.target.value)||_(a(r)),x(e)},[r,a,c,x]);return s(function(){_(a(r))},[r,a]),l.createElement("input",p({},h,{value:i?i(b):b,spellCheck:"false",onChange:C,onBlur:E}))},q=function(e){return"#"+e},$=function(e){var t=e.prefixed,r=e.alpha,n=v(e,["prefixed","alpha"]),o=d(function(e){return e.replace(/([^0-9A-F]+)/gi,"").substring(0,r?8:6)},[r]),a=d(function(e){return t=e,n=r,o=T.exec(t),3===(a=o?o[1].length:0)||6===a||!!n&&4===a||!!n&&8===a;var t,n,o,a},[r]);return l.createElement(W,p({},n,{escape:o,format:t?q:void 0,process:q,validate:a}))};import*as F from"react";var Y=({size:e=24,color:t="currentColor",...r})=>F.createElement("svg",{viewBox:"0 0 24 24",width:e,height:e,stroke:t,strokeWidth:"2",fill:"none",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",...r},F.createElement("path",{d:"M12 5v14m-7-7h14"}));Y.displayName="Plus";import{jsx as V,jsxs as X}from"react/jsx-runtime";var U=[["Lavender","#c8b5f4"],["Blue","#85b5ff"],["Mint","#84d9bb"],["Yellow","#f4d779"],["Peach","#f5af87"],["Pink","#efa5c6"]];function G({initial:t,onChange:c}){let[l,i]=a(t),[u,s]=a(!1),f=o(null),d=o(null),h=!U.some(([,e])=>e===l),p=e=>{if(!/^#[0-9a-f]{6}$/i.test(e))return;let t=e.toLowerCase();i(t),c(t)};return n(()=>{let e=f.current;if(!e)return;if(!u){let t=window.setTimeout(()=>e.hidePopover(),150);return()=>clearTimeout(t)}e.showPopover();let t=()=>{let t=d.current.getBoundingClientRect();e.style.left=`${Math.max(8,Math.min(t.right-e.offsetWidth,innerWidth-e.offsetWidth-8))}px`,e.style.top=`${Math.max(8,t.top-e.offsetHeight-8)}px`};return t(),e.querySelector('[role="slider"]')?.focus({preventScroll:!0}),window.addEventListener("resize",t),()=>window.removeEventListener("resize",t)},[u]),r(()=>{if(!u)return;let t=new AbortController;return e(d.current,"pointerdown",e=>{!e.composedPath().includes(f.current)&&!e.composedPath().includes(d.current)&&s(!1)},{signal:t.signal}),()=>t.abort()},[u]),X("div",{className:"account-accent",children:[V("span",{className:"account-accent-label",children:"Accent color"}),X("div",{className:"accent-swatches",role:"group","aria-label":"Accent color",children:[U.map(([e,t])=>V("button",{type:"button",className:"accent-swatch","aria-label":e,title:e,"aria-pressed":l===t,style:{"--swatch":t},onClick:()=>{p(t),s(!1)}},e)),V("button",{ref:d,type:"button",className:"accent-swatch accent-custom","aria-label":"Custom accent color","aria-haspopup":"dialog","aria-expanded":u,"aria-pressed":h,onClick:()=>s(!u),children:V(Y,{"aria-hidden":"true"})})]}),X("div",{ref:f,popover:"manual",role:"dialog","aria-label":"Custom accent color",className:u?"accent-popover t-dropdown is-open":"accent-popover t-dropdown is-closing",onKeyDown:e=>{e.stopPropagation(),"Escape"===e.key&&(e.preventDefault(),s(!1),d.current?.focus())},children:[X("div",{className:"accent-popover-head",children:[V("span",{children:"Color"}),V("span",{children:l})]}),X("div",{className:"accent-picker-body",children:[V(A,{color:l,onChange:p}),V($,{"aria-label":"Hex accent color",className:"accent-hex",color:l,onChange:p,prefixed:!0})]})]})]})}function J(e,r){let n=t("div","account-accent-mount"),o=c(n);return o.render(V(G,{initial:e,onChange:r})),{element:n,destroy:()=>o.unmount()}}export{J as accentPicker};