@visitwonders/assembly 0.1.0

package/dist/styles/primitive/shape.css

@@ -0,0 +1,17 @@
+:root {
+  /* Border Radius - Numeric scale */
+  --radius-0: 0;
+  --radius-2: 0.125rem; /* 2px */
+  --radius-4: 0.25rem; /* 4px */
+  --radius-6: 0.375rem; /* 6px */
+  --radius-8: 0.5rem; /* 8px */
+  --radius-12: 0.75rem; /* 12px */
+  --radius-16: 1rem; /* 16px */
+  --radius-full: 9999px;
+
+  /* Border Widths */
+  --border-width-0: 0;
+  --border-width-1: 1px;
+  --border-width-2: 2px;
+  --border-width-4: 4px;
+}

package/dist/styles/primitive/spacing.css

@@ -0,0 +1,29 @@
+:root {
+  /* Spacing Primitives - 4px base scale */
+  --spacing-0: 0;
+  --spacing-0-5: 0.125rem; /* 2px */
+  --spacing-1: 0.25rem; /* 4px */
+  --spacing-1-5: 0.375rem; /* 6px */
+  --spacing-2: 0.5rem; /* 8px */
+  --spacing-2-5: 0.625rem; /* 10px */
+  --spacing-3: 0.75rem; /* 12px */
+  --spacing-3-5: 0.875rem; /* 14px */
+  --spacing-4: 1rem; /* 16px */
+  --spacing-5: 1.25rem; /* 20px */
+  --spacing-6: 1.5rem; /* 24px */
+  --spacing-7: 1.75rem; /* 28px */
+  --spacing-8: 2rem; /* 32px */
+  --spacing-9: 2.25rem; /* 36px */
+  --spacing-10: 2.5rem; /* 40px */
+  --spacing-11: 2.75rem; /* 44px */
+  --spacing-12: 3rem; /* 48px */
+  --spacing-14: 3.5rem; /* 56px */
+  --spacing-16: 4rem; /* 64px */
+  --spacing-20: 5rem; /* 80px */
+  --spacing-24: 6rem; /* 96px */
+  --spacing-28: 7rem; /* 112px */
+  --spacing-32: 8rem; /* 128px */
+
+  /* Base space */
+  --base-space: var(--spacing-1);
+}

package/dist/styles/primitive/typography.css

@@ -0,0 +1,45 @@
+:root {
+  /* Font Families */
+  --font-family-sans:
+    "Gotham SSm A", "Gotham SSm B", ui-sans-serif, system-ui, sans-serif;
+  --font-family-mono:
+    ui-monospace, "Cascadia Mono", "Geist Mono", SFMono-Regular, Menlo,
+    Consolas, monospace;
+
+  /* Font Sizes - Numeric scale */
+  --font-size-10: 0.625rem; /* 10px */
+  --font-size-11: 0.6875rem; /* 11px */
+  --font-size-12: 0.75rem; /* 12px */
+  --font-size-13: 0.8125rem; /* 13px */
+  --font-size-14: 0.875rem; /* 14px */
+  --font-size-16: 1rem; /* 16px */
+  --font-size-18: 1.125rem; /* 18px */
+  --font-size-20: 1.25rem; /* 20px */
+  --font-size-24: 1.5rem; /* 24px */
+  --font-size-30: 1.875rem; /* 30px */
+  --font-size-36: 2.25rem; /* 36px */
+  --font-size-48: 3rem; /* 48px */
+  --font-size-60: 3.75rem; /* 60px */
+
+  /* Font Weights - Numeric scale */
+  --font-weight-400: 400;
+  --font-weight-500: 500;
+  --font-weight-600: 600;
+  --font-weight-700: 700;
+
+  /* Line Heights - Ratio scale */
+  --line-height-1: 1;
+  --line-height-1-25: 1.25;
+  --line-height-1-375: 1.375;
+  --line-height-1-5: 1.5;
+  --line-height-1-625: 1.625;
+  --line-height-2: 2;
+
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.05em;
+  --letter-spacing-snug: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+  --letter-spacing-wider: 0.05em;
+  --letter-spacing-widest: 0.1em;
+}

package/dist/styles/primitive/z-index.css

