@westopp/windo 0.1.0 → 0.1.1

package/src/client/Canvas.tsx

@@ -156,7 +156,7 @@ function ResizeHandle({
   }
 
   // biome-ignore lint/a11y/noStaticElementInteractions: drag handle is pointer-only by design
-  return <div className={`wb-handle${dragging ? ' dragging' : ''}`} title="Drag to resize width — double-click to fill" onDoubleClick={onReset} onPointerDown={onPointerDown} />
+  return <div className={`wb-handle${dragging ? ' dragging' : ''}`} title="Drag to resize width — double-click to toggle fill / mobile" onDoubleClick={onReset} onPointerDown={onPointerDown} />
 }
 
 function HeightHandle({ height, setHeight, zoom, onReset }: { height: number; setHeight: (h: number) => void; zoom: number; onReset: () => void }) {
@@ -296,6 +296,11 @@ export function Canvas(props: CanvasProps) {
   const mode = theme === 'dark' ? grid.dark : grid.light
   const bp = breakpointFor(clamped)
 
+  // Double-clicking a width handle fills the stage; if already filled, it drops
+  // to the mobile preset so the gesture toggles between the two extremes.
+  const mobileWidth = PRESETS.find(p => p.id === 'mobile')?.width ?? MIN_WIDTH
+  const toggleFillWidth = () => setWidth(clamped >= maxWidth - 2 ? Math.min(mobileWidth, maxWidth) : maxWidth)
+
   const gridClass = grid.on ? (grid.style === 'lines' ? ' grid-lines' : ' grid-dots') : ''
 
   const frameStyle = {
@@ -327,7 +332,7 @@ export function Canvas(props: CanvasProps) {
         <div className="wb-zoomwrap" style={{ transform: `scale(${zoom})` }}>
           <div className="wb-frame-col">
             <div className="wb-frame-row">
-              <ResizeHandle side="left" width={clamped} setWidth={setWidth} maxWidth={maxWidth} zoom={zoom} onReset={() => setWidth(maxWidth)} />
+              <ResizeHandle side="left" width={clamped} setWidth={setWidth} maxWidth={maxWidth} zoom={zoom} onReset={toggleFillWidth} />
               <div className="wb-framewrap">
                 <span className="wb-corner tl" />
                 <span className="wb-corner tr" />
@@ -344,7 +349,7 @@ export function Canvas(props: CanvasProps) {
                   </div>
                 </div>
               </div>
-              <ResizeHandle side="right" width={clamped} setWidth={setWidth} maxWidth={maxWidth} zoom={zoom} onReset={() => setWidth(maxWidth)} />
+              <ResizeHandle side="right" width={clamped} setWidth={setWidth} maxWidth={maxWidth} zoom={zoom} onReset={toggleFillWidth} />
             </div>
             <HeightHandle height={frameH} setHeight={setHeight} zoom={zoom} onReset={() => setHeight(null)} />
             <div className="wb-dim-readout">

package/src/client/Sidebar.tsx

@@ -1,10 +1,12 @@
 // Sidebar / library nav. Groups come from config (ordered); entries are placed
 // under the group whose slug matches entry.group. Collapsed groups persist to
 // localStorage under windo:navgroups; an active search query forces all open.
+// The tag filter (when tags are configured) narrows entries before grouping.
 
 import { useState } from 'react'
 import { Icons } from './icons'
 import type { SidebarProps } from './internal-types'
+import { TagFilter } from './TagFilter'
 
 const STORAGE_KEY = 'windo:navgroups'
 
@@ -27,7 +29,7 @@ function GroupChevron() {
 }
 
 export function Sidebar(props: SidebarProps) {
-  const { groups, manifest, selected, onSelect, query, setQuery, collapsed, onToggle } = props
+  const { groups, tags, manifest, selected, onSelect, query, setQuery, selectedTags, setSelectedTags, tagMatch, setTagMatch, collapsed, onToggle } = props
   const [closedGroups, setClosedGroups] = useState(loadClosedGroups)
 
   function toggleGroup(slug: string) {
@@ -60,7 +62,14 @@ export function Sidebar(props: SidebarProps) {
 
   const q = query.trim().toLowerCase()
   const groupName = (slug: string) => groups.find(g => g.slug === slug)?.name ?? slug
-  const filtered = manifest.filter(e => !q || e.title.toLowerCase().includes(q) || groupName(e.group).toLowerCase().includes(q))
+  // Drop any persisted tags no longer declared in config so a stale selection
+  // can't silently filter everything out.
+  const activeTags = selectedTags.filter(t => tags.includes(t))
+  const matchesTags = (entryTags: string[]) => {
+    if (!activeTags.length) return true
+    return tagMatch === 'all' ? activeTags.every(t => entryTags.includes(t)) : activeTags.some(t => entryTags.includes(t))
+  }
+  const filtered = manifest.filter(e => matchesTags(e.tags) && (!q || e.title.toLowerCase().includes(q) || groupName(e.group).toLowerCase().includes(q)))
 
   return (
     <aside className="wb-sidebar">
@@ -73,6 +82,7 @@ export function Sidebar(props: SidebarProps) {
           {Icons.chevsLeft}
         </button>
       </div>
+      <TagFilter tags={tags} selected={activeTags} setSelected={setSelectedTags} match={tagMatch} setMatch={setTagMatch} />
       <nav className="wb-nav">
         {groups.map(group => {
           const items = filtered.filter(e => e.group === group.slug)
@@ -101,7 +111,7 @@ export function Sidebar(props: SidebarProps) {
             </div>
           )
         })}
-        {!filtered.length && <div className="wb-nav-empty">No components match “{query}”</div>}
+        {!filtered.length && <div className="wb-nav-empty">{q ? <>No components match “{query}”</> : 'No components match the selected tags'}</div>}
       </nav>
     </aside>
   )

package/src/client/TagFilter.tsx

@@ -0,0 +1,125 @@
+// Tag filter — a multi-select dropdown over the config-declared tag set. Checked
+// tags narrow the sidebar to the components carrying them; the Any/All toggle
+// switches between union (any) and intersection (all). No selection = no filter
+// ("All components"). Renders nothing when the project declares no tags.
+
+import { useEffect, useRef, useState } from 'react'
+import type { TagMatch } from './internal-types'
+
+interface TagFilterProps {
+  /** Declared tag set — the available options. */
+  tags: string[]
+  /** Currently-checked tags. */
+  selected: string[]
+  setSelected: (next: string[]) => void
+  match: TagMatch
+  setMatch: (m: TagMatch) => void
+}
+
+function Check() {
+  return (
+    <svg aria-hidden="true" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="3.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M20 6 9 17l-5-5" />
+    </svg>
+  )
+}
+
+function Chevron() {
+  return (
+    <svg aria-hidden="true" className="chev" width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round">
+      <path d="m6 9 6 6 6-6" />
+    </svg>
+  )
+}
+
+export function TagFilter({ tags, selected, setSelected, match, setMatch }: TagFilterProps) {
+  const [open, setOpen] = useState(false)
+  const rootRef = useRef<HTMLDivElement | null>(null)
+
+  // Close on outside click / Escape while the menu is open.
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  if (!tags.length) return null
+
+  const has = selected.length > 0
+
+  function toggle(tag: string) {
+    setSelected(selected.includes(tag) ? selected.filter(t => t !== tag) : [...selected, tag])
+  }
+
+  return (
+    <div className="wb-tagfilter" ref={rootRef}>
+      <div className={`wb-tagfilter-control${open ? ' open' : ''}`}>
+        {has ? (
+          <>
+            <div className="wb-tagfilter-pills">
+              {selected.map(tag => (
+                <span key={tag} className="wb-tag-pill">
+                  {tag}
+                  <button type="button" className="x" aria-label={`Remove ${tag}`} title={`Remove ${tag}`} onClick={() => setSelected(selected.filter(t => t !== tag))}>
+                    ×
+                  </button>
+                </span>
+              ))}
+            </div>
+            <button type="button" className="wb-tagfilter-chev" aria-expanded={open} aria-label="Filter by tag" onClick={() => setOpen(o => !o)}>
+              <Chevron />
+            </button>
+          </>
+        ) : (
+          <button type="button" className="wb-tagfilter-toggle" aria-expanded={open} aria-label="Filter by tag" onClick={() => setOpen(o => !o)}>
+            <span className="wb-tagfilter-placeholder">Filter by tag…</span>
+            <Chevron />
+          </button>
+        )}
+      </div>
+
+      {open && (
+        <div className="wb-tagfilter-menu">
+          <button type="button" className="wb-tag-option" aria-pressed={!has} onClick={() => setSelected([])}>
+            <span className={`wb-check${has ? '' : ' checked'}`}>{has ? null : <Check />}</span>
+            <span className="lbl">All components</span>
+          </button>
+          <div className="wb-tag-divider" />
+          {tags.map(tag => {
+            const on = selected.includes(tag)
+            return (
+              <button type="button" key={tag} className="wb-tag-option" aria-pressed={on} onClick={() => toggle(tag)}>
+                <span className={`wb-check${on ? ' checked' : ''}`}>{on && <Check />}</span>
+                <span className="lbl">{tag}</span>
+              </button>
+            )
+          })}
+        </div>
+      )}
+
+      {has && (
+        <div className="wb-tagmatch">
+          <span className="wb-tagmatch-label">Match</span>
+          <div className="wb-tagmatch-seg">
+            <button type="button" aria-pressed={match === 'any'} className={match === 'any' ? 'on' : ''} onClick={() => setMatch('any')}>
+              Any
+            </button>
+            <button type="button" aria-pressed={match === 'all'} className={match === 'all' ? 'on' : ''} onClick={() => setMatch('all')}>
+              All
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/bridge.ts

@@ -16,6 +16,7 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
   const [readyNonce, setReadyNonce] = useState(0)
   const [title, setTitle] = useState('')
   const [groups, setGroups] = useState<WindoGroup[]>([])
+  const [tags, setTags] = useState<string[]>([])
   const [contexts, setContexts] = useState<WindoContextMeta[]>([])
   const [manifest, setManifest] = useState<WindoManifestEntry[]>([])
   const [describe, setDescribe] = useState<WindoDescribe | null>(null)
@@ -51,6 +52,7 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
         setTitle(msg.title)
         setManifest(msg.entries)
         setGroups(msg.groups)
+        setTags(msg.tags)
         setContexts(msg.contexts)
         break
       case 'describe':
@@ -107,6 +109,7 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
     readyNonce,
     title,
     groups,
+    tags,
     contexts,
     manifest,
     describe,

package/src/client/chrome.css

@@ -138,13 +138,8 @@ button {
 .wb-logo-mark {
   width: 22px;
   height: 22px;
-  border-radius: 6px;
-  background: var(--text);
-  color: var(--panel);
-  display: grid;
-  place-items: center;
-  font-size: 10.5px;
-  font-weight: 700;
+  flex-shrink: 0;
+  display: block;
 }
 
 .wb-logo-sub {
@@ -289,6 +284,251 @@ button {
   box-shadow: 0 0 0 3px var(--accent-soft);
 }
 
+/* ---------- Tag filter ---------- */
+
+.wb-tagfilter {
+  position: relative;
+  margin: 0 12px 2px 12px;
+}
+
+.wb-tagfilter-control {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  width: 100%;
+  min-height: 32px;
+  padding: 4px 8px 4px 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: var(--panel2);
+  transition:
+    border-color 0.12s,
+    box-shadow 0.12s;
+}
+
+.wb-tagfilter-control:hover {
+  border-color: var(--border-strong);
+}
+
+.wb-tagfilter-control.open {
+  border-color: var(--border-strong);
+  box-shadow: 0 0 0 3px var(--accent-soft);
+}
+
+.wb-tagfilter-toggle {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 6px;
+  min-width: 0;
+  align-self: stretch;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+
+.wb-tagfilter-placeholder {
+  flex: 1;
+  color: var(--faint);
+}
+
+.wb-tagfilter-pills {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 5px;
+}
+
+.wb-tagfilter-chev {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  padding: 0 2px;
+  border: none;
+  background: transparent;
+  color: var(--faint);
+  cursor: pointer;
+}
+
+.wb-tag-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 4px 3px 9px;
+  border-radius: 999px;
+  background: var(--accent);
+  color: var(--accent-text);
+  font-size: 11.5px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+[data-theme="dark"] .wb-tag-pill {
+  background: var(--accent-ui);
+  color: #111113;
+}
+
+.wb-tag-pill .x {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1;
+  opacity: 0.6;
+  cursor: pointer;
+  transition:
+    opacity 0.1s,
+    background 0.1s;
+}
+
+.wb-tag-pill .x:hover {
+  opacity: 1;
+  background: color-mix(in srgb, currentColor 22%, transparent);
+}
+
+.wb-tagfilter-control .chev {
+  flex-shrink: 0;
+  color: var(--faint);
+  transition: transform 0.15s;
+}
+
+.wb-tagfilter-control.open .chev {
+  transform: rotate(180deg);
+}
+
+.wb-tagfilter-menu {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  padding: 5px;
+  border: 1px solid var(--border);
+  border-radius: var(--r);
+  background: var(--panel);
+  box-shadow: var(--shadow);
+  max-height: 280px;
+  overflow-y: auto;
+}
+
+.wb-tag-option {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 7px 8px;
+  border: none;
+  border-radius: var(--r);
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.1s;
+}
+
+.wb-tag-option:hover {
+  background: var(--inset);
+}
+
+.wb-tag-option .lbl {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.wb-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
+  flex-shrink: 0;
+  border: 1.5px solid var(--border-strong);
+  border-radius: 5px;
+  background: var(--panel2);
+  color: var(--accent-text);
+}
+
+.wb-check.checked {
+  background: var(--accent);
+  border-color: var(--accent);
+}
+
+[data-theme="dark"] .wb-check.checked {
+  background: var(--accent-ui);
+  border-color: var(--accent-ui);
+  color: #111113;
+}
+
+.wb-tag-divider {
+  height: 1px;
+  margin: 5px 4px;
+  background: var(--border);
+}
+
+.wb-tagmatch {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin: 8px 2px 0 2px;
+}
+
+.wb-tagmatch-label {
+  font-size: 10.5px;
+  font-weight: 600;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--faint);
+}
+
+.wb-tagmatch-seg {
+  display: inline-flex;
+  padding: 2px;
+  border-radius: 999px;
+  background: var(--inset);
+}
+
+.wb-tagmatch-seg button {
+  border: none;
+  background: transparent;
+  color: var(--muted);
+  font: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 4px 14px;
+  border-radius: 999px;
+  cursor: pointer;
+  transition:
+    background 0.12s,
+    color 0.12s,
+    box-shadow 0.12s;
+}
+
+.wb-tagmatch-seg button.on {
+  background: var(--panel);
+  color: var(--text);
+  box-shadow: 0 1px 2px rgba(16, 16, 18, 0.08);
+}
+
 .wb-nav {
   flex: 1;
   overflow-y: auto;

package/src/client/internal-types.ts

@@ -31,6 +31,8 @@ export interface BridgeApi {
   readyNonce: number
   title: string
   groups: WindoGroup[]
+  /** The config's declared tag set (filter options for the sidebar). */
+  tags: string[]
   contexts: WindoContextMeta[]
   manifest: WindoManifestEntry[]
   /** describe payload for the most recently selected id (null until it arrives). */
@@ -52,6 +54,9 @@ export interface BridgeApi {
 
 export type InspectorPosition = 'right' | 'bottom'
 
+/** How the sidebar's tag filter combines multiple selected tags. */
+export type TagMatch = 'any' | 'all'
+
 export type ThemeMode = 'light' | 'dark'
 
 /** Cosmetic canvas chrome (drawn behind a transparent iframe), persisted to localStorage. */
@@ -85,11 +90,18 @@ export interface ChromeEnv {
 
 export interface SidebarProps {
   groups: WindoGroup[]
+  /** Declared tag set — the filter's options. */
+  tags: string[]
   manifest: WindoManifestEntry[]
   selected: string | null
   onSelect: (id: string) => void
   query: string
   setQuery: (q: string) => void
+  /** Currently-checked tag filters. Empty = no filter. */
+  selectedTags: string[]
+  setSelectedTags: (next: string[]) => void
+  tagMatch: TagMatch
+  setTagMatch: (m: TagMatch) => void
   collapsed: boolean
   onToggle: () => void
 }

package/src/define-config.ts

@@ -6,18 +6,22 @@ import type { ComponentType, ReactNode } from 'react'
 import type { z } from 'zod'
 import type { WindoConfig, WindoContextDefinition, WindoContextMap, WindoControlMap, WindoControlValues, WindoDefinition, WindoFactoryArg, WindoGroup, WindoModule, WindoRenderContext } from './types'
 
-export interface DefineWindoConfigResult<Groups extends readonly WindoGroup[], Contexts extends WindoContextMap> {
-  config: WindoConfig<Groups, Contexts>
-  windo: <Props, State = Record<string, never>>(factory: (w: WindoFactoryArg<Groups, Contexts>) => WindoDefinition<Props, State, Groups[number]['slug']>) => WindoModule<Props, State>
+export interface DefineWindoConfigResult<Groups extends readonly WindoGroup[], Tags extends readonly string[], Contexts extends WindoContextMap> {
+  config: WindoConfig<Groups, Contexts, Tags>
+  windo: <Props, State = Record<string, never>>(
+    factory: (w: WindoFactoryArg<Groups, Contexts, Tags>) => WindoDefinition<Props, State, Groups[number]['slug'], Tags[number]>
+  ) => WindoModule<Props, State>
 }
 
-export function defineWindoConfig<const Groups extends readonly WindoGroup[], Contexts extends WindoContextMap = Record<string, never>>(
-  config: WindoConfig<Groups, Contexts>
-): DefineWindoConfigResult<Groups, Contexts> {
-  function windo<Props, State = Record<string, never>>(factory: (w: WindoFactoryArg<Groups, Contexts>) => WindoDefinition<Props, State, Groups[number]['slug']>): WindoModule<Props, State> {
+export function defineWindoConfig<const Groups extends readonly WindoGroup[], const Tags extends readonly string[] = readonly [], Contexts extends WindoContextMap = Record<string, never>>(
+  config: WindoConfig<Groups, Contexts, Tags>
+): DefineWindoConfigResult<Groups, Tags, Contexts> {
+  function windo<Props, State = Record<string, never>>(
+    factory: (w: WindoFactoryArg<Groups, Contexts, Tags>) => WindoDefinition<Props, State, Groups[number]['slug'], Tags[number]>
+  ): WindoModule<Props, State> {
     return {
       __windo: true,
-      resolve: w => factory(w as unknown as WindoFactoryArg<Groups, Contexts>),
+      resolve: w => factory(w as unknown as WindoFactoryArg<Groups, Contexts, Tags>),
     }
   }
   return { config, windo }

package/src/preview/index.ts

@@ -21,6 +21,7 @@ const contexts = config.contexts ?? {}
 const w: WindoFactoryArg<readonly WindoGroup[], WindoContextMap> = {
   groups: Object.fromEntries(config.groups.map(g => [g.slug, g])) as Record<string, WindoGroup>,
   contexts,
+  tags: config.tags ? [...config.tags] : [],
 }
 
 interface ResolvedWindo {
@@ -110,6 +111,7 @@ function manifestEntry(id: string, def: WindoDefinition): WindoManifestEntry {
     id,
     title: def.title,
     group: def.group,
+    tags: def.tags ?? [],
     status: def.status ?? 'stable',
     placement: def.placement ?? 'center',
     uses: def.uses ?? [],
@@ -145,6 +147,7 @@ function postManifest() {
     title: config.title ?? 'windo',
     entries,
     groups: [...config.groups],
+    tags: config.tags ? [...config.tags] : [],
     contexts: buildContextMeta(contexts),
   })
 }

package/src/protocol.ts

@@ -25,6 +25,7 @@ export type WindoPreviewMessage =
       title: string
       entries: WindoManifestEntry[]
       groups: WindoGroup[]
+      tags: string[]
       contexts: WindoContextMeta[]
     }
   | {

package/src/types.ts

@@ -161,9 +161,11 @@ export type WindoDefaultProps<Props, State = unknown> = Props | ((ctx: WindoRend
  * `actions`, `providers`, `component` — runs at render-time with the live `ctx`.
  * Never close over live values in the static factory body.
  */
-export interface WindoDefinition<Props = unknown, State = unknown, GroupSlug extends string = string> {
+export interface WindoDefinition<Props = unknown, State = unknown, GroupSlug extends string = string, Tag extends string = string> {
   title: string
   group: GroupSlug
+  /** Tags this component carries. Each must be one of the config's declared `tags`. Drives the sidebar's tag filter. */
+  tags?: Tag[]
   status?: WindoStatus
   description?: string
   deprecation?: string
@@ -189,10 +191,12 @@ export interface WindoDefinition<Props = unknown, State = unknown, GroupSlug ext
 }
 
 /** Argument handed to the `windo(w => ...)` factory. */
-export interface WindoFactoryArg<Groups extends readonly WindoGroup[], Contexts extends WindoContextMap> {
+export interface WindoFactoryArg<Groups extends readonly WindoGroup[], Contexts extends WindoContextMap, Tags extends readonly string[] = readonly string[]> {
   /** Configured groups keyed by slug. */
   groups: Record<Groups[number]['slug'], WindoGroup>
   contexts: Contexts
+  /** The config's declared tags, in declaration order. */
+  tags: Tags
 }
 
 /**
@@ -209,11 +213,13 @@ export interface WindoModule<Props = any, State = any> {
  * Config
  * ------------------------------------------------------------------ */
 
-export interface WindoConfig<Groups extends readonly WindoGroup[] = readonly WindoGroup[], Contexts extends WindoContextMap = WindoContextMap> {
+export interface WindoConfig<Groups extends readonly WindoGroup[] = readonly WindoGroup[], Contexts extends WindoContextMap = WindoContextMap, Tags extends readonly string[] = readonly string[]> {
   /** Configured groups. A component's `group` must be one of these slugs. */
   groups: Groups
   /** Named contexts available to components. */
   contexts?: Contexts
+  /** The set of tags components may be assigned. A component's `tags` must be drawn from this list; the sidebar filters by them. */
+  tags?: Tags
   /** Glob(s) for discovery, relative to project root. Default `**\/*.windo.tsx`. */
   include?: string | string[]
   /** Title shown in the workbench chrome. */
@@ -256,6 +262,7 @@ export interface WindoManifestEntry {
   id: string
   title: string
   group: string
+  tags: string[]
   status: WindoStatus
   description?: string
   deprecation?: string