andesine 0.4.0 → 0.6.0

package/dist/templates/extension/.env.example

@@ -0,0 +1,5 @@
+# The private key from `andesine extensions keys generate` (a JSON Web Key on one line)
+ANDESINE_EXTENSION_KEY=
+# API URLs of the Andesine instances that the backend works with, separated by commas
+ANDESINE_INSTANCES=https://api.andesine.app
+PORT=3000

package/dist/templates/extension/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vrite, Inc.
+
+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/dist/templates/extension/README.md

@@ -0,0 +1,39 @@
+# Andesine extension
+
+An Andesine extension with a Solid frontend and a Node backend.
+
+- `andesine.config.ts` — the manifest: name, permissions, backend, webhooks, configuration, and views.
+- `andesine.keys.json` — the backend's public keys; `andesine extensions keys` maintains it.
+- `src/frontend` — the views, rendered by Andesine in a sandbox; `index.tsx` exports every view that the manifest names.
+- `src/backend` — the backend; it receives webhooks and verifies frontend sessions.
+
+## Samples
+
+Each frontend module shows one kind of contribution; remove the ones you do not need from the manifest and `index.tsx`.
+
+- `note-view.tsx` — element views: `<Note>` with its editable content in `ContentSlot`, a tone switch that edits the element's props, and a `<NoteTitle>` descendant view.
+- Block actions for paragraphs and headings; each view decides its UI: `shout-action.tsx` runs without UI (the block menu shows a spinner until it closes), `count-words-action.tsx` shows a `Menu` in the block menu's place with the count and “Insert below”, and `wrap-in-note-action.tsx` asks for the tone in a `Dialog`, then wraps the blocks in a `<Note>`.
+- `hello-panel.tsx` — a right panel for the open entry: configuration, an API call with the member's granted permissions, a call to the backend, and a “More” `Menu` with a copy action and an “About” `Dialog`.
+- `src/backend/server.ts` — lifecycle and `entry.created` webhooks, session verification, and the secret `apiToken` field, read with the extension's credentials.
+
+## Local setup
+
+Extensions are developed against a fully local Andesine stack; the hosted app has no development mode.
+
+1. On the local stack, set `PUBLIC_EXTENSIONS_ENABLED=true` and `EXTENSIONS_DEVELOPMENT_ENABLED=true` for the backend and the web app. For webhooks to reach a backend on your machine, also allow local HTTP destinations: `WEBHOOK_ALLOW_HTTP=true` and a `WEBHOOK_DESTINATION_EXCEPTIONS` entry for the backend's origin.
+2. Sign in the CLI to the local instance (API keys cannot develop extensions): `npx andesine --base-url http://localhost:3333 auth login`.
+3. Start the backend with `npm run backend`, then `npm run dev`. Only you see and run the development extension; `npm run dev -- --remove` uninstalls it.
+
+## Commands
+
+- `npm run build` — validate the manifest and build the frontend, its CSS, and the artifact metadata into `dist/`.
+- `npm run backend` — start the backend with the variables from `.env` (see `.env.example`).
+- `npm run dev` — run the extension on a local Andesine instance for you, reloading it on each change; Ctrl+C stops it and keeps its state. It needs `andesine auth login` against the local instance, points the extension at the local backend (`--backend`, port 3000 as in `.env.example`), and writes a development key to `.env`.
+- `npx andesine extensions test-event <webhook> <type>` — send a sample event to a webhook of the running development extension.
+- `npx andesine extensions keys generate` — create a key pair; the private key never leaves your machine.
+- `npx andesine extensions keys check` — compare the backend's private key with the manifest keys.
+- `npx andesine extensions keys revoke <kid>` — stop listing a key; publish a new version afterwards.
+
+Private keys stay in `.andesine/keys` and `.env`, which Git ignores.
+
+Publish a version through a pull request to the extension registry.

package/dist/templates/extension/andesine.config.ts

