@hypoth-ui/cli 0.0.1 → 0.1.1

package/templates/layout/stack.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from "react";
+import { Flow, type FlowProps } from "./flow.js";
+
+export interface StackProps extends Omit<FlowProps, "direction"> {
+  /** Gap between children. Supports responsive object syntax. */
+  gap?: FlowProps["gap"];
+}
+
+/**
+ * Stack is a Flow with direction="column".
+ */
+export const Stack = forwardRef<HTMLElement, StackProps>((props, ref) => {
+  return <Flow ref={ref} direction="column" {...props} />;
+});
+
+Stack.displayName = "Stack";

package/templates/layout/wc/app-shell.ts

@@ -0,0 +1,58 @@
+/**
+ * AppShell Web Component
+ *
+ * Application structure with landmark regions using CSS Grid.
+ *
+ * @element ds-app-shell
+ * @slot header - Header region
+ * @slot sidebar - Sidebar region
+ * @slot - Default slot for main content
+ * @slot footer - Footer region
+ */
+
+import { type TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+type SidebarPosition = "left" | "right" | "none";
+
+export class DsAppShell extends DSElement {
+  static override styles = [];
+
+  /**
+   * Sidebar position.
+   */
+  @property({ type: String, reflect: true, attribute: "sidebar-position" })
+  sidebarPosition: SidebarPosition = "none";
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-app-shell": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-sidebar=${this.sidebarPosition}
+        data-layout="app-shell"
+      >
+        <slot name="header"></slot>
+        ${this.sidebarPosition !== "none" ? html`<slot name="sidebar"></slot>` : null}
+        <slot></slot>
+        <slot name="footer"></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-app-shell", DsAppShell);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-app-shell": DsAppShell;
+  }
+}

package/templates/layout/wc/box.ts

@@ -0,0 +1,117 @@
+/**
+ * Box Web Component
+ *
+ * Token-only styling escape hatch for padding, background, and radius.
+ *
+ * @element ds-box
+ * @slot - Default slot for children
+ */
+
+import { type TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { RadiusToken, SpacingToken, SurfaceToken } from "../../types/layout-tokens.js";
+import { RADIUS_TOKENS, SPACING_TOKENS, SURFACE_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+export class DsBox extends DSElement {
+  static override styles = [];
+
+  /**
+   * Padding (all sides).
+   */
+  @property({ type: String, reflect: true })
+  p?: SpacingToken;
+
+  /**
+   * Horizontal padding.
+   */
+  @property({ type: String, reflect: true })
+  px?: SpacingToken;
+
+  /**
+   * Vertical padding.
+   */
+  @property({ type: String, reflect: true })
+  py?: SpacingToken;
+
+  /**
+   * Background color token.
+   */
+  @property({ type: String, reflect: true })
+  bg?: SurfaceToken;
+
+  /**
+   * Border radius token.
+   */
+  @property({ type: String, reflect: true })
+  radius?: RadiusToken;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("p") ||
+      changedProperties.has("px") ||
+      changedProperties.has("py") ||
+      changedProperties.has("bg") ||
+      changedProperties.has("radius")
+    ) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    if (this.p) {
+      validateToken(this.p, SPACING_TOKENS, "p", "ds-box");
+    }
+    if (this.px) {
+      validateToken(this.px, SPACING_TOKENS, "px", "ds-box");
+    }
+    if (this.py) {
+      validateToken(this.py, SPACING_TOKENS, "py", "ds-box");
+    }
+    if (this.bg) {
+      validateToken(this.bg, SURFACE_TOKENS, "bg", "ds-box");
+    }
+    if (this.radius) {
+      validateToken(this.radius, RADIUS_TOKENS, "radius", "ds-box");
+    }
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-box": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-p=${this.p || ""}
+        data-px=${this.px || ""}
+        data-py=${this.py || ""}
+        data-bg=${this.bg || ""}
+        data-radius=${this.radius || ""}
+        data-layout="box"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-box", DsBox);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-box": DsBox;
+  }
+}

package/templates/layout/wc/center.ts

@@ -0,0 +1,78 @@
+/**
+ * Center Web Component
+ *
+ * Centers content horizontally/vertically with optional max-width.
+ *
+ * @element ds-center
+ * @slot - Default slot for centered content
+ */
+
+import { type TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { ContainerSizeToken } from "../../types/layout-tokens.js";
+import { CONTAINER_SIZE_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+export class DsCenter extends DSElement {
+  static override styles = [];
+
+  /**
+   * Maximum width constraint.
+   */
+  @property({ type: String, reflect: true, attribute: "max-width" })
+  maxWidth?: ContainerSizeToken;
+
+  /**
+   * Enable vertical centering.
+   */
+  @property({ type: Boolean, reflect: true })
+  vertical = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("maxWidth")) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    if (this.maxWidth) {
+      validateToken(this.maxWidth, CONTAINER_SIZE_TOKENS, "max-width", "ds-center");
+    }
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-center": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-max-width=${this.maxWidth || ""}
+        ?data-vertical=${this.vertical}
+        data-layout="center"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-center", DsCenter);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-center": DsCenter;
+  }
+}

