@xmesh/system-design 0.0.1

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

@@ -0,0 +1,318 @@
+/*
+  validation/index.ts — Lit port of components/validation/index.jsx.
+
+  <xm-file-validation-block> — unified upload + validation surface.
+  Combines a drop/picker zone and a validation error in one bordered
+  block, separated by a hairline divider.
+
+  Properties:
+    state    "idle" | "dragging" | "valid" | "invalid" | "error-no-file"
+    file     { ext, name, summary }                — JS object property
+    error    { code, fileName, path, rule, message } — JS object property
+    hint     string                                — drop-row secondary copy
+    fileCsv  string                                — convenience attribute:
+             "ext,name,summary" hydrates `file` for static HTML
+    errorJson string — convenience: JSON-encoded error object
+
+  Events (all bubble, composed):
+    file-pick      — picker click intent (host opens <input type=file>)
+    file-drop      — detail: { file: File }
+    error-dismiss
+    copy-path      — detail: { path }
+
+  Light DOM. components/validation/index.css must be loaded in the host page.
+
+  VALIDATION_PRESETS and VALIDATION_TITLE are also exported for reuse.
+*/
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html, svg, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+export const VALIDATION_TITLE = {
+    size: "File too large",
+    ext: "Wrong file type",
+    parse: "Couldn't parse file",
+    shape: "Unexpected structure",
+    empty: "Empty file",
+    read: "Read error",
+};
+export const VALIDATION_PRESETS = {
+    shape: {
+        code: "shape",
+        fileName: "domains.yml",
+        path: "/agents",
+        rule: "required",
+        message: 'Definitions file is missing required field "agents".',
+        file: { ext: "yml", name: "domains.yml", summary: "8.4 KB · 4 agents, 12 tools" },
+    },
+    parse: {
+        code: "parse",
+        fileName: "domains.yml",
+        path: "12:5",
+        rule: "yaml",
+        message: "Couldn't parse file. Unexpected token at line 12, column 5 — check indentation and quoting.",
+    },
+    size: {
+        code: "size",
+        fileName: "huge-export.json",
+        rule: "max-size",
+        message: "File is 412 KB. Maximum allowed size is 200 KB.",
+        file: { ext: "json", name: "huge-export.json", summary: "412 KB · over the 200 KB limit" },
+    },
+    ext: {
+        code: "ext",
+        fileName: "config.txt",
+        rule: "ext",
+        message: "Only .yml, .yaml, and .json files are accepted.",
+        file: { ext: "yml", name: "config.txt", summary: "1.2 KB · unsupported extension" },
+    },
+    empty: {
+        code: "empty",
+        fileName: "empty.json",
+        rule: "non-empty",
+        message: "File is empty. Upload a valid YAML or JSON definitions file.",
+        file: { ext: "json", name: "empty.json", summary: "0 B · no content" },
+    },
+    read: {
+        code: "read",
+        fileName: "domains.json",
+        rule: "io",
+        message: "Couldn't read the file from disk. Try selecting it again or check permissions.",
+        file: { ext: "json", name: "domains.json", summary: "permission denied" },
+    },
+};
+const SHELL = (size, strokeWidth, paths) => svg `
+  <svg width="${size}" height="${size}" viewBox="0 0 24 24" fill="none"
+       stroke="currentColor" stroke-width="${strokeWidth}"
+       stroke-linecap="round" stroke-linejoin="round" class="ds-icon">
+    ${paths}
+  </svg>
+`;
+const I_ALERT = (s = 12) => SHELL(s, 1.8, svg `
+  <circle cx="12" cy="12" r="10" />
+  <path d="M12 8v5M12 16h.01" />
+`);
+const I_CLOSE = (s = 12) => SHELL(s, 2, svg `
+  <path d="M6 6l12 12M18 6L6 18" />
+`);
+const I_COPY = (s = 11) => SHELL(s, 2, svg `
+  <rect x="9" y="9" width="11" height="11" rx="2" />
+  <path d="M5 15V5a2 2 0 0 1 2-2h10" />
+`);
+const I_UPLOAD = (s = 14) => SHELL(s, 1.8, svg `
+  <path d="M12 16V4M6 10l6-6 6 6" />
+  <path d="M4 20h16" />
+`);
+const I_CHECK = (s = 10) => SHELL(s, 2.4, svg `
+  <path d="M5 12l4 4 10-10" />
+`);
+let XmFileValidationBlock = class XmFileValidationBlock extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.state = "idle";
+        this.file = null;
+        this.error = null;
+        this.hint = "";
+        this.fileCsv = "";
+        this.errorJson = "";
+        this._copyState = "idle";
+        this._onCopyPath = async () => {
+            const path = this.error?.path;
+            if (!path)
+                return;
+            this._emit("copy-path", { path });
+            if (navigator.clipboard) {
+                try {
+                    await navigator.clipboard.writeText(path);
+                    this._copyState = "copied";
+                }
+                catch {
+                    this._copyState = "failed";
+                }
+                setTimeout(() => { this._copyState = "idle"; }, 1500);
+            }
+        };
+        this._onDismiss = () => this._emit("error-dismiss", {});
+    }
+    createRenderRoot() {
+        return this;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        // Make the host transparent to flex/grid layout — matches the React
+        // tree where <FileValidationBlock> renders the <div class="ds-fvb">
+        // directly with no wrapper between it and the parent.
+        if (!this.style.display)
+            this.style.display = "contents";
+        if (this.fileCsv && !this.file) {
+            const parts = this.fileCsv.split(",").map((s) => s.trim());
+            const ext = parts[0] ?? "";
+            const name = parts[1] ?? "";
+            const summary = parts[2] ?? "";
+            this.file = { ext, name, summary };
+        }
+        if (this.errorJson && !this.error) {
+            try {
+                this.error = JSON.parse(this.errorJson);
+            }
+            catch (_) { /* malformed — leave error null */ }
+        }
+    }
+    _emit(name, detail) {
+        this.dispatchEvent(new CustomEvent(name, { detail, bubbles: true, composed: true }));
+    }
+    _renderDropRow() {
+        const handleClick = () => this._emit("file-pick", {});
+        const handleDragOver = (e) => {
+            e.preventDefault();
+            const target = e.currentTarget;
+            target.dataset["dragging"] = "1";
+        };
+        const handleDragLeave = (e) => {
+            const target = e.currentTarget;
+            delete target.dataset["dragging"];
+        };
+        const handleDrop = (e) => {
+            e.preventDefault();
+            const target = e.currentTarget;
+            delete target.dataset["dragging"];
+            const file = e.dataTransfer?.files?.[0];
+            if (file)
+                this._emit("file-drop", { file });
+        };
+        return html `
+      <div
+        class="ds-fvb__drop"
+        role="button"
+        tabindex="0"
+        @click=${handleClick}
+        @dragover=${handleDragOver}
+        @dragleave=${handleDragLeave}
+        @drop=${handleDrop}
+      >
+        ${I_UPLOAD()}
+        <div class="ds-fvb__drop-primary">
+          ${this.state === "dragging" ? "Drop to upload" : "Choose file or drop here"}
+        </div>
+        <div class="ds-fvb__drop-secondary">
+          ${this.hint || "YAML or JSON · up to 200 KB"}
+        </div>
+      </div>
+    `;
+    }
+    _renderFileRow(invalid) {
+        const file = this.file;
+        if (!file)
+            return nothing;
+        const ext = (file.ext || "yml").toLowerCase();
+        const extLabel = ext.toUpperCase();
+        return html `
+      <div class="ds-fvb__file">
+        <div class="ds-fvb__file-row">
+          <div class="ds-fvb__file-name">
+            <span class="ds-ext-badge ds-ext-${ext}">${extLabel}</span>
+            <span class="ds-fvb__file-name-label">${file.name}</span>
+            ${invalid
+            ? html `<span class="ds-invalid-mark" aria-label="Invalid">${I_ALERT()}</span>`
+            : html `<span class="ds-valid-tick" aria-label="Valid">${I_CHECK()}</span>`}
+          </div>
+          <div class="ds-fvb__file-actions"><slot name="actions"></slot></div>
+        </div>
+        ${file.summary
+            ? html `<div class="ds-fvb__file-sub">${file.summary}</div>`
+            : nothing}
+      </div>
+    `;
+    }
+    _renderErrorRow(showMeta) {
+        const error = this.error;
+        if (!error)
+            return nothing;
+        const code = error.code ?? "shape";
+        const { fileName, path, rule, message } = error;
+        const title = VALIDATION_TITLE[code] || "Validation error";
+        const copyLabel = this._copyState === "copied"
+            ? "Copied"
+            : this._copyState === "failed"
+                ? "Copy failed"
+                : "Copy path";
+        return html `
+      <div class="ds-fvb__error" role="alert">
+        <span class="ds-fvb__error-icon" aria-hidden="true">${I_ALERT()}</span>
+        <div class="ds-fvb__error-title" title="${message}">${title}</div>
+        <button
+          type="button"
+          class="ds-fvb__error-dismiss"
+          aria-label="Dismiss error"
+          title="Dismiss error"
+          @click=${this._onDismiss}
+        >${I_CLOSE(10)}</button>
+
+        <p class="ds-fvb__error-message" title="${message}">${message}</p>
+
+        ${showMeta && (fileName || path || rule)
+            ? html `
+              <div class="ds-fvb__meta">
+                ${fileName
+                ? html `<span class="ds-mono ds-fvb__filename" title="${fileName}">${fileName}</span>`
+                : nothing}
+                ${path ? html `<span class="ds-mono ds-fvb__path">${path}</span>` : nothing}
+                ${rule ? html `<span class="ds-fvb__rule">${rule}</span>` : nothing}
+                ${path
+                ? html `<button
+                      type="button"
+                      class="ds-fvb__copy"
+                      @click=${this._onCopyPath}
+                      title="Copy JSON pointer to clipboard"
+                    >${I_COPY()}<span>${copyLabel}</span></button>`
+                : nothing}
+              </div>
+            `
+            : nothing}
+      </div>
+    `;
+    }
+    render() {
+        const state = this.state;
+        const showFile = (state === "valid" || state === "invalid") && this.file;
+        const showDrop = state === "idle" || state === "dragging" || state === "error-no-file";
+        const showError = (state === "invalid" || state === "error-no-file") && this.error;
+        const showDivider = (showFile || showDrop) && showError;
+        return html `
+      <div class="ds-fvb ds-fvb--${state}">
+        ${showFile ? this._renderFileRow(state === "invalid") : nothing}
+        ${showDrop ? this._renderDropRow() : nothing}
+        ${showDivider ? html `<div class="ds-fvb__divider" aria-hidden="true"></div>` : nothing}
+        ${showError ? this._renderErrorRow(state === "error-no-file") : nothing}
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: String })
+], XmFileValidationBlock.prototype, "state", void 0);
+__decorate([
+    property({ attribute: false })
+], XmFileValidationBlock.prototype, "file", void 0);
+__decorate([
+    property({ attribute: false })
+], XmFileValidationBlock.prototype, "error", void 0);
+__decorate([
+    property({ type: String })
+], XmFileValidationBlock.prototype, "hint", void 0);
+__decorate([
+    property({ type: String, attribute: "file-csv" })
+], XmFileValidationBlock.prototype, "fileCsv", void 0);
+__decorate([
+    property({ type: String, attribute: "error-json" })
+], XmFileValidationBlock.prototype, "errorJson", void 0);
+__decorate([
+    state()
+], XmFileValidationBlock.prototype, "_copyState", void 0);
+XmFileValidationBlock = __decorate([
+    customElement("xm-file-validation-block")
+], XmFileValidationBlock);

package/dist/lit/index.d.ts

@@ -0,0 +1,50 @@
+import "./components/primitives/index.js";
+export * from "./components/alert/index.js";
+export * from "./components/app-bar/index.js";
+export * from "./components/artifact/index.js";
+export * from "./components/autocomplete/index.js";
+export * from "./components/avatar/index.js";
+export * from "./components/avatar-group/index.js";
+export * from "./components/badge/index.js";
+export * from "./components/brand-mark/index.js";
+export * from "./components/breadcrumbs/index.js";
+export * from "./components/bubble/index.js";
+export * from "./components/button/index.js";
+export * from "./components/card/index.js";
+export * from "./components/chat/index.js";
+export * from "./components/checkbox/index.js";
+export * from "./components/chip/index.js";
+export * from "./components/chip-group/index.js";
+export * from "./components/code/index.js";
+export * from "./components/composer/index.js";
+export * from "./components/data-table/index.js";
+export * from "./components/dialog/index.js";
+export * from "./components/divider/index.js";
+export * from "./components/empty-state/index.js";
+export * from "./components/expansion-panel/index.js";
+export * from "./components/field/index.js";
+export * from "./components/file-input/index.js";
+export * from "./components/form/index.js";
+export * from "./components/grid/index.js";
+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/navigation-drawer/index.js";
+export * from "./components/overlay/index.js";
+export * from "./components/pagination/index.js";
+export * from "./components/progress/index.js";
+export * from "./components/radio-group/index.js";
+export * from "./components/select/index.js";
+export * from "./components/sidebar-item/index.js";
+export * from "./components/skeleton/index.js";
+export * from "./components/slider/index.js";
+export * from "./components/snackbar/index.js";
+export * from "./components/stack/index.js";
+export * from "./components/switch/index.js";
+export * from "./components/table/index.js";
+export * from "./components/tabs/index.js";
+export * from "./components/text-field/index.js";
+export * from "./components/textarea/index.js";
+export * from "./components/tooltip/index.js";
+export * from "./components/validation/index.js";

package/dist/lit/index.js

@@ -0,0 +1,59 @@
+// lit/index.ts — barrel entry for the Lit component bundle.
+//
+// Importing this module registers every <xm-*> custom element (a side
+// effect of each component module) and re-exports each component's public
+// values and types. Consumers also need the token stylesheet once on :root:
+//   import "@xmesh/system-design/styles";
+//
+// Generated by scripts/gen-barrel.mjs — do not edit by hand.
+// primitives first: shared <xm-icon>/<xm-spinner> + named icon elements.
+import "./components/primitives/index.js";
+export * from "./components/alert/index.js";
+export * from "./components/app-bar/index.js";
+export * from "./components/artifact/index.js";
+export * from "./components/autocomplete/index.js";
+export * from "./components/avatar/index.js";
+export * from "./components/avatar-group/index.js";
+export * from "./components/badge/index.js";
+export * from "./components/brand-mark/index.js";
+export * from "./components/breadcrumbs/index.js";
+export * from "./components/bubble/index.js";
+export * from "./components/button/index.js";
+export * from "./components/card/index.js";
+export * from "./components/chat/index.js";
+export * from "./components/checkbox/index.js";
+export * from "./components/chip/index.js";
+export * from "./components/chip-group/index.js";
+export * from "./components/code/index.js";
+export * from "./components/composer/index.js";
+export * from "./components/data-table/index.js";
+export * from "./components/dialog/index.js";
+export * from "./components/divider/index.js";
+export * from "./components/empty-state/index.js";
+export * from "./components/expansion-panel/index.js";
+export * from "./components/field/index.js";
+export * from "./components/file-input/index.js";
+export * from "./components/form/index.js";
+export * from "./components/grid/index.js";
+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/navigation-drawer/index.js";
+export * from "./components/overlay/index.js";
+export * from "./components/pagination/index.js";
+export * from "./components/progress/index.js";
+export * from "./components/radio-group/index.js";
+export * from "./components/select/index.js";
+export * from "./components/sidebar-item/index.js";
+export * from "./components/skeleton/index.js";
+export * from "./components/slider/index.js";
+export * from "./components/snackbar/index.js";
+export * from "./components/stack/index.js";
+export * from "./components/switch/index.js";
+export * from "./components/table/index.js";
+export * from "./components/tabs/index.js";
+export * from "./components/text-field/index.js";
+export * from "./components/textarea/index.js";
+export * from "./components/tooltip/index.js";
+export * from "./components/validation/index.js";

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@xmesh/system-design",
+  "version": "0.0.1",
+  "private": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "type": "module",
+  "description": "Design-system reference and Lit component library for the xmesh chat product.",
+  "exports": {
+    "./lit": {
+      "types": "./dist/lit/index.d.ts",
+      "import": "./dist/lit/index.js"
+    },
+    "./lit/*": {
+      "types": "./dist/lit/components/*/index.d.ts",
+      "import": "./dist/lit/components/*/index.js"
+    },
+    "./styles": "./styles/index.css",
+    "./styles/*": "./styles/*",
+    "./assets/*": "./assets/*"
+  },
+  "files": [
+    "dist",
+    "styles",
+    "assets",
+    "colors_and_type.css"
+  ],
+  "sideEffects": [
+    "**/*.css",
+    "./dist/lit/**",
+    "./styles/**"
+  ],
+  "scripts": {
+    "serve": "npm-run-all --parallel watch:lit serve:static",
+    "serve:static": "npx --yes http-server . -p 8080 -c-1 -o /lit/preview/",
+    "build:lit": "tsc -p lit/tsconfig.json",
+    "watch:lit": "tsc -p lit/tsconfig.json --watch --preserveWatchOutput",
+    "build:dist": "node scripts/build-dist.mjs",
+    "gen:barrel": "node scripts/gen-barrel.mjs",
+    "screenshot": "node scripts/screenshot.mjs",
+    "shoot-all": "node scripts/screenshot.mjs --all",
+    "shoot:storybook": "node scripts/shoot-storybook.mjs",
+    "shoot:storybook:build": "node scripts/shoot-storybook.mjs --build --theme=both",
+    "check": "bash scripts/check.sh",
+    "check:tokens": "bash scripts/check-tokens.sh",
+    "check:structure": "bash scripts/check-structure.sh",
+    "check:previews": "bash scripts/check-previews.sh",
+    "check:bem": "bash scripts/check-bem.sh",
+    "check:contrast": "node scripts/check-contrast.mjs",
+    "audit:contrast": "node scripts/check-contrast.mjs --audit",
+    "check:spacing": "node scripts/check-spacing.mjs",
+    "prepublishOnly": "npm run build:dist",
+    "release": "npm publish",
+    "sb:prep": "npm run build:lit && node scripts/gen-storybook-register.mjs",
+    "storybook": "npm run sb:prep && storybook dev -p 6006 --no-open",
+    "storybook:dev": "storybook dev -p 6006 --no-open",
+    "storybook:watch": "npm run sb:prep && npm-run-all --parallel watch:lit storybook:dev",
+    "storybook:react": "storybook dev -p 6007 -c .storybook-react --no-open",
+    "build-storybook": "npm run sb:prep && storybook build -o storybook-static",
+    "build-storybook:react": "storybook build -c .storybook-react -o storybook-static-react"
+  },
+  "peerDependencies": {
+    "lit": "^3.2.0"
+  },
+  "devDependencies": {
+    "@storybook/addon-a11y": "^9.0.0",
+    "@storybook/addon-docs": "^9.0.0",
+    "@storybook/react-vite": "^9.0.0",
+    "@storybook/web-components-vite": "^9.0.0",
+    "http-server": "^14.1.1",
+    "lit": "^3.2.0",
+    "npm-run-all": "^4.1.5",
+    "playwright": "^1.49.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "storybook": "^9.0.0",
+    "typescript": "^5.6.3",
+    "vite": "^6.0.0"
+  }
+}