@@ -0,0 +1,83 @@
+import { defineBuild, defineExtension } from "@andesine/extensions";
+import * as z from "zod";
+// `andesine extensions keys generate` and `keys revoke` maintain this file.
+import backendKeys from "./andesine.keys.json" with { type: "json" };
+
+export default defineExtension({
+  // Your registry name, e.g. `acme/publish`.
+  name: "example/hello",
+  version: "0.1.0",
+  displayName: "Hello",
+  description: "Samples of extension features: views, a panel, an action, settings, and a backend.",
+  icon: "i-lucide:hand",
+  apiVersion: 1,
+  // The API permissions that members approve; the frontend gets them only where members have them.
+  permissions: ["read:entries"],
+  backend: {
+    // The deployed src/backend (HTTPS only); `npm run dev` uses the local one (see package.json).
+    url: "https://hello.example.com",
+    keys: backendKeys.keys
+  },
+  webhooks: {
+    lifecycle: { events: ["extension.installed", "extension.uninstalled"], path: "/webhooks" },
+    entries: { events: ["entry.created"], path: "/webhooks" }
+  },
+  // Managers fill it in Settings → Extensions; secret fields reach only the backend.
+  configuration: z.object({
+    greeting: z.string().min(1).max(100).default("Hello").meta({ title: "Greeting" }),
+    apiToken: z
+      .string()
+      .max(200)
+      .optional()
+      .meta({ title: "API token", description: "Only the backend reads it", secret: true })
+  }),
+  // Renders `<Note>` elements; `<NoteTitle>` inside a note uses its own view.
+  elementViews: [
+    {
+      id: "note",
+      name: "Note",
+      // Shown in the editor's slash menu, under Elements.
+      description: "A highlighted note with a title and a tone",
+      icon: "i-lucide:sticky-note",
+      element: "Note",
+      entry: "NoteView",
+      descendants: [{ element: "NoteTitle", entry: "NoteTitleView" }]
+    }
+  ],
+  // Shown in the block menu of the listed block types; each view decides its own UI.
+  blockActions: [
+    {
+      id: "shout",
+      label: "Shout",
+      icon: "i-lucide:megaphone",
+      blocks: ["paragraph", "heading"],
+      entry: "ShoutAction"
+    },
+    {
+      id: "count-words",
+      label: "Count words",
+      icon: "i-lucide:hash",
+      blocks: ["paragraph", "heading"],
+      entry: "CountWordsAction"
+    },
+    {
+      id: "wrap-in-note",
+      label: "Wrap in Note",
+      icon: "i-lucide:sticky-note",
+      blocks: ["paragraph", "heading"],
+      entry: "WrapInNoteAction"
+    }
+  ],
+  panels: [
+    {
+      id: "hello",
+      side: "right",
+      name: "Hello",
+      icon: "i-lucide:hand",
+      context: "entry",
+      entry: "HelloPanel"
+    }
+  ]
+});
+
+export const build = defineBuild({ frontend: "src/frontend/index.tsx" });

package/dist/templates/extension/andesine.keys.json

@@ -0,0 +1,4 @@
+{
+  "keys": [],
+  "revokedKeys": []
+}

package/dist/templates/extension/gitignore

@@ -0,0 +1,4 @@
+node_modules
+dist
+.andesine
+.env

package/dist/templates/extension/package.template.json

@@ -0,0 +1,27 @@
+{
+  "name": "andesine-extension",
+  "version": "0.6.0",
+  "type": "module",
+  "license": "MIT",
+  "scripts": {
+    "build": "andesine extensions build",
+    "dev": "andesine extensions dev --backend http://localhost:3000",
+    "backend": "node --env-file-if-exists=.env --import tsx src/backend/server.ts",
+    "check": "tsc --noEmit"
+  },
+  "engines": {
+    "node": ">=22.12.0"
+  },
+  "dependencies": {
+    "@andesine/extensions": "0.6.0",
+    "@andesine/sdk": "0.6.0",
+    "solid-js": "^1.9.14",
+    "zod": "4.4.3"
+  },
+  "devDependencies": {
+    "@types/node": "26.1.2",
+    "andesine": "0.6.0",
+    "tsx": "^4.23.5",
+    "typescript": "6.0.3"
+  }
+}

package/dist/templates/extension/src/backend/server.ts

