@hypoth-ui/cli 0.0.1 → 0.1.0

package/templates/layout/wc/header.ts

@@ -0,0 +1,57 @@
+/**
+ * Header Web Component
+ *
+ * Landmark header with sticky and safe-area support.
+ *
+ * @element ds-header
+ * @slot - Default slot for header 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 DsHeader 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-header": true,
+    };
+
+    return html`
+      <header
+        class=${classMap(classes)}
+        ?data-sticky=${this.sticky}
+        ?data-safe-area=${this.safeArea}
+        data-layout="header"
+      >
+        <slot></slot>
+      </header>
+    `;
+  }
+}
+
+// Register the component
+define("ds-header", DsHeader);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-header": DsHeader;
+  }
+}

package/templates/layout/wc/index.ts

@@ -0,0 +1,41 @@
+/**
+ * Layout Components Index
+ *
+ * Exports all layout primitive Web Components.
+ */
+
+// Core Layout
+export { DsFlow } from "./flow.js";
+export { DsContainer } from "./container.js";
+export { DsGrid } from "./grid.js";
+export { DsBox } from "./box.js";
+
+// Page Composition
+export { DsPage } from "./page.js";
+export { DsSection } from "./section.js";
+export { DsAppShell } from "./app-shell.js";
+export { DsHeader } from "./header.js";
+export { DsFooter } from "./footer.js";
+export { DsMain } from "./main.js";
+
+// Helpers
+export { DsSpacer } from "./spacer.js";
+export { DsCenter } from "./center.js";
+export { DsSplit } from "./split.js";
+export { DsWrap } from "./wrap.js";
+
+// Re-export types
+export type {
+  SpacingToken,
+  BreakpointToken,
+  ContainerSizeToken,
+  SurfaceToken,
+  RadiusToken,
+  FlexDirection,
+  FlexAlign,
+  FlexJustify,
+  FlexWrap,
+  GridColumns,
+  SplitRatio,
+  SpacerAxis,
+} from "../../types/layout-tokens.js";

package/templates/layout/wc/main.ts

@@ -0,0 +1,46 @@
+/**
+ * Main Web Component
+ *
+ * Main content region for skip-link targeting.
+ *
+ * @element ds-main
+ * @slot - Default slot for main 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 DsMain extends DSElement {
+  static override styles = [];
+
+  /**
+   * Element ID for skip-link targeting.
+   */
+  @property({ type: String, reflect: true })
+  override id = "main-content";
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-main": true,
+    };
+
+    return html`
+      <main class=${classMap(classes)} id=${this.id} tabindex="-1" data-layout="main">
+        <slot></slot>
+      </main>
+    `;
+  }
+}
+
+// Register the component
+define("ds-main", DsMain);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-main": DsMain;
+  }
+}

package/templates/layout/wc/page.ts

@@ -0,0 +1,81 @@
+/**
+ * Page Web Component
+ *
+ * Page wrapper with min-height and background.
+ *
+ * @element ds-page
+ * @slot - Default slot for page 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 { SurfaceToken } from "../../types/layout-tokens.js";
+import { SURFACE_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+type MinHeightValue = "viewport" | "full";
+
+const MIN_HEIGHT_VALUES: readonly MinHeightValue[] = ["viewport", "full"] as const;
+
+export class DsPage extends DSElement {
+  static override styles = [];
+
+  /**
+   * Background color token.
+   */
+  @property({ type: String, reflect: true })
+  bg: SurfaceToken = "background";
+
+  /**
+   * Minimum height.
+   */
+  @property({ type: String, reflect: true, attribute: "min-height" })
+  minHeight: MinHeightValue = "viewport";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("bg") || changedProperties.has("minHeight")) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateToken(this.bg, SURFACE_TOKENS, "bg", "ds-page");
+    validateToken(this.minHeight, MIN_HEIGHT_VALUES, "min-height", "ds-page");
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-page": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-bg=${this.bg}
+        data-min-height=${this.minHeight}
+        data-layout="page"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-page", DsPage);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-page": DsPage;
+  }
+}

