@westopp/windo 0.1.0 → 0.1.2

package/src/client/chrome.css

@@ -21,6 +21,9 @@
   --accent-text: #ffffff;
   --accent-soft: color-mix(in srgb, var(--accent) 8%, transparent);
   --danger: #c0443c;
+  --success: #3c7a4a;
+  --warn: #99661c;
+  --deprecated: #a8433a;
   --surface: #ffffff;
   --shadow: 0 1px 2px rgba(16, 16, 18, 0.04), 0 8px 24px rgba(16, 16, 18, 0.06);
   --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
@@ -41,6 +44,10 @@
   --accent-ui: color-mix(in oklab, var(--accent) 35%, white);
   --accent-soft: color-mix(in srgb, var(--accent-ui) 14%, transparent);
   --danger: #e0837b;
+  --success: #84c896;
+  --warn: #dcb064;
+  --deprecated: #e6918a;
+  --accent-contrast: #111113;
   --surface: #161618;
   --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 32px rgba(0, 0, 0, 0.45);
 }
@@ -138,13 +145,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 +291,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: var(--accent-contrast);
+}
+
+.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: var(--accent-contrast);
+}
+
+.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;
@@ -402,29 +649,16 @@ button {
 }
 
 .wb-status.stable {
-  color: #3c7a4a;
-  background: rgba(60, 122, 74, 0.1);
+  color: var(--success);
+  background: color-mix(in srgb, var(--success) 10%, transparent);
 }
 .wb-status.beta {
-  color: #99661c;
-  background: rgba(153, 102, 28, 0.1);
+  color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 10%, transparent);
 }
 .wb-status.deprecated {
-  color: #a8433a;
-  background: rgba(168, 67, 58, 0.1);
-}
-
-[data-theme="dark"] .wb-status.stable {
-  color: #84c896;
-  background: rgba(132, 200, 150, 0.12);
-}
-[data-theme="dark"] .wb-status.beta {
-  color: #dcb064;
-  background: rgba(220, 176, 100, 0.12);
-}
-[data-theme="dark"] .wb-status.deprecated {
-  color: #e6918a;
-  background: rgba(230, 145, 138, 0.12);
+  color: var(--deprecated);
+  background: color-mix(in srgb, var(--deprecated) 10%, transparent);
 }
 
 .wb-nav-empty {
@@ -528,7 +762,7 @@ button {
 [data-theme="dark"] .wb-trigger.on {
   background: var(--accent-ui);
   border-color: var(--accent-ui);
-  color: #111113;
+  color: var(--accent-contrast);
 }
 
 .wb-trigger .tdot {
@@ -1002,6 +1236,45 @@ button {
   font-weight: 600;
 }
 
+/* Editable shared-state strip (ctx.ctxState) — same look as .wb-state, with inline editors */
+
+.wb-ctxstate {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 7px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--inset);
+  font-size: 11.5px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+  flex-shrink: 0;
+}
+
+.wb-ctxstate .wb-state-item {
+  gap: 6px;
+}
+
+.wb-ctxstate-input {
+  width: 90px;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: 5px;
+  background: var(--bg);
+  color: var(--text);
+  font: inherit;
+  font-weight: 600;
+}
+
+.wb-ctxstate-input[type='number'] {
+  width: 60px;
+}
+
+.wb-ctxstate-input:focus {
+  outline: none;
+  border-color: var(--accent-ui);
+}
+
 .wb-tab {
   height: 100%;
   padding: 0 1px;
@@ -1119,7 +1392,7 @@ button {
 [data-theme="dark"] .wb-save {
   background: var(--accent-ui);
   border-color: var(--accent-ui);
-  color: #111113;
+  color: var(--accent-contrast);
 }
 
 .wb-save:disabled {
@@ -1161,8 +1434,8 @@ button {
   font-size: 10.5px;
   line-height: 1.6;
   color: var(--danger);
-  background: rgba(192, 68, 60, 0.07);
-  border: 1px solid rgba(192, 68, 60, 0.25);
+  background: color-mix(in srgb, var(--danger) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
   border-radius: var(--r);
   padding: 8px 10px;
   white-space: pre-wrap;
@@ -1171,11 +1444,7 @@ button {
 .wb-saved-flash {
   font-size: 11.5px;
   font-weight: 550;
-  color: #3c7a4a;
-}
-
-[data-theme="dark"] .wb-saved-flash {
-  color: #84c896;
+  color: var(--success);
 }
 
 .wb-schema {
@@ -1392,11 +1661,7 @@ button {
   color: var(--text);
 }
 .wb-copy.copied {
-  color: #3c7a4a;
-}
-
-[data-theme="dark"] .wb-copy.copied {
-  color: #84c896;
+  color: var(--success);
 }
 
 /* ---------- Variants gallery ---------- */
@@ -1645,6 +1910,10 @@ select.wb-ctrl-input {
   background-position: right 8px center;
 }
 
+[data-theme="dark"] select.wb-ctrl-input {
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239b9ba2' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
+}
+
 .wb-ctrl-row input[type="range"] {
   flex: 1;
   accent-color: var(--accent-ui);
@@ -1695,7 +1964,7 @@ select.wb-ctrl-input {
 }
 
 [data-theme="dark"] .wb-switch.on::after {
-  background: #111113;
+  background: var(--accent-contrast);
 }
 
 .wb-context-empty {
@@ -1810,21 +2079,17 @@ select.wb-ctrl-input {
   color: var(--accent-ui);
 }
 .wb-log.warn .llevel {
-  color: #99661c;
+  color: var(--warn);
 }
 .wb-log.error .llevel {
   color: var(--danger);
 }
 
-[data-theme="dark"] .wb-log.warn .llevel {
-  color: #dcb064;
-}
-
 .wb-log.warn {
-  background: rgba(153, 102, 28, 0.05);
+  background: color-mix(in srgb, var(--warn) 5%, transparent);
 }
 .wb-log.error {
-  background: rgba(192, 68, 60, 0.05);
+  background: color-mix(in srgb, var(--danger) 5%, transparent);
 }
 
 .wb-log .lmsg {
@@ -1858,8 +2123,8 @@ select.wb-ctrl-input {
   margin: 14px 16px;
   padding: 12px 14px;
   border-radius: 10px;
-  background: rgba(192, 68, 60, 0.07);
-  border: 1px solid rgba(192, 68, 60, 0.25);
+  background: color-mix(in srgb, var(--danger) 7%, transparent);
+  border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
 }
 
 .wb-render-error .rtitle {
@@ -1907,8 +2172,8 @@ select.wb-ctrl-input {
   margin: 12px 16px 0 16px;
   padding: 8px 11px;
   border-radius: var(--r);
-  background: rgba(168, 67, 58, 0.06);
-  border: 1px solid rgba(168, 67, 58, 0.22);
+  background: color-mix(in srgb, var(--deprecated) 6%, transparent);
+  border: 1px solid color-mix(in srgb, var(--deprecated) 22%, transparent);
   color: var(--danger);
   font-size: 12px;
   line-height: 1.45;

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). */
@@ -43,15 +45,26 @@ export interface BridgeApi {
   stateValues: Record<string, Record<string, unknown>>
   /** Live `disabled` flag per action id (keyed windo id → action id), echoed from the preview. */
   actionDisabled: Record<string, Record<string, boolean>>
+  /** Config seed for the shared `ctxState` (from the manifest) — fills keys the chrome hasn't persisted. */
+  ctxStateDefaults: Record<string, unknown>
+  /** Latest shared-state snapshot echoed after a component wrote it via `ctx.setCtxState`. */
+  ctxState: Record<string, unknown>
+  /** Latest colour scheme a component pushed via `ctx.toggleTheme`/`setColorScheme` (null until one does). Re-wrapped each echo so repeated same-value pushes still propagate. */
+  colorScheme: { value: 'light' | 'dark' } | null
   // outbound
   select: (id: string) => void
   setProps: (id: string, json: string) => void
   setEnv: (env: WindoEnvState) => void
+  /** Push the shared state down to the preview (editor edit or reload re-sync). */
+  setCtxState: (state: Record<string, unknown>) => void
   invokeAction: (id: string, actionId: string) => void
 }
 
 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 +98,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
 }
@@ -134,6 +154,10 @@ export interface InspectorProps {
   clearLogs: () => void
   /** Live component-local state snapshot for the selected windo (drives the read-only State strip). */
   state: Record<string, unknown>
+  /** Shared, cross-component state — drives the editable Shared strip. */
+  ctxState: Record<string, unknown>
+  /** Edit one key of the shared state (pushes down to the preview). */
+  setCtxStateValue: (key: string, value: unknown) => void
   /** Context metadata filtered to this windo (its `uses` providers + all ambient). */
   contexts: WindoContextMeta[]
   env: ChromeEnv

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/index.ts

@@ -14,6 +14,7 @@ export {
   WINDO_MSG,
 } from './protocol'
 export type {
+  Ctxual,
   WindoAction,
   WindoActionMeta,
   WindoActionTrigger,
@@ -34,6 +35,7 @@ export type {
   WindoFactoryArg,
   WindoFieldError,
   WindoGroup,
+  WindoInitContext,
   WindoLogEntry,
   WindoLogger,
   WindoManifestEntry,

package/src/preview/ctx.ts

@@ -10,7 +10,10 @@ export function buildRenderContext<State>(
   contexts: WindoContextMap,
   postLog: (entry: WindoLogEntry) => void,
   state: State,
-  setState: (patch: Partial<State>) => void
+  setState: (patch: Partial<State>) => void,
+  ctxState: Record<string, unknown>,
+  setCtxState: (patch: Record<string, unknown>) => void,
+  setColorScheme: (scheme: 'light' | 'dark') => void
 ): WindoRenderContext<State> {
   const logger = {
     log: (...args: unknown[]) => postLog({ ts: Date.now(), args }),
@@ -26,6 +29,10 @@ export function buildRenderContext<State>(
     state,
     setState,
     contexts: {},
+    ctxState,
+    setCtxState,
+    setColorScheme,
+    toggleTheme: () => setColorScheme(env.colorScheme === 'light' ? 'dark' : 'light'),
   }
 
   for (const name of Object.keys(contexts)) {