@@ -0,0 +1,14 @@
+:root {
+  /* Z-Index Primitives */
+  --z-0: 0;
+  --z-10: 10;
+  --z-20: 20;
+  --z-30: 30;
+  --z-40: 40;
+  --z-50: 50;
+  --z-100: 100;
+  --z-200: 200;
+  --z-300: 300;
+  --z-400: 400;
+  --z-500: 500;
+}

package/dist/styles/semantic/colors.css

@@ -0,0 +1,155 @@
+:root {
+  /* ===================================
+   * Background Tokens
+   * =================================== */
+
+  /* Base Layers */
+  --color-bg: var(--white); /* App body / fallback */
+  --color-bg-canvas: var(--gray-25); /* Main content area */
+  --color-bg-chrome: var(--white); /* App shell - header, sidebar, nav */
+  --color-bg-chrome-subtle: var(--gray-50); /* Secondary chrome */
+
+  /* Surfaces & Overlays */
+  --color-bg-surface: var(--white); /* Cards, panels, modals */
+  --color-bg-surface-raised: var(--white); /* Elevated surfaces (popovers) */
+  --color-bg-surface-sunken: var(--gray-100); /* Inset areas (input wells) */
+  --color-bg-overlay: rgb(0 0 0 / 50%); /* Modal/dialog backdrop */
+  --color-bg-inverse: var(--gray-900); /* Dark background for contrast */
+  --color-bg-disabled: var(--gray-100); /* Disabled backgrounds */
+
+  /* Hover States */
+  --color-bg-hover-subtle: var(--gray-50);
+
+  /* Primary Fill (Main CTA) */
+  --color-bg-fill-primary: var(--indigo-700);
+  --color-bg-fill-primary-hover: var(--indigo-800);
+  --color-bg-fill-primary-active: var(--indigo-900);
+  --color-bg-fill-primary-disabled: var(--indigo-400);
+
+  /* Interactive Fill (Secondary/Neutral) */
+  --color-bg-fill-interactive: var(--gray-100);
+  --color-bg-fill-interactive-hover: var(--gray-175);
+  --color-bg-fill-interactive-active: var(--gray-175);
+  --color-bg-fill-interactive-selected: var(--gray-175);
+  --color-bg-fill-interactive-disabled: var(--gray-50);
+
+  /* Accent Fill (Selected controls — checkboxes, toggles, radios) */
+  --color-bg-fill-accent: var(--indigo-500);
+  --color-bg-fill-accent-hover: var(--indigo-600);
+  --color-bg-fill-accent-active: var(--indigo-700);
+  --color-bg-fill-accent-disabled: var(--indigo-300);
+
+  /* Secondary Fill */
+  --color-bg-fill-secondary: var(--cyan-600);
+  --color-bg-fill-secondary-hover: var(--cyan-700);
+  --color-bg-fill-secondary-active: var(--cyan-800);
+
+  /* Semantic Fills (Status) */
+  --color-bg-fill-success: var(--green-500);
+  --color-bg-fill-success-hover: var(--green-600);
+  --color-bg-fill-success-active: var(--green-700);
+  --color-bg-fill-warning: var(--amber-500);
+  --color-bg-fill-warning-hover: var(--amber-600);
+  --color-bg-fill-warning-active: var(--amber-700);
+  --color-bg-fill-critical: var(--red-500);
+  --color-bg-fill-critical-hover: var(--red-600);
+  --color-bg-fill-critical-active: var(--red-700);
+  --color-bg-fill-info: var(--cyan-500);
+  --color-bg-fill-info-hover: var(--cyan-600);
+  --color-bg-fill-info-active: var(--cyan-700);
+
+  /* Neutral Fill (Gray solid buttons) */
+  --color-bg-fill-neutral: var(--gray-800);
+  --color-bg-fill-neutral-hover: var(--gray-900);
+  --color-bg-fill-neutral-active: var(--gray-950);
+
+  /* Semantic Backgrounds (Subtle) */
+  --color-bg-primary-subtle: var(--indigo-50);
+  --color-bg-primary-subtle-hover: var(--indigo-100);
+  --color-bg-neutral-subtle: var(--gray-50);
+  --color-bg-neutral-subtle-hover: var(--gray-100);
+  --color-bg-success-subtle: var(--green-50);
+  --color-bg-success-subtle-hover: var(--green-100);
+  --color-bg-warning-subtle: var(--amber-50);
+  --color-bg-warning-subtle-hover: var(--amber-100);
+  --color-bg-critical-subtle: var(--red-50);
+  --color-bg-critical-subtle-hover: var(--red-100);
+  --color-bg-info-subtle: var(--cyan-50);
+  --color-bg-info-subtle-hover: var(--cyan-100);
+
+  /* ===================================
+   * Text Tokens
+   * =================================== */
+  --color-text: var(--gray-900); /* Primary body text */
+  --color-text-secondary: var(--gray-600); /* Secondary/supporting */
+  --color-text-tertiary: var(--gray-500); /* Tertiary/placeholder */
+  --color-text-disabled: var(--gray-400); /* Disabled text */
+  --color-text-inverse: var(--white); /* Text on dark backgrounds */
+  --color-text-link: var(--indigo-600); /* Link text */
+  --color-text-link-hover: var(--indigo-700); /* Link hover */
+  --color-text-link-visited: var(--indigo-800); /* Visited link */
+
+  /* Text on Fills */
+  --color-text-on-primary: var(--white);
+  --color-text-on-neutral: var(--white);
+  --color-text-on-accent: var(--white);
+  --color-text-on-success: var(--white);
+  --color-text-on-warning: var(--gray-900);
+  --color-text-on-critical: var(--white);
+  --color-text-on-info: var(--white);
+
+  /* Brand/Accent Text */
+  --color-text-primary: var(--indigo-700);
+
+  /* Semantic Text */
+  --color-text-success: var(--green-700);
+  --color-text-warning: var(--amber-700);
+  --color-text-critical: var(--red-700);
+  --color-text-info: var(--cyan-700);
+
+  /* ===================================
+   * Icon Tokens
+   * =================================== */
+  --color-icon: var(--gray-700); /* Primary icon */
+  --color-icon-secondary: var(--gray-500); /* Secondary icon */
+  --color-icon-disabled: var(--gray-400); /* Disabled icon */
+  --color-icon-inverse: var(--white); /* Icon on dark backgrounds */
+  --color-icon-interactive: var(--gray-600); /* Clickable icon default */
+  --color-icon-interactive-hover: var(--gray-800); /* Clickable icon hover */
+  --color-icon-success: var(--green-600);
+  --color-icon-warning: var(--amber-600);
+  --color-icon-critical: var(--red-600);
+  --color-icon-info: var(--cyan-600);
+
+  /* ===================================
+   * Border Tokens (Decorative)
+   * =================================== */
+  --color-border: var(--gray-200); /* Default decorative border */
+  --color-border-subtle: var(--gray-100); /* Subtle dividers */
+  --color-border-strong: var(--gray-300); /* Emphasized borders */
+  --color-border-inverse: var(--gray-700); /* Border on dark backgrounds */
+
+  /* Control Borders (Accessible - 3:1 contrast) */
+  --color-border-control: var(--gray-300); /* Form inputs, buttons */
+  --color-border-control-hover: var(--gray-400);
+  --color-border-control-active: var(--gray-500);
+  --color-border-control-disabled: var(--gray-300);
+  --color-border-control-readonly: var(--gray-300);
+
+  /* Brand/Primary Border */
+  --color-border-primary: var(--indigo-700);
+
+  /* Focus Border */
+  --color-border-focus: var(--indigo-500);
+
+  /* Focus Ring Halo (box-shadow glow) */
+  --color-focus-ring-halo: var(--indigo-200);
+  --color-focus-ring-halo-critical: var(--red-200);
+
+  /* Semantic Borders */
+  --color-border-neutral: var(--gray-900);
+  --color-border-success: var(--green-500);
+  --color-border-warning: var(--amber-500);
+  --color-border-critical: var(--red-500);
+  --color-border-info: var(--cyan-500);
+}

