snice 7.2.0 → 7.3.0

package/bin/project-analyzer.js

@@ -426,6 +426,162 @@ const RULE_DEFINITIONS = [
       }
     }
   },
+  {
+    id: 'snice/light-render-root-with-styles',
+    severity: 'suggestion',
+    category: 'architecture',
+    description: 'Ask for an explicit integration reason before a styled element gives up shadow-root encapsulation.',
+    check(context) {
+      if (isFrameworkImplementation(context.filename) || isTestFilename(context.filename)) return;
+      for (const declaration of findDecoratedClasses(context.source, 'element')) {
+        const header = context.source.slice(declaration.index, declaration.bodyStart);
+        const option = /\b(?:renderRoot\s*:\s*['"]light['"]|shadow\s*:\s*false)/.exec(header);
+        if (!option || !/(?:@styles\b|\bstatic\s+styles\b)/.test(declaration.body)) continue;
+        context.report(declaration.index + option.index, {
+          message: `${declaration.name} opts into light DOM despite owning component styles, so selectors and internals are no longer encapsulated.`,
+          fix: "Use the default shadow render root. Keep renderRoot: 'light' only for a documented integration requirement such as native parser parentage or intentional global-CSS participation."
+        });
+      }
+    }
+  },
+  {
+    id: 'snice/translator-controller',
+    severity: 'suggestion',
+    category: 'architecture',
+    description: 'Recommend keeping internal-event translation in the element contract instead of a controller.',
+    check(context) {
+      if (isFrameworkImplementation(context.filename)) return;
+      for (const declaration of findDecoratedClasses(context.source, 'controller')) {
+        const onMethods = findDecoratedClassMethods(declaration.body, 'on');
+        const dispatchMethods = findDecoratedClassMethods(declaration.body, 'dispatch');
+        if (!onMethods.length || !dispatchMethods.length) continue;
+        const dispatchNames = new Set(dispatchMethods.map(method => method.name));
+        const translationMethods = new Set([
+          ...onMethods.map(method => method.name),
+          ...dispatchNames,
+          'attach',
+          'detach'
+        ]);
+        const translatesEveryHandler = onMethods.every(method =>
+          [...dispatchNames].some(name => new RegExp(`\\bthis\\.${escapeRegExp(name)}\\s*\\(`).test(method.body)) ||
+          /\bthis\.element(?:\?\.|\.)dispatchEvent\s*\(/.test(method.body)
+        );
+        const ownsState = [...inspectElementMembers(declaration.body).fields]
+          .some(name => name !== 'element');
+        const ownsOtherMethods = findClassMethods(declaration.body)
+          .some(method => !translationMethods.has(method.name));
+        const hasExternalBehavior = /\b(?:fetch|setTimeout|setInterval)\s*\(|\bnew\s+(?:WebSocket|EventSource|Worker)\s*\(|\b(?:localStorage|sessionStorage|indexedDB|caches)\b|@(request|respond|state|property)\b/.test(declaration.body);
+        if (!translatesEveryHandler || ownsState || ownsOtherMethods || hasExternalBehavior) continue;
+        context.report(declaration.index, {
+          message: `${declaration.name} only translates element events into other element events and owns no external behavior or state.`,
+          fix: 'Put visual behavior, internal-part handling, and semantic event dispatch in the element itself. Use a controller only for application behavior specific to a set of elements.'
+        });
+      }
+    }
+  },
+  {
+    id: 'snice/controller-event-origin',
+    severity: 'warning',
+    category: 'events',
+    description: 'Require shared controllers to distinguish their host event from the same event bubbling out of nested hosts.',
+    check(context) {
+      if (isFrameworkImplementation(context.filename)) return;
+      for (const declaration of findDecoratedClasses(context.source, 'controller')) {
+        const dispatched = new Set(
+          findDecoratedClassMethods(declaration.body, 'dispatch')
+            .flatMap(method => firstDecoratorStringArguments(method.decoratorArguments))
+        );
+        if (!dispatched.size) continue;
+        for (const handler of findDecoratedClassMethods(declaration.body, 'on')) {
+          const listened = firstDecoratorStringArguments(handler.decoratorArguments);
+          const onArguments = splitTopLevelArguments(handler.decoratorArguments);
+          const hasSelector = /^\s*(['"])[\s\S]*\1\s*$/.test(onArguments[1] ?? '');
+          if (hasSelector || !listened.some(event => dispatched.has(event))) continue;
+          const parameter = /^\s*([A-Za-z_$][\w$]*)/.exec(handler.parameters)?.[1];
+          if (!parameter || hasHostOriginCheck(handler.body, parameter)) continue;
+          const event = listened.find(name => dispatched.has(name));
+          context.report(declaration.bodyStart + handler.decoratorIndex, {
+            message: `${declaration.name} both listens for and dispatches "${event}" without checking that the event originated on its own host.`,
+            fix: `Guard the handler with if (${parameter}.target !== this.element) return; so the same event from a nested controller host is not handled twice.`
+          });
+        }
+      }
+    }
+  },
+  {
+    id: 'snice/controller-owns-routing',
+    severity: 'warning',
+    category: 'architecture',
+    description: 'Keep route parsing and navigation in routed pages instead of attached controllers.',
+    check(context) {
+      if (isFrameworkImplementation(context.filename)) return;
+      for (const declaration of findDecoratedClasses(context.source, 'controller')) {
+        const routing = /\bnew\s+URLSearchParams\s*\(|\b(?:window\.)?location\.(?:search|hash)\b|\b(?:window\.)?history\.(?:pushState|replaceState)\s*\(/.exec(declaration.body);
+        if (!routing) continue;
+        context.report(declaration.bodyStart + routing.index, {
+          message: `${declaration.name} owns URL parsing or navigation even though routing is page orchestration.`,
+          fix: 'Declare route/query parameters in @page({ routes }), receive them as page properties, and navigate through the Router. Keep the controller element-scoped.'
+        });
+      }
+    }
+  },
+  {
+    id: 'snice/self-ready-await',
+    severity: 'error',
+    category: 'lifecycle',
+    description: 'Reject awaiting an element\'s own ready promise from one of its @ready handlers.',
+    check(context) {
+      for (const declaration of findSniceElementClasses(context.source)) {
+        for (const method of findDecoratedClassMethods(declaration.body, 'ready', declaration.bodyStart)) {
+          const wait = /\bawait\s+(?:Promise\.resolve\s*\(\s*)?this\.ready\b/.exec(method.body);
+          if (!wait) continue;
+          context.report(method.bodyStart + wait.index, {
+            message: `${declaration.name}.${method.name} awaits this.ready from inside @ready, so each side waits for the other and initialization cannot complete.`,
+            fix: 'Remove the self-wait. @ready already runs after the first render; await a child element\'s ready/rendered promise when child readiness is what the code needs.'
+          });
+        }
+      }
+    }
+  },
+  {
+    id: 'snice/stray-probe-test',
+    severity: 'warning',
+    category: 'testing',
+    description: 'Reject diagnostic test files whose assertions cannot fail.',
+    check(context) {
+      if (!isTestFilename(context.filename)) return;
+      const code = blankStringContents(context.source);
+      for (const match of code.matchAll(/\bexpect\s*\(\s*true\s*\)\s*\.\s*toBe\s*\(\s*true\s*\)/g)) {
+        context.report(match.index, {
+          message: 'This test assertion is always true and looks like an abandoned diagnostic probe.',
+          fix: 'Delete the probe file or replace the assertion with an observable behavior or contract that can fail.'
+        });
+      }
+    }
+  },
+  {
+    id: 'snice/test-helper-value-without-event',
+    severity: 'suggestion',
+    category: 'testing',
+    description: 'Warn when a test helper that appears to simulate user input only writes a DOM property.',
+    check(context) {
+      if (!isTestFilename(context.filename)) return;
+      for (const helper of findNamedFunctionBodies(context.source)) {
+        if (!/^(?:(?:type|enter|fill|change|check|uncheck|toggle|select|edit|input)|set(?:Input|Field|Control))/i.test(helper.name)) continue;
+        const write = /\b([A-Za-z_$][\w$]*)\s*\.\s*(value|checked)\s*=(?!=|>)/.exec(helper.body);
+        if (!write) continue;
+        const target = escapeRegExp(write[1]);
+        const userSignal = new RegExp(
+          `\\b${target}\\s*\\.\\s*(?:dispatchEvent|click)\\s*\\(|\\b(?:fireEvent|userEvent)\\b|\\b(?:fill|check|uncheck|selectOption)\\s*\\(`
+        );
+        if (userSignal.test(helper.body)) continue;
+        context.report(helper.bodyStart + write.index, {
+          message: `${helper.name}() writes .${write[2]} but emits no event, so it changes mechanism state without simulating a user action.`,
+          fix: 'Dispatch the control\'s documented input/change event after the write, or use the test runner\'s user-interaction helper. Keep direct writes only in tests of the property API itself.'
+        });
+      }
+    }
+  },
   {
     id: 'snice/observe-target',
     severity: 'error',
@@ -1245,10 +1401,26 @@ const RULE_DEFINITIONS = [
     check() {}
   },
   {
-    id: 'snice/recommend-page-controller',
+    id: 'snice/recommend-page-decomposition',
     severity: 'suggestion',
     category: 'architecture',
-    description: 'Recommend extracting substantial or repeated non-visual page logic into a controller.',
+    description: 'Recommend decomposing an oversized page without attaching a controller to the page host.',
+    projectOnly: true,
+    check() {}
+  },
+  {
+    id: 'snice/controller-on-page-host',
+    severity: 'warning',
+    category: 'architecture',
+    description: 'Warn when a routed page imperatively attaches a controller to itself.',
+    projectOnly: true,
+    check() {}
+  },
+  {
+    id: 'snice/recommend-route-params',
+    severity: 'suggestion',
+    category: 'router',
+    description: 'Recommend declarative page route/query parameters instead of manual URL parsing and history writes.',
     projectOnly: true,
     check() {}
   },
@@ -1403,8 +1575,16 @@ export function analyzeProject(files) {
       continue;
     }
     const analyzable = maskComments(file.source);
+    const staleGuardOwners = ['page', 'element', 'controller'].flatMap(kind =>
+      findDecoratedClasses(analyzable, kind).map(declaration => ({
+        kind,
+        start: declaration.bodyStart,
+        end: declaration.bodyStart + declaration.body.length
+      }))
+    );
     for (const guard of analyzable.matchAll(/\b(?:const|let)\s+([A-Za-z_$][\w$]*)\s*=\s*\+\+this\.([A-Za-z_$][\w$]*(?:Id|Version|Token|Generation))\b([\s\S]{0,2000}?)\b(?:\1\s*!==?\s*this\.\2|this\.\2\s*!==?\s*\1)/g)) {
-      staleGuards.push({ file, index: guard.index, field: guard[2] });
+      const owner = staleGuardOwners.find(candidate => guard.index >= candidate.start && guard.index < candidate.end);
+      staleGuards.push({ file, index: guard.index, field: guard[2], owner: owner?.kind });
     }
     const provenance = buildSourceProvenance(analyzable);
     routerConstructions.push(
@@ -1657,6 +1837,38 @@ export function analyzeProject(files) {
     if (!declarationsByClass.has(key)) declarationsByClass.set(key, []);
     declarationsByClass.get(key).push(declaration);
   }
+
+  for (const page of pageClasses) {
+    const selfAttachment = /\battachController\s*\(\s*this\s*,|\bthis\.controller\s*=/.exec(page.body);
+    if (selfAttachment) {
+      const index = page.bodyStart + selfAttachment.index;
+      const location = sourceLocation(page.file.source, index);
+      diagnostics.push({
+        severity: 'warning',
+        ruleId: 'snice/controller-on-page-host',
+        message: `${page.name} attaches a controller to its own page host, coupling two lifecycle owners for one route.`,
+        fix: 'Keep element orchestration in the page. Put application behavior specific to a set of elements in a controller and bind it where the page composes those elements. A host-free reusable function may stay a plain module.',
+        file: page.file.filename,
+        line: location.line,
+        column: location.column
+      });
+    }
+
+    const manualRoute = /\bnew\s+URLSearchParams\s*\(|\b(?:window\.)?location\.search\b|\b(?:window\.)?history\.(?:pushState|replaceState)\s*\(/.exec(page.body);
+    if (manualRoute) {
+      const index = page.bodyStart + manualRoute.index;
+      const location = sourceLocation(page.file.source, index);
+      diagnostics.push({
+        severity: 'suggestion',
+        ruleId: 'snice/recommend-route-params',
+        message: `${page.name} parses or writes URL state manually even though route/query parameters can be declared by the page.`,
+        fix: "Declare parameters in @page({ routes: ['/path?q=:query'] }), receive them as page properties before @ready, and call the Router's navigate(path) to write route state. Review docs/ai/routing.md.",
+        file: page.file.filename,
+        line: location.line,
+        column: location.column
+      });
+    }
+  }
   for (const [key, declarations] of declarationsByClass) {
     const page = declarations.find(declaration => declaration.decorator === 'page');
     const element = declarations.find(declaration => declaration.decorator === 'element');
@@ -1751,14 +1963,15 @@ export function analyzeProject(files) {
     }
   }
 
-  if (new Set(staleGuards.map(guard => guard.file.filename)).size >= 2) {
-    for (const guard of staleGuards) {
+  const repeatedStaleGuards = new Set(staleGuards.map(guard => guard.file.filename)).size >= 2;
+  if (repeatedStaleGuards) {
+    for (const guard of staleGuards.filter(candidate => candidate.owner)) {
       const location = sourceLocation(guard.file.source, guard.index);
       diagnostics.push({
         severity: 'suggestion',
         ruleId: 'snice/duplicated-stale-guard',
         message: `A ${guard.field} stale-response guard is repeated across project files.`,
-        fix: 'Extract the shared fetch/loading/error/stale-response lifecycle into a controller under src/controllers/. Review docs/ai/controllers.md.',
+        fix: 'Extract host-free request sequencing into a plain module in the project\'s chosen location. Keep element-specific application behavior in controllers and element orchestration in pages. Review docs/ai/architecture.md.',
         file: guard.file.filename,
         line: location.line,
         column: location.column
@@ -1766,21 +1979,21 @@ export function analyzeProject(files) {
     }
   }
 
-  const pageControllerReported = new Set();
+  const pageDecompositionReported = new Set();
   for (const page of pageClasses) {
     const profile = pageLogicProfile(page.body);
     if (!profile.recommend) continue;
     const location = sourceLocation(page.file.source, page.index);
     diagnostics.push({
       severity: 'suggestion',
-      ruleId: 'snice/recommend-page-controller',
+      ruleId: 'snice/recommend-page-decomposition',
       message: `${page.name} contains substantial non-visual logic (${profile.effectfulMethods} effectful methods, ${profile.effects} external effects, ${profile.decisions} decision points).`,
-      fix: `Keep route orchestration and presentation in the page; move reusable data, business, timer, storage, or server behavior into a controller under src/controllers/. Review docs/ai/controllers.md and docs/ai/architecture.md.`,
+      fix: 'Keep visual behavior in elements, application behavior specific to a set of elements in controllers, and element orchestration in the page. A host-free reusable function may stay a plain module. Review docs/ai/architecture.md.',
       file: page.file.filename,
       line: location.line,
       column: location.column
     });
-    pageControllerReported.add(`${page.file.filename}:${page.index}`);
+    pageDecompositionReported.add(`${page.file.filename}:${page.index}`);
   }
 
   const repeatedPageMethods = new Map();
@@ -1797,18 +2010,18 @@ export function analyzeProject(files) {
     if (files.length < 2) continue;
     for (const { page, method } of occurrences) {
       const reportKey = `${page.file.filename}:${page.index}`;
-      if (pageControllerReported.has(reportKey)) continue;
+      if (pageDecompositionReported.has(reportKey)) continue;
       const location = sourceLocation(page.file.source, method.index);
       diagnostics.push({
         severity: 'suggestion',
-        ruleId: 'snice/recommend-page-controller',
+        ruleId: 'snice/recommend-page-decomposition',
         message: `${method.name}() repeats substantial non-visual logic across ${files.length} page files.`,
-        fix: `Extract the shared behavior into a controller under src/controllers/ and let each page orchestrate it. Also review docs/ai/controllers.md and docs/ai/architecture.md.`,
+        fix: 'Keep visual behavior in elements, application behavior specific to a set of elements in controllers, and element orchestration in pages. Extract this host-free reusable operation into a plain module in the project\'s chosen location. Review docs/ai/architecture.md.',
         file: page.file.filename,
         line: location.line,
         column: location.column
       });
-      pageControllerReported.add(reportKey);
+      pageDecompositionReported.add(reportKey);
     }
   }
 
@@ -2162,10 +2375,12 @@ function findDecoratedClassMethods(body, decoratorName, bodyStart = 0) {
   const pattern = new RegExp(`@${escapeRegExp(decoratorName)}\\b`, 'g');
   for (const match of code.matchAll(pattern)) {
     let cursor = match.index + match[0].length;
+    let decoratorArguments = '';
     while (/\s/.test(code[cursor] ?? '')) cursor++;
     if (code[cursor] === '(') {
       const close = findMatchingDelimiter(code, cursor, '(', ')');
       if (close < 0) continue;
+      decoratorArguments = body.slice(cursor + 1, close);
       cursor = close + 1;
     }
     const signature = /^\s*(?:(?:public|private|protected|static|override)\s+)*(?:async\s+)?([A-Za-z_$][\w$]*)\s*\(/.exec(code.slice(cursor));
@@ -2179,6 +2394,9 @@ function findDecoratedClassMethods(body, decoratorName, bodyStart = 0) {
     if (methodClose < 0) continue;
     methods.push({
       name: signature[1],
+      decoratorIndex: match.index,
+      decoratorArguments,
+      parameters: body.slice(parametersOpen + 1, parametersClose),
       bodyStart: bodyStart + methodOpen + 1,
       body: body.slice(methodOpen + 1, methodClose)
     });
@@ -2186,6 +2404,55 @@ function findDecoratedClassMethods(body, decoratorName, bodyStart = 0) {
   return methods;
 }
 
+function firstDecoratorStringArguments(argumentsSource) {
+  const first = /^\s*(['"])([^'"]+)\1/.exec(argumentsSource);
+  if (first) return [first[2]];
+  const array = /^\s*\[([^\]]*)\]/.exec(argumentsSource);
+  if (!array) return [];
+  return [...array[1].matchAll(/(['"])([^'"]+)\1/g)].map(match => match[2]);
+}
+
+function splitTopLevelArguments(source) {
+  const argumentsList = [];
+  let start = 0;
+  let quote = '';
+  let escaped = false;
+  let round = 0;
+  let square = 0;
+  let curly = 0;
+  for (let index = 0; index < source.length; index++) {
+    const character = source[index];
+    if (quote) {
+      if (escaped) escaped = false;
+      else if (character === '\\') escaped = true;
+      else if (character === quote) quote = '';
+      continue;
+    }
+    if (character === '"' || character === "'" || character === '`') {
+      quote = character;
+      continue;
+    }
+    if (character === '(') round++;
+    else if (character === ')') round = Math.max(0, round - 1);
+    else if (character === '[') square++;
+    else if (character === ']') square = Math.max(0, square - 1);
+    else if (character === '{') curly++;
+    else if (character === '}') curly = Math.max(0, curly - 1);
+    else if (character === ',' && round === 0 && square === 0 && curly === 0) {
+      argumentsList.push(source.slice(start, index).trim());
+      start = index + 1;
+    }
+  }
+  argumentsList.push(source.slice(start).trim());
+  return argumentsList;
+}
+
+function hasHostOriginCheck(body, parameter) {
+  const target = `${escapeRegExp(parameter)}\\s*\\.\\s*target`;
+  const host = 'this\\s*\\.\\s*element';
+  return new RegExp(`(?:${target})\\s*[!=]==?\\s*(?:${host})|(?:${host})\\s*[!=]==?\\s*(?:${target})`).test(body);
+}
+
 function isDirectMemberWrite(body, index, length) {
   const before = body.slice(Math.max(0, index - 3), index);
   const after = body.slice(index + length).trimStart();
@@ -2218,6 +2485,23 @@ function findClassMethods(body, bodyStart = 0) {
   return methods;
 }
 
+function findNamedFunctionBodies(source) {
+  const code = blankStringContents(maskComments(source));
+  const functions = [];
+  const pattern = /\bfunction\s+([A-Za-z_$][\w$]*)\s*\([^)]*\)[^{]*\{|\b(?:const|let)\s+([A-Za-z_$][\w$]*)\s*=\s*(?:async\s*)?\([^)]*\)\s*(?::[^=\n]+)?=>\s*\{/g;
+  for (const match of code.matchAll(pattern)) {
+    const open = match.index + match[0].lastIndexOf('{');
+    const close = findMatchingDelimiter(code, open, '{', '}');
+    if (close < 0) continue;
+    functions.push({
+      name: match[1] ?? match[2],
+      bodyStart: open + 1,
+      body: source.slice(open + 1, close)
+    });
+  }
+  return functions;
+}
+
 function pageLogicProfile(body) {
   const code = blankStringContents(body);
   const methods = findClassMethods(body);
@@ -3101,6 +3385,10 @@ function isFrameworkImplementation(filename) {
   return /(?:^|[/\\])packages[/\\]components[/\\]src(?:[/\\]|$)/.test(filename);
 }
 
+function isTestFilename(filename) {
+  return /(?:^|[/\\])[^/\\]+\.(?:test|spec)\.[cm]?[jt]sx?$/.test(filename);
+}
+
 function sourceLocation(source, index) {
   const prefix = source.slice(0, index);
   const line = prefix.split('\n').length;

package/bin/templates/AI_GUIDANCE.md

@@ -7,6 +7,12 @@ reviewing Snice code. It routes you to the version-matched references under
 Do not infer Snice behavior from Lit or generic web-component conventions. Read
 only the topical reference and component documents needed for the task.
 
+Visual behavior belongs in elements. Application behavior specific to a set of
+elements belongs in a controller. Element orchestration belongs in pages. Keep
+those ownership rules separate from the attachment mechanism: do not attach a
+controller to a page host. A host-free reusable function may stay a plain module
+wherever the project convention puts it; state plus lifecycle belongs in a daemon.
+
 Useful diagnostics:
 
 ```bash
@@ -15,4 +21,3 @@ npx snice check
 
 Use `doctor` or `validate` only to isolate the configuration or source half of
 a failed check.
-

package/bin/templates/default/README.md

@@ -61,7 +61,7 @@ src/
     notifications.ts    # Live feed, filters, @watch, keyboard shortcuts
     settings.ts         # Theme toggle, form bindings, @context, Ctrl+S save
     data.ts             # Data table, search-bar, @observe('resize'), filters
-  services/       # Business logic (auth, storage, jwt)
+  services/       # This project's host-free functions (auth, storage, jwt)
   middleware/      # Fetch middleware (auth, error, retry)
   daemons/        # Lifecycle-managed classes (notifications WebSocket)
   guards/         # Route guards (auth)

package/bin/templates/default/src/components/app-header.ts

@@ -1,19 +1,17 @@
-import { element, property, render, styles, context, on, dispatch, dispose, html, css, watch, query } from 'snice';
+import { element, render, styles, context, on, dispatch, dispose, html, css, state } from 'snice';
 import type { Context } from 'snice';
 import type { ApplicationContext } from '../context';
 import { logout } from '../services/auth';
 
 @element('app-header')
 export class AppHeader extends HTMLElement {
-  @property() userName = '';
-  @property() userAvatar = '';
-  @property({ type: Boolean }) authenticated = false;
-  @property({ type: Boolean }) menuOpen = false;
-  @property({ type: Number }) notificationCount = 0;
+  @state() userName = '';
+  @state() userAvatar = '';
+  @state() authenticated = false;
+  @state() menuOpen = false;
+  @state() notificationCount = 0;
   private unsubscribeNotifications: (() => void) | null = null;
 
-  @query('.user-menu') $menu!: HTMLElement;
-
   @context()
   handleContext(ctx: Context) {
     const { principal, notifications } = ctx.application as ApplicationContext;
@@ -37,13 +35,6 @@ export class AppHeader extends HTMLElement {
     }
   }
 
-  @watch('menuOpen')
-  onMenuToggle() {
-    if (this.$menu) {
-      this.$menu.style.display = this.menuOpen ? 'block' : 'none';
-    }
-  }
-
   toggleMenu() {
     this.menuOpen = !this.menuOpen;
   }
@@ -96,7 +87,7 @@ export class AppHeader extends HTMLElement {
               <span class="user-name">${this.userName}</span>
             </button>
 
-            <div class="user-menu" style="display: none">
+            <div class="user-menu" ?hidden=${!this.menuOpen}>
               <a href="#/profile" @click=${() => this.menuOpen = false}>Profile</a>
               <a href="#/settings" @click=${() => this.menuOpen = false}>Settings</a>
               <snice-divider></snice-divider>
@@ -195,6 +186,10 @@ export class AppHeader extends HTMLElement {
         z-index: 100;
       }
 
+      .user-menu[hidden] {
+        display: none;
+      }
+
       .user-menu a,
       .user-menu button {
         display: block;

package/bin/templates/default/src/components/notification-badge.ts

@@ -1,24 +1,15 @@
-import { element, property, render, styles, html, css, watch, query } from 'snice';
+import { element, property, render, styles, html, css } from 'snice';
 
 @element('notification-badge')
 export class NotificationBadge extends HTMLElement {
   @property({ type: Number }) count = 0;
 
-  @query('.badge') $badge!: HTMLElement;
-
-  @watch('count')
-  onCountChange() {
-    if (this.$badge) {
-      this.$badge.textContent = this.count > 99 ? '99+' : String(this.count);
-      this.$badge.style.display = this.count > 0 ? 'flex' : 'none';
-    }
-  }
-
-  @render({ once: true })
+  @render()
   renderContent() {
-    const display = this.count > 0 ? 'flex' : 'none';
     return html`
-      <span class="badge" style="display: ${display}">${this.count}</span>
+      <if ${this.count > 0}>
+        <span class="badge">${this.count > 99 ? '99+' : this.count}</span>
+      </if>
     `;
   }
 

package/bin/templates/default/src/components/search-bar.ts

@@ -1,20 +1,22 @@
-import { element, property, render, styles, on, dispatch, html, css } from 'snice';
+import { debounce, dispatch, element, html, live, property, render, styles, css } from 'snice';
 
 @element('search-bar')
 export class SearchBar extends HTMLElement {
   @property() value = '';
   @property() placeholder = 'Search...';
 
-  @on('input', 'input', { debounce: 300 })
-  handleInput(e: Event) {
-    this.value = (e.target as HTMLInputElement).value;
-    this.dispatchSearch();
+  handleInput(e: CustomEvent<{ value: string }>) {
+    this.value = e.detail.value;
+    this.queueSearch();
   }
 
-  @on('keydown:Escape', 'input')
-  clearSearch(e: Event) {
+  clearSearch() {
     this.value = '';
-    (e.target as HTMLInputElement).value = '';
+    this.dispatchSearch();
+  }
+
+  @debounce(300)
+  queueSearch() {
     this.dispatchSearch();
   }
 
@@ -26,17 +28,15 @@ export class SearchBar extends HTMLElement {
   @render()
   renderContent() {
     return html`
-      <div class="search-container">
-        <span class="icon">&#128269;</span>
-        <input
-          type="text"
-          .value=${this.value}
-          placeholder="${this.placeholder}"
-        />
-        <if ${this.value.length > 0}>
-          <button class="clear" @click=${() => { this.value = ''; this.dispatchSearch(); }}>&#10005;</button>
-        </if>
-      </div>
+      <snice-input
+        type="search"
+        clearable
+        prefix-icon="🔍"
+        .value=${live(this.value)}
+        placeholder="${this.placeholder}"
+        @input-input=${this.handleInput}
+        @keydown.escape=${this.clearSearch}
+      ></snice-input>
     `;
   }
 
@@ -47,52 +47,8 @@ export class SearchBar extends HTMLElement {
         display: block;
       }
 
-      .search-container {
-        display: flex;
-        align-items: center;
-        gap: 0.5rem;
-        padding: 0.5rem 0.75rem;
-        background: var(--snice-color-surface);
-        border: 1px solid var(--snice-color-border);
-        border-radius: var(--snice-border-radius-lg);
-      }
-
-      .search-container:focus-within {
-        border-color: var(--snice-color-primary);
-        box-shadow: 0 0 0 3px color-mix(in srgb, var(--snice-color-primary) 15%, transparent);
-      }
-
-      .icon {
-        color: var(--snice-color-text-secondary);
-        font-size: 0.875rem;
-      }
-
-      input {
-        flex: 1;
-        border: none;
-        outline: none;
-        background: transparent;
-        font-size: 0.875rem;
-        color: var(--snice-color-text);
-      }
-
-      input::placeholder {
-        color: var(--snice-color-text-secondary);
-      }
-
-      .clear {
-        background: none;
-        border: none;
-        cursor: pointer;
-        color: var(--snice-color-text-secondary);
-        font-size: 0.75rem;
-        padding: 0.125rem 0.25rem;
-        border-radius: var(--snice-border-radius-md);
-      }
-
-      .clear:hover {
-        background: var(--snice-color-surface-container-low);
-        color: var(--snice-color-text);
+      snice-input {
+        width: 100%;
       }
     `;
   }