package/templates/layout/wc/section.ts

@@ -0,0 +1,65 @@
+/**
+ * Section Web Component
+ *
+ * Semantic section wrapper with consistent vertical spacing.
+ *
+ * @element ds-section
+ * @slot - Default slot for section 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 { SpacingToken } from "../../types/layout-tokens.js";
+import { SPACING_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+export class DsSection extends DSElement {
+  static override styles = [];
+
+  /**
+   * Vertical padding.
+   */
+  @property({ type: String, reflect: true })
+  spacing: SpacingToken = "lg";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("spacing")) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateToken(this.spacing, SPACING_TOKENS, "spacing", "ds-section");
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-section": true,
+    };
+
+    return html`
+      <section class=${classMap(classes)} data-spacing=${this.spacing} data-layout="section">
+        <slot></slot>
+      </section>
+    `;
+  }
+}
+
+// Register the component
+define("ds-section", DsSection);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-section": DsSection;
+  }
+}

package/templates/layout/wc/spacer.ts

@@ -0,0 +1,77 @@
+/**
+ * Spacer Web Component
+ *
+ * Explicit space element for fine-grained spacing control.
+ *
+ * @element ds-spacer
+ */
+
+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 { SpacerAxis, SpacingToken } from "../../types/layout-tokens.js";
+import { SPACING_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+const AXIS_VALUES: readonly SpacerAxis[] = ["horizontal", "vertical"] as const;
+
+export class DsSpacer extends DSElement {
+  static override styles = [];
+
+  /**
+   * Size of the space.
+   */
+  @property({ type: String, reflect: true })
+  size: SpacingToken = "md";
+
+  /**
+   * Axis direction.
+   */
+  @property({ type: String, reflect: true })
+  axis: SpacerAxis = "vertical";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (changedProperties.has("size") || changedProperties.has("axis")) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateToken(this.size, SPACING_TOKENS, "size", "ds-spacer");
+    validateToken(this.axis, AXIS_VALUES, "axis", "ds-spacer");
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-spacer": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-size=${this.size}
+        data-axis=${this.axis}
+        aria-hidden="true"
+        data-layout="spacer"
+      ></div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-spacer", DsSpacer);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-spacer": DsSpacer;
+  }
+}

package/templates/layout/wc/split.ts

@@ -0,0 +1,94 @@
+/**
+ * Split Web Component
+ *
+ * Two-region layout with collapse breakpoint.
+ *
+ * @element ds-split
+ * @slot - Default slot for the two regions
+ */
+
+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 { BreakpointToken, SpacingToken, SplitRatio } from "../../types/layout-tokens.js";
+import { BREAKPOINT_TOKENS, SPACING_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+const RATIO_VALUES: readonly SplitRatio[] = ["equal", "1:2", "2:1", "1:3", "3:1"] as const;
+
+export class DsSplit extends DSElement {
+  static override styles = [];
+
+  /**
+   * Breakpoint at which to collapse to single column.
+   */
+  @property({ type: String, reflect: true, attribute: "collapse-at" })
+  collapseAt: BreakpointToken = "md";
+
+  /**
+   * Gap between regions.
+   */
+  @property({ type: String, reflect: true })
+  gap: SpacingToken = "md";
+
+  /**
+   * Width ratio between regions.
+   */
+  @property({ type: String, reflect: true })
+  ratio: SplitRatio = "equal";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("collapseAt") ||
+      changedProperties.has("gap") ||
+      changedProperties.has("ratio")
+    ) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateToken(this.collapseAt, BREAKPOINT_TOKENS, "collapse-at", "ds-split");
+    validateToken(this.gap, SPACING_TOKENS, "gap", "ds-split");
+    validateToken(this.ratio, RATIO_VALUES, "ratio", "ds-split");
+  }
+
+  override render(): TemplateResult {
+    // Convert ratio format for data attribute (1:2 -> 1-2)
+    const ratioData = this.ratio.replace(":", "-");
+
+    const classes = {
+      "ds-split": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-collapse-at=${this.collapseAt}
+        data-gap=${this.gap}
+        data-ratio=${ratioData}
+        data-layout="split"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-split", DsSplit);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-split": DsSplit;
+  }
+}

