@xmesh/system-design 0.0.1

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

@@ -0,0 +1,386 @@
+/* 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);
+}

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

@@ -0,0 +1,45 @@
+import { LitElement } from "lit";
+import type { TemplateResult } from "lit";
+export type ValidationCode = "size" | "ext" | "parse" | "shape" | "empty" | "read";
+export type ValidationState = "idle" | "dragging" | "valid" | "invalid" | "error-no-file";
+export interface ValidationFile {
+    ext: string;
+    name: string;
+    summary?: string;
+}
+export interface ValidationError {
+    code: ValidationCode;
+    fileName?: string;
+    path?: string;
+    rule?: string;
+    message: string;
+}
+export interface ValidationPreset extends ValidationError {
+    file?: ValidationFile;
+}
+export declare const VALIDATION_TITLE: Record<ValidationCode, string>;
+export declare const VALIDATION_PRESETS: Record<ValidationCode, ValidationPreset>;
+declare class XmFileValidationBlock extends LitElement {
+    state: ValidationState;
+    file: ValidationFile | null;
+    error: ValidationError | null;
+    hint: string;
+    fileCsv: string;
+    errorJson: string;
+    private _copyState;
+    createRenderRoot(): HTMLElement | DocumentFragment;
+    connectedCallback(): void;
+    private _emit;
+    private _renderDropRow;
+    private _renderFileRow;
+    private _onCopyPath;
+    private _onDismiss;
+    private _renderErrorRow;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "xm-file-validation-block": XmFileValidationBlock;
+    }
+}
+export {};