@@ -0,0 +1,80 @@
+import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
+import {
+  createExtensionBackend,
+  ExtensionNotificationError,
+  ExtensionSessionError
+} from "@andesine/sdk/extensions";
+
+const extension = createExtensionBackend({
+  name: "example/hello",
+  // The private key from `andesine extensions keys generate`, as a JSON Web Key.
+  privateKey: process.env.ANDESINE_EXTENSION_KEY ?? "",
+  // API URLs of the Andesine instances that this backend works with.
+  trustedInstances: (process.env.ANDESINE_INSTANCES ?? "https://api.andesine.app").split(",")
+});
+
+const readBody = async (request: IncomingMessage): Promise<string> => {
+  const chunks: Buffer[] = [];
+
+  for await (const chunk of request) chunks.push(chunk as Buffer);
+
+  return Buffer.concat(chunks).toString("utf8");
+};
+const send = (response: ServerResponse, status: number, body?: unknown): void => {
+  response.writeHead(status, body === undefined ? {} : { "content-type": "application/json" });
+  response.end(body === undefined ? undefined : JSON.stringify(body));
+};
+// The extension frontend calls the backend from the browser, so it needs CORS.
+const allowFrontend = (response: ServerResponse): void => {
+  response.setHeader("access-control-allow-origin", "*");
+  response.setHeader("access-control-allow-methods", "POST, OPTIONS");
+  response.setHeader(
+    "access-control-allow-headers",
+    "authorization, content-type, andesine-extension, andesine-instance"
+  );
+};
+const server = createServer(async (request, response) => {
+  allowFrontend(response);
+
+  try {
+    if (request.method === "OPTIONS") {
+      send(response, 204);
+    } else if (request.method === "POST" && request.url === "/webhooks") {
+      // Fetching the delivery with the extension's key confirms the notification.
+      const { event, client } = await extension.receive(await readBody(request));
+
+      if (event.type === "entry.created") {
+        // The client acts for the installation, with the extension's permissions.
+        const entry = await client.entries.get({ id: event.subject.id });
+
+        console.log(`Entry created: ${entry.name}`);
+      } else {
+        console.log(`Received ${event.type}`);
+      }
+
+      send(response, 204);
+    } else if (request.method === "POST" && request.url === "/hello") {
+      const session = await extension.verifySession(request.headers);
+      // Secret fields are readable only here, with the extension's own credentials.
+      const { values } = await session.client.extensions.getSelfConfiguration();
+
+      console.log(`API token ${values.apiToken ? "set" : "not set"}`);
+      send(response, 200, {
+        name: session.member.profile.name ?? session.member.profile.email ?? "member"
+      });
+    } else {
+      send(response, 404);
+    }
+  } catch (error) {
+    const isRejected =
+      error instanceof ExtensionSessionError || error instanceof ExtensionNotificationError;
+
+    if (!isRejected) console.error(error);
+
+    send(response, isRejected ? 401 : 500);
+  }
+});
+
+server.listen(Number(process.env.PORT ?? 3000), () => {
+  console.log(`Backend listening on port ${process.env.PORT ?? 3000}`);
+});

package/dist/templates/extension/src/frontend/count-words-action.tsx

@@ -0,0 +1,46 @@
+import {
+  type ContentNode,
+  Menu,
+  MenuContent,
+  MenuItem,
+  MenuSeparator,
+  Text,
+  useEditor
+} from "@andesine/extensions/solid";
+
+interface BlockActionProps {
+  blocks: ContentNode[];
+}
+
+const countWords = (node: ContentNode): number => {
+  const own = node.text?.split(/\s+/).filter(Boolean).length ?? 0;
+
+  return own + (node.content ?? []).reduce((total, child) => total + countWords(child), 0);
+};
+
+/**
+ * A block action menu where the block menu was: a custom item with the count and a structured
+ * item. Escape or a click outside closes it; after a choice, the action runs until it closes.
+ */
+export const CountWordsAction = (props: BlockActionProps) => {
+  const editor = useEditor();
+  const words = () => props.blocks.reduce((total, block) => total + countWords(block), 0);
+  const insert = async () => {
+    await editor.insertAfter([
+      { type: "paragraph", content: [{ type: "text", text: `${words()} words.` }] }
+    ]);
+    await editor.close();
+  };
+
+  return (
+    <Menu size="medium">
+      <MenuContent>
+        <Text size="sm" tone="muted" class="px-2 py-1">
+          {words()} words
+        </Text>
+      </MenuContent>
+      <MenuSeparator />
+      <MenuItem label="Insert below" icon="i-lucide:list-plus" onSelect={insert} />
+    </Menu>
+  );
+};

