@xmesh/system-design 0.0.3 → 0.0.5

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

@@ -20,7 +20,8 @@
     error-dismiss
     copy-path      — detail: { path }
 
-  Light DOM. components/validation/index.css must be loaded in the host page.
+  Light DOM. This module appends its stylesheets (validation + primitives) to
+  document.head on import.
 
   VALIDATION_PRESETS and VALIDATION_TITLE are also exported for reuse.
 */
@@ -32,6 +33,18 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 import { LitElement, html, svg, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import validationSheets from "./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 sheet of [...validationSheets, ...primitivesSheets]) {
+        if (!document.adoptedStyleSheets.includes(sheet)) {
+            document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];
+        }
+    }
+}
 export const VALIDATION_TITLE = {
     size: "File too large",
     ext: "Wrong file type",
@@ -110,6 +123,12 @@ const I_UPLOAD = (s = 14) => SHELL(s, 1.8, svg `
 const I_CHECK = (s = 10) => SHELL(s, 2.4, svg `
   <path d="M5 12l4 4 10-10" />
 `);
+/**
+ * @fires file-pick - Fired when the user requests to pick a file.
+ * @fires file-drop - Fired when a file is dropped (`detail.file`).
+ * @fires copy-path - Fired when the file path is copied (`detail.path`).
+ * @fires error-dismiss - Fired when the validation error is dismissed.
+ */
 let XmFileValidationBlock = class XmFileValidationBlock extends LitElement {
     constructor() {
         super(...arguments);
@@ -316,3 +335,4 @@ __decorate([
 XmFileValidationBlock = __decorate([
     customElement("xm-file-validation-block")
 ], XmFileValidationBlock);
+export { XmFileValidationBlock };

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

@@ -0,0 +1,400 @@
+// GENERATED by scripts/gen-styles.mjs — do not edit. Source: lit/components/validation/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 {
+/* validation.css — unified file-validation block.
+   Mirrors the in-app component at:
+     packages/shared/components/chat/latest/settings/SettingsDefinitionsField.vue
+   Token contract: --md-sys-* / --xm-* only.
+   Theme flips happen via primitives behind those tokens. */
+
+/* ----- Block container (single border, single radius) ----- */
+
+.ds-fvb {
+  border: 1px solid var(--md-sys-color-outline-variant);
+  border-radius: var(--md-sys-shape-corner-button);
+  background: var(--md-sys-color-inverse-surface);
+  font-family: var(--md-sys-typescale-body-large-font);
+  color: var(--md-sys-color-inverse-on-surface);
+  width: 100%;
+  height: 84px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  overflow: hidden;
+  box-sizing: border-box;
+  transition:
+    border-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);
+}
+
+/* Two-region states (file + error, drop + error) grow to fit their
+   content. Single-region states (idle, dragging, valid, standalone
+   error) keep the fixed 84px. */
+.ds-fvb--invalid,
+.ds-fvb--error-no-file {
+  height: auto;
+  min-height: 84px;
+  justify-content: flex-start;
+}
+
+.ds-fvb--invalid .ds-fvb__file,
+.ds-fvb--error-no-file .ds-fvb__drop {
+  flex: 0 0 auto;
+}
+
+.ds-fvb--invalid .ds-fvb__error,
+.ds-fvb--error-no-file .ds-fvb__error {
+  flex: 1 1 auto;
+  align-content: start;
+}
+
+.ds-fvb--idle {
+  border-style: dashed;
+  border-color: var(--md-sys-color-outline);
+  background: var(--md-sys-color-surface-container-high);
+}
+
+.ds-fvb--dragging {
+  border-style: solid;
+  border-color: var(--xm-color-primary-pressed);
+  background: color-mix(
+    in oklch,
+    var(--md-sys-color-primary-container) 50%,
+    var(--md-sys-color-surface-container-high)
+  );
+}
+
+.ds-fvb--valid {
+  border-color: var(--md-sys-color-outline-variant);
+  background: var(--md-sys-color-inverse-surface);
+}
+
+.ds-fvb--invalid,
+.ds-fvb--error-no-file {
+  border-color: var(--md-sys-color-outline);
+  background: var(--md-sys-color-surface-container-high);
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+/* ----- Drop region ----- */
+
+.ds-fvb__drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--s-0-5);
+  padding: var(--s-2-5) var(--s-3);
+  cursor: pointer;
+}
+
+.ds-fvb__drop:focus-visible {
+  outline: 1px solid var(--xm-color-primary-pressed);
+  outline-offset: 2px;
+}
+
+.ds-fvb__drop[data-dragging="1"] {
+  background: color-mix(
+    in oklch,
+    var(--md-sys-color-primary-container) 35%,
+    transparent
+  );
+}
+
+.ds-fvb__drop-primary {
+  font-size: 12px;
+  font-weight: 500;
+  color: inherit;
+}
+
+.ds-fvb__drop-secondary {
+  font-size: 10.5px;
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+.ds-fvb--error-no-file .ds-fvb__drop-secondary {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+/* ----- File region ----- */
+
+.ds-fvb__file {
+  display: flex;
+  flex-direction: column;
+  gap: var(--s-0-5);
+  padding: var(--s-1-5) var(--s-2-5);
+  min-width: 0;
+}
+
+.ds-fvb--invalid .ds-fvb__file {
+  padding: var(--s-2) var(--s-3);
+}
+
+.ds-fvb__file-row {
+  display: flex;
+  align-items: center;
+  gap: var(--s-2);
+  min-width: 0;
+}
+
+.ds-fvb__file-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1);
+  margin-left: auto;
+  flex-shrink: 0;
+}
+
+.ds-fvb__file-name {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--s-1-5);
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--md-sys-color-inverse-on-surface);
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.ds-fvb--invalid .ds-fvb__file-name {
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+.ds-fvb__file-name-label {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ds-fvb__file-sub {
+  font-size: 10.5px;
+  color: var(--xm-color-inverse-on-surface-muted);
+  font-feature-settings: "tnum";
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.ds-fvb--invalid .ds-fvb__file-sub {
+  color: var(--xm-color-inverse-on-surface-muted);
+}
+
+/* ----- Hairline divider between file/drop and error rows ----- */
+
+.ds-fvb__divider {
+  height: 1px;
+  background: color-mix(in oklch, var(--xm-color-inverse-on-surface-muted) 22%, transparent);
+  margin: 0;
+}
+
+/* ----- Error region ----- */
+
+.ds-fvb__error {
+  display: grid;
+  grid-template-columns: 12px 1fr 14px;
+  column-gap: var(--s-2);
+  row-gap: var(--s-0-5);
+  padding: var(--s-1-5) var(--s-2-5);
+}
+
+.ds-fvb--invalid .ds-fvb__error {
+  padding: var(--s-2) var(--s-3);
+}
+
+.ds-fvb__error-icon {
+  grid-column: 1;
+  grid-row: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  margin-top: var(--s-0-5);
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+.ds-fvb__error-title {
+  grid-column: 2;
+  grid-row: 1;
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: -0.005em;
+  color: var(--md-sys-color-inverse-on-surface);
+  min-width: 0;
+  line-height: 1.35;
+}
+
+.ds-fvb__error-dismiss {
+  grid-column: 3;
+  grid-row: 1;
+  appearance: none;
+  border: none;
+  background: transparent;
+  color: var(--xm-color-inverse-on-surface-muted);
+  width: 14px;
+  height: 14px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 1px;
+  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);
+}
+
+.ds-fvb__error-dismiss:hover {
+  background: var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+.ds-fvb__error-message {
+  grid-column: 2 / 4;
+  grid-row: 2;
+  margin: 0;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--xm-color-inverse-on-surface-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.ds-fvb__meta {
+  grid-column: 2 / 4;
+  grid-row: 3;
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--s-1) var(--s-1-5);
+  margin-top: 1px;
+  min-width: 0;
+}
+
+.ds-fvb__filename {
+  font-size: 10.5px;
+  color: var(--md-sys-color-inverse-on-surface);
+  font-weight: 500;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-width: 0;
+}
+
+.ds-fvb__path {
+  font-size: 10.5px;
+  background: var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: 1px 5px;
+  border-radius: 3px;
+  line-height: 1.4;
+}
+
+.ds-fvb__rule {
+  font-size: 10px;
+  background: var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-inverse-on-surface);
+  padding: 1px var(--s-1-5);
+  border-radius: 999px;
+  font-weight: 500;
+  letter-spacing: 0.02em;
+  text-transform: lowercase;
+  line-height: 1.4;
+}
+
+.ds-fvb__copy {
+  appearance: none;
+  margin-left: auto;
+  border: none;
+  background: transparent;
+  color: var(--xm-color-inverse-on-surface-muted);
+  font-size: 10px;
+  font-weight: 500;
+  padding: 1px 5px;
+  border-radius: 3px;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-family: var(--md-sys-typescale-body-large-font);
+  line-height: 1.4;
+  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);
+}
+
+.ds-fvb__copy:hover {
+  background: var(--md-sys-color-outline-variant);
+  color: var(--md-sys-color-inverse-on-surface);
+}
+
+.ds-fvb__copy:focus-visible {
+  outline: 1px solid var(--md-sys-color-inverse-on-surface);
+  outline-offset: 1px;
+}
+
+/* ----- Shared helpers (still used by the file row) ----- */
+
+.ds-mono {
+  font-family: var(--xm-typescale-mono-font);
+}
+
+.ds-valid-tick {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--md-sys-color-inverse-on-surface);
+  color: var(--md-sys-color-inverse-surface);
+  flex-shrink: 0;
+}
+
+.ds-invalid-mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  color: var(--md-sys-color-inverse-on-surface);
+  flex-shrink: 0;
+}
+
+/* ----- Extension badges ----- */
+
+.ds-ext-badge {
+  font-family: var(--xm-typescale-mono-font);
+  font-size: 9px;
+  font-weight: 700;
+  padding: var(--s-0-5) 5px;
+  border-radius: 3px;
+  letter-spacing: 0.05em;
+  flex-shrink: 0;
+}
+
+.ds-ext-yml,
+.ds-ext-yaml {
+  background: var(--xm-ext-yml-bg);
+  color: var(--xm-ext-yml-ink);
+}
+
+.ds-ext-json {
+  background: var(--xm-ext-json-bg);
+  color: var(--xm-ext-json-ink);
+}
+
+}`);
+  sheets = [sheet];
+}
+export default sheets;