package/templates/layout/wc/container.ts

@@ -0,0 +1,77 @@
+/**
+ * Container Web Component
+ *
+ * Constrains content width with responsive max-widths and padding.
+ *
+ * @element ds-container
+ * @slot - Default slot for children
+ */
+
+import { type TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { ContainerSizeToken, SpacingToken } from "../../types/layout-tokens.js";
+import { CONTAINER_SIZE_TOKENS, SPACING_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+export class DsContainer extends DSElement {
+  static override styles = [];
+
+  /**
+   * Maximum width constraint.
+   */
+  @property({ type: String, reflect: true })
+  size: ContainerSizeToken = "lg";
+
+  /**
+   * Horizontal padding.
+   */
+  @property({ type: String, reflect: true })
+  padding: SpacingToken = "md";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("size") || changedProperties.has("padding")) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateToken(this.size, CONTAINER_SIZE_TOKENS, "size", "ds-container");
+    validateToken(this.padding, SPACING_TOKENS, "padding", "ds-container");
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-container": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-size=${this.size}
+        data-padding=${this.padding}
+        data-layout="container"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-container", DsContainer);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-container": DsContainer;
+  }
+}

package/templates/layout/wc/flow.ts

@@ -0,0 +1,149 @@
+/**
+ * Flow Web Component
+ *
+ * Primary 1D layout primitive with responsive direction switching.
+ * Replaces separate Stack/Inline components with unified API.
+ *
+ * @element ds-flow
+ * @slot - Default slot for children
+ */
+
+import { type TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type {
+  FlexAlign,
+  FlexDirection,
+  FlexJustify,
+  FlexWrap,
+  SpacingToken,
+} from "../../types/layout-tokens.js";
+import {
+  FLEX_ALIGN_VALUES,
+  FLEX_DIRECTION_VALUES,
+  FLEX_JUSTIFY_VALUES,
+  SPACING_TOKENS,
+} from "../../types/layout-tokens.js";
+import {
+  generateResponsiveClasses,
+  getBaseValue,
+  isResponsiveValue,
+} from "../../utils/responsive.js";
+import { validateResponsiveToken, validateToken } from "../../utils/token-validator.js";
+
+export class DsFlow extends DSElement {
+  static override styles = [];
+
+  /**
+   * Flex direction. Supports responsive syntax: "base:column md:row"
+   */
+  @property({ type: String, reflect: true })
+  direction = "row";
+
+  /**
+   * Gap between children. Supports responsive syntax: "base:sm md:lg"
+   */
+  @property({ type: String, reflect: true })
+  gap = "none";
+
+  /**
+   * Cross-axis alignment.
+   */
+  @property({ type: String, reflect: true })
+  align: FlexAlign = "stretch";
+
+  /**
+   * Main-axis alignment.
+   */
+  @property({ type: String, reflect: true })
+  justify: FlexJustify = "start";
+
+  /**
+   * Flex wrap behavior.
+   */
+  @property({ type: String, reflect: true })
+  wrap: FlexWrap = "nowrap";
+
+  /**
+   * Use inline-flex instead of flex.
+   */
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("direction") ||
+      changedProperties.has("gap") ||
+      changedProperties.has("align") ||
+      changedProperties.has("justify")
+    ) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateResponsiveToken(this.direction, FLEX_DIRECTION_VALUES, "direction", "ds-flow");
+    validateResponsiveToken(this.gap, SPACING_TOKENS, "gap", "ds-flow");
+    validateToken(this.align, FLEX_ALIGN_VALUES, "align", "ds-flow");
+    validateToken(this.justify, FLEX_JUSTIFY_VALUES, "justify", "ds-flow");
+  }
+
+  override render(): TemplateResult {
+    // Get base values for data attributes
+    const baseDirection = isResponsiveValue(this.direction)
+      ? getBaseValue<FlexDirection>(this.direction)
+      : (this.direction as FlexDirection);
+
+    const baseGap = isResponsiveValue(this.gap)
+      ? getBaseValue<SpacingToken>(this.gap)
+      : (this.gap as SpacingToken);
+
+    // Generate responsive classes
+    const directionClasses = isResponsiveValue(this.direction)
+      ? generateResponsiveClasses("flow", "dir", this.direction)
+      : [];
+
+    const gapClasses = isResponsiveValue(this.gap)
+      ? generateResponsiveClasses("flow", "gap", this.gap)
+      : [];
+
+    const classes = {
+      "ds-flow": true,
+      "ds-flow--inline": this.inline,
+      ...Object.fromEntries(directionClasses.map((c) => [c, true])),
+      ...Object.fromEntries(gapClasses.map((c) => [c, true])),
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-direction=${baseDirection}
+        data-gap=${baseGap}
+        data-align=${this.align}
+        data-justify=${this.justify}
+        data-wrap=${this.wrap}
+        data-layout="flow"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-flow", DsFlow);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-flow": DsFlow;
+  }
+}

