andesine 0.5.0 → 0.6.0

package/dist/templates/extension/README.md

@@ -12,11 +12,17 @@ An Andesine extension with a Solid frontend and a Node backend.
 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.
-- `shout-action.tsx` — a block action for paragraphs and headings that replaces the selection or inserts a paragraph after it.
-- `bookmarks-panel.tsx` — a left panel with a list kept in the extension storage, and a link to a declared URL.
-- `hello-panel.tsx` — a right panel for the open entry: configuration, an API call with the member's granted permissions, and a call to the backend.
-- `about-section.tsx` — a settings section with the granted permissions and host actions (copy, download, open a URL).
-- `src/backend/server.ts` — lifecycle and `entry.created` webhooks, session verification, and the secret `apiToken` field and storage, read with the extension's credentials.
+- 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
 

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

@@ -8,17 +8,13 @@ export default defineExtension({
   name: "example/hello",
   version: "0.1.0",
   displayName: "Hello",
-  description:
-    "Samples of every extension feature: views, panels, actions, settings, and a backend.",
+  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"],
-  // Other URLs that the frontend can request, link to, and open without confirmation.
-  requests: ["https://andesine.app/"],
   backend: {
-    // Where the backend in src/backend is deployed; it must use HTTPS. `npm run dev` uses the
-    // local backend instead (`--backend` in package.json).
+    // The deployed src/backend (HTTPS only); `npm run dev` uses the local one (see package.json).
     url: "https://hello.example.com",
     keys: backendKeys.keys
   },
@@ -40,12 +36,15 @@ export default defineExtension({
     {
       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.
+  // Shown in the block menu of the listed block types; each view decides its own UI.
   blockActions: [
     {
       id: "shout",
@@ -53,16 +52,23 @@ export default defineExtension({
       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: "bookmarks",
-      side: "left",
-      name: "Bookmarks",
-      icon: "i-lucide:bookmark",
-      entry: "BookmarksPanel"
-    },
     {
       id: "hello",
       side: "right",
@@ -71,9 +77,7 @@ export default defineExtension({
       context: "entry",
       entry: "HelloPanel"
     }
-  ],
-  // Shown in the extension's settings, below the configuration form.
-  settingsSections: [{ id: "about", heading: "About", entry: "AboutSection" }]
+  ]
 });
 
 export const build = defineBuild({ frontend: "src/frontend/index.tsx" });

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

@@ -1,6 +1,6 @@
 {
   "name": "andesine-extension",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "type": "module",
   "license": "MIT",
   "scripts": {
@@ -13,14 +13,14 @@
     "node": ">=22.12.0"
   },
   "dependencies": {
-    "@andesine/extensions": "0.5.0",
-    "@andesine/sdk": "0.5.0",
+    "@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.5.0",
+    "andesine": "0.6.0",
     "tsx": "^4.23.5",
     "typescript": "6.0.3"
   }

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

@@ -57,13 +57,8 @@ const server = createServer(async (request, response) => {
       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();
-      // The frontend's storage entries, e.g. the bookmarks panel.
-      const bookmarks = await session.client.extensions
-        .getSelfStorageEntry({ key: "bookmarks" })
-        .catch(() => null);
 
       console.log(`API token ${values.apiToken ? "set" : "not set"}`);
-      console.log(`Bookmarks: ${JSON.stringify(bookmarks?.value ?? [])}`);
       send(response, 200, {
         name: session.member.profile.name ?? session.member.profile.email ?? "member"
       });

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

@@ -3,8 +3,15 @@ import {
   apiFetch,
   backend,
   Button,
+  copyText,
+  Dialog,
   EXTENSION_API_URL,
   hasPermission,
+  IconButton,
+  Menu,
+  MenuItem,
+  MenuTrigger,
+  notify,
   Stack,
   Text,
   useConfiguration
@@ -24,11 +31,17 @@ 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" });
@@ -42,9 +55,28 @@ export const HelloPanel = (props: HelloPanelProps) => {
 
   return (
     <Stack gap="small">
-      <Text>
-        {configuration().greeting ?? "Hello"}, {name() ?? "member"}!
-      </Text>
+      <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">

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

@@ -1,6 +1,6 @@
 // Every view entry of the manifest is a named export of this module.
-export { AboutSection } from "./about-section";
-export { BookmarksPanel } from "./bookmarks-panel";
 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

@@ -20,10 +20,7 @@ const tones = [
   { value: "warning", label: "Warning" }
 ];
 
-/**
- * The view of `<Note>` elements. `ContentSlot` shows the element's editable content, which
- * Andesine keeps; the toggle edits the element's props as the member's own edit.
- */
+/** 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";

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

@@ -1,57 +1,33 @@
-import { Button, type ContentNode, Stack, Text, useEditor } from "@andesine/extensions/solid";
-import { createSignal, Show } from "solid-js";
+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 => ({
-  ...node,
-  ...(node.text !== undefined && { text: node.text.toUpperCase() }),
-  ...(node.content && { content: node.content.map(shout) })
-});
-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);
+const shout = (node: ContentNode): ContentNode => {
+  return {
+    ...node,
+    ...(node.text !== undefined && { text: node.text.toUpperCase() }),
+    ...(node.content && { content: node.content.map(shout) })
+  };
 };
 
-/** The block action: replaces the selected blocks or inserts a paragraph after them. */
+/**
+ * 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();
-  const [error, setError] = createSignal<string | null>(null);
-  const words = () => props.blocks.reduce((total, block) => total + countWords(block), 0);
-  const run = async (edit: () => Promise<void>) => {
+
+  onMount(async () => {
     try {
-      await edit();
+      await editor.replace(props.blocks.map(shout));
+    } finally {
       await editor.close();
-    } catch (failure) {
-      setError(failure instanceof Error ? failure.message : "The edit failed");
     }
-  };
+  });
 
-  return (
-    <Stack gap="small">
-      <Text size="sm">{words()} words selected.</Text>
-      <Stack direction="row" gap="small">
-        <Button color="primary" onClick={() => run(() => editor.replace(props.blocks.map(shout)))}>
-          Shout
-        </Button>
-        <Button
-          variant="outlined"
-          onClick={() => {
-            return run(() => {
-              return editor.insertAfter([
-                { type: "paragraph", content: [{ type: "text", text: `${words()} words.` }] }
-              ]);
-            });
-          }}
-        >
-          Count below
-        </Button>
-      </Stack>
-      <Show when={error()}>{(message) => <Text tone="danger">{message()}</Text>}</Show>
-    </Stack>
-  );
+  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/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>

package/dist/templates/pages/src/components/layout/page-actions.tsx

@@ -53,9 +53,7 @@ const PageActions: Component<PageActionsProps> = (props) => {
   return (
     <div class="flex shrink-0 gap-1">
       <Button
-        color="contrast"
-        variant="outlined"
-        size="small"
+        variant="secondary"
         text="base"
         class="gap-1.5"
         aria-label="Copy page as Markdown"
@@ -72,10 +70,6 @@ const PageActions: Component<PageActionsProps> = (props) => {
           <IconButton
             {...triggerProps()}
             icon="i-lucide:chevron-down"
-            color="contrast"
-            variant="outlined"
-            size="small"
-            text="soft"
             aria-label="More page actions"
           />
         )}

package/dist/templates/pages/src/components/primitives/button.tsx

@@ -3,9 +3,10 @@ import { type JSX, type ParentComponent, mergeProps, Show, splitProps } from "so
 import { Dynamic } from "solid-js/web";
 
 interface ButtonProps extends JSX.ButtonHTMLAttributes<HTMLButtonElement> {
-  color?: ButtonColor;
+  /** Defaults to `primary` for buttons and `secondary` for icon buttons. */
   variant?: ButtonVariant;
   size?: ButtonSize;
+  /** The gray level of `secondary` and `ghost` buttons; icon buttons default to `soft`. */
   text?: ButtonText;
   /** Renders an `<a>` element. */
   link?: string;
@@ -20,8 +21,7 @@ interface IconButtonProps extends ButtonProps {
   iconClass?: string;
 }
 
-type ButtonColor = "base" | "contrast" | "primary";
-type ButtonVariant = "solid" | "text" | "outlined";
+type ButtonVariant = "primary" | "secondary" | "ghost";
 type ButtonSize = "xs" | "small" | "medium";
 type ButtonText = "base" | "soft" | "softer";
 
@@ -30,15 +30,19 @@ const sizeClasses: Record<ButtonSize, string> = {
   small: ":base: px-1.5 py-1 text-sm",
   medium: ":base: px-2 py-1 text-base"
 };
-const colorClasses: Record<ButtonColor, string> = {
-  base: ":base: bg-gray-200 outline-gray-200",
-  contrast: ":base: bg-white outline-gray-200 shadow-gray-200",
-  primary: ":base: bg-gradient-to-tr bg-[length:125%_auto] text-white outline-tertiary"
-};
+const outlinedClasses =
+  ":base: outline outline-1 -outline-offset-1 shadow-md focus-visible:outline-1";
+// Keyboard focus shows the hover style.
 const variantClasses: Record<ButtonVariant, string> = {
-  solid: ":base: focus:outline-none",
-  text: ":base: bg-transparent focus:outline-none",
-  outlined: ":base: outline outline-1 -outline-offset-1 shadow-md focus-visible:outline-1"
+  primary: clsx(
+    outlinedClasses,
+    ":base: bg-gradient-to-tr bg-[length:125%_auto] text-white outline-tertiary @hover:bg-right focus-visible:bg-right"
+  ),
+  secondary: clsx(
+    outlinedClasses,
+    ":base: bg-white outline-gray-200 shadow-gray-200 @hover:bg-gray-100 focus-visible:bg-gray-100"
+  ),
+  ghost: ":base: bg-transparent focus:outline-none @hover:bg-gray-200 focus-visible:bg-gray-200"
 };
 const textClasses: Record<ButtonText, string> = {
   base: ":base: text-gray-700",
@@ -51,28 +55,9 @@ const iconButtonSizes: Record<ButtonSize, Record<"button" | "icon" | "label", st
   medium: { button: ":base-2: p-1", icon: ":base: h-6 w-6", label: ":base: pl-1" }
 };
 
-// Keyboard focus shows the hover style.
-const getHoverClasses = (color: ButtonColor, variant: ButtonVariant): string => {
-  if (color === "primary") return ":base: @hover:bg-right focus-visible:bg-right";
-  if (color === "contrast") return ":base: @hover:bg-gray-100 focus-visible:bg-gray-100";
-  if (variant === "text") return ":base: @hover:bg-gray-200 focus-visible:bg-gray-200";
-
-  return ":base: @hover:(shadow-inner outline-gray-300) focus-visible:(shadow-inner outline-gray-300)";
-};
 const Button: ParentComponent<ButtonProps> = (providedProps) => {
-  const props = mergeProps(
-    { color: "base", variant: "solid", size: "medium" } as const,
-    providedProps
-  );
-  const [local, rest] = splitProps(props, [
-    "class",
-    "color",
-    "variant",
-    "size",
-    "text",
-    "link",
-    "badge"
-  ]);
+  const props = mergeProps({ variant: "primary", size: "small" } as const, providedProps);
+  const [local, rest] = splitProps(props, ["class", "variant", "size", "text", "link", "badge"]);
   const component = (): "a" | "div" | "button" => {
     if (local.link) return "a";
     if (local.badge) return "div";
@@ -91,20 +76,19 @@ const Button: ParentComponent<ButtonProps> = (providedProps) => {
         !local.badge && ":base: cursor-pointer",
         sizeClasses[local.size],
         variantClasses[local.variant],
-        local.variant !== "text" && colorClasses[local.color],
-        local.text && textClasses[local.text],
-        getHoverClasses(local.color, local.variant),
+        local.text && local.variant !== "primary" && textClasses[local.text],
         local.class
       )}
     />
   );
 };
 const IconButton: ParentComponent<IconButtonProps> = (providedProps) => {
-  const props = mergeProps({ size: "medium" } as const, providedProps);
+  const props = mergeProps({ variant: "secondary", size: "small" } as const, providedProps);
   const [local, rest] = splitProps(props, ["class", "icon", "label", "iconClass", "children"]);
+  const text = () => props.text ?? (props.variant === "primary" ? undefined : "soft");
 
   return (
-    <Button {...rest} class={clsx(iconButtonSizes[props.size].button, local.class)}>
+    <Button {...rest} text={text()} class={clsx(iconButtonSizes[props.size].button, local.class)}>
       <span
         aria-hidden="true"
         class={clsx("shrink-0", iconButtonSizes[props.size].icon, local.icon, local.iconClass)}

package/dist/templates/pages/src/components/search/search-palette.tsx

@@ -93,9 +93,7 @@ const SearchPalette: Component<SearchPaletteProps> = (props) => {
             <Tooltip content="Close">
               <IconButton
                 icon="i-lucide:x"
-                variant="text"
-                text="soft"
-                size="small"
+                variant="ghost"
                 aria-label="Close search"
                 onClick={() => palette.setOpen(false)}
               />