package/dist/lit/index.d.ts

@@ -31,6 +31,7 @@ export * from "./components/kbd/index.js";
 export * from "./components/list/index.js";
 export * from "./components/list-item/index.js";
 export * from "./components/menu/index.js";
+export * from "./components/multi-select/index.js";
 export * from "./components/navigation-drawer/index.js";
 export * from "./components/overlay/index.js";
 export * from "./components/pagination/index.js";

package/dist/lit/index.js

@@ -40,6 +40,7 @@ export * from "./components/kbd/index.js";
 export * from "./components/list/index.js";
 export * from "./components/list-item/index.js";
 export * from "./components/menu/index.js";
+export * from "./components/multi-select/index.js";
 export * from "./components/navigation-drawer/index.js";
 export * from "./components/overlay/index.js";
 export * from "./components/pagination/index.js";

package/dist/react/XmAlert.d.ts

@@ -0,0 +1,99 @@
+import React from "react";
+import { XmAlert as XmAlertElement } from "../lit/components/alert/index.js";
+
+/**
+ * A generic type for strongly typing custom events with their targets
+ * @template T - The type of the event target (extends EventTarget)
+ * @template D - The type of the detail payload for the custom event
+ */
+type TypedEvent<T extends EventTarget, E = Event> = E & {
+  target: T;
+};
+/** `XmAlert` component event */
+export type XmAlertElementEvent<E = Event> = TypedEvent<XmAlertElement, E>;
+
+export type { XmAlertElement };
+
+export interface XmAlertProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  dismissible?: boolean;
+
+  /** undefined */
+  static?: boolean;
+
+  /** undefined */
+  prominent?: boolean;
+
+  /** undefined */
+  severity?: XmAlertElement["severity"];
+
+  /** undefined */
+  heading?: XmAlertElement["heading"];
+
+  /** undefined */
+  variant?: XmAlertElement["variant"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmAlertElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+
+  /** Fired when the alert's action is activated. */
+  onAlertAction?: (event: XmAlertElementEvent) => void;
+
+  /** Fired when the alert is dismissed. */
+  onAlertDismiss?: (event: XmAlertElementEvent) => void;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `severity`: undefined
+ * - `heading`: undefined
+ * - `dismissible`: undefined
+ * - `static`: undefined
+ * - `prominent`: undefined
+ * - `variant`: undefined
+ *
+ * ## Events
+ *
+ * Events that will be emitted by the component.
+ *
+ * - `alert-action`: Fired when the alert's action is activated.
+ * - `alert-dismiss`: Fired when the alert is dismissed.
+ */
+export const XmAlert: React.ForwardRefExoticComponent<XmAlertProps>;

package/dist/react/XmAlert.js

@@ -0,0 +1,45 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/alert/index.js";
+import { useEventListener, createForwardedRefHandler } from "./react-utils.js";
+
+export const XmAlert = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    dismissible,
+    prominent,
+    severity,
+    heading,
+    variant,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  /** Event listeners - run once */
+  useEventListener(ref, "alert-action", props.onAlertAction);
+  useEventListener(ref, "alert-dismiss", props.onAlertDismiss);
+
+  return React.createElement(
+    "xm-alert",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      severity: severity,
+      heading: heading,
+      variant: variant,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      dismissible: dismissible ? true : undefined,
+      static: props.static ? true : undefined,
+      prominent: prominent ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});