package/templates/layout/wc/footer.ts

@@ -0,0 +1,57 @@
+/**
+ * Footer Web Component
+ *
+ * Landmark footer with sticky and safe-area support.
+ *
+ * @element ds-footer
+ * @slot - Default slot for footer content
+ */
+
+import { type TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+
+export class DsFooter extends DSElement {
+  static override styles = [];
+
+  /**
+   * Enable sticky positioning.
+   */
+  @property({ type: Boolean, reflect: true })
+  sticky = false;
+
+  /**
+   * Enable safe area insets.
+   */
+  @property({ type: Boolean, reflect: true, attribute: "safe-area" })
+  safeArea = false;
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-footer": true,
+    };
+
+    return html`
+      <footer
+        class=${classMap(classes)}
+        ?data-sticky=${this.sticky}
+        ?data-safe-area=${this.safeArea}
+        data-layout="footer"
+      >
+        <slot></slot>
+      </footer>
+    `;
+  }
+}
+
+// Register the component
+define("ds-footer", DsFooter);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-footer": DsFooter;
+  }
+}

package/templates/layout/wc/grid.ts

@@ -0,0 +1,142 @@
+/**
+ * Grid Web Component
+ *
+ * 2D grid layout with responsive columns.
+ *
+ * @element ds-grid
+ * @slot - Default slot for grid items
+ */
+
+import { type TemplateResult, html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { DSElement } from "../../base/ds-element.js";
+import { define } from "../../registry/define.js";
+import type { SpacingToken } from "../../types/layout-tokens.js";
+import { SPACING_TOKENS } from "../../types/layout-tokens.js";
+import {
+  generateResponsiveClasses,
+  getBaseValue,
+  isResponsiveValue,
+} from "../../utils/responsive.js";
+import { validateResponsiveToken, validateToken } from "../../utils/token-validator.js";
+
+const COLUMN_VALUES = [
+  "1",
+  "2",
+  "3",
+  "4",
+  "5",
+  "6",
+  "7",
+  "8",
+  "9",
+  "10",
+  "11",
+  "12",
+  "auto-fit",
+  "auto-fill",
+] as const;
+
+export class DsGrid extends DSElement {
+  static override styles = [];
+
+  /**
+   * Number of columns. Supports responsive syntax: "base:1 md:2 lg:3"
+   */
+  @property({ type: String, reflect: true })
+  columns = "1";
+
+  /**
+   * Gap between grid items. Supports responsive syntax: "base:sm lg:lg"
+   */
+  @property({ type: String, reflect: true })
+  gap = "md";
+
+  /**
+   * Row gap override.
+   */
+  @property({ type: String, reflect: true, attribute: "row-gap" })
+  rowGap?: SpacingToken;
+
+  /**
+   * Column gap override.
+   */
+  @property({ type: String, reflect: true, attribute: "column-gap" })
+  columnGap?: SpacingToken;
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("columns") ||
+      changedProperties.has("gap") ||
+      changedProperties.has("rowGap") ||
+      changedProperties.has("columnGap")
+    ) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateResponsiveToken(this.columns, COLUMN_VALUES, "columns", "ds-grid");
+    validateResponsiveToken(this.gap, SPACING_TOKENS, "gap", "ds-grid");
+    if (this.rowGap) {
+      validateToken(this.rowGap, SPACING_TOKENS, "row-gap", "ds-grid");
+    }
+    if (this.columnGap) {
+      validateToken(this.columnGap, SPACING_TOKENS, "column-gap", "ds-grid");
+    }
+  }
+
+  override render(): TemplateResult {
+    // Get base values for data attributes
+    const baseColumns = isResponsiveValue(this.columns) ? getBaseValue(this.columns) : this.columns;
+
+    const baseGap = isResponsiveValue(this.gap)
+      ? getBaseValue<SpacingToken>(this.gap)
+      : (this.gap as SpacingToken);
+
+    // Generate responsive classes
+    const columnsClasses = isResponsiveValue(this.columns)
+      ? generateResponsiveClasses("grid", "cols", this.columns)
+      : [];
+
+    const gapClasses = isResponsiveValue(this.gap)
+      ? generateResponsiveClasses("grid", "gap", this.gap)
+      : [];
+
+    const classes = {
+      "ds-grid": true,
+      ...Object.fromEntries(columnsClasses.map((c) => [c, true])),
+      ...Object.fromEntries(gapClasses.map((c) => [c, true])),
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-columns=${baseColumns}
+        data-gap=${baseGap}
+        data-row-gap=${this.rowGap || ""}
+        data-column-gap=${this.columnGap || ""}
+        data-layout="grid"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-grid", DsGrid);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-grid": DsGrid;
+  }
+}