package/dist/styles/semantic/effects.css

@@ -0,0 +1,17 @@
+:root {
+  /* Semantic Shadow Aliases */
+  --shadow-surface: var(--shadow-xs);
+  --shadow-modal: var(--shadow-lg);
+
+  /* Focus Ring */
+  --focus-ring: 0 0 0 3px var(--color-focus-ring-halo);
+  --focus-ring-critical: 0 0 0 3px var(--color-focus-ring-halo-critical);
+
+  /* Z-Index Semantic Layers */
+  --z-dropdown: var(--z-100);
+  --z-sticky: var(--z-200);
+  --z-popover: var(--z-300);
+  --z-overlay: var(--z-400);
+  --z-modal: var(--z-500);
+  --z-toast: var(--z-600);
+}

package/dist/styles/semantic/motion.css

@@ -0,0 +1,10 @@
+:root {
+  /* Transition Composites */
+  --transition-fast: var(--duration-150) var(--easing-in-out);
+  --transition-base: var(--duration-200) var(--easing-in-out);
+
+  /* Skeleton Animation */
+  --skeleton-animation-duration: 1.5s;
+  --skeleton-animation: skeleton-pulse var(--skeleton-animation-duration)
+    var(--easing-in-out) infinite;
+}

package/dist/styles/semantic/shape.css