package/dist/templates/extension/src/frontend/hello-panel.tsx

@@ -0,0 +1,93 @@
+import { createClient } from "@andesine/sdk";
+import {
+  apiFetch,
+  backend,
+  Button,
+  copyText,
+  Dialog,
+  EXTENSION_API_URL,
+  hasPermission,
+  IconButton,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  notify,
+  Stack,
+  Text,
+  useConfiguration
+} from "@andesine/extensions/solid";
+import { createResource, createSignal, Show } from "solid-js";
+
+interface HelloPanelProps {
+  /** Right panels with the `entry` context get the open entry's ID. */
+  entryID?: string;
+}
+
+// API calls go through Andesine with the member's session, limited to the extension's grant.
+const client = createClient({ baseURL: EXTENSION_API_URL, fetch: apiFetch });
+
+/** The right panel: reads the open entry through the API, then asks the backend who you are. */
+export const HelloPanel = (props: HelloPanelProps) => {
+  const configuration = useConfiguration<{ greeting: string }>();
+  const [name, setName] = createSignal<string | null>(null);
+  const [failed, setFailed] = createSignal(false);
+  const [aboutOpened, setAboutOpened] = createSignal(false);
+  const [entry] = createResource(
+    () => (hasPermission("read:entries") ? props.entryID : undefined),
+    // A failed request would end the view, so the entry line stays hidden instead.
+    (id) => client.entries.get({ id }).catch(() => null)
+  );
+  const greeting = () => `${configuration().greeting ?? "Hello"}, ${name() ?? "member"}!`;
+  const copyGreeting = async () => {
+    await copyText(greeting());
+    await notify("Greeting copied");
+  };
+  const askBackend = async () => {
+    try {
+      const response = await backend.fetch("/hello", { method: "POST" });
+      const result = (await response.json()) as { name: string };
+
+      setName(result.name);
+    } catch {
+      setFailed(true);
+    }
+  };
+
+  return (
+    <Stack gap="small">
+      <Stack direction="row" justify="between" align="center">
+        <Text>{greeting()}</Text>
+        {/* Menus and dialogs work in any view; a dialog opens only right after an interaction. */}
+        <Menu>
+          <MenuTrigger>
+            <IconButton icon="i-lucide:ellipsis" label="More" />
+          </MenuTrigger>
+          <MenuItem label="Copy greeting" icon="i-lucide:copy" onSelect={copyGreeting} />
+          <MenuItem
+            label="About this panel"
+            icon="i-lucide:info"
+            onSelect={() => setAboutOpened(true)}
+          />
+        </Menu>
+      </Stack>
+      <Show when={aboutOpened()}>
+        <Dialog title="Hello panel" size="small" onClose={() => setAboutOpened(false)}>
+          <Text size="sm">
+            A sample panel: it reads the open entry and asks the extension's backend who you are.
+          </Text>
+        </Dialog>
+      </Show>
+      <Show when={entry()}>
+        {(loaded) => (
+          <Text size="sm" tone="muted">
+            Entry: {loaded().name}
+          </Text>
+        )}
+      </Show>
+      <Button onClick={askBackend}>Ask the backend</Button>
+      <Show when={failed()}>
+        <Text tone="danger">The backend did not answer.</Text>
+      </Show>
+    </Stack>
+  );
+};

package/dist/templates/extension/src/frontend/index.tsx

