@supersoniks/concorde 5.1.0 → 5.1.2

package/src/docs/components/docs-demo-sources.ts

@@ -2,13 +2,10 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { tailwind } from "../tailwind";
-import { docsSourceLinks, type DocsSource } from "./docs-source-link";
+import type { DocsSource } from "./docs-source-link";
 import { DOCS_SOURCE_RAW } from "./docs-source-raw";
 import { resolveSourceExcerpt } from "./docs-source-excerpt";
-import "../prism/prism";
-import { prismCSS } from "../prism";
-import * as Prism from "prismjs";
-import "prismjs/components/prism-typescript";
+import { docsCodeCSS, highlightDocsCode } from "../shiki";
 
 export type { DocsSource };
 
@@ -23,6 +20,15 @@ export type DocsLitDemoConfig = {
 };
 
 export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
+  "docs-boarding-pass-demo": {
+    sources: [
+      {
+        path: "src/docs/example/docs-boarding-pass-demo.ts",
+        line: 18,
+        label: "docs-boarding-pass-demo",
+      },
+    ],
+  },
   "docs-toggle-if-demo": {
     sources: [
       {
@@ -36,80 +42,39 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
     sources: [
       {
         path: "src/docs/example/docs-toggle-demos.ts",
-        line: 49,
+        line: 50,
         label: "docs-toggle-loader-demo",
       },
     ],
   },
-  "docs-joke-search-demo": {
+  "docs-flight-search-demo": {
     sources: [
-      { path: "src/docs/example/docs-joke-demos.ts", line: 111, label: "search" },
+      { path: "src/docs/example/docs-flight-demos.ts", line: 65, label: "search" },
     ],
   },
-  "docs-joke-lang-demo": {
+  "docs-flight-direction-demo": {
     sources: [
-      { path: "src/docs/example/docs-joke-demos.ts", line: 136, label: "lang" },
+      { path: "src/docs/example/docs-flight-demos.ts", line: 85, label: "direction" },
     ],
   },
-  "docs-joke-blacklist-demo": {
+  "docs-flight-status-radio-demo": {
     sources: [
-      { path: "src/docs/example/docs-joke-demos.ts", line: 181, label: "blacklist" },
+      { path: "src/docs/example/docs-flight-demos.ts", line: 106, label: "radio" },
     ],
   },
-  "docs-joke-blacklist-radio-demo": {
+  "docs-flight-delayed-switch-demo": {
     sources: [
-      { path: "src/docs/example/docs-joke-demos.ts", line: 212, label: "radio" },
-    ],
-  },
-  "docs-joke-blacklist-switch-demo": {
-    sources: [
-      { path: "src/docs/example/docs-joke-demos.ts", line: 256, label: "switch" },
+      { path: "src/docs/example/docs-flight-demos.ts", line: 129, label: "switch" },
     ],
   },
   "docs-queue-users-demo": {
     sources: [
-      { path: "src/docs/example/docs-queue-demos.ts", line: 66, label: "users" },
+      { path: "src/docs/example/docs-queue-demos.ts", line: 45, label: "filter" },
     ],
   },
   "docs-queue-geo-demo": {
     sources: [
-      { path: "src/docs/example/docs-queue-demos.ts", line: 38, label: "geo" },
-    ],
-  },
-  "docs-input-autocomplete-basic-demo": {
-    sources: [
-      {
-        path: "src/docs/example/docs-input-autocomplete-demos.ts",
-        line: 11,
-        label: "basic",
-      },
-    ],
-  },
-  "docs-input-autocomplete-code-demo": {
-    sources: [
-      {
-        path: "src/docs/example/docs-input-autocomplete-demos.ts",
-        line: 36,
-        label: "code",
-      },
-    ],
-  },
-  "docs-input-autocomplete-select-demo": {
-    sources: [
-      {
-        path: "src/docs/example/docs-input-autocomplete-demos.ts",
-        line: 63,
-        label: "select",
-      },
-    ],
-  },
-  "docs-input-autocomplete-keyboard-demo": {
-    sources: [
-      {
-        path: "src/docs/example/docs-input-autocomplete-demos.ts",
-        line: 91,
-        label: "keyboard",
-      },
+      { path: "src/docs/example/docs-queue-demos.ts", line: 26, label: "lazy load" },
     ],
   },
   "docs-users-list": {
@@ -130,29 +95,24 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
     sources: [
       {
         path: "src/docs/example/docs-jsonata-demos.ts",
-        line: 69,
+        line: 73,
         label: "totals",
       },
     ],
   },
   "docs-list-alternate-demo": {
     sources: [
-      { path: "src/docs/example/docs-list-demos.ts", line: 51, label: "alternate" },
-    ],
-  },
-  "docs-list-template-key-demo": {
-    sources: [
-      { path: "src/docs/example/docs-list-demos.ts", line: 79, label: "templateKey" },
+      { path: "src/docs/example/docs-list-demos.ts", line: 9, label: "alternate" },
     ],
   },
   "docs-list-separator-demo": {
     sources: [
-      { path: "src/docs/example/docs-list-demos.ts", line: 118, label: "separator" },
+      { path: "src/docs/example/docs-list-demos.ts", line: 39, label: "separator" },
     ],
   },
   "docs-list-extract-values-demo": {
     sources: [
-      { path: "src/docs/example/docs-list-demos.ts", line: 146, label: "extractValues" },
+      { path: "src/docs/example/docs-list-demos.ts", line: 75, label: "extractValues" },
     ],
   },
   "docs-router-basic-demo": {
@@ -231,14 +191,14 @@ export const DOCS_LIT_DEMO_REGISTRY: Record<string, DocsLitDemoConfig> = {
   },
   "docs-api-config-scoped-attrs-demo": {
     sources: [
-      { path: "src/docs/example/docs-api-config-demos.ts", line: 162, label: "scope" },
+      { path: "src/docs/example/docs-api-config-demos.ts", line: 161, label: "scope" },
     ],
   },
   "docs-api-config-events-token-demo": {
     sources: [
       {
         path: "src/docs/example/docs-api-config-demos.ts",
-        line: 191,
+        line: 190,
         label: "eventsApiToken",
       },
     ],
@@ -255,49 +215,27 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
     { path: "src/docs/example/users.ts", label: "docs-user" },
     { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
-  "docs-joke-search-demo": [
-    { path: "src/docs/example/docs-joke-demos.ts", label: "joke demos" },
+  "docs-flight-search-demo": [
+    { path: "src/docs/example/docs-flight-demos.ts", label: "flight demos" },
+    { path: "src/docs/mock-api/flights.ts", label: "mock flights" },
   ],
   "docs-jsonata-space-cats-demo": [
     { path: "src/docs/example/docs-jsonata-demos.ts", label: "jsonata demos" },
-    { path: "src/docs/mock-api/fixtures-jsonata.ts", label: "fixtures" },
   ],
   "docs-jsonata-table-totals-demo": [
     { path: "src/docs/example/docs-jsonata-demos.ts", label: "jsonata demos" },
-    { path: "src/docs/mock-api/fixtures-jsonata.ts", label: "fixtures" },
   ],
-  "docs-joke-lang-demo": [
-    { path: "src/docs/example/docs-joke-demos.ts", label: "joke demos" },
+  "docs-flight-direction-demo": [
+    { path: "src/docs/example/docs-flight-demos.ts", label: "flight demos" },
+    { path: "src/docs/mock-api/flights.ts", label: "mock flights" },
   ],
   "docs-queue-geo-demo": [
     { path: "src/docs/example/docs-queue-demos.ts", label: "queue demos" },
-  ],
-  "docs-input-autocomplete-basic-demo": [
-    {
-      path: "src/docs/example/docs-input-autocomplete-demos.ts",
-      label: "autocomplete demos",
-    },
-  ],
-  "docs-input-autocomplete-code-demo": [
-    {
-      path: "src/docs/example/docs-input-autocomplete-demos.ts",
-      label: "autocomplete demos",
-    },
-  ],
-  "docs-input-autocomplete-select-demo": [
-    {
-      path: "src/docs/example/docs-input-autocomplete-demos.ts",
-      label: "autocomplete demos",
-    },
-  ],
-  "docs-input-autocomplete-keyboard-demo": [
-    {
-      path: "src/docs/example/docs-input-autocomplete-demos.ts",
-      label: "autocomplete demos",
-    },
+    { path: "src/docs/mock-api/flights.ts", label: "mock flights" },
   ],
   "docs-queue-users-demo": [
     { path: "src/docs/example/docs-queue-demos.ts", label: "queue demos" },
+    { path: "src/docs/mock-api/flights.ts", label: "mock flights" },
   ],
   "docs-toggle-if-demo": [
     { path: "src/docs/example/docs-toggle-demos.ts", label: "toggle demos" },
@@ -308,34 +246,31 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "demo-publish": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 32,
+      line: 81,
       label: "demo-publish",
     },
-    { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-subscribe-dynamic": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 269,
+      line: 263,
       label: "demo-subscribe-dynamic",
     },
-    { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-sub-template": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 238,
+      line: 244,
       label: "demo-sub-template",
     },
-    { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-api-get": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 86,
+      line: 121,
       label: "demo-api-get",
     },
-    { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API" },
+    { path: "src/docs/example/decorators-demo-geo.ts", label: "flights API" },
     { path: "src/docs/mock-api/router.ts", label: "mock router" },
   ],
   "demo-api-get-method": [
@@ -343,28 +278,28 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
       label: "demo-api-get-method",
     },
-    { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API" },
+    { path: "src/docs/example/decorators-demo-geo.ts", label: "flights API" },
   ],
   "demo-api-get-configuration-key": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 127,
+      line: 181,
       label: "demo-api-get-configuration-key",
     },
-    { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API" },
+    { path: "src/docs/example/decorators-demo-geo.ts", label: "flights API" },
   ],
   "demo-api-get-publish-subscribe": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 178,
+      line: 217,
       label: "demo-api-get-publish-subscribe",
     },
-    { path: "src/docs/example/decorators-demo-geo.ts", label: "geo API" },
+    { path: "src/docs/example/decorators-demo-geo.ts", label: "flights API" },
   ],
   "demo-api-post": [
     {
       path: "src/docs/example/decorators-demo-post.ts",
-      line: 53,
+      line: 69,
       label: "demo-api-post",
     },
     { path: "src/docs/mock-api/router.ts", label: "mock router" },
@@ -379,15 +314,15 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "demo-api-post-dynamic": [
     {
       path: "src/docs/example/decorators-demo-post.ts",
-      line: 143,
+      line: 144,
       label: "demo-api-post-dynamic",
     },
-    { path: "src/docs/mock-api/router.ts", label: "mock router (sessions sync)" },
+    { path: "src/docs/mock-api/router.ts", label: "mock router (check-in sync)" },
   ],
   "demo-api-post-publish": [
     {
       path: "src/docs/example/decorators-demo-post.ts",
-      line: 209,
+      line: 191,
       label: "demo-api-post-publish",
     },
     { path: "src/docs/mock-api/router.ts", label: "mock router" },
@@ -395,27 +330,24 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "demo-handle": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 316,
+      line: 299,
       label: "demo-handle",
     },
-    { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-handle-dynamic": [
     {
       path: "src/docs/example/decorators-demo-subscribe-publish-get-demos.ts",
-      line: 351,
+      line: 330,
       label: "demo-handle-dynamic",
     },
-    { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-bind": [
-    { path: "src/docs/example/decorators-demo-bind-demos.ts", line: 14, label: "demo-bind" },
-    { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
+    { path: "src/docs/example/decorators-demo-bind-demos.ts", line: 32, label: "demo-bind" },
   ],
   "demo-bind-reflect": [
     {
       path: "src/docs/example/decorators-demo-bind-demos.ts",
-      line: 56,
+      line: 70,
       label: "demo-bind-reflect",
     },
     { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
@@ -423,18 +355,17 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "demo-bind-dynamic": [
     {
       path: "src/docs/example/decorators-demo-bind-demos.ts",
-      line: 124,
+      line: 130,
       label: "demo-bind-dynamic",
     },
-    { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-ancestor-attribute": [
-    { path: "src/docs/example/decorators-demo.ts", line: 35, label: "demo-ancestor-attribute" },
+    { path: "src/docs/example/decorators-demo.ts", line: 31, label: "demo-ancestor-attribute" },
   ],
   "demo-ancestor-attribute-dynamic-section": [
     {
       path: "src/docs/example/decorators-demo.ts",
-      line: 60,
+      line: 81,
       label: "demo-ancestor-attribute-dynamic",
     },
     {
@@ -444,25 +375,25 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
     },
   ],
   "demo-on-assign": [
-    { path: "src/docs/example/decorators-demo.ts", line: 43, label: "demo-on-assign" },
+    { path: "src/docs/example/decorators-demo.ts", line: 205, label: "demo-on-assign" },
     { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-on-assign-dynamic": [
     {
       path: "src/docs/example/decorators-demo.ts",
-      line: 94,
+      line: 253,
       label: "demo-on-assign-dynamic",
     },
     { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-auto-subscribe": [
-    { path: "src/docs/example/decorators-demo.ts", line: 211, label: "demo-auto-subscribe" },
+    { path: "src/docs/example/decorators-demo.ts", line: 366, label: "demo-auto-subscribe" },
     { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
   ],
   "demo-wait-ancestors-section": [
     {
       path: "src/docs/example/decorators-demo.ts",
-      line: 278,
+      line: 430,
       label: "demo-wait-ancestors-section",
     },
     { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
@@ -470,7 +401,7 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "demo-wait-ancestors-multi-section": [
     {
       path: "src/docs/example/decorators-demo.ts",
-      line: 355,
+      line: 507,
       label: "demo-wait-ancestors-multi-section",
     },
     { path: "src/docs/example/decorators-demo-init.ts", label: "demo data" },
@@ -478,14 +409,14 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   "demo-wait-ancestors-static-section": [
     {
       path: "src/docs/example/decorators-demo.ts",
-      line: 462,
+      line: 610,
       label: "demo-wait-ancestors-static-section",
     },
   ],
   "demo-wait-ancestors-ready-section": [
     {
       path: "src/docs/example/decorators-demo.ts",
-      line: 432,
+      line: 584,
       label: "demo-wait-ancestors-ready-section",
     },
   ],
@@ -497,15 +428,6 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
     { path: "src/core/components/functional/list/list.demo.ts", label: "sonic-list-demo" },
     { path: "src/docs/mock-api/router.ts", label: "mock router" },
   ],
-  "queue-users-scroll": [
-    { path: "src/docs/example/docs-queue-demos.ts", label: "docs-queue-users-demo" },
-    { path: "src/docs/example/users.ts", label: "docs-user" },
-  ],
-  /** Inline list.md fetch demo — component + mock. */
-  "list-users-fetch": [
-    { path: "src/docs/example/docs-users-list.ts", label: "docs-users-list" },
-    { path: "src/docs/mock-api/router.ts", label: "mock API" },
-  ],
   "docs-submit-demo": [
     { path: "src/docs/example/docs-submit-demos.ts", label: "submit demo" },
     { path: "src/docs/mock-api/router.ts", label: "mock API (POST register)" },
@@ -528,15 +450,15 @@ export const DOCS_DEMO_SOURCE_REGISTRY: Record<string, DocsSource[]> = {
   ],
 };
 
-function highlightTs(code: string): string {
-  return Prism.highlight(code, Prism.languages.typescript, "typescript");
+function highlightTs(code: string): Promise<string> {
+  return highlightDocsCode(code, "typescript");
 }
 
 @customElement("docs-demo-sources")
 export class DocsDemoSources extends LitElement {
   static styles = [
     tailwind,
-    prismCSS,
+    docsCodeCSS,
     css`
       :host {
         display: block;
@@ -588,14 +510,15 @@ export class DocsDemoSources extends LitElement {
     const excerpt = resolveSourceExcerpt(raw, this.forTag, {
       line: primary.line,
     });
-    this.highlighted = highlightTs(excerpt);
+    void highlightTs(excerpt).then((html) => {
+      this.highlighted = html;
+    });
   }
 
   render() {
     const sources = DOCS_DEMO_SOURCE_REGISTRY[this.forTag];
     if (!sources?.length) return nothing;
     return html`
-      ${docsSourceLinks(sources)}
       ${this.showCode && this.highlighted
         ? html`
             <pre

package/src/docs/components/docs-lit-demo.ts

@@ -1,24 +1,14 @@
-import { css, html, LitElement, nothing } from "lit";
-import { customElement, property, state } from "lit/decorators.js";
+import { css, html, LitElement, nothing, PropertyValues } from "lit";
+import { customElement, property } from "lit/decorators.js";
 import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { tailwind } from "../tailwind";
-import { docsSourceLinks } from "./docs-source-link";
 import {
   DOCS_LIT_DEMO_REGISTRY,
   type DocsLitDemoConfig,
 } from "./docs-demo-sources";
 
-import "../prism/prism";
-import { prismCSS } from "../prism";
-import * as Prism from "prismjs";
-import "prismjs/components/prism-typescript";
-
 import { DOCS_SOURCE_RAW } from "./docs-source-raw";
-import {
-  excerptLines,
-  excerptForCustomElement,
-  resolveSourceExcerpt,
-} from "./docs-source-excerpt";
+import { excerptLines, resolveSourceExcerpt } from "./docs-source-excerpt";
 
 export { excerptForCustomElement } from "./docs-source-excerpt";
 
@@ -33,9 +23,9 @@ function resolveDemoExcerpt(
   return resolveSourceExcerpt(raw, liveTag);
 }
 
-function highlightTs(code: string): string {
-  return Prism.highlight(code, Prism.languages.typescript, "typescript");
-}
+/** Escape so tags in the TS excerpt stay text inside <template> (same as home.ts). */
+const escapeCode = (code: string) =>
+  code.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
 
 const tagName = "docs-lit-demo";
 
@@ -43,21 +33,21 @@ const tagName = "docs-lit-demo";
 export class DocsLitDemo extends LitElement {
   static styles = [
     tailwind,
-    prismCSS,
     css`
       :host {
         display: block;
         margin: 1.1rem 0;
       }
-      pre {
-        font-size: 13px !important;
-      }
       .preview {
-        border: 1px solid var(--sc-border, #e5e5e5);
+        border: 1px solid var(--sc-border-color, #e5e5e5);
         border-radius: 0.375rem;
         padding: 1rem;
         margin-bottom: 0.75rem;
       }
+      /* Nested sonic-code already has its own block margin */
+      sonic-code {
+        margin: 0;
+      }
     `,
   ];
 
@@ -66,16 +56,11 @@ export class DocsLitDemo extends LitElement {
 
   @property({ type: Boolean }) showCode = true;
 
-  @state() private highlighted = "";
-
-  private liveHost?: HTMLDivElement;
-
   private get config(): DocsLitDemoConfig | undefined {
     return DOCS_LIT_DEMO_REGISTRY[this.forTag];
   }
 
-  connectedCallback() {
-    super.connectedCallback();
+  private get excerpt(): string | undefined {
     const cfg = this.config;
     if (!cfg?.sources[0]) return;
 
@@ -85,32 +70,27 @@ export class DocsLitDemo extends LitElement {
       return;
     }
 
-    const liveTag = cfg.liveTag ?? this.forTag;
-    const excerpt = resolveDemoExcerpt(raw, liveTag, cfg);
-    this.highlighted = highlightTs(excerpt);
+    return resolveDemoExcerpt(raw, cfg.liveTag ?? this.forTag, cfg);
   }
 
   render() {
     const cfg = this.config;
     if (!cfg) return nothing;
 
-    const liveTag = cfg.liveTag ?? this.forTag;
+    const excerpt = this.excerpt;
 
     return html`
-      ${docsSourceLinks(cfg.sources)}
       <div class="preview" data-live-host></div>
-      ${this.showCode && this.highlighted
-        ? html`
-            <pre
-              class="rounded-md custom-scroll language-typescript overflow-auto"
-            ><code>${unsafeHTML(this.highlighted)}</code></pre>
-          `
+      ${this.showCode && excerpt
+        ? unsafeHTML(
+            `<sonic-code language="typescript" noEdit noPreview><template>${escapeCode(excerpt)}</template></sonic-code>`,
+          )
         : nothing}
     `;
   }
 
-  firstUpdated() {
-    super.firstUpdated();
+  firstUpdated(_changedProperties: PropertyValues) {
+    super.firstUpdated(_changedProperties);
     this.mountLiveDemo();
   }