@xmesh/system-design 0.0.4 → 0.0.5

package/dist/lit/components/breadcrumbs/index.js

@@ -36,22 +36,23 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import primitivesSheets from "../primitives/index.styles.js";
+import breadcrumbsSheets from "./index.styles.js";
 // Resolve CSS relative to the *built* file:
 // lit/build/components/breadcrumbs/index.js → ../...
-const BREADCRUMBS_CSS = new URL("../breadcrumbs/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
 let XmBreadcrumbs = class XmBreadcrumbs extends LitElement {
     constructor() {
         super(...arguments);
         this.items = [];
         this.separator = "chevron";
     }
+    // Adopted from the build-generated sheets (scripts/gen-styles.mjs) — no
+    // runtime URL fetch (ADR 0012). Cascade order preserved from the old <link>s.
+    static { this.styles = [...primitivesSheets, ...breadcrumbsSheets]; }
     render() {
         const items = Array.isArray(this.items) ? this.items : [];
         const lastIndex = items.length - 1;
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}" />
-      <link rel="stylesheet" href="${BREADCRUMBS_CSS}" />
       <style>
         :host {
           display: block;

package/dist/lit/components/breadcrumbs/index.styles.js

@@ -0,0 +1,105 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/breadcrumbs/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================
+   <xm-breadcrumbs> — location trail.
+
+   Surface / ink (AD-13): a transparent trail that traces its host surface.
+   On the desk family: link ink var(--md-sys-color-on-surface-variant), hover
+   var(--md-sys-color-on-surface); the CURRENT (last) item is coral
+   var(--md-sys-color-primary) — the page indicator. The divider glyph is a
+   muted neutral, never a status hue.
+
+   BEM: block \`breadcrumbs\`; elements \`__item\` \`__link\` \`__current\`
+   \`__separator\` \`__slash\`.
+   ============================================ */
+
+.breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--s-1);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--md-sys-typescale-body-medium-font);
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: var(--md-sys-typescale-body-medium-line-height);
+  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
+}
+
+.breadcrumbs__item {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+  min-width: 0;
+}
+
+.breadcrumbs__link {
+  display: inline-block;
+  padding: var(--s-1) var(--s-2);
+  border-radius: var(--md-sys-shape-corner-small);
+  color: var(--md-sys-color-on-surface-variant);
+  text-decoration: none;
+  white-space: nowrap;
+  transition:
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.breadcrumbs__link:hover {
+  color: var(--md-sys-color-on-surface);
+  background: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) var(--md-sys-state-hover-state-layer-opacity),
+    transparent
+  );
+}
+.breadcrumbs__link:focus {
+  outline: none;
+}
+.breadcrumbs__link:focus-visible {
+  outline: none;
+  color: var(--md-sys-color-on-surface);
+  box-shadow: var(--xm-state-focus-ring);
+}
+
+.breadcrumbs__current {
+  display: inline-block;
+  padding: var(--s-1) var(--s-2);
+  color: var(--md-sys-color-primary);
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+/* A non-last item with no href: plain, non-interactive text — NOT the coral
+   current-page treatment (only the last item is the current page). */
+.breadcrumbs__text {
+  display: inline-block;
+  padding: var(--s-1) var(--s-2);
+  color: var(--md-sys-color-on-surface-variant);
+  white-space: nowrap;
+}
+
+.breadcrumbs__separator {
+  display: inline-flex;
+  align-items: center;
+  color: var(--md-sys-color-on-surface-variant);
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.breadcrumbs__slash {
+  font-size: var(--md-sys-typescale-body-medium-size);
+  line-height: 1;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/bubble/index.d.ts

@@ -16,6 +16,10 @@ export interface BubbleArtifact {
 declare class LightElement extends LitElement {
     createRenderRoot(): HTMLElement | DocumentFragment;
 }
+/**
+ * @fires artifact-download - Fired when an artifact download is requested.
+ * @fires artifact-open - Fired when an artifact is opened.
+ */
 export declare class XmBubbleGroup extends LightElement {
     variant: BubbleVariant;
     private _authoredChildren;

package/dist/lit/components/bubble/index.js

@@ -36,18 +36,17 @@ import { unsafeHTML } from "lit/directives/unsafe-html.js";
 import { customElement, property } from "lit/decorators.js";
 // Register <xm-button> for the artifact "Download" action below.
 import "../button/index.js";
+import bubbleSheets from "./index.styles.js";
+import composerSheets from "../composer/index.styles.js";
+import primitivesSheets from "../primitives/index.styles.js";
+// Light DOM: adopt the build-generated sheets into the document — no runtime
+// URL fetch (ADR 0012). Deduped by sheet identity (the generated modules are
+// singletons); the CSS is wrapped in @layer components (spine AD-2).
 if (typeof document !== "undefined") {
-    for (const href of [
-        new URL("../bubble/index.css", import.meta.url).href,
-        new URL("../composer/index.css", import.meta.url).href,
-        new URL("../primitives/index.css", import.meta.url).href,
-    ]) {
-        if (document.querySelector(`link[rel="stylesheet"][href="${href}"]`))
-            continue;
-        const link = document.createElement("link");
-        link.rel = "stylesheet";
-        link.href = href;
-        document.head.appendChild(link);
+    for (const sheet of [...bubbleSheets, ...composerSheets, ...primitivesSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
     }
 }
 class LightElement extends LitElement {
@@ -122,6 +121,10 @@ function applyBubbleClasses(root) {
    Authors put bubble + actions inside it; the group anchors the
    layout edge and reveals .bubble-actions on hover via CSS only.
    ─────────────────────────────────────────────────────────────*/
+/**
+ * @fires artifact-download - Fired when an artifact download is requested.
+ * @fires artifact-open - Fired when an artifact is opened.
+ */
 let XmBubbleGroup = class XmBubbleGroup extends LightElement {
     constructor() {
         super(...arguments);

package/dist/lit/components/bubble/index.styles.js

@@ -0,0 +1,196 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/bubble/index.css
+// SSR-safe: constructable stylesheets need the DOM, so in a non-DOM context
+// (Node/SSR import) this exports [] instead of throwing. The CSS self-declares
+// the @layer order so the override contract holds even without ./base (AD-2).
+let sheets = [];
+if (typeof CSSStyleSheet !== "undefined") {
+  const sheet = new CSSStyleSheet();
+  sheet.replaceSync(`@layer reset, base, tokens, components, utilities;
+@layer components {
+/* ============================================================
+   <Bubble /> — chat message vocabulary
+
+   Three exported components share this stylesheet:
+     • .bubble                — the message body itself (--user | --bot)
+     • .bubble-group          — column wrapping bubble + actions, anchored
+                                left for bot, right for user
+     • .bubble-actions        — hover-reveal toolbar (timestamp + icons)
+
+   Pairs with components/bubble/index.jsx. Loaded directly by every preview
+   page that renders a chat thread (bubbles.html, chat.html). No tag
+   selectors — paragraph, list, strong, code content is wrapped by the
+   JSX <BubbleBody> walker into .bubble__paragraph / .bubble__list / etc.
+   ============================================================ */
+
+/* ---------- Bubble body ---------- */
+.bubble {
+  max-width: 640px;
+  font:
+    var(--md-sys-typescale-body-large-weight)
+    var(--md-sys-typescale-body-large-size) /
+    var(--md-sys-typescale-body-large-line-height)
+    var(--md-sys-typescale-body-large-font);
+}
+/* User bubble shares the composer's raised family (surface-container-high)
+   so "your voice" reads as one surface across input and thread.
+   surface-container-lowest was ~black in dark and vanished into the desk;
+   the high container sits a clear step above \`surface\` in both themes. */
+.bubble--user {
+  padding: 11px var(--s-4-5);
+  border-radius: var(--md-sys-shape-corner-large);
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--md-sys-color-on-surface);
+}
+/* Bot bubble has no surface of its own — it rides whatever's behind it.
+   In the xmesh chat the thread sits on \`surface\` (the warm dark "desk"
+   in dark theme, cream in light), so the bot bubble uses on-surface. The
+   primitives flip per theme — a single rule covers both. If a host page
+   puts the thread on \`inverse-surface\` (a card) instead, override with
+   .bubble--bot { color: var(--md-sys-color-inverse-on-surface) } at the
+   page level. */
+.bubble--bot {
+  padding: 0 var(--s-0-5);
+  color: var(--md-sys-color-on-surface);
+  max-width: 720px;
+  background: transparent;
+}
+
+/* ---------- Bubble body content (BEM-wrapped by <BubbleBody>) ---------- */
+.bubble__paragraph { margin: 0 0 0.75em; }
+.bubble__paragraph:last-child { margin-bottom: 0; }
+
+.bubble__list { margin: var(--s-1) 0 0; padding-left: var(--s-5-5); }
+.bubble__list--ordered { list-style: decimal; }
+.bubble__list--unordered { list-style: none; padding-left: var(--s-5-5); }
+.bubble__list-item { padding-left: var(--s-1-5); margin-bottom: var(--s-1-5); }
+.bubble__list--ordered .bubble__list-item::marker {
+  color: var(--xm-color-on-surface-soft);
+  font-variant-numeric: tabular-nums;
+}
+.bubble__list--unordered .bubble__list-item {
+  position: relative;
+  padding-left: var(--s-3-5);
+  margin-bottom: var(--s-1);
+}
+.bubble__list--unordered .bubble__list-item::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 0.7em;
+  width: 4px; height: 4px;
+  border-radius: 50%;
+  background: var(--xm-color-on-surface-soft);
+}
+
+.bubble__strong { font-weight: 600; color: var(--md-sys-color-on-surface); }
+
+/* Inline code — flat: monospaced ink shift, no chip background.
+   The page can still override --xm-color-code-ink at :root for accent
+   variants (see bubbles.html for the canonical override). */
+.bubble__code {
+  background: transparent;
+  color: var(--xm-color-code-ink, oklch(0.55 0.16 25));
+  padding: 0;
+  border-radius: 0;
+  font: 500 12.5px/1.4 var(--xm-typescale-mono-font);
+}
+
+/* ---------- Bubble group (column wrapper) ---------- */
+.bubble-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-1-5);
+  max-width: 720px;
+}
+.bubble-group--user {
+  align-items: flex-end;
+  max-width: 640px;
+}
+.bubble-group--bot {
+  align-items: flex-start;
+}
+
+/* ---------- Bubble actions (hover-reveal toolbar) ---------- */
+.bubble-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-2-5);
+  padding: 0 var(--s-1);
+  background: transparent;
+  border: 0;
+  color: var(--xm-color-on-surface-soft);
+  opacity: 0;
+  transform: translateY(-1px);
+  transition:
+    opacity var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    transform var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+  pointer-events: none;
+}
+.bubble-group:hover .bubble-actions,
+.bubble-group:focus-within .bubble-actions {
+  opacity: 1;
+  transform: none;
+  pointer-events: auto;
+}
+
+.bubble-actions__ts {
+  font: 400 12px/1 var(--xm-typescale-mono-font);
+  color: var(--xm-color-on-surface-soft);
+  letter-spacing: 0.02em;
+}
+
+.bubble-actions__btn {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--xm-color-on-surface-soft);
+  padding: var(--s-1);
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition:
+    background var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard),
+    color var(--md-sys-motion-duration-short3) var(--md-sys-motion-easing-standard);
+}
+.bubble-actions__btn:hover {
+  background: color-mix(in oklch, currentColor 14%, transparent);
+  color: var(--md-sys-color-on-surface);
+}
+.bubble-actions__btn svg {
+  width: 16px; height: 16px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 1.6;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* ---------- Attachment chips (used when user bubble carries files) ---------- */
+.bubble__atts {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--s-1-5);
+  margin-bottom: var(--s-1-5);
+}
+.bubble__att-mini {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  padding: var(--s-1) var(--s-2);
+  border-radius: 6px;
+  background: color-mix(in oklab, currentColor 12%, transparent);
+  font: 500 11px/1 var(--xm-typescale-mono-font);
+}
+.bubble__att-thumb {
+  width: 14px; height: 14px;
+  border-radius: 3px;
+  background-size: cover;
+  background-position: center;
+  flex-shrink: 0;
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/components/button/index.d.ts

@@ -5,6 +5,7 @@ type ButtonSize = "xs" | "sm" | "md" | "lg";
 type ButtonType = "button" | "submit" | "reset";
 type ForceState = "hover" | "active" | "focus" | null;
 export declare class XmButton extends LitElement {
+    static styles: CSSStyleSheet[];
     static shadowRootOptions: ShadowRootInit;
     variant: ButtonVariant;
     size: ButtonSize;

package/dist/lit/components/button/index.js

@@ -37,6 +37,8 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
+import btnSheets from "./index.styles.js";
+import primSheets from "../primitives/index.styles.js";
 const VARIANT_CLASS = {
     primary: "btn--primary",
     secondary: "btn--secondary",
@@ -48,17 +50,6 @@ const VARIANT_CLASS = {
     "ghost-canvas": "btn--ghost-canvas",
     "ghost-accent-canvas": "btn--ghost-accent-canvas",
 };
-// Resolve CSS path relative to this module so the previews can sit at
-// any depth without the component caring (e.g. lit/preview/buttons.html
-// → ../components/button/index.css).
-//
-// Paths are computed from the *built* file location:
-// `lit/build/components/button/index.js` — 3 levels of `..` to reach
-// `lit/`, then into `components/`. The .ts source under
-// `lit/components/button/` is never loaded by the browser; only the
-// tsc-emitted .js is.
-const BTN_CSS = new URL("../button/index.css", import.meta.url).href;
-const PRIMITIVES_CSS = new URL("../primitives/index.css", import.meta.url).href;
 let XmButton = class XmButton extends LitElement {
     constructor() {
         super(...arguments);
@@ -78,6 +69,10 @@ let XmButton = class XmButton extends LitElement {
             this.requestUpdate();
         };
     }
+    // Component CSS is adopted from the build-generated constructable sheets
+    // (scripts/gen-styles.mjs) — no runtime URL fetch (ADR 0012). primitives
+    // first so the button's own rules win on overlap.
+    static { this.styles = [...primSheets, ...btnSheets]; }
     // Forward focus to the inner native <button>. Required for Enter/Space
     // to fire a click when the host is focused via tabindex (used by toggle
     // and tab buttons that receive focus on the host element).
@@ -118,8 +113,6 @@ let XmButton = class XmButton extends LitElement {
       `;
         }
         return html `
-      <link rel="stylesheet" href="${PRIMITIVES_CSS}">
-      <link rel="stylesheet" href="${BTN_CSS}">
       <style>
         :host { display: inline-block; }
         :host([full-width]) { display: block; }