package/dist/react/XmAppBar.d.ts

@@ -0,0 +1,59 @@
+import React from "react";
+import { XmAppBar as XmAppBarElement } from "../lit/components/app-bar/index.js";
+
+export type { XmAppBarElement };
+
+export interface XmAppBarProps extends Pick<
+  React.AllHTMLAttributes<HTMLElement>,
+  | "children"
+  | "dir"
+  | "hidden"
+  | "id"
+  | "lang"
+  | "slot"
+  | "style"
+  | "title"
+  | "translate"
+  | "onClick"
+  | "onFocus"
+  | "onBlur"
+> {
+  /** undefined */
+  sticky?: boolean;
+
+  /** undefined */
+  size?: XmAppBarElement["size"];
+
+  /** A space-separated list of the classes of the element. Classes allows CSS and JavaScript to select and access specific elements via the class selectors or functions like the method `Document.getElementsByClassName()`. */
+  className?: string;
+
+  /** Contains a space-separated list of the part names of the element that should be exposed on the host element. */
+  exportparts?: string;
+
+  /** Used for labels to link them with their inputs (using input id). */
+  htmlFor?: string;
+
+  /** Used to help React identify which items have changed, are added, or are removed within a list. */
+  key?: number | string;
+
+  /** Contains a space-separated list of the part names of the element. Part names allows CSS to select and style specific elements in a shadow tree via the ::part pseudo-element. */
+  part?: string;
+
+  /** A mutable ref object whose `.current` property is initialized to the passed argument (`initialValue`). The returned object will persist for the full lifetime of the component. */
+  ref?: React.Ref<XmAppBarElement>;
+
+  /** Allows developers to make HTML elements focusable, allow or prevent them from being sequentially focusable (usually with the `Tab` key, hence the name) and determine their relative ordering for sequential focus navigation. */
+  tabIndex?: number;
+}
+
+/**
+ *
+ *
+ * ## Attributes & Properties
+ *
+ * Component attributes and properties that can be applied to the element or by using JavaScript.
+ *
+ * - `size`: undefined
+ * - `sticky`: undefined
+ */
+export const XmAppBar: React.ForwardRefExoticComponent<XmAppBarProps>;

package/dist/react/XmAppBar.js

@@ -0,0 +1,34 @@
+import React, { forwardRef, useRef } from "react";
+import "../lit/components/app-bar/index.js";
+import { createForwardedRefHandler } from "./react-utils.js";
+
+export const XmAppBar = forwardRef((props, forwardedRef) => {
+  const ref = useRef(null);
+  const {
+    sticky,
+    size,
+    className,
+    exportparts,
+    htmlFor,
+    part,
+    tabIndex,
+    ...restProps
+  } = props;
+
+  return React.createElement(
+    "xm-app-bar",
+    {
+      ref: createForwardedRefHandler(ref, forwardedRef),
+      ...restProps,
+      size: size,
+      class: className,
+      exportparts: exportparts,
+      for: htmlFor ?? props["for"],
+      part: part,
+      tabindex: tabIndex ?? props["tabindex"],
+      sticky: sticky ? true : undefined,
+      style: { ...props.style },
+    },
+    props.children,
+  );
+});