Blume component pack

This pack runs all 33 supported components from [email protected] using their original Astro source, styles, and client widgets. It does not maintain React copies of Blume components. The gallery shows the available components.

Install the alpha

corepack pnpm add @inkeep/open-knowledge-components-blume@alpha

In an OpenKnowledge Desktop build with component-pack support, open Settings → This project → Integrations → Components, add node_modules/@inkeep/open-knowledge-components-blume, then trust and enable it. The npm package includes the generated runtime and styles, so no local build is needed.

To develop the pack from this repository, install dependencies from the OpenKnowledge workspace root and run corepack pnpm --dir examples/component-packs/blume build. Rebuild after source or dependency changes. See the pack overview for all packages and the Changesets release workflow.

Components

| Group | Exports | | --- | --- | | Layout | Badge, Callout, Card, CardGroup, Column, Columns, Frame, Panel, Tile | | Interaction | Steps, Step, Tabs, Tab, Accordion, AccordionItem, Expandable, Tooltip | | Visuals | Icon, FileTree, Tree, Tree.Folder, Tree.File, Color, Color.Row, Color.Item | | Content | CodeBlock, CodeGroup, Diff, Math, Prompt, TypeTable, Update, YouTube |

Component names and props come from the original library. The build generates TypeScript declarations from the Astro sources. The property panel exposes primitive inputs; write structured arrays and objects in MDX source.

CodeBlock accepts inline code and a Shiki lang. Use explicit Tab children containing CodeBlock components in CodeGroup; converting bare fenced blocks into panels is a site-layout feature. Diff accepts inline old/new strings or a unified patch; use lang="text" for plain text. Math accepts LaTeX through code. Prompt requires a description and keeps its body editable. Frame captions use the original Markdown renderer.

How rendering works

build.mjs compiles the original Astro components and creates the Node renderer, client scripts, generated prop types, and scoped CSS under dist/. mdx-components.server.mjs exposes the renderer to Open Knowledge's isolated utility process. The worker uses Astro's Container API and reuses its loaded modules while the pack is active.

astro-component.tsx connects that renderer to the editor. It sanitizes generated HTML and inserts the existing editable child nodes into its slots. Prop changes replace the surrounding component markup without replacing those child nodes. Changes to child component structure refresh the surrounding widget; ordinary text edits do not request another server render.

The original client scripts handle tabs, trees, copying, and other interactions. The adapter preserves custom-element state when moving editable content. An unchanged script bundle reuses its registrations; changed custom-element implementations reload the editor because browsers cannot replace registered constructors.

Editor boundaries

• Components run in the desktop app. Their server code runs only for a trusted, enabled pack.
• Tabs and CodeGroup keep selection local. Hash routing, URL query parameters, and synchronization between groups are disabled inside the editor.
• Disclosures use their original markup and native open/close behavior; site-wide anchor navigation is excluded.
• Diff file inputs (src, before, and after) are rejected, including when supplied in MDX source. Use inline content instead.
• Prompt and Color retain their original copy actions. Prompt's external-tool action is disabled. Code-block copy buttons and image zoom belong to Blume's site layout, which this component pack does not load.
• Document-provided HTML, including inline SVG icons and Markdown captions, passes through DOMPurify. Trusted upstream scripts are bundled separately. Diff retains its sanitized shadow-root styles.
• Editor wrappers can affect widgets that require direct DOM children. Tree expansion and ArrowDown navigation work; its ArrowRight shortcut into nested children is limited by those wrappers.

Site generation, navigation, automatic TypeScript extraction, generated component previews, repository fetching, and audience-specific visibility are outside this pack. AutoTypeTable, Component, GithubInfo, and Visibility are not exported.

Maintenance

Update the pinned dependencies, rebuild, and run the pack typecheck, metadata/compiler tests, original-renderer tests, and desktop gallery smoke tests. Check rendering, editable content, undo, both themes, and style isolation in the real editor. The local LICENSE file preserves Blume's MIT attribution.