@supersoniks/concorde 5.1.1 → 5.1.3-immutable.1

package/src/docs/search/markdown-renderer.ts

@@ -16,12 +16,34 @@ export class DocsMakdownRenderer extends Subscriber(LitElement) {
     marked.use(gfmHeadingId());
     this.noShadowDom = "";
     super.connectedCallback();
+    this.addEventListener("click", this.onDocLinkClick);
   }
+
+  disconnectedCallback() {
+    this.removeEventListener("click", this.onDocLinkClick);
+    super.disconnectedCallback();
+  }
+
+  /** Markdown `[…](/docs/…)` links use plain `<a>` — pushState so the SPA does not full-reload. */
+  private onDocLinkClick = (e: Event) => {
+    const a = (e.target as Element | null)?.closest?.("a");
+    if (!a || a.target === "_blank" || a.hasAttribute("download")) return;
+    const href = a.getAttribute("href");
+    if (!href || href.startsWith("http") || href.startsWith("mailto:")) return;
+    if (!(href.startsWith("/docs/") || href.startsWith("/core/"))) return;
+    e.preventDefault();
+    history.pushState(null, "", href);
+  };
   @property() anchor = "";
   private _text = "";
   set text(value: string) {
     this._text = parseMarkdownWithSonicCode(
-      (markdown) => marked.parse(markdown) as string,
+      // Tables scroll in a wrapper, so they keep their full width on phones
+      (markdown) =>
+        (marked.parse(markdown) as string).replace(
+          /<table>[\s\S]*?<\/table>/g,
+          (table) => `<div class="docs-table-scroll">${table}</div>`,
+        ),
       value,
     );
     this.requestUpdate();
@@ -45,16 +67,17 @@ export class DocsMakdownRenderer extends Subscriber(LitElement) {
   appendImport() {
     if (this.querySelector("h1 + sonic-code")) return;
 
-    const locationHash = document.location.hash;
-    // Only real component pages (core/components/…), not any URL mentioning "components"
-    const isComponent = parseDocsLocation(locationHash).url.startsWith(
-      "core/components/",
+    const { url } = parseDocsLocation(
+      document.location.pathname + document.location.search + document.location.hash,
     );
+    // Only real component pages (core/components/…), not any URL mentioning "components"
+    const isComponent = url.startsWith("core/components/");
 
     if (isComponent) {
-      const split = locationHash.split("/");
-      const componentName = split.filter((name) => name.endsWith(".md")).pop();
-      const extractComponentName = componentName?.replace(".md", "");
+      const extractComponentName = url
+        .split("/")
+        .pop()
+        ?.replace(/\.mdx?$/, "");
 
       const markup = `<sonic-code language="javascript" class="mb-8"
       ><template> import '@supersoniks/concorde/${extractComponentName}'; </template>

package/src/docs/search/page.ts

@@ -8,12 +8,15 @@ const tagName = "docs-page"; // For Astro.build
 @customElement(tagName)
 export class DocsPage extends Subscriber(LitElement) {
   connectedCallback() {
-    this.setAttribute(
-      "serviceURL",
-      document.location.pathname.replace(/\/index.html$/, "")
-    );
-    this.markDownsURL = this.getAncestorAttributeValue("markDownsURL");
-    if (this.markDownsURL.lastIndexOf("/") != this.markDownsURL.length - 1) {
+    // Markdown is at the public pathname + `.md` (e.g. `/docs/…/start.md`).
+    // Fetch from site root via API serviceURL = origin; never relative to the
+    // current pushState path.
+    this.setAttribute("serviceURL", "");
+    this.markDownsURL = this.getAncestorAttributeValue("markDownsURL") || "";
+    if (
+      this.markDownsURL &&
+      this.markDownsURL.lastIndexOf("/") != this.markDownsURL.length - 1
+    ) {
       this.markDownsURL += "/";
     }
     super.connectedCallback();

package/src/docs/search/search.ts

@@ -1,95 +1,151 @@
-import { html, LitElement, nothing } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, state, property } from "lit/decorators.js";
 import { PublisherManager } from "@supersoniks/concorde/utils";
 import { tailwind } from "../tailwind";
 import search from "./docs-search.json";
 import "@supersoniks/concorde/core/components/ui/divider/divider";
 import "@supersoniks/concorde/core/components/ui/icon/icon";
-import "@supersoniks/concorde/core/components/ui/menu/menu";
+import "@supersoniks/concorde/core/components/ui/menu/menu-item";
 import "@supersoniks/concorde/core/components/ui/pop/pop";
 import { customScroll } from "@supersoniks/concorde/core/components/ui/_css/scroll";
+import { unsafeHTML } from "lit/directives/unsafe-html.js";
 
 import { FormElementInterface } from "@supersoniks/concorde/core/mixins/FormElement";
 import { Pop } from "@supersoniks/concorde/core/components/ui/pop/pop";
+import { docsPagePath } from "../docs-location";
+
+type SearchItem = { href: string; part: string; search: string; index: number };
+type SearchGroup = { title: string; href: string | null; items: SearchItem[] };
+
+/** Max sections listed under each page, and characters shown around a match. */
+const MAX_ITEMS_PER_PAGE = 3;
+const SNIPPET_RADIUS = 60;
 
 const tagName = "docs-search"; // For Astro.build
 const win: any = window;
 const fuzzysort = win.fuzzysort;
 @customElement(tagName)
 export class DocsSearch extends LitElement {
-  static styles = [tailwind, customScroll];
+  static styles = [
+    tailwind,
+    customScroll,
+    css`
+      .snippet mark {
+        background: none;
+        color: var(--sc-info);
+        font-weight: 600;
+      }
+    `,
+  ];
   @state({ type: Boolean }) hidePopMenu = false;
+  @state() results: SearchGroup[] = [];
+  @state() query = "";
   @property({ type: Boolean }) setFocus = false;
   search(val) {
-    // if (!val || val.length < 3) {
-    //   this.hidePopMenu = true;
-    //   return null;
-    // } else this.hidePopMenu = false;
-    PublisherManager.get("searchSelection").selection = null;
-    const searchResult = fuzzysort.go(val, search, { key: "search" });
-    const resultForList: Array<any> = [];
-    const titlesToContent: Map<string, any> = new Map();
+    this.query = (val ?? "").toString();
+    if (!this.query.trim()) {
+      this.results = [];
+      (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
+      return;
+    }
+    const searchResult = fuzzysort.go(this.query, search, {
+      key: "search",
+      limit: 60,
+    });
+    const groups: Map<string, SearchGroup> = new Map();
+    const found = new Set<string>();
 
-    const found: Array<string> = [];
     for (const result of searchResult) {
       if (result.score < -100000) continue;
-
       const obj = result.obj;
-
       for (const file in obj.files) {
         for (const part in obj.files[file].hashes) {
+          if (found.has(file + ":" + part)) continue;
+          found.add(file + ":" + part);
           const hash = obj.files[file].hashes[part];
-          if (found.includes(file + ":" + part)) continue;
-          found.push(file + ":" + part);
           const title = obj.files[file].title;
-          const subItem = {
-            href: "#" + file + "/" + part,
-            part: hash.title || "...",
-            search:
-              hash.type == "page" ? "Page" : this.getResultSearchString(result),
-            index: search.indexOf(obj),
-            template: hash.type == "page" ? "page" : null,
-          };
-          if (!titlesToContent.has(title)) {
-            const item: any = {
-              title: title,
-              items: [subItem],
-            };
-            titlesToContent.set(title, item);
-            resultForList.push(item);
-          } else {
-            const item = titlesToContent.get(title);
-            item.items.push(subItem);
+          // file is e.g. docs/getting-started/start.md — public pathname routes
+          const publicPath = docsPagePath(file);
+          const baseName = publicPath.split("/").pop() || "";
+          const href =
+            hash.type === "page" || part === baseName
+              ? publicPath
+              : `${publicPath}#${part}`;
+          let group = groups.get(title);
+          if (!group) {
+            group = { title, href: null, items: [] };
+            groups.set(title, group);
+          }
+          if (hash.type == "page") {
+            group.href = href;
+            continue;
           }
+          group.items.push({
+            href,
+            part: hash.title || title,
+            search: this.getResultSearchString(result),
+            index: search.indexOf(obj),
+          });
         }
       }
     }
-    (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
-    // this.hidePopMenu = resultForList.length == 0;
-    for (const item of resultForList) {
-      item.items.sort((a, b) => a.index - b.index);
+    for (const group of groups.values()) {
+      group.items.sort((a, b) => a.index - b.index);
+      group.items = group.items.slice(0, MAX_ITEMS_PER_PAGE);
+      group.href ??= group.items[0]?.href ?? null;
     }
-    PublisherManager.get("searchResult").set(resultForList);
+    this.results = [...groups.values()];
+    (this.shadowRoot?.querySelector("sonic-pop") as Pop)?.show();
   }
+
+  /**
+   * Close the header search overlay after choosing a result.
+   * Capture phase: menu-item pushState calls stopPropagation on bubble.
+   * pushState itself does not fire popstate, so the header cannot rely on that.
+   */
+  private closeAfterNavigate = (e: Event) => {
+    const item = e.composedPath().find((n): n is HTMLElement => {
+      if (!(n instanceof HTMLElement) || n.tagName !== "SONIC-MENU-ITEM") {
+        return false;
+      }
+      const href = (n as HTMLElement & { href?: string }).href;
+      return Boolean(href || n.getAttribute("href"));
+    });
+    if (!item) return;
+    (this.shadowRoot?.querySelector("sonic-pop") as Pop | null)?.hide();
+    this.dispatchEvent(
+      new CustomEvent("docs-search-close", { bubbles: true, composed: true }),
+    );
+  };
+  /** Text around the first match, matched characters highlighted. */
   getResultSearchString(result: any) {
-    const p = result.p;
-    const str = result.target
-      .split("")
-      .map((value, index) =>
-        p.includes(index)
-          ? "<span class='font-bold' style='color:var(--sc-info)'>" +
-            value +
-            "</span>"
-          : value,
-      )
-      .join("");
-    return str;
+    const p: number[] = Array.from(
+      fuzzysort.indexes?.(result) ?? result.indexes ?? result.p ?? [],
+    );
+    const target: string = result.target.replace(/\s/g, " ");
+    const first = p.length ? Math.min(...p) : 0;
+    const from = Math.max(0, first - SNIPPET_RADIUS);
+    const to = Math.min(target.length, first + SNIPPET_RADIUS * 2);
+    // The index already holds HTML entities: only escape raw tags.
+    const escape = (c: string) => (c === "<" ? "&lt;" : c === ">" ? "&gt;" : c);
+    let str = "";
+    for (let i = from; i < to; i++) {
+      const c = escape(target[i]);
+      str += p.includes(i) ? `<mark>${c}</mark>` : c;
+    }
+    return (from > 0 ? "…" : "") + str + (to < target.length ? "…" : "");
   }
   connectedCallback() {
     PublisherManager.get("docsSearch").search.onAssign((v) => this.search(v));
+    this.addEventListener("click", this.closeAfterNavigate, true);
     super.connectedCallback();
   }
 
+  disconnectedCallback() {
+    this.removeEventListener("click", this.closeAfterNavigate, true);
+    super.disconnectedCallback();
+  }
+
   firstUpdated() {
     if (this.setFocus) {
       setTimeout(() => {
@@ -125,81 +181,57 @@ export class DocsSearch extends LitElement {
         ${this.hidePopMenu
           ? nothing
           : html`
-              <sonic-menu
+              <div
                 slot="content"
-                class="max-w-[30rem] lg:max-w-[35rem] max-h-[50svh] overflow-auto  custom-scroll !left-0 !top-0 !relative"
+                class="w-[30rem] lg:w-[35rem] max-w-[calc(100vw-2rem)] max-h-[60svh] overflow-auto custom-scroll py-2"
               >
-                <sonic-list displayContents dataProvider="searchResult">
-                  <template>
-                    <div class="my-4">
-                      <div class="ml-3 mr-3 mb-1">
-                        <sonic-value
-                          key="title"
-                          class="font-bold text-lg "
-                        ></sonic-value>
-                      </div>
-                      <sonic-list subDataProvider="items">
-                        <template data-value="page">
-                          <sonic-menu-item
-                            formDataProvider="searchSelection"
-                            data-keyboard-nav="search-results doc-search"
-                            class="mt-1"
-                          >
-                            <sonic-icon
-                              slot="prefix"
-                              size="lg"
-                              library="heroicons"
-                              name="book-open"
-                            ></sonic-icon>
-                            <div>
-                              <sonic-value
-                                key="search"
-                                class="block font-medium "
-                              ></sonic-value>
-                            </div>
-                            <sonic-icon
-                              slot="suffix"
-                              size="lg"
-                              library="heroicons"
-                              name="chevron-right"
-                              class="opacity-40"
-                            ></sonic-icon>
-                          </sonic-menu-item>
-                        </template>
-                        <template>
-                          <sonic-menu-item
-                            formDataProvider="searchSelection"
-                            data-keyboard-nav="search-results doc-search"
-                            class="mt-1"
-                          >
-                            <div>
-                              <sonic-badge size="xs" ellipsis class="mb-1">
-                                <sonic-value
-                                  key="part"
-                                  class="block "
-                                ></sonic-value>
-                              </sonic-badge>
-                              <sonic-value
-                                key="search"
-                                class="block text-sm  font-normal pl-[.75rem]"
-                              ></sonic-value>
-                            </div>
-                            <sonic-icon
-                              slot="suffix"
-                              size="lg"
-                              library="heroicons"
-                              name="chevron-right"
-                              class="opacity-40"
-                            ></sonic-icon>
-                          </sonic-menu-item>
-                        </template>
-                      </sonic-list>
-                    </div>
-                  </template>
-                </sonic-list>
-              </sonic-menu>
+                ${this.results.length
+                  ? this.results.map((group) => this.renderGroup(group))
+                  : this.query.trim()
+                    ? html`<p class="px-3 py-2 text-sm text-neutral-500">
+                        No results
+                      </p>`
+                    : html`<p class="px-3 py-2 text-sm text-neutral-500">
+                        Type to search the documentation.
+                      </p>`}
+              </div>
             `}
       </sonic-pop>
     `;
   }
+
+  renderGroup(group: SearchGroup) {
+    return html`
+      <section class="py-1">
+        <sonic-menu-item
+          pushState
+          href=${group.href ?? nothing}
+          data-keyboard-nav="search-results doc-search"
+          size="sm"
+          class="w-full font-semibold"
+          ><span class="font-semibold">${group.title}</span></sonic-menu-item
+        >
+        ${group.items.map(
+          (item) => html`
+            <sonic-menu-item
+              pushState
+              href=${item.href}
+              data-keyboard-nav="search-results doc-search"
+              size="sm"
+              class="w-full"
+            >
+              <span class="block min-w-0 pl-3 text-left font-normal">
+                <span class="block truncate text-xs text-neutral-500"
+                  >${item.part}</span
+                >
+                <span class="snippet block text-sm line-clamp-2"
+                  >${unsafeHTML(item.search)}</span
+                >
+              </span>
+            </sonic-menu-item>
+          `,
+        )}
+      </section>
+    `;
+  }
 }

package/src/docs/tailwind/css/docs/content.css

@@ -19,14 +19,13 @@ docs-markdown-renderer :is(h1, h2, h3, h4)[id] {
 docs-page.prose :where(img) {
   max-width: 100%;
 }
+/* Markdown tables keep 100% width; the wrapper scrolls when columns overflow */
+docs-page .docs-table-scroll {
+  overflow-x: auto;
+}
 /* Wide demos (fixed min-width groups…) scroll instead of widening the page on phones */
 @media (max-width: 639px) {
   docs-page sonic-code > div {
     overflow-x: auto;
   }
-  /* tables stay 100% wide on larger screens; on phones they scroll */
-  docs-page.prose :where(table) {
-    display: block;
-    overflow-x: auto;
-  }
 }

package/src/tsconfig.declarations.json

@@ -0,0 +1,22 @@
+{
+  "extends": "./tsconfig-model.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": true,
+    "declaration": true,
+    "declarationMap": true,
+    "outDir": "../dist/types",
+    "rootDir": "."
+  },
+  "include": ["**/*.ts"],
+  "exclude": [
+    "node_modules/**/*",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.demo.ts",
+    "**/*.stories.ts",
+    "**/*.type-test.ts",
+    "docs.ts",
+    "docs/**/*"
+  ]
+}

package/src/tsconfig.emit.json

@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig-model.json",
+  "compilerOptions": {
+    "noEmit": false,
+    "emitDeclarationOnly": false,
+    "declaration": false,
+    "sourceMap": true,
+    "outDir": "../dist/js",
+    "rootDir": ".",
+    "lib": ["ES2021", "DOM", "DOM.Iterable"]
+  },
+  "include": ["**/*.ts"],
+  "exclude": [
+    "node_modules/**/*",
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.demo.ts",
+    "**/*.stories.ts",
+    "**/*.type-test.ts",
+    "docs.ts",
+    "docs/**/*"
+  ]
+}

package/src/tsconfig.json

@@ -201,6 +201,15 @@
       "./functional/sdui/sdui-dom-snapshot": [
         "/sites/concorde/src/core/components/functional/sdui/sdui-dom-snapshot.ts"
       ],
+      "./sdui-immutable.spec": [
+        "/sites/concorde/src/core/components/functional/sdui/sdui-immutable.spec.ts"
+      ],
+      "./functional/sdui-immutable.spec": [
+        "/sites/concorde/src/core/components/functional/sdui/sdui-immutable.spec.ts"
+      ],
+      "./functional/sdui/sdui-immutable.spec": [
+        "/sites/concorde/src/core/components/functional/sdui/sdui-immutable.spec.ts"
+      ],
       "./sdui-incremental.spec": [
         "/sites/concorde/src/core/components/functional/sdui/sdui-incremental.spec.ts"
       ],
@@ -300,6 +309,15 @@
       "./functional/states": [
         "/sites/concorde/src/core/components/functional/states/states.ts"
       ],
+      "./submit.spec": [
+        "/sites/concorde/src/core/components/functional/submit/submit.spec.ts"
+      ],
+      "./functional/submit.spec": [
+        "/sites/concorde/src/core/components/functional/submit/submit.spec.ts"
+      ],
+      "./functional/submit/submit.spec": [
+        "/sites/concorde/src/core/components/functional/submit/submit.spec.ts"
+      ],
       "./submit": [
         "/sites/concorde/src/core/components/functional/submit/submit.ts"
       ],
@@ -1074,6 +1092,9 @@
       "./utils/HTML": [
         "/sites/concorde/src/core/utils/HTML.ts"
       ],
+      "./utils/LocationHandler.spec": [
+        "/sites/concorde/src/core/utils/LocationHandler.spec.ts"
+      ],
       "./utils/LocationHandler": [
         "/sites/concorde/src/core/utils/LocationHandler.ts"
       ],
@@ -1104,6 +1125,12 @@
       "./utils/dataProviderKey": [
         "/sites/concorde/src/core/utils/dataProviderKey.ts"
       ],
+      "./utils/deepReadonly.spec": [
+        "/sites/concorde/src/core/utils/deepReadonly.spec.ts"
+      ],
+      "./utils/deepReadonly": [
+        "/sites/concorde/src/core/utils/deepReadonly.ts"
+      ],
       "./utils/derive.spec": [
         "/sites/concorde/src/core/utils/derive.spec.ts"
       ],
@@ -1122,18 +1149,30 @@
       "./utils/endpoint": [
         "/sites/concorde/src/core/utils/endpoint.ts"
       ],
+      "./utils/immutableValue.spec": [
+        "/sites/concorde/src/core/utils/immutableValue.spec.ts"
+      ],
+      "./utils/immutableValue": [
+        "/sites/concorde/src/core/utils/immutableValue.ts"
+      ],
       "./utils/jsonataHelpers": [
         "/sites/concorde/src/core/utils/jsonataHelpers.ts"
       ],
       "./utils/jsonataRuntime": [
         "/sites/concorde/src/core/utils/jsonataRuntime.ts"
       ],
+      "./utils/nestedDotForm.spec": [
+        "/sites/concorde/src/core/utils/nestedDotForm.spec.ts"
+      ],
       "./utils/positioning.spec": [
         "/sites/concorde/src/core/utils/positioning.spec.ts"
       ],
       "./utils/positioning": [
         "/sites/concorde/src/core/utils/positioning.ts"
       ],
+      "./utils/publisherImmutable.spec": [
+        "/sites/concorde/src/core/utils/publisherImmutable.spec.ts"
+      ],
       "./utils/publisherPathKey.spec": [
         "/sites/concorde/src/core/utils/publisherPathKey.spec.ts"
       ],
@@ -1143,6 +1182,12 @@
       "./utils/route": [
         "/sites/concorde/src/core/utils/route.ts"
       ],
+      "./utils/strictGet.spec": [
+        "/sites/concorde/src/core/utils/strictGet.spec.ts"
+      ],
+      "./utils/strictGet": [
+        "/sites/concorde/src/core/utils/strictGet.ts"
+      ],
       "./utils/url-pattern": [
         "/sites/concorde/src/core/utils/url-pattern.ts"
       ],
@@ -1185,6 +1230,9 @@
       "./undefined/docs-source-raw": [
         "/sites/concorde/src/docs/components/docs-source-raw.ts"
       ],
+      "./docs-location.spec": [
+        "/sites/concorde/src/docs/docs-location.spec.ts"
+      ],
       "./docs-location": [
         "/sites/concorde/src/docs/docs-location.ts"
       ],
@@ -1215,11 +1263,8 @@
       "./example/docs-boarding-pass-demo": [
         "/sites/concorde/src/docs/example/docs-boarding-pass-demo.ts"
       ],
-      "./example/docs-input-autocomplete-demos": [
-        "/sites/concorde/src/docs/example/docs-input-autocomplete-demos.ts"
-      ],
-      "./example/docs-joke-demos": [
-        "/sites/concorde/src/docs/example/docs-joke-demos.ts"
+      "./example/docs-flight-demos": [
+        "/sites/concorde/src/docs/example/docs-flight-demos.ts"
       ],
       "./example/docs-jsonata-demos": [
         "/sites/concorde/src/docs/example/docs-jsonata-demos.ts"
@@ -1275,6 +1320,9 @@
       "./mock-api/fixtures": [
         "/sites/concorde/src/docs/mock-api/fixtures.ts"
       ],
+      "./mock-api/flights": [
+        "/sites/concorde/src/docs/mock-api/flights.ts"
+      ],
       "./mock-api/register": [
         "/sites/concorde/src/docs/mock-api/register.ts"
       ],