@westopp/windo 0.1.0 → 0.1.2

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)
@@ -24,6 +25,14 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
   const [logs, setLogs] = useState<WindoLogRow[]>([])
   const [stateValues, setStateValues] = useState<Record<string, Record<string, unknown>>>({})
   const [actionDisabled, setActionDisabled] = useState<Record<string, Record<string, boolean>>>({})
+  // Shared state: `ctxStateDefaults` is the config seed (from the manifest);
+  // `ctxState` is the latest snapshot echoed after a component writes it.
+  const [ctxStateDefaults, setCtxStateDefaults] = useState<Record<string, unknown>>({})
+  const [ctxState, setCtxStateEcho] = useState<Record<string, unknown>>({})
+  // Latest colour scheme a component pushed via `ctx.toggleTheme`/`setColorScheme`
+  // (null until one does). Wrapped in a fresh object each echo so consumers re-fire
+  // even when the same scheme is pushed twice (e.g. after a manual revert between).
+  const [colorScheme, setColorSchemeEcho] = useState<{ value: 'light' | 'dark' } | null>(null)
   const seqRef = useRef(0)
 
   const post = useCallback(
@@ -51,7 +60,9 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
         setTitle(msg.title)
         setManifest(msg.entries)
         setGroups(msg.groups)
+        setTags(msg.tags)
         setContexts(msg.contexts)
+        setCtxStateDefaults(msg.ctxState)
         break
       case 'describe':
         setDescribe({
@@ -80,6 +91,12 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
         setStateValues(prev => ({ ...prev, [msg.id]: msg.state }))
         setActionDisabled(prev => ({ ...prev, [msg.id]: Object.fromEntries(msg.actions.map(a => [a.id, a.disabled])) }))
         break
+      case 'ctx-state':
+        setCtxStateEcho(msg.state)
+        break
+      case 'color-scheme':
+        setColorSchemeEcho({ value: msg.colorScheme })
+        break
       case 'render-error':
         setRenderError({ message: msg.message, stack: msg.stack })
         break
@@ -98,6 +115,8 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
 
   const setEnv = useCallback((env: WindoEnvState) => post({ source: WINDO_MSG, dir: 'host', type: 'set-env', env }), [post])
 
+  const setCtxState = useCallback((state: Record<string, unknown>) => post({ source: WINDO_MSG, dir: 'host', type: 'set-ctx-state', state }), [post])
+
   const invokeAction = useCallback((id: string, actionId: string) => post({ source: WINDO_MSG, dir: 'host', type: 'invoke-action', id, actionId }), [post])
 
   const clearLogs = useCallback(() => setLogs([]), [])
@@ -107,6 +126,7 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
     readyNonce,
     title,
     groups,
+    tags,
     contexts,
     manifest,
     describe,
@@ -116,9 +136,13 @@ export function useWindoBridge(iframeRef: RefObject<HTMLIFrameElement | null>):
     clearLogs,
     stateValues,
     actionDisabled,
+    ctxStateDefaults,
+    ctxState,
+    colorScheme,
     select,
     setProps,
     setEnv,
+    setCtxState,
     invokeAction,
   }
 }