package/templates/layout/wc/wrap.ts

@@ -0,0 +1,93 @@
+/**
+ * Wrap Web Component
+ *
+ * Wrapping row layout for tags/chips.
+ *
+ * @element ds-wrap
+ * @slot - Default slot for wrapped 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 { FlexAlign, SpacingToken } from "../../types/layout-tokens.js";
+import { SPACING_TOKENS } from "../../types/layout-tokens.js";
+import { validateToken } from "../../utils/token-validator.js";
+
+export class DsWrap extends DSElement {
+  static override styles = [];
+
+  /**
+   * Gap between items.
+   */
+  @property({ type: String, reflect: true })
+  gap: SpacingToken = "sm";
+
+  /**
+   * Row gap override.
+   */
+  @property({ type: String, reflect: true, attribute: "row-gap" })
+  rowGap?: SpacingToken;
+
+  /**
+   * Cross-axis alignment.
+   */
+  @property({ type: String, reflect: true })
+  align: FlexAlign = "start";
+
+  override connectedCallback(): void {
+    super.connectedCallback();
+    this.validateProps();
+  }
+
+  override updated(changedProperties: Map<string, unknown>): void {
+    super.updated(changedProperties);
+    if (
+      changedProperties.has("gap") ||
+      changedProperties.has("rowGap") ||
+      changedProperties.has("align")
+    ) {
+      this.validateProps();
+    }
+  }
+
+  private validateProps(): void {
+    validateToken(this.gap, SPACING_TOKENS, "gap", "ds-wrap");
+    if (this.rowGap) {
+      validateToken(this.rowGap, SPACING_TOKENS, "row-gap", "ds-wrap");
+    }
+    // Only validate start, center, end for Wrap align
+    const wrapAlignValues: readonly FlexAlign[] = ["start", "center", "end"];
+    validateToken(this.align, wrapAlignValues, "align", "ds-wrap");
+  }
+
+  override render(): TemplateResult {
+    const classes = {
+      "ds-wrap": true,
+    };
+
+    return html`
+      <div
+        class=${classMap(classes)}
+        data-gap=${this.gap}
+        data-row-gap=${this.rowGap || ""}
+        data-align=${this.align}
+        data-layout="wrap"
+      >
+        <slot></slot>
+      </div>
+    `;
+  }
+}
+
+// Register the component
+define("ds-wrap", DsWrap);
+
+// TypeScript declaration for HTML
+declare global {
+  interface HTMLElementTagNameMap {
+    "ds-wrap": DsWrap;
+  }
+}

package/templates/layout/wrap.tsx

@@ -0,0 +1,46 @@
+/**
+ * Wrap React Component
+ *
+ * Wrapping row layout for tags/chips.
+ */
+
+import type React from "react";
+import { createElement, forwardRef } from "react";
+
+type SpacingToken = "none" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+type FlexAlign = "start" | "center" | "end";
+
+export interface WrapProps {
+  /** Gap between items. */
+  gap?: SpacingToken;
+  /** Row gap override. */
+  rowGap?: SpacingToken;
+  /** Cross-axis alignment. */
+  align?: FlexAlign;
+  /** Additional CSS class names. */
+  className?: string;
+  /** Children elements. */
+  children?: React.ReactNode;
+}
+
+/**
+ * React wrapper for ds-wrap Web Component.
+ */
+export const Wrap = forwardRef<HTMLElement, WrapProps>((props, ref) => {
+  const { gap = "sm", rowGap, align = "start", className, children, ...rest } = props;
+
+  return createElement(
+    "ds-wrap",
+    {
+      ref,
+      gap,
+      "row-gap": rowGap,
+      align,
+      class: className,
+      ...rest,
+    },
+    children
+  );
+});
+
+Wrap.displayName = "Wrap";