@@ -0,0 +1,6 @@
+// Every view entry of the manifest is a named export of this module.
+export { HelloPanel } from "./hello-panel";
+export { NoteTitleView, NoteView } from "./note-view";
+export { CountWordsAction } from "./count-words-action";
+export { ShoutAction } from "./shout-action";
+export { WrapInNoteAction } from "./wrap-in-note-action";

package/dist/templates/extension/src/frontend/note-view.tsx

@@ -0,0 +1,51 @@
+import {
+  Box,
+  ContentSlot,
+  Icon,
+  Stack,
+  Text,
+  ToggleGroup,
+  useEditor
+} from "@andesine/extensions/solid";
+
+interface ElementViewProps {
+  /** The element name, e.g. `Note`. */
+  element: string;
+  /** The element's props from the document. */
+  props: { tone?: string };
+}
+
+const tones = [
+  { value: "info", label: "Info" },
+  { value: "warning", label: "Warning" }
+];
+
+/** The `<Note>` view: `ContentSlot` shows the editable content; the toggle edits element props. */
+export const NoteView = (props: ElementViewProps) => {
+  const editor = useEditor();
+  const tone = () => props.props.tone ?? "info";
+
+  return (
+    <Box padding="medium" background="soft" border class="rounded-lg">
+      <Stack gap="small">
+        <Stack direction="row" justify="between" align="center">
+          <Icon name={tone() === "warning" ? "i-lucide:triangle-alert" : "i-lucide:info"} />
+          <ToggleGroup
+            value={tone()}
+            options={tones}
+            onChange={(value) => editor.setElementProps({ tone: value })}
+          />
+        </Stack>
+        <ContentSlot />
+      </Stack>
+    </Box>
+  );
+};
+/** The view of `<NoteTitle>` elements inside a note, from the note view's descendants. */
+export const NoteTitleView = () => {
+  return (
+    <Text weight="semibold" class="uppercase tracking-wide">
+      <ContentSlot />
+    </Text>
+  );
+};

package/dist/templates/extension/src/frontend/shout-action.tsx

@@ -0,0 +1,33 @@
+import { type ContentNode, useEditor } from "@andesine/extensions/solid";
+import { onMount } from "solid-js";
+
+interface BlockActionProps {
+  /** The selected blocks as editor JSON. */
+  blocks: ContentNode[];
+}
+
+const shout = (node: ContentNode): ContentNode => {
+  return {
+    ...node,
+    ...(node.text !== undefined && { text: node.text.toUpperCase() }),
+    ...(node.content && { content: node.content.map(shout) })
+  };
+};
+
+/**
+ * A block action without UI: it renders nothing, so the block menu shows a spinner until it
+ * closes. Andesine shows an error if the edit fails.
+ */
+export const ShoutAction = (props: BlockActionProps) => {
+  const editor = useEditor();
+
+  onMount(async () => {
+    try {
+      await editor.replace(props.blocks.map(shout));
+    } finally {
+      await editor.close();
+    }
+  });
+
+  return null;
+};

package/dist/templates/extension/src/frontend/wrap-in-note-action.tsx

@@ -0,0 +1,52 @@
+import {
+  Button,
+  type ContentNode,
+  Dialog,
+  Stack,
+  Text,
+  ToggleGroup,
+  useEditor
+} from "@andesine/extensions/solid";
+import { createSignal, Show } from "solid-js";
+
+interface BlockActionProps {
+  blocks: ContentNode[];
+}
+
+const tones = [
+  { value: "info", label: "Info" },
+  { value: "warning", label: "Warning" }
+];
+
+/** A block action in a dialog: it asks for the tone, then wraps the blocks in a `<Note>`. */
+export const WrapInNoteAction = (props: BlockActionProps) => {
+  const editor = useEditor();
+  const [tone, setTone] = createSignal("info");
+  const [error, setError] = createSignal<string | null>(null);
+  const wrap = async () => {
+    try {
+      // Andesine derives the element's tag from its name and props.
+      await editor.replace([
+        { type: "element", attrs: { name: "Note", props: { tone: tone() } }, content: props.blocks }
+      ]);
+      await editor.close();
+    } catch (failure) {
+      setError(failure instanceof Error ? failure.message : "The edit failed");
+    }
+  };
+
+  return (
+    <Dialog title="Wrap in Note" description="Choose the note's tone." size="small">
+      <Stack gap="medium">
+        <ToggleGroup value={tone()} options={tones} onChange={setTone} />
+        <Show when={error()}>{(message) => <Text tone="danger">{message()}</Text>}</Show>
+        <Stack direction="row" gap="small" justify="end">
+          <Button onClick={() => editor.close()}>Cancel</Button>
+          <Button variant="primary" onClick={wrap}>
+            Wrap
+          </Button>
+        </Stack>
+      </Stack>
+    </Dialog>
+  );
+};

