installAlerts can contain structured content:
\nSign in with your existing account
\nCreate a new account to get started
\nWelcome to our comprehensive documentation...
\n\nOur platform provides a complete solution...
\n\nTo begin, install the package...
\n\nThe platform offers numerous features...
\n\nNow that you understand the basics...
\n, block renders as . 100px Link Component Versatile anchor/link component with various styling options. Supports different variants, sizes, and underline behaviors. #default #primary #muted https://example.com #hover #always #never #xs #sm #md #lg #docs https://github.com Typography Combination Example A real-world example showing how typography components work together to create structured, readable content. noopener noreferrer use client level 1 | 2 | 3 | 4 | 5 | 6 Semantic heading level (h1-h6) align \"left\" | \"center\" | \"right\" \"left\" Text alignment marginBottom boolean true Whether to add bottom margin marginTop Whether to add top margin size \"xs\" | \"sm\" | \"md\" | \"base\" | \"lg\" | \"xl\" \"md\" Visual size of the text weight \"normal\" | \"medium\" | \"semibold\" | \"bold\" \"normal\" Font weight color \"default\" | \"muted\" | \"primary\" | \"success\" | \"warning\" | \"danger\" | \"info\" \"default\" Text color variant false Whether to render as block element (div) instead of inline (span) \"left\" | \"center\" | \"right\" | \"justify\" Text alignment (only applies when block=true) truncate Whether to truncate text with ellipsis italic Whether to make text italic monospace Whether to make text monospace Visual size of the paragraph text lineHeight \"tight\" | \"normal\" | \"relaxed\" | \"loose\" Line height maxLines number Maximum number of lines before truncating Whether to render as a block (pre) or inline (code) element \"xs\" | \"sm\" | \"md\" | \"base\" \"sm\" Visual size of the code text wrap Whether to allow line wrapping (default: false for inline, true for block) maxHeight string Maximum height for scrolling (only applies to block code) href Link destination \"xs\" | \"sm\" | \"md\" | \"base\" | \"lg\" Visual size of the link text variant \"default\" | \"muted\" | \"primary\" Link variant underline \"always\" | \"hover\" | \"never\" \"hover\" Whether to show underline external Whether the link is external (adds external link indicator and target=\"_blank\") flex column var(--bk-spacing-4) baukasten-ui 200px var(--bk-spacing-5) Hello, World! 600px var(--bk-spacing-6) var(--vscode-textBlockQuote-background) var(--bk-radius-md) var(--bk-spacing-3) var(--bk-font-size-sm) var(--vscode-descriptionForeground) var(--bk-spacing-2) // With line wrapping enabled: Very long line of code that will wrap instead of scrolling horizontally. This is useful when you want to ensure all code is visible without horizontal scrolling. // With max height (scroll for more)\nLine 1\nLine 2\nLine 3\nLine 4\nLine 5\nLine 6\nLine 7\nLine 8\nLine 9\nLine 10 }\n \n\n \n For more information, visit our documentation.\n \n \n );\n} Whether the link is external (adds external link indicator and target=",
+ "path": "/components/typography",
+ "category": "Components",
+ "keywords": [
+ "react",
+ "component",
+ "ui",
+ "widget",
+ "level",
+ "align",
+ "marginbottom",
+ "margintop",
+ "size",
+ "weight",
+ "color",
+ "block",
+ "truncate",
+ "italic",
+ "monospace",
+ "lineheight",
+ "maxlines",
+ "wrap",
+ "maxheight",
+ "href",
+ "variant",
+ "underline",
+ "external",
+ "button",
+ "input",
+ "form",
+ "text",
+ "heading",
+ "paragraph"
+ ]
+ },
+ {
+ "id": "/foundations/colors",
+ "title": "Colors",
+ "description": "Semantic color tokens that provide consistent theming across the design system.",
+ "content": "Overview All color tokens use CSS variables and automatically map to VSCode theme variables.\n They can be easily customized for web applications or other platforms. Brand Colors Primary and secondary colors for your brand identity and main actions. ))} Semantic Colors Colors that convey meaning: success, warning, error, and info states. Neutral Colors Background, foreground, and border colors for general UI elements. Interactive States Colors for hover, active, focus, and selected states. Customization Override any color token by redefining the CSS variable: Colors Semantic color tokens that provide consistent theming across the design system. tsx css use client var(--bk-color-surface) 1px solid var(--bk-color-border) var(--bk-radius-md) var(--bk-padding-lg) var(--bk-transition-colors) var(--bk-font-family-mono) var(--bk-font-size-sm) var(--bk-font-weight-medium) var(--bk-spacing-3) 100% 80px var(--bk-radius-sm) var(--bk-font-size-xs) var(--bk-color-text-secondary) Primary --bk-color-primary Primary brand color for main actions Primary Hover --bk-color-primary-hover Primary hover state Primary Foreground --bk-color-primary-foreground Text on primary background Secondary --bk-color-secondary Secondary brand color Secondary Hover --bk-color-secondary-hover Secondary hover state Secondary Foreground --bk-color-secondary-foreground Text on secondary background Success --bk-color-success Success state and positive actions Success Hover --bk-color-success-hover Success hover state Warning --bk-color-warning Warning state and caution Warning Hover --bk-color-warning-hover Warning hover state Danger --bk-color-danger Error/danger state Danger Hover --bk-color-danger-hover Danger hover state Info --bk-color-info Informational state Info Hover --bk-color-info-hover Info hover state Background --bk-color-background Primary background color Background Secondary --bk-color-background-secondary Secondary background color Background Tertiary --bk-color-background-tertiary Tertiary background color Background Elevated --bk-color-background-elevated Elevated background (widgets) Foreground --bk-color-foreground Primary text color Foreground Muted --bk-color-foreground-muted Muted/secondary text Foreground Disabled --bk-color-foreground-disabled Disabled text color Border --bk-color-border Default border color Border Focus --bk-color-border-focus Focus border color Border Hover --bk-color-border-hover Hover border color Hover --bk-color-hover Hover background color Active --bk-color-active Active/pressed state Focus --bk-color-focus Focus indicator color Selected --bk-color-selected Selected item background Selected Foreground --bk-color-selected-foreground Selected item text var(--bk-padding-2xl) var(--bk-font-size-xl) var(--bk-font-weight-semibold) var(--bk-padding-md) var(--bk-font-size-base) var(--bk-line-height-relaxed) var(--bk-color-primary) var(--bk-color-primary-foreground) var(--bk-padding-sm) grid repeat(auto-fill, minmax(240px, 1fr))",
+ "path": "/foundations/colors",
+ "category": "Foundations",
+ "keywords": [
+ "design",
+ "tokens",
+ "system",
+ "primary",
+ "secondary",
+ "success",
+ "warning",
+ "danger",
+ "info",
+ "background",
+ "foreground",
+ "border",
+ "hover",
+ "active",
+ "focus",
+ "selected",
+ "button",
+ "form",
+ "text"
+ ]
+ },
+ {
+ "id": "/foundations/effects",
+ "title": "Effects",
+ "description": "Visual effects including shadows, border radius, transitions, opacity, and z-index for depth and motion.",
+ "content": "Overview Effects tokens provide consistent visual styling for shadows, borders, animations, and layering.\n Use these to create depth, smooth transitions, and proper visual hierarchy. Shadows Seven levels of shadows for creating depth and elevation. ))} Border Radius Eight levels of border radius from sharp corners to fully circular. Transitions & Animations Timing and property presets for smooth animations and transitions. Duration Hover me Properties Opacity Semantic opacity values for disabled, muted, and hover states. Full scale from 0-100 also available. Full opacity scale also available: --bk-opacity-0 through --bk-opacity-100 (0 to 1 in increments of 0.1) Z-Index Predefined z-index values for proper layering of UI elements. Effects Visual effects including shadows, border radius, transitions, opacity, and z-index for depth and motion. tsx use client Small --bk-shadow-sm Subtle shadow for slight elevation Base --bk-shadow-base Default shadow for cards and panels Medium --bk-shadow-md Medium shadow for dropdowns Large --bk-shadow-lg Large shadow for modals and overlays Extra Large --bk-shadow-xl Extra large shadow for prominent elements 2X Large --bk-shadow-2xl Maximum shadow for hero elements Inner --bk-shadow-inner Inset shadow for depth None --bk-radius-none No rounding --bk-radius-sm 2px Subtle rounding --bk-radius-md 4px Standard rounding --bk-radius-lg 6px Pronounced rounding --bk-radius-xl 8px Heavy rounding --bk-radius-2xl 12px Maximum rounding 3X Large --bk-radius-3xl 16px Very heavy rounding Full --bk-radius-full 9999px Circular/pill shape Fast --bk-transition-fast 100ms Quick animations --bk-transition-base 150ms Standard animations Slow --bk-transition-slow 300ms Deliberate animations Colors --bk-transition-colors Color, background, and border transitions All --bk-transition-all All properties transition Transform --bk-transition-transform Transform property transitions --bk-transition-opacity Opacity transitions Disabled --bk-opacity-disabled 0.4 Disabled state opacity Muted --bk-opacity-muted 0.6 Muted content opacity Hover --bk-opacity-hover 0.8 Hover state opacity --bk-z-index-base Base layer Dropdown --bk-z-index-dropdown 1000 Dropdown menus Sticky --bk-z-index-sticky 1020 Sticky elements Fixed --bk-z-index-fixed 1030 Fixed elements Modal Backdrop --bk-z-index-modal-backdrop 1040 Modal backdrop Modal --bk-z-index-modal 1050 Modal dialogs Popover --bk-z-index-popover 1060 Popovers Context Menu --bk-z-index-context-menu 1065 Context menus Tooltip --bk-z-index-tooltip 1070 Tooltips Notification --bk-z-index-notification 1080 Toast notifications var(--bk-padding-2xl) var(--bk-font-size-xl) var(--bk-font-weight-semibold) var(--bk-padding-md) var(--bk-font-size-base) var(--bk-color-text-secondary) var(--bk-padding-lg) var(--bk-line-height-relaxed) var(--bk-radius-md) var(--bk-shadow-base) var(--bk-transition-colors) var(--bk-spacing-4) var(--bk-padding-sm) grid repeat(auto-fill, minmax(280px, 1fr)) var(--bk-color-surface) 1px solid var(--bk-color-border) var(--bk-spacing-3) 100% 100px var(--bk-color-background-elevated) flex center var(--bk-font-size-sm) var(--bk-font-size-xs) repeat(auto-fill, minmax(180px, 1fr)) 80px var(--bk-color-primary) 0 auto var(--bk-padding-xl) var(--bk-font-size-md) pointer var(--bk-color-hover) var(--bk-color-primary-foreground) var(--bk-radius-sm) var(--bk-padding-xs) 60px repeat(auto-fill, minmax(240px, 1fr)) var(--bk-font-size-2xl)",
+ "path": "/foundations/effects",
+ "category": "Foundations",
+ "keywords": [
+ "design",
+ "tokens",
+ "system",
+ "small",
+ "base",
+ "medium",
+ "large",
+ "inner",
+ "none",
+ "full",
+ "fast",
+ "slow",
+ "colors",
+ "all",
+ "transform",
+ "opacity",
+ "disabled",
+ "muted",
+ "hover",
+ "dropdown",
+ "sticky",
+ "fixed",
+ "modal",
+ "popover",
+ "tooltip",
+ "notification",
+ "form",
+ "menu",
+ "dialog",
+ "text"
+ ]
+ },
+ {
+ "id": "/foundations/spacing",
+ "title": "Spacing",
+ "description": "Consistent spacing scale based on a 4px base unit for padding, margin, gaps, and component sizes.",
+ "content": "Overview The spacing system uses a 4px base unit to create a consistent rhythm throughout the UI.\n All spacing values are multiples or divisions of this base unit. Spacing Scale The fundamental spacing scale from 0px to 96px. Use these for margin, padding, positioning, and gaps. ))} Gap Tokens Semantic gap values for spacing between flex and grid items. Padding Tokens Semantic padding values for components. Includes vertical and horizontal spacing. Content Component Sizes Standard heights for interactive elements like buttons, inputs, and controls. Regular Sizes Circular Sizes For icon buttons, avatars, and other circular components. Spacing Consistent spacing scale based on a 4px base unit for padding, margin, gaps, and component sizes. tsx use client --bk-spacing-0 0px 0.5 --bk-spacing-0-5 2px --bk-spacing-1 4px 1.5 --bk-spacing-1-5 6px --bk-spacing-2 8px 2.5 --bk-spacing-2-5 10px --bk-spacing-3 12px 3.5 --bk-spacing-3-5 14px --bk-spacing-4 16px --bk-spacing-5 20px --bk-spacing-6 24px --bk-spacing-7 28px --bk-spacing-8 32px --bk-spacing-10 40px --bk-spacing-12 48px --bk-spacing-16 64px --bk-spacing-20 80px --bk-spacing-24 96px --bk-gap-xs Minimal gap --bk-gap-sm Small gap --bk-gap-md Medium gap --bk-gap-lg Large gap --bk-gap-xl Extra large gap --bk-padding-xs 2px 8px Extra small padding --bk-padding-sm 4px 10px Small padding --bk-padding-md 6px 14px Medium padding --bk-padding-lg 8px 16px Large padding --bk-padding-xl 10px 20px Extra large padding --bk-size-xs Extra small component --bk-size-sm Small component --bk-size-md Medium component --bk-size-lg Large component --bk-size-xl 36px Extra large component var(--bk-padding-2xl) var(--bk-font-size-xl) var(--bk-font-weight-semibold) var(--bk-padding-md) var(--bk-font-size-base) var(--bk-color-text-secondary) var(--bk-padding-lg) var(--bk-line-height-relaxed) var(--bk-spacing-4) var(--bk-spacing-6) flex var(--bk-gap-md) var(--bk-padding-sm) grid repeat(auto-fill, minmax(200px, 1fr)) var(--bk-color-surface) 1px solid var(--bk-color-border) var(--bk-radius-md) var(--bk-spacing-3) center var(--bk-color-primary) var(--bk-radius-sm) var(--bk-font-size-xs) repeat(auto-fill, minmax(280px, 1fr)) var(--bk-color-background-secondary) inline-block var(--bk-color-primary-foreground) var(--bk-spacing-2) nowrap column var(--bk-font-size-md) 120px var(--bk-font-size-sm) var(--bk-gap-lg) wrap 50%",
+ "path": "/foundations/spacing",
+ "category": "Foundations",
+ "keywords": [
+ "design",
+ "tokens",
+ "system",
+ "0",
+ "1",
+ "2",
+ "3",
+ "4",
+ "5",
+ "6",
+ "7",
+ "8",
+ "10",
+ "12",
+ "16",
+ "20",
+ "24",
+ "xs",
+ "sm",
+ "md",
+ "lg",
+ "xl",
+ "button",
+ "input",
+ "icon",
+ "text"
+ ]
+ },
+ {
+ "id": "/foundations/typography",
+ "title": "Typography",
+ "description": "Font sizes, weights, line heights, and letter spacing for consistent text styling.",
+ "content": "Overview Typography tokens provide consistent text styling across the design system.\n All values are defined as CSS variables and can be customized. Font Sizes A comprehensive scale from 11px to 36px for all text hierarchy needs. The quick brown fox jumps over the lazy dog ))} Font Weights Five weight options from light to bold for emphasis and hierarchy. The quick brown fox Line Heights Line height values for different reading contexts and content types. Typography is the art and technique of arranging type to make written language\n legible, readable, and appealing when displayed. The arrangement of type involves\n selecting typefaces, point sizes, line lengths, line-spacing, and letter-spacing. Letter Spacing Letter spacing (tracking) values for fine-tuning text appearance. TYPOGRAPHY Font Families System font stacks for consistent rendering across platforms. --bk-font-family-sans System sans-serif stack for UI text --bk-font-family-mono Monospace stack for code and technical content Typography Font sizes, weights, line heights, and letter spacing for consistent text styling. tsx use client Extra Small --bk-font-size-xs 11px Labels, captions Small --bk-font-size-sm 12px Helper text, small UI Medium --bk-font-size-md 13px Secondary text Base --bk-font-size-base 14px Body text (default) Large --bk-font-size-lg 16px Emphasized text Extra Large --bk-font-size-xl 18px Subheadings 2X Large --bk-font-size-2xl 20px Headings 3X Large --bk-font-size-3xl 24px Large headings 4X Large --bk-font-size-4xl 30px Display headings 5X Large --bk-font-size-5xl 36px Hero headings Light --bk-font-weight-light 300 Normal --bk-font-weight-normal 400 --bk-font-weight-medium 500 Semibold --bk-font-weight-semibold 600 Bold --bk-font-weight-bold 700 Hero --bk-line-height-hero 1.1 Extra tight for large text Tight --bk-line-height-tight 1.25 Compact spacing --bk-line-height-normal 1.5 Standard readability Relaxed --bk-line-height-relaxed 1.75 Comfortable reading Loose --bk-line-height-loose Maximum spacing --bk-letter-spacing-hero -0.04em --bk-letter-spacing-tight -0.025em Slight tightening --bk-letter-spacing-normal Default spacing Wide --bk-letter-spacing-wide 0.025em Slight expansion Wider --bk-letter-spacing-wider 0.05em Expanded spacing var(--bk-padding-2xl) var(--bk-font-size-xl) var(--bk-font-weight-semibold) var(--bk-padding-md) var(--bk-font-size-base) var(--bk-color-text-secondary) var(--bk-padding-lg) var(--bk-line-height-relaxed) var(--bk-font-size-3xl) var(--bk-font-weight-bold) var(--bk-line-height-tight) var(--bk-letter-spacing-tight) var(--bk-padding-sm) flex column var(--bk-color-surface) 1px solid var(--bk-color-border) var(--bk-radius-md) var(--bk-spacing-3) var(--bk-font-size-xs) var(--bk-spacing-2) var(--bk-line-height-normal) grid repeat(auto-fill, minmax(280px, 1fr)) var(--bk-font-size-lg) var(--bk-font-family-sans) var(--bk-padding-xs) var(--bk-font-family-mono)",
+ "path": "/foundations/typography",
+ "category": "Foundations",
+ "keywords": [
+ "design",
+ "tokens",
+ "system",
+ "small",
+ "medium",
+ "base",
+ "large",
+ "light",
+ "normal",
+ "semibold",
+ "bold",
+ "hero",
+ "tight",
+ "relaxed",
+ "loose",
+ "wide",
+ "wider",
+ "form",
+ "table",
+ "text",
+ "heading"
+ ]
+ },
+ {
+ "id": "/guides/theia",
+ "title": "Usage in Eclipse Theia",
+ "description": "Learn how to use Baukasten components in Eclipse Theia applications, including multi-window support.",
+ "content": ");\n\n\n return ( Baukasten supports Eclipse Theia applications with special handling for multi-window scenarios where secondary/popup windows are common. Installation Install Baukasten in your Theia application: Basic Setup Import the base styles and Theia-specific CSS variables: Then use components in your application: Your Theia widget is using Baukasten! Execute Multi-Window Support Important: If you're using Baukasten in Theia secondary/popup windows, you need to use PortalProvider to ensure dropdowns and tooltips render correctly. The Problem Portal-based components like Select, Dropdown, Tooltip, and ContextMenu render their floating\n content using React portals. By default, these portals target the main window's document.body In Theia's multi-window scenarios, when a component is rendered in a secondary window but its\n portal content goes to the main window's body, dropdowns appear on the wrong window! The Solution: PortalProvider Wrap your secondary window content with to redirect portal content to the correct window: Open Menu Menu content appears in the correct window! Hover me Components Using Portals These components render floating content via portals and respect ))} API Reference A context provider that configures where portal content should be rendered. usePortalRoot Hook A hook to access the portal root element. Useful if you're building custom portal-based components: My floating content Backward Compatibility is not used, components fall back to their default behavior (rendering\n to ). This means: Existing code continues to work without changes Single-window applications don't need Only add when using secondary windows in Theia Your Theia application is now ready to use Baukasten components in both main and secondary windows.\n For more component details, explore the component documentation Usage in Eclipse Theia Learn how to use Baukasten components in Eclipse Theia applications, including multi-window support. info window npm install baukasten-ui react react-dom bash tsx Eclipse Theia Select an option primary warning Select a language This tooltip also renders correctly! typescript success check You're Ready for Multi-Window! /components/select use client var(--bk-spacing-12) var(--bk-font-size-md) var(--bk-color-text-secondary) 0 0 var(--bk-spacing-4) 0 var(--bk-line-height-relaxed) var(--bk-spacing-8) baukasten-ui var(--bk-spacing-6) opt1 Option 1 opt2 Option 2 var(--bk-spacing-4) var(--bk-spacing-8) 0 ,\n padding: ,\n borderRadius: var(--vscode-textCodeBlock-background) 2px 6px var(--bk-radius-sm) s multi-window scenarios, when a component is rendered in a secondary window but its\n portal content goes to the main window react 100% TypeScript JavaScript Python grid repeat(auto-fit, minmax(200px, 1fr)) Select Dropdown options list Dropdown Generic dropdown container /components/dropdown Tooltip Hover tooltips /components/tooltip ContextMenu Right-click menus /components/contextmenu ButtonGroup Split button dropdowns /components/buttongroup none var(--vscode-sideBar-background) 1px solid var(--vscode-panel-border) var(--bk-radius-md) border-color 0.2s var(--vscode-focusBorder) var(--vscode-panel-border) 0 0 var(--bk-spacing-1) 0 var(--vscode-descriptionForeground) var(--bk-font-size-sm) ,\n lineHeight: ,\n paddingLeft: }}>Single-window applications don",
+ "path": "/guides/theia",
+ "category": "Guides",
+ "keywords": [
+ "guide",
+ "tutorial",
+ "howto",
+ "select",
+ "dropdown",
+ "tooltip",
+ "contextmenu",
+ "buttongroup",
+ "button",
+ "input",
+ "list",
+ "menu",
+ "alert",
+ "icon",
+ "text",
+ "heading",
+ "paragraph"
+ ]
+ },
+ {
+ "id": "/guides/theming",
+ "title": "Theming",
+ "description": "Learn how to customize and theme Baukasten components to match your application",
+ "content": "Baukasten is built with VSCode's theming system in mind, making it automatically compatible with all VSCode and Theia color themes. Overview Baukasten uses CSS variables (custom properties) for theming. Simply import the appropriate\n platform CSS file for your environment, and optionally override any variables to customize\n the appearance. Platform CSS Files Baukasten provides three platform-specific CSS files. Import the one that matches your target environment: VS Code baukasten-vscode.css Uses --vscode-* CSS variables. Components automatically adapt to the user's VS Code theme. Theia baukasten-theia.css --theia-* CSS variables. Components automatically adapt to the Eclipse Theia theme. Web baukasten-web.css Uses default fallback values for standalone web applications. This is the file you'll want to customize. Customizing Themes After importing the platform CSS file, simply override the CSS variables you want to customize.\n You can do this in your own CSS file or in a <style> tag: Then import your custom CSS file after the Baukasten CSS: Dynamic Theme Switching For dynamic theme switching (e.g., light/dark mode toggle), you can update CSS variables at runtime using JavaScript: Using baukasten-ui-web-wrapper (Optional) For convenience, the baukasten-ui-web-wrapper package provides pre-built theme presets: Light Theme lightModern Clean, bright theme inspired by VSCode's default light theme Dark Theme darkModern Professional dark theme matching VSCode's modern dark theme Theme Variables Reference Here are the most commonly customized CSS variables: Brand Colors --bk-color-primary Primary brand color --bk-color-primary-hover Primary hover state --bk-color-primary-foreground Text on primary background --bk-color-secondary Secondary brand color Semantic Colors --bk-color-success Success/positive actions --bk-color-warning Warning/caution messages --bk-color-danger Error/destructive actions --bk-color-info Informational messages Background & Foreground --bk-color-background Main background color --bk-color-background-secondary Secondary background (e.g., sidebars) --bk-color-background-elevated Elevated surfaces (e.g., modals) --bk-color-foreground Primary text color --bk-color-foreground-muted Secondary/muted text Borders & Interactive States --bk-color-border Default border color --bk-color-border-focus Focus indicator color --bk-color-hover Hover state background --bk-color-active Active/pressed state background Spacing --bk-spacing-2 Extra small spacing (4px) --bk-spacing-4 Small spacing (8px) --bk-spacing-6 Medium spacing (12px) --bk-spacing-8 Large spacing (16px) --bk-spacing-12 Extra large spacing (24px) Component-Specific Overrides For component-specific customization, you can use inline styles with CSS variables: Custom Styled Button Best Practices Import the right platform CSS Use for VS Code, for Theia,\n or for standalone web apps Override semantic tokens, not platform variables Override --bk-color-* tokens (e.g., )\n instead of variables Test with multiple themes Verify your components work well in both light and dark themes Import order matters Import base CSS first, then platform CSS, then your custom overrides Theming Guide Learn how to customize and theme Baukasten components to match your application's design. info tsx warning default css primary check use client }}>\n Baukasten is built with VSCode var(--bk-spacing-12) var(--bk-font-size-xl) var(--bk-font-weight-semibold) var(--bk-spacing-4) var(--bk-font-size-base) var(--bk-color-text-secondary) var(--bk-spacing-6) var(--bk-line-height-relaxed) grid var(--bk-spacing-5) var(--bk-color-background-secondary) 1px solid var(--bk-color-border) var(--bk-radius-lg) var(--bk-font-size-lg) var(--bk-spacing-3) flex center var(--bk-spacing-2) ,\n border: ,\n borderRadius: ,\n padding: ,\n fontWeight: ,\n marginBottom: ,\n display: ,\n alignItems: ,\n color: ,\n lineHeight: ,\n }}>\n Uses default fallback values for standalone web applications. This is the file you baukasten-ui/dist/baukasten-base.css #ffffff #f5f5f5 #1e1e1e #6b6b6b #e0e0e0 #007acc #252526 #cccccc #858585 #3e3e42 #0e639c repeat(auto-fit, minmax(280px, 1fr)) var(--bk-font-size-sm) ,\n }}>\n Professional dark theme matching VSCode var(--vscode-sideBar-background) 1px solid var(--vscode-panel-border) auto 1fr var(--bk-spacing-3) var(--bk-spacing-6) baukasten-ui #ff6b6b #ee5a52 column var(--bk-radius-md) var(--bk-color-success) 4px Learn how to customize and theme Baukasten components to match your application",
+ "path": "/guides/theming",
+ "category": "Guides",
+ "keywords": [
+ "guide",
+ "tutorial",
+ "howto",
+ "button",
+ "modal",
+ "form",
+ "alert",
+ "badge",
+ "icon",
+ "text"
+ ]
+ },
+ {
+ "id": "/guides/vscode",
+ "title": "Usage in VS Code",
+ "description": "Learn how to use Baukasten components in VS Code webview extensions.",
+ "content": ");\n\n\n return ( Baukasten is designed to work seamlessly with VS Code webviews, automatically using VS Code's native theme variables for consistent styling. Installation Install Baukasten in your VS Code extension project: Basic Setup In your webview React application, import the styles and components: Your VS Code extension is using Baukasten! Search Using CSS Files (Alternative) Instead of using GlobalStyles , you can import the pre-built CSS files: Usage in VS Code Learn how to use Baukasten components in VS Code webview extensions. info extensions npm install baukasten-ui react react-dom bash Welcome Type to search... primary tsx use client var(--bk-spacing-12) var(--bk-font-size-md) var(--bk-color-text-secondary) 0 0 var(--bk-spacing-4) 0 var(--bk-line-height-relaxed) var(--bk-spacing-8) ,\n padding: ,\n borderRadius:",
+ "path": "/guides/vscode",
+ "category": "Guides",
+ "keywords": [
+ "guide",
+ "tutorial",
+ "howto",
+ "button",
+ "input",
+ "alert",
+ "icon",
+ "text",
+ "heading",
+ "paragraph"
+ ]
+ },
+ {
+ "id": "/installation",
+ "title": "Installation",
+ "description": "Get started with Baukasten in your project.",
+ "content": ");\n\n\n return ( Prerequisites Before installing Baukasten, make sure you have the following installed: Node.js 18.0.0 or higher npm 9.0.0 or higher React 19.0.0 or higher Install the Package Install Baukasten and its peer dependencies using npm: CSS Files Baukasten provides pre-built CSS files for different platforms. Import the appropriate CSS files based on your target environment: File Description Use Case baukasten-base.css Component styles (vanilla-extract) Required for all platforms baukasten-vscode.css Uses --vscode-* CSS variables VS Code extensions baukasten-theia.css --theia-* Eclipse Theia applications baukasten-web.css Uses default fallback values Standalone web applications VSCode Extension Setup For VSCode webview extensions, import the base styles and the VSCode-specific CSS file: Hello VSCode The components will automatically use VSCode's native theme variables, adapting to light/dark themes. Eclipse Theia Setup For Eclipse Theia applications, use the Theia-specific CSS file: Hello Theia Standalone Web Application Setup For standalone web applications, use the web CSS file which includes sensible default values: Hello Web You can customize the theme by overriding the CSS variables. See the Theming Guide for details. Using with baukasten-ui-web-wrapper (Optional) For advanced theme management with pre-built theme presets and theme switching, you can optionally use the web wrapper package: This package provides VSCode-compatible themes that can be dynamically switched at runtime. Next.js Setup For Next.js applications, you may need to configure package transpilation in next.config.js.\n This tells Next.js to compile the packages through its build pipeline, which is needed because\n baukasten-ui is distributed as ESM and uses modern JavaScript features: Then import the CSS files in your root layout: Import Components Import individual components as needed: Click me New Using Design Tokens You can access the design token system for custom styling: Content Legacy: GlobalStyles Component The GlobalStyles component is deprecated. Please use the CSS file imports shown above instead. For legacy applications, you can still use the GlobalStyles component, but this approach is deprecated\n and will be removed in a future version: Hello Next Steps Installation Get started with Baukasten in your project. npm install baukasten-ui bash tsx /guides/theming npm install baukasten-ui-web-wrapper javascript Name warning use client var(--bk-padding-2xl) var(--bk-font-size-md) var(--bk-color-text-secondary) 0 0 var(--bk-padding-md) 0 var(--bk-line-height-relaxed) var(--bk-padding-md) 0 var(--bk-padding-xl) var(--bk-color-background-secondary) 1px solid var(--bk-color-border) var(--bk-radius-lg) var(--bk-spacing-6) 100% collapse var(--bk-font-size-sm) left var(--bk-spacing-2) var(--bk-spacing-4) var(--bk-font-weight-semibold) ,\n backgroundColor: ,\n borderRadius: ,\n color: var(--bk-color-link)",
+ "path": "/installation",
+ "category": "Getting Started",
+ "keywords": [
+ "install",
+ "setup",
+ "start",
+ "begin",
+ "button",
+ "input",
+ "form",
+ "table",
+ "list",
+ "alert",
+ "badge",
+ "icon",
+ "text",
+ "heading",
+ "paragraph"
+ ]
+ },
+ {
+ "id": "/",
+ "title": "Introduction",
+ "description": "",
+ "content": "Build Dense & Rich Domain-Specific Applications A comprehensive React component library designed for domain-specific applications.\n Powered by React, TypeScript, and vanilla-extract for modern, type-safe development. Seamless Integration Consistent look-and-feel with VS Code and Eclipse Theia out of the box Domain-Specific Tools Efficient & Performant components for complex data Application UI Focus Built for professional, data-intensive Desktop & Web Applications Get Started Components Storybook GitHub Install Import What is Baukasten? Baukasten (means construction kit in German) is a comprehensive React UI component library specifically designed for\n building domain-specific, data-intensive applications .\n It seamlessly integrates with VS Code and Theia when embedded, providing specialized components like high-performance tables and multi-column trees. Multi-target Building for VSCode, Theia, Web or Electron, Baukasten has the same, look, feel and customization capabilities across all platforms. VSCode & Theia Extensions Create powerful IDE extensions with components that seamlessly integrate with VSCode's native theming and design language Web Applications Deploy sophisticated web applications with professional-grade components designed for complex workflows and data visualization Baukasten design system is inspired by VSCode/Theia, to a offer a seamless UI integration within these platforms. But you can customize the theming to fit your own brand and style. Built for Professional Applications Every feature is designed to help you build production-ready applications faster ))} extensions database paintcan /installation primary rocket /components/accordion secondary library /storybook book https://github.com/typefox/baukasten _blank noopener noreferrer github terminal npm install baukasten-ui bash code typescript window globe info use client Button Input Label Badge Icon Menu ContextMenu Typography Table Slider symbol-color VS Code & Eclipse Theia Native s selected color theme, providing a consistent look-and-feel. High-Performance Data Components Specialized components for domain-specific applications: virtualized tables handling thousands of rows, multi-column trees, and advanced data grids optimized for complex data visualization. desktop-download Purpose-built for professional medium to large screen applications. Optimized for data-intensive workflows, complex interfaces, and rich user experiences such development tools, analytics platforms, and domain-specific software. symbol-keyword Design Tokens Built on a comprehensive design token system that ensures consistency and makes customization simple and predictable. json Type-Safe Written in TypeScript with comprehensive type definitions. Get full IntelliSense support and catch errors at compile time. zap Built for Speed Zero-runtime CSS-in-TypeScript with build-time extraction for optimal performance. Virtualization and efficient rendering strategies ensure smooth performance even with large datasets. center calc(var(--bk-spacing-12) * 1.5) var(--bk-spacing-8) var(--bk-spacing-12) calc(var(--bk-spacing-8) * -1) calc(var(--bk-spacing-8) * -1) var(--bk-spacing-12) linear-gradient(180deg, var(--vscode-editor-background) 0%, var(--vscode-sideBar-background) 100%) 0 0 var(--bk-radius-lg) var(--bk-radius-lg) 1px solid var(--vscode-panel-border) relative hidden absolute 50% translateX(-50%) 800px 400px radial-gradient(circle, var(--vscode-button-background) 0%, transparent 70%) none blur(60px) 900px 0 auto 0 0 var(--bk-spacing-6) 0 clamp(3rem, 6vw, 4.5rem) -0.03em 0 auto var(--bk-spacing-8) 700px calc(var(--vscode-font-size) * 1.1) var(--vscode-descriptionForeground) grid repeat(auto-fit, minmax(250px, 1fr)) var(--bk-spacing-4) left var(--bk-spacing-5) var(--vscode-editor-background) var(--bk-radius-md) 1px solid var(--vscode-button-background) 0 4px 12px rgba(0, 0, 0, 0.15) flex var(--bk-spacing-2) 24px var(--vscode-button-background) calc(var(--vscode-font-size) * 1.05) var(--vscode-foreground) calc(var(--vscode-font-size) * 0.95) wrap 1fr 1fr var(--bk-spacing-12) block var(--bk-spacing-3) var(--vscode-font-size) baukasten-ui var(--bk-spacing-10) var(--bk-spacing-8) var(--bk-radius-lg) 1000px var(--bk-spacing-8) calc(var(--vscode-font-size) * 2) calc(var(--vscode-font-size) * 1.15) repeat(auto-fit, minmax(280px, 1fr)) var(--bk-spacing-6) var(--vscode-sideBar-background) 32px var(--vscode-symbolIcon-classForeground) var(--vscode-symbolIcon-interfaceForeground) ,\n backgroundColor: ,\n borderRadius: ,\n border: , alignItems: , gap: , marginBottom: ,\n color: ,\n fontSize: ,\n backgroundColor: ,\n borderRadius: ,\n borderLeft: ,\n fontSize: , color: ,\n fontSize: ,\n maxWidth: ,\n margin: ,\n gridTemplateColumns: ,\n gap: ,\n marginBottom: ,\n border: ,\n borderRadius: ,\n padding: ,\n transition: ;\n e.currentTarget.style.borderColor = ,\n alignItems: ,\n gap: ,\n marginBottom: ,\n lineHeight: 1.7,\n margin: 0,\n fontSize: Seamlessly integrates with VS Code or Eclipse Theia\\",
+ "path": "/",
+ "category": "Getting Started",
+ "keywords": [
+ "install",
+ "setup",
+ "start",
+ "begin",
+ "button",
+ "input",
+ "form",
+ "table",
+ "menu",
+ "badge",
+ "icon",
+ "text",
+ "heading",
+ "paragraph"
+ ]
+ },
+ {
+ "id": "/quickstart",
+ "title": "Quick Start",
+ "description": "Get up and running with Baukasten in under 5 minutes.",
+ "content": ");\n\n\n return ( This guide will get you started quickly. For more detailed setup instructions and configuration options,\n check out the full installation guide Install Baukasten Install the package using npm, yarn, or pnpm: Choose Your Setup The setup depends on whether you're building a VSCode extension or a web application. VSCode Webview Extension For VSCode extensions, the components automatically use VSCode's native theme variables.\n Just add GlobalStyles and start using components: Your extension is now using Baukasten! Submit Web Application For web apps, you'll need the theme wrapper to simulate VSCode's theme system: Your web app is now using Baukasten! Get Started Understanding the Basics Automatic Theming All components automatically adapt to VSCode's theme. Whether your users prefer Dark+,\n Light+, or any custom theme, your UI will match perfectly. Design Tokens Use CSS variables like var(--bk-spacing-4) var(--bk-color-text) , and var(--bk-radius-md) for\n consistent styling. Check out the design foundations to\n see all available tokens. Tree-Shakeable Imports Import only what you need: .\n The bundler will automatically exclude unused components, keeping your bundle size small. Full TypeScript Support Every component is fully typed with comprehensive TypeScript definitions.\n Get IntelliSense, autocomplete, and type checking out of the box. Explore Components Now that you have Baukasten installed, explore the component library to see what's available: Components Browse 30+ production-ready components with live examples and props documentation. Design Foundations Learn about colors, typography, spacing, and effects in the design system. Full Installation Guide Detailed setup instructions for Next.js, React, Vite, and more. You now have everything you need to start building with Baukasten. Here are some tips to get the most out of the library: Use the component docs to explore all available props and variants Leverage design tokens (CSS variables) for consistent custom styling Check out the Storybook for interactive component examples Join the community to share feedback and get help Quick Start Get up and running with Baukasten in under 5 minutes. info lightbulb /installation npm install baukasten-ui bash extensions Welcome Name Enter your name primary tsx globe npm install baukasten-ui-web-wrapper success Ready to Go Email you@example.com symbol-color symbol-variable /foundations/colors package type-hierarchy /components/button symbol-method book check You're All Set! use client var(--bk-spacing-12) var(--bk-font-size-md) var(--bk-color-text-secondary) 0 0 var(--bk-spacing-4) 0 var(--bk-line-height-relaxed) inline-flex center 32px var(--vscode-button-background) var(--vscode-button-foreground) 50% var(--bk-font-size-sm) var(--bk-spacing-3) var(--bk-spacing-8) var(--vscode-textLink-foreground) underline flex ,\n display: ,\n alignItems: ,\n gap: ,\n }}>\n \n For VSCode extensions, the components automatically use VSCode baukasten-ui var(--bk-spacing-6) var(--bk-spacing-2) ll need the theme wrapper to simulate VSCode grid var(--vscode-sideBar-background) 1px solid var(--vscode-panel-border) flex-start 24px var(--vscode-symbolIcon-colorForeground) 2px 0 0 var(--bk-spacing-2) 0 ,\n border: ,\n borderRadius: ,\n padding: ,\n alignItems: ,\n gap: ,\n marginBottom: ,\n color: ,\n marginTop: ,\n padding: ,\n borderRadius: ,\n fontSize: , alignItems: , marginBottom: repeat(auto-fit, minmax(280px, 1fr)) none all 0.2s ease pointer 100% var(--vscode-focusBorder) translateY(-2px) var(--vscode-panel-border) translateY(0) var(--vscode-symbolIcon-methodForeground) var(--vscode-symbolIcon-namespaceForeground) , paddingLeft:",
+ "path": "/quickstart",
+ "category": "Getting Started",
+ "keywords": [
+ "install",
+ "setup",
+ "start",
+ "begin",
+ "button",
+ "input",
+ "form",
+ "alert",
+ "icon",
+ "text",
+ "heading",
+ "paragraph"
+ ]
+ },
+ {
+ "id": "/recipes/dashboard",
+ "title": "Dashboard Layouts",
+ "description": "Complete dashboard layouts ready to use in your applications. Each design showcases different sidebar styles, navigation patterns, and content areas.",
+ "content": "Dashboard Overview Analytics Data Settings John Doe john@example.com Welcome back! Here's what's happening today. Refresh New Item ))} Recent Activity 2h ago AppName Projects Team Reports Welcome back, User! Here's an overview of your projects and tasks. Recent Projects Updated 2h ago Active Quick Actions New Project Schedule Messages Notifications Just now Monitor your key metrics and performance Activity Overview Week Month Year Chart visualization area Dashboard Layout Recipes Complete dashboard layouts ready to use in your applications. Each design showcases different sidebar styles, navigation patterns, and content areas. Classic Sidebar Dashboard Traditional dashboard with a fixed sidebar navigation and main content area. Perfect for admin panels and management interfaces. dashboard home graph database gear chevron-right secondary sync primary add info Modern Dashboard with Top Navigation A contemporary dashboard layout with top navigation bar, perfect for modern web applications. rocket horizontal text Search... ghost bell User Name folder block calendar mail User Minimal Dashboard A clean, minimal dashboard with floating cards and subtle backgrounds. Great for analytics and monitoring interfaces. filter kebab-vertical use client 600px flex var(--bk-color-background) 240px var(--bk-color-background-secondary) 1px solid var(--bk-color-border) column var(--bk-spacing-5) center var(--bk-spacing-3) 32px linear-gradient(135deg, var(--bk-color-primary) 0%, var(--bk-color-primary-hover) 100%) var(--bk-radius-md) var(--bk-color-primary-foreground) 18px var(--bk-spacing-4) auto var(--bk-spacing-2) pointer background-color 0.15s ease var(--bk-color-hover) transparent var(--bk-font-size-sm) var(--bk-font-size-xs) var(--bk-color-foreground-muted) 12px hidden space-between var(--bk-spacing-1) s what var(--bk-spacing-6) grid repeat(auto-fit, minmax(200px, 1fr)) Total Users 2,543 account +12% Revenue $45.2K +23% Active Sessions 127 pulse -5% Conversions 892 star +8% flex-start 20px success error calc(var(--bk-font-size-base) * 1.75) var(--bk-radius-sm) baukasten-ui 100vh 24px 64px 0 var(--bk-spacing-6) 36px 200px 1fr 300px ,\n gridTemplateColumns: ,\n gap: ,\n marginBottom: , value: , icon: ,\n backgroundColor: ,\n border: ,\n borderRadius: , color: , marginBottom: , fontSize: ,\n backgroundColor: ,\n border: ,\n borderRadius: , flexDirection: , gap: ,\n alignItems: ,\n justifyContent: ,\n padding: , alignItems: ,\n backgroundColor: ,\n borderLeft: ,\n overflowY: ,\n borderRadius: ,\n backgroundColor: , display: ,\n backgroundColor: ,\n borderBottom: ,\n display: ,\n alignItems: ,\n padding: ,\n gap: , gridTemplateColumns: ,\n backgroundColor: ,\n borderLeft: ,\n padding: ,\n backgroundColor: , justifyContent: ,\n gridTemplateColumns: ,\n gap: ,\n marginBottom: , trend: ,\n backgroundColor: ,\n border: ,\n borderRadius: ,\n color: metric.trend.startsWith( ) ? , fontWeight: 700, marginBottom: ,\n backgroundColor: ,\n border: ,\n borderRadius: ,\n display: ,\n alignItems: ,\n justifyContent: ,\n borderRadius: ,\n border: , padding: ,\n gridTemplateColumns: ,\n backgroundColor: ,\n borderRadius: , marginTop:",
+ "path": "/recipes/dashboard",
+ "category": "Recipes",
+ "keywords": [
+ "example",
+ "template",
+ "pattern",
+ "button",
+ "input",
+ "form",
+ "list",
+ "menu",
+ "notification",
+ "badge",
+ "icon",
+ "text",
+ "heading"
+ ]
+ },
+ {
+ "id": "/recipes/login",
+ "title": "Login Pages",
+ "description": "Complete login page examples ready to use in your applications. Each design showcases different layouts and patterns.",
+ "content": "Welcome Back Sign in to your account Email Password Remember me Forgot password? Sign In Don't have an account? Sign up Baukasten Build beautiful applications with Baukasten UI Enter your credentials to continue Continue Sign in with GitHub Build beautiful applications Baukasten UI Cancel Login Page Recipes Complete login page examples ready to use in your applications. Each design showcases different layouts and patterns. Simple Centered Login A clean, centered login form with email and password fields. Perfect for minimalist applications. account email you@example.com password •••••••• checkbox link primary block Split Screen Login A modern split-screen design with branding on one side and login form on the other. Great for marketing-focused applications. rocket Email address secondary github Compact Login Card A minimal, compact login form perfect for modals or embedded authentication. use client 500px flex center var(--bk-color-background) var(--bk-spacing-8) 100% 400px var(--bk-color-background-secondary) 1px solid var(--bk-color-border) var(--bk-radius-lg) var(--bk-spacing-6) 56px 0 auto var(--bk-spacing-4) linear-gradient(135deg, var(--bk-color-primary) 0%, var(--bk-color-primary-hover) 100%) var(--bk-color-primary-foreground) 28px var(--bk-spacing-2) var(--bk-color-foreground-muted) column var(--bk-spacing-4) space-between var(--bk-font-size-sm) );\n const [password, setPassword] = useState( ,\n display: ,\n alignItems: ,\n justifyContent: ,\n backgroundColor: ,\n padding: ,\n maxWidth: ,\n padding: ,\n backgroundColor: ,\n border: ,\n borderRadius: , marginBottom: ,\n height: ,\n margin: ,\n background: ,\n borderRadius: ,\n display: ,\n alignItems: ,\n justifyContent: , fontSize: , textAlign: , flexDirection: , gap: , alignItems: , justifyContent: , color: }}>\n Don grid 1fr 1fr 80px rgba(255, 255, 255, 0.2) 40px var(--bk-spacing-3) inherit 300px 0 auto relative var(--bk-spacing-4) 0 absolute 50% translate(-50%, -50%) 0 var(--bk-spacing-3) baukasten-ui 100vh 350px var(--bk-radius-md)",
+ "path": "/recipes/login",
+ "category": "Recipes",
+ "keywords": [
+ "example",
+ "template",
+ "pattern",
+ "button",
+ "input",
+ "modal",
+ "form",
+ "list",
+ "icon",
+ "text",
+ "heading"
+ ]
+ }
+]
\ No newline at end of file
diff --git a/packages/website/scripts/build-search-index.ts b/packages/website/scripts/build-search-index.ts
new file mode 100644
index 0000000..78874ea
--- /dev/null
+++ b/packages/website/scripts/build-search-index.ts
@@ -0,0 +1,239 @@
+import * as fs from 'fs';
+import * as path from 'path';
+
+interface SearchDocument {
+ id: string;
+ title: string;
+ description: string;
+ content: string;
+ path: string;
+ category: string;
+ keywords: string[];
+}
+
+// Helper to extract text content from JSX strings (simplified parsing)
+function extractTextFromJSX(content: string): string {
+ // Remove imports and type definitions
+ content = content.replace(/^import\s+.*$/gm, '');
+ content = content.replace(/^export\s+.*$/gm, '');
+
+ // Extract string literals from JSX
+ const strings: string[] = [];
+
+ // Match string content in JSX attributes and text nodes
+ const patterns = [
+ // JSX text content like Text Here
+ />([^<>]+) {
+ let match;
+ while ((match = pattern.exec(content)) !== null) {
+ const text = match[1]?.trim();
+ if (text && text.length > 2 && !text.includes('{') && !text.includes('=>')) {
+ strings.push(text);
+ }
+ }
+ });
+
+ // Also look for title and description props
+ const titleMatch = content.match(/title[=:]\s*["'`]([^"'`]+)["'`]/);
+ const descMatch = content.match(/description[=:]\s*["'`]([^"'`]+)["'`]/);
+
+ if (titleMatch) strings.push(titleMatch[1]);
+ if (descMatch) strings.push(descMatch[1]);
+
+ // Extract prop descriptions
+ const propDescMatches = content.matchAll(/description:\s*['"`]([^'"`]+)['"`]/g);
+ for (const match of propDescMatches) {
+ strings.push(match[1]);
+ }
+
+ return [...new Set(strings)].join(' ');
+}
+
+// Get category from path
+function getCategoryFromPath(filePath: string): string {
+ if (filePath.includes('/components/')) return 'Components';
+ if (filePath.includes('/foundations/')) return 'Foundations';
+ if (filePath.includes('/guides/')) return 'Guides';
+ if (filePath.includes('/recipes/')) return 'Recipes';
+ if (filePath.includes('/installation')) return 'Getting Started';
+ if (filePath.includes('/quickstart')) return 'Getting Started';
+ return 'Getting Started';
+}
+
+// Get title from path
+function getTitleFromPath(filePath: string): string {
+ const lastSegment = path.basename(path.dirname(filePath)); // page.tsx's parent folder
+
+ if (lastSegment === 'app') return 'Introduction';
+
+ // Capitalize and handle special cases
+ const titleMap: Record = {
+ 'accordion': 'Accordion',
+ 'alert': 'Alert',
+ 'avatar': 'Avatar',
+ 'badge': 'Badge',
+ 'breadcrumbs': 'Breadcrumbs',
+ 'button': 'Button',
+ 'buttongroup': 'ButtonGroup',
+ 'checkbox': 'Checkbox',
+ 'contextmenu': 'ContextMenu',
+ 'datatable': 'DataTable',
+ 'divider': 'Divider',
+ 'dropdown': 'Dropdown',
+ 'fileupload': 'FileUpload',
+ 'forms': 'Forms',
+ 'hero': 'Hero',
+ 'icon': 'Icon',
+ 'input': 'Input',
+ 'label': 'Label',
+ 'menu': 'Menu',
+ 'modal': 'Modal',
+ 'pagination': 'Pagination',
+ 'progressbar': 'ProgressBar',
+ 'radio': 'Radio',
+ 'select': 'Select',
+ 'slider': 'Slider',
+ 'spinner': 'Spinner',
+ 'splitpane': 'SplitPane',
+ 'statusbar': 'StatusBar',
+ 'table': 'Table',
+ 'tabs': 'Tabs',
+ 'textarea': 'TextArea',
+ 'tooltip': 'Tooltip',
+ 'typography': 'Typography',
+ 'colors': 'Colors',
+ 'spacing': 'Spacing',
+ 'effects': 'Effects',
+ 'theming': 'Theming',
+ 'vscode': 'Usage in VS Code',
+ 'theia': 'Usage in Eclipse Theia',
+ 'login': 'Login Pages',
+ 'dashboard': 'Dashboard Layouts',
+ 'installation': 'Installation',
+ 'quickstart': 'Quick Start',
+ };
+
+ return titleMap[lastSegment] || lastSegment.charAt(0).toUpperCase() + lastSegment.slice(1);
+}
+
+// Get URL path from file path
+function getUrlPath(filePath: string): string {
+ // Remove 'src/app' prefix and 'page.tsx' suffix
+ let urlPath = filePath
+ .replace(/^.*src\/app/, '')
+ .replace(/\/page\.tsx$/, '');
+
+ if (!urlPath || urlPath === '') return '/';
+ return urlPath;
+}
+
+// Extract keywords from content
+function extractKeywords(content: string, category: string): string[] {
+ const keywords: string[] = [];
+
+ // Common keywords by category
+ const categoryKeywords: Record = {
+ 'Components': ['react', 'component', 'ui', 'widget'],
+ 'Foundations': ['design', 'tokens', 'system'],
+ 'Guides': ['guide', 'tutorial', 'howto'],
+ 'Recipes': ['example', 'template', 'pattern'],
+ 'Getting Started': ['install', 'setup', 'start', 'begin'],
+ };
+
+ keywords.push(...(categoryKeywords[category] || []));
+
+ // Extract prop names as keywords
+ const propMatches = content.matchAll(/name:\s*['"`](\w+)['"`]/g);
+ for (const match of propMatches) {
+ keywords.push(match[1].toLowerCase());
+ }
+
+ // Extract common terms
+ const commonTerms = ['button', 'input', 'modal', 'form', 'table', 'list', 'menu', 'dialog', 'alert', 'notification', 'badge', 'icon', 'text', 'heading', 'paragraph'];
+ for (const term of commonTerms) {
+ if (content.toLowerCase().includes(term)) {
+ keywords.push(term);
+ }
+ }
+
+ return [...new Set(keywords)];
+}
+
+// Main function to build the search index
+async function buildSearchIndex() {
+ const appDir = path.join(__dirname, '../src/app');
+ const documents: SearchDocument[] = [];
+
+ // Recursively find all page.tsx files
+ function findPages(dir: string): string[] {
+ const files: string[] = [];
+ const entries = fs.readdirSync(dir, { withFileTypes: true });
+
+ for (const entry of entries) {
+ const fullPath = path.join(dir, entry.name);
+ if (entry.isDirectory()) {
+ files.push(...findPages(fullPath));
+ } else if (entry.name === 'page.tsx') {
+ files.push(fullPath);
+ }
+ }
+
+ return files;
+ }
+
+ const pageFiles = findPages(appDir);
+
+ for (const filePath of pageFiles) {
+ const content = fs.readFileSync(filePath, 'utf-8');
+ const urlPath = getUrlPath(filePath);
+ const category = getCategoryFromPath(filePath);
+ const title = getTitleFromPath(filePath);
+
+ // Try to extract description from PageLayout component specifically
+ // Look for ]*\s+description\s*=\s*["'`]([^"'`]+)["'`]/);
+ const description = pageLayoutDescMatch ? pageLayoutDescMatch[1] : '';
+
+ // Extract text content
+ const textContent = extractTextFromJSX(content);
+
+ // Extract keywords
+ const keywords = extractKeywords(content, category);
+
+ const doc: SearchDocument = {
+ id: urlPath || 'home',
+ title,
+ description,
+ content: textContent,
+ path: urlPath || '/',
+ category,
+ keywords,
+ };
+
+ documents.push(doc);
+ }
+
+ // Write the index to a JSON file
+ const outputPath = path.join(__dirname, '../public/search-index.json');
+
+ // Ensure public directory exists
+ const publicDir = path.dirname(outputPath);
+ if (!fs.existsSync(publicDir)) {
+ fs.mkdirSync(publicDir, { recursive: true });
+ }
+
+ fs.writeFileSync(outputPath, JSON.stringify(documents, null, 2));
+
+ console.log(`Search index built with ${documents.length} documents`);
+ console.log(`Output: ${outputPath}`);
+}
+
+buildSearchIndex().catch(console.error);
diff --git a/packages/website/src/components/Navigation.tsx b/packages/website/src/components/Navigation.tsx
index 1b724f9..1dfb239 100644
--- a/packages/website/src/components/Navigation.tsx
+++ b/packages/website/src/components/Navigation.tsx
@@ -1,9 +1,11 @@
'use client';
+import { useState, useEffect } from 'react';
import { usePathname } from 'next/navigation';
import Link from 'next/link';
-import { Menu, MenuItem, Icon, Badge, Heading, Text, Paragraph } from 'baukasten-ui';
+import { Menu, MenuItem, Icon, Badge, Heading, Text, Paragraph, Button } from 'baukasten-ui';
import ThemePicker from './ThemePicker';
+import SearchModal from './SearchModal';
const components = [
{ name: 'Accordion', path: '/components/accordion' },
@@ -67,9 +69,24 @@ const gettingStarted = [
export default function Navigation() {
const pathname = usePathname();
+ const [searchOpen, setSearchOpen] = useState(false);
+
+ // Handle Cmd/Ctrl + K keyboard shortcut
+ useEffect(() => {
+ const handleKeyDown = (e: KeyboardEvent) => {
+ if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+ e.preventDefault();
+ setSearchOpen(true);
+ }
+ };
+
+ document.addEventListener('keydown', handleKeyDown);
+ return () => document.removeEventListener('keydown', handleKeyDown);
+ }, []);
return (
<>
+ setSearchOpen(false)} />