@@ -0,0 +1,20 @@
+:root {
+  /* ===================================
+   * Semantic Shape Tokens
+   * =================================== */
+
+  /* Border Radius */
+  --radius-none: var(--radius-0);
+  --radius-xs: var(--radius-2); /* 2px */
+  --radius-sm: var(--radius-4); /* 4px */
+  --radius-md: var(--radius-6); /* 6px — default for controls */
+  --radius-lg: var(--radius-8); /* 8px */
+  --radius-xl: var(--radius-12); /* 12px */
+  --radius-round: var(--radius-full); /* Pills, avatars */
+
+  /* Border Width */
+  --border-none: var(--border-width-0);
+  --border-sm: var(--border-width-1); /* 1px */
+  --border-md: var(--border-width-2); /* 2px */
+  --border-lg: var(--border-width-4); /* 4px */
+}

package/dist/styles/semantic/sizing.css

@@ -0,0 +1,53 @@
+:root {
+  /* ===================================
+   * Interactive Control Sizing
+   * =================================== */
+
+  /* Button heights */
+  --button-height-sm: var(--spacing-7); /* 28px */
+  --button-height-md: var(--spacing-8); /* 32px */
+  --button-height-lg: var(--spacing-9); /* 36px */
+
+  /* Button padding */
+  --button-padding-horizontal-sm: var(--spacing-2); /* 8px */
+  --button-padding-horizontal-md: var(--spacing-3); /* 12px */
+  --button-padding-horizontal-lg: var(--spacing-4); /* 16px */
+  --button-padding-vertical-sm: var(--spacing-0-5); /* 2px */
+  --button-padding-vertical-md: var(--spacing-1); /* 4px */
+  --button-padding-vertical-lg: var(--spacing-2); /* 8px */
+
+  /* Input heights */
+  --input-height-sm: var(--spacing-6); /* 24px */
+  --input-height-md: var(--spacing-8); /* 32px */
+  --input-height-lg: var(--spacing-10); /* 40px */
+  --input-height-full: 100%;
+
+  /* Input widths */
+  --input-width-sm: 8rem;
+  --input-width-md: 16rem;
+  --input-width-lg: 24rem;
+  --input-width-full: 100%;
+
+  /* Input padding */
+  --input-padding-horizontal-sm: var(--spacing-2); /* 8px */
+  --input-padding-horizontal-md: var(--spacing-3); /* 12px */
+  --input-padding-horizontal-lg: var(--spacing-4); /* 16px */
+
+  /* Modal sizing */
+  --modal-padding: var(--spacing-6); /* 24px */
+
+  /* Spinner sizing */
+  --spinner-size-sm: var(--spacing-4); /* 16px */
+  --spinner-size-md: var(--spacing-6); /* 24px */
+  --spinner-size-lg: var(--spacing-8); /* 32px */
+  --spinner-border-width-sm: var(--border-width-2);
+  --spinner-border-width-md: var(--border-width-2);
+  --spinner-border-width-lg: var(--spacing-1); /* 4px */
+
+  /* Grid min-child-width for auto columns */
+  --grid-min-child-width-xs: 150px;
+  --grid-min-child-width-sm: 200px;
+  --grid-min-child-width-md: 280px;
+  --grid-min-child-width-lg: 350px;
+  --grid-min-child-width-xl: 450px;
+}

package/dist/styles/semantic/spacing.css