package/dist/templates/extension/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2022", "DOM"],
+    "jsx": "preserve",
+    "jsxImportSource": "solid-js",
+    "strict": true,
+    "noEmit": true,
+    "skipLibCheck": true,
+    "resolveJsonModule": true,
+    "types": ["node"]
+  },
+  "include": ["andesine.config.ts", "src"]
+}

package/dist/templates/pages/package.template.json

@@ -1,6 +1,6 @@
 {
   "name": "andesine-pages-site",
-  "version": "0.4.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -13,8 +13,8 @@
     "node": ">=24"
   },
   "dependencies": {
-    "@andesine/pages": "0.4.0",
-    "@andesine/ui": "0.4.0",
+    "@andesine/pages": "0.6.0",
+    "@andesine/ui": "0.6.0",
     "@ark-ui/solid": "5.38.0",
     "@astrojs/mdx": "8.0.1",
     "@astrojs/node": "11.1.6",

package/dist/templates/pages/src/components/content/copy-button.tsx

@@ -36,7 +36,7 @@ const CopyButton: Component<CopyButtonProps> = (props) => {
     <>
       <IconButton
         icon={icon()}
-        variant="text"
+        variant="ghost"
         size="xs"
         text="softer"
         aria-label={props.label ?? "Copy code"}

package/dist/templates/pages/src/components/layout/call-to-action.tsx

@@ -13,16 +13,12 @@ const CallToAction: Component<CallToActionProps> = (props) =>
       link={props.link.href}
       icon={props.link.icon}
       label={props.link.label}
-      color="primary"
-      variant="outlined"
-      size="small"
+      variant="primary"
       class="flex-row-reverse gap-1 pr-1.5"
       iconClass="opacity-50 h-4.5 w-4.5"
     />
   ) : (
-    <Button link={props.link.href} color="primary" variant="outlined" size="small">
-      {props.link.label}
-    </Button>
+    <Button link={props.link.href}>{props.link.label}</Button>
   );
 
 export { CallToAction };

package/dist/templates/pages/src/components/layout/footer.astro

@@ -31,9 +31,8 @@ const updated =
           <IconButton
             link={link.href}
             icon={link.icon}
-            variant="text"
+            variant="ghost"
             text="softer"
-            size="small"
             aria-label={link.label}
             title={link.label}
           />

package/dist/templates/pages/src/components/layout/header.astro

@@ -33,9 +33,6 @@ const { site } = page;
           <IconButton
             data-search-trigger
             icon="i-tabler:search"
-            color="contrast"
-            variant="outlined"
-            size="small"
             text="softer"
             class="md:hidden"
             aria-label="Search"

package/dist/templates/pages/src/components/layout/mobile-navigation.tsx

@@ -25,7 +25,7 @@ const MobileNavigation: Component<MobileNavigationProps> = (props) => (
       aria-label="Navigation"
       class="fixed bottom-[max(1rem,env(safe-area-inset-bottom))] right-4 z-40 cursor-pointer list-none rounded-lg focus-visible:(outline outline-2 outline-tertiary) [&::-webkit-details-marker]:hidden"
     >
-      <Button badge color="contrast" variant="outlined" text="softer" class="p-1.5">
+      <Button badge variant="secondary" text="softer" size="medium" class="p-1.5">
         <span aria-hidden="true" class="i-lucide:menu h-5 w-5 group-open/menu:hidden" />
         <span aria-hidden="true" class="i-lucide:x hidden h-5 w-5 group-open/menu:block" />
       </Button>