@@ -0,0 +1,32 @@
+:root {
+  /* ===================================
+   * Semantic Spacing Tokens
+   * =================================== */
+
+  /* Gap (between elements) - 4px increments */
+  --spacing-gap-2xs: var(--spacing-1); /* 4px */
+  --spacing-gap-xs: var(--spacing-2); /* 8px */
+  --spacing-gap-sm: var(--spacing-3); /* 12px */
+  --spacing-gap-md: var(--spacing-4); /* 16px */
+  --spacing-gap-lg: var(--spacing-5); /* 20px */
+  --spacing-gap-xl: var(--spacing-6); /* 24px */
+  --spacing-gap-2xl: var(--spacing-8); /* 32px */
+
+  /* Inset (padding) - 4px increments */
+  --spacing-inset-2xs: var(--spacing-1); /* 4px */
+  --spacing-inset-xs: var(--spacing-2); /* 8px */
+  --spacing-inset-sm: var(--spacing-3); /* 12px */
+  --spacing-inset-md: var(--spacing-4); /* 16px */
+  --spacing-inset-lg: var(--spacing-5); /* 20px */
+  --spacing-inset-xl: var(--spacing-6); /* 24px */
+  --spacing-inset-2xl: var(--spacing-8); /* 32px */
+
+  /* Stack (vertical spacing) - 4px increments */
+  --spacing-stack-2xs: var(--spacing-1); /* 4px */
+  --spacing-stack-xs: var(--spacing-2); /* 8px */
+  --spacing-stack-sm: var(--spacing-3); /* 12px */
+  --spacing-stack-md: var(--spacing-4); /* 16px */
+  --spacing-stack-lg: var(--spacing-5); /* 20px */
+  --spacing-stack-xl: var(--spacing-6); /* 24px */
+  --spacing-stack-2xl: var(--spacing-8); /* 32px */
+}

package/dist/styles/semantic/typography.css

@@ -0,0 +1,32 @@
+:root {
+  /* ===================================
+   * Semantic Typography Tokens
+   * =================================== */
+
+  /* Font Size - Dense SAAS scale */
+  --font-size-xs: var(--font-size-11); /* 11px - tiny labels, badges */
+  --font-size-sm: var(--font-size-12); /* 12px - secondary text, captions */
+  --font-size-md: var(--font-size-13); /* 13px - body text */
+  --font-size-lg: var(--font-size-14); /* 14px - emphasized body */
+  --font-size-xl: var(--font-size-16); /* 16px - H5, small sections */
+  --font-size-2xl: var(--font-size-18); /* 18px - H4 */
+  --font-size-3xl: var(--font-size-20); /* 20px - H3 */
+  --font-size-4xl: var(--font-size-24); /* 24px - H2 */
+  --font-size-5xl: var(--font-size-30); /* 30px - H1, page titles */
+
+  /* Font Weight */
+  --font-weight-regular: var(--font-weight-400);
+  --font-weight-medium: var(--font-weight-500);
+  --font-weight-semibold: var(--font-weight-600);
+  --font-weight-bold: var(--font-weight-700);
+
+  /* Line Height */
+  --line-height-tight: var(--line-height-1-25);
+  --line-height-normal: var(--line-height-1-5);
+  --line-height-relaxed: var(--line-height-1-625);
+
+  /* Letter Spacing */
+  --letter-spacing-tight: -0.025em;
+  --letter-spacing-normal: 0;
+  --letter-spacing-wide: 0.025em;
+}

package/dist/styles/tokens.css

@@ -0,0 +1,31 @@
+/* Assembly Design System Tokens */
+
+/* Fonts - load first */
+@import url("./primitive/fonts.css");
+
+/* Primitive tokens - raw values */
+@import url("./primitive/colors.css");
+@import url("./primitive/spacing.css");
+@import url("./primitive/typography.css");
+@import url("./primitive/shape.css");
+@import url("./primitive/effects.css");
+@import url("./primitive/z-index.css");
+@import url("./primitive/motion.css");
+
+/* Semantic tokens - intent-based */
+@import url("./semantic/colors.css");
+@import url("./semantic/spacing.css");
+@import url("./semantic/typography.css");
+@import url("./semantic/shape.css");
+@import url("./semantic/sizing.css");
+@import url("./semantic/effects.css");
+@import url("./semantic/motion.css");
+
+/* Base styles */
+@import url("./base/typography.css");
+
+/* Animations */
+@import url("./animations.css");
+
+/* Third-party library integration */
+@import url("./ember-promise-modals.css");