@motion-proto/live-tokens 0.1.0

package/src/components/ProgressBar.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+  export let value: number = 0;
+  export let label: string = '';
+  export let variant: 'primary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';
+  export let size: 'default' | 'compact' = 'default';
+  export let showIcon: boolean = true;
+
+  $: clampedValue = Math.min(100, Math.max(0, value));
+  $: isComplete = clampedValue >= 100;
+</script>
+
+<div class="progress" class:compact={size === 'compact'}>
+  {#if label}
+    <div class="progress-label">
+      <span>{label}</span>
+      <span class="progress-value">{clampedValue}%</span>
+    </div>
+  {/if}
+  <div class="progress-track">
+    <div
+      class="progress-fill {variant}"
+      style="width: {clampedValue}%;"
+    ></div>
+  </div>
+  {#if showIcon && isComplete}
+    <div class="progress-icon">
+      <i class="fas fa-check-circle"></i>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .progress {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-6);
+    width: 100%;
+  }
+
+  .progress-label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: var(--font-sm);
+    color: var(--text-secondary);
+    font-weight: var(--font-weight-medium);
+  }
+
+  .progress-value {
+    font-size: var(--font-xs);
+    color: var(--text-tertiary);
+    font-family: 'Courier New', monospace;
+  }
+
+  .progress-track {
+    width: 100%;
+    height: 8px;
+    background: var(--surface-neutral-low);
+    border-radius: var(--radius-full);
+    overflow: hidden;
+    border: 1px solid var(--border-neutral-faint);
+  }
+
+  .compact .progress-track {
+    height: 4px;
+  }
+
+  .progress-fill {
+    height: 100%;
+    border-radius: var(--radius-full);
+    transition: width 0.4s ease;
+  }
+
+  .progress-fill.primary {
+    background: var(--gradient-progress);
+  }
+
+  .progress-fill.success {
+    background: var(--border-success);
+  }
+
+  .progress-fill.warning {
+    background: var(--border-warning);
+  }
+
+  .progress-fill.danger {
+    background: var(--border-danger);
+  }
+
+  .progress-fill.info {
+    background: var(--border-info);
+  }
+
+  .progress-icon {
+    color: var(--text-success);
+    font-size: var(--font-md);
+    text-align: right;
+  }
+</style>

package/src/components/RadioButton.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  export let active: boolean = false;
+  export let icon: string;
+  export let label: string;
+  export let color: string = 'var(--text-secondary)';
+
+  const dispatch = createEventDispatcher();
+</script>
+
+<button
+  class="radio-button"
+  class:active
+  style="--radio-color: {color};"
+  on:click={() => dispatch('click')}
+>
+  <span class="radio-dot" class:filled={active}></span>
+  <i class={icon + ' fa-fw radio-icon'}></i>
+  <span class="radio-label">{label}</span>
+</button>
+
+<style lang="scss">
+  .radio-button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: var(--space-4);
+    width: 120px;
+    height: 1rem;
+    padding: 0 var(--space-4);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    line-height: 1;
+
+    &:hover {
+      background: linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--radio-color) 12%, var(--surface-neutral-lowest)),
+        var(--surface-neutral-lowest)
+      );
+    }
+
+    &.active {
+      background: linear-gradient(
+        135deg,
+        color-mix(in srgb, var(--radio-color) 15%, var(--surface-neutral-lowest)),
+        color-mix(in srgb, var(--radio-color) 5%, var(--surface-neutral-lowest))
+      );
+    }
+  }
+
+  .radio-dot {
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    border: 2px solid var(--border-neutral-default);
+    flex-shrink: 0;
+    transition: all 0.2s ease;
+
+    .radio-button:hover & {
+      border-color: var(--radio-color);
+    }
+
+    &.filled {
+      border-color: var(--radio-color);
+      background: var(--radio-color);
+      box-shadow: inset 0 0 0 2px var(--surface-neutral-lowest);
+    }
+  }
+
+  .radio-icon {
+    font-size: var(--font-lg);
+    color: var(--radio-color);
+    line-height: 1;
+  }
+
+  .radio-label {
+    font-size: var(--font-md);
+    font-weight: var(--font-weight-bold);
+    color: var(--text-primary);
+    line-height: 1;
+  }
+</style>

package/src/components/SectionDivider.svelte

@@ -0,0 +1,121 @@
+<script lang="ts">
+  export let title: string;
+  export let description: string | undefined = undefined;
+  export let variant: 'bg' | 'neutral' | 'alternate' | 'primary' | 'accent' | 'special' = 'bg';
+</script>
+
+<div class="section-divider variant-{variant}">
+  <span class="divider-label">{title}</span>
+  {#if description}
+    <p class="divider-description">{description}</p>
+  {/if}
+</div>
+
+<style>
+  .section-divider {
+    margin: var(--space-24) 0;
+    padding: var(--space-16) var(--space-24);
+    border-radius: var(--radius-lg);
+    background: linear-gradient(135deg,
+      var(--_divider-1) 0%,
+      var(--_divider-2) 30%,
+      var(--_divider-3) 60%,
+      var(--_divider-4) 100%
+    );
+  }
+
+  /* Variant palette mappings */
+  .variant-bg {
+    --_divider-1: var(--surface-bg-highest);
+    --_divider-2: var(--surface-bg-higher);
+    --_divider-3: var(--surface-bg-high);
+    --_divider-4: var(--surface-bg);
+    --_divider-stroke: var(--surface-bg-lowest);
+  }
+
+  .variant-neutral {
+    --_divider-1: var(--surface-neutral-highest);
+    --_divider-2: var(--surface-neutral-higher);
+    --_divider-3: var(--surface-neutral-high);
+    --_divider-4: var(--surface-neutral);
+    --_divider-stroke: var(--surface-neutral-lowest);
+  }
+
+  .variant-alternate {
+    --_divider-1: var(--surface-alternate-highest);
+    --_divider-2: var(--surface-alternate-higher);
+    --_divider-3: var(--surface-alternate-high);
+    --_divider-4: var(--surface-alternate);
+    --_divider-stroke: var(--surface-alternate-lowest);
+  }
+
+  .variant-primary {
+    --_divider-1: var(--surface-primary-highest);
+    --_divider-2: var(--surface-primary-higher);
+    --_divider-3: var(--surface-primary-high);
+    --_divider-4: var(--surface-primary);
+    --_divider-stroke: var(--surface-primary-lowest);
+  }
+
+  .variant-accent {
+    --_divider-1: var(--surface-accent-highest);
+    --_divider-2: var(--surface-accent-higher);
+    --_divider-3: var(--surface-accent-high);
+    --_divider-4: var(--surface-accent);
+    --_divider-stroke: var(--surface-accent-lowest);
+  }
+
+  .variant-special {
+    --_divider-1: var(--surface-special-highest);
+    --_divider-2: var(--surface-special-higher);
+    --_divider-3: var(--surface-special-high);
+    --_divider-4: var(--surface-special);
+    --_divider-stroke: var(--surface-special-lowest);
+  }
+
+  .divider-label {
+    display: block;
+    font-family: var(--font-display);
+    font-size: var(--font-5xl);
+    line-height: 1.05;
+    color: #fff;
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    hyphens: auto;
+    text-shadow:
+      -4px -4px 0 var(--_divider-stroke),
+      4px -4px 0 var(--_divider-stroke),
+      -4px 4px 0 var(--_divider-stroke),
+      4px 4px 0 var(--_divider-stroke),
+      0 -4px 0 var(--_divider-stroke),
+      0 4px 0 var(--_divider-stroke),
+      -4px 0 0 var(--_divider-stroke),
+      4px 0 0 var(--_divider-stroke);
+  }
+
+  .divider-description {
+    margin: var(--space-4) 0 0;
+    font-family: var(--font-sans);
+    font-size: var(--font-md);
+    color: rgba(255, 255, 255, 0.8);
+    line-height: var(--line-height-normal);
+  }
+
+  @media (max-width: 600px) {
+    .section-divider {
+      padding: var(--space-12) var(--space-16);
+    }
+
+    .divider-label {
+      text-shadow:
+        -2px -2px 0 var(--_divider-stroke),
+        2px -2px 0 var(--_divider-stroke),
+        -2px 2px 0 var(--_divider-stroke),
+        2px 2px 0 var(--_divider-stroke),
+        0 -2px 0 var(--_divider-stroke),
+        0 2px 0 var(--_divider-stroke),
+        -2px 0 0 var(--_divider-stroke),
+        2px 0 0 var(--_divider-stroke);
+    }
+  }
+</style>

package/src/components/TabBar.svelte

@@ -0,0 +1,92 @@
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+
+  interface Tab {
+    id: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+  }
+
+  export let tabs: Tab[] = [];
+  export let selectedTab: string = '';
+  export let iconOnly: boolean = false;
+
+  const dispatch = createEventDispatcher<{
+    tabChange: string;
+  }>();
+
+  function selectTab(tab: Tab) {
+    if (!tab.disabled) {
+      dispatch('tabChange', tab.id);
+    }
+  }
+</script>
+
+<div class="tab-bar">
+  {#each tabs as tab}
+    <button
+      class="tab"
+      class:active={selectedTab === tab.id}
+      class:icon-only={iconOnly}
+      disabled={tab.disabled}
+      on:click={() => selectTab(tab)}
+    >
+      {#if tab.icon}
+        <i class={tab.icon}></i>
+      {/if}
+      {#if !iconOnly}
+        <span>{tab.label}</span>
+      {/if}
+    </button>
+  {/each}
+</div>
+
+<style>
+  .tab-bar {
+    display: flex;
+    gap: var(--space-2);
+    border-bottom: 1px solid var(--border-neutral-subtle);
+    padding: 0 var(--space-8);
+  }
+
+  .tab {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-6);
+    padding: var(--space-8) var(--space-16);
+    background: transparent;
+    border: none;
+    border-bottom: 2px solid transparent;
+    color: var(--text-tertiary);
+    font-size: var(--font-md);
+    font-weight: var(--font-weight-medium);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+    position: relative;
+  }
+
+  .tab:hover:not(:disabled):not(.active) {
+    color: var(--text-secondary);
+    background: var(--hover-low);
+  }
+
+  .tab.active {
+    color: var(--text-primary);
+    border-bottom-color: var(--color-primary-500);
+    background: linear-gradient(to bottom, transparent, var(--overlay-lowest));
+  }
+
+  .tab:disabled {
+    opacity: var(--opacity-disabled);
+    cursor: not-allowed;
+  }
+
+  .tab.icon-only {
+    padding: var(--space-8) var(--space-12);
+  }
+
+  .tab i {
+    font-size: var(--font-md);
+  }
+</style>

package/src/components/Toggle.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+  export let checked: boolean = false;
+  export let disabled: boolean = false;
+  export let label: string = '';
+</script>
+
+<label class="toggle" class:disabled>
+  <button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    {disabled}
+    class="toggle-track"
+    class:on={checked}
+    on:click={() => { if (!disabled) checked = !checked; }}
+  >
+    <span class="toggle-thumb" />
+  </button>
+  {#if label}
+    <span class="toggle-label">{label}</span>
+  {/if}
+</label>
+
+<style lang="scss">
+  .toggle {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--space-8);
+    cursor: pointer;
+    user-select: none;
+
+    &.disabled {
+      opacity: var(--opacity-disabled);
+      cursor: not-allowed;
+    }
+  }
+
+  .toggle-track {
+    position: relative;
+    width: 2.25rem;
+    height: 1.25rem;
+    border-radius: 0.625rem;
+    border: 1px solid var(--ui-border-default);
+    background: var(--ui-surface-low);
+    padding: 0;
+    cursor: inherit;
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+    flex-shrink: 0;
+
+    &.on {
+      background: var(--ui-toggle);
+      border-color: var(--ui-border-medium);
+    }
+
+    &:hover:not(:disabled) {
+      border-color: var(--ui-border-medium);
+    }
+
+    &:focus-visible {
+      outline: 2px solid var(--border-primary);
+      outline-offset: 2px;
+    }
+  }
+
+  .toggle-thumb {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 0.875rem;
+    height: 0.875rem;
+    border-radius: 50%;
+    background: var(--ui-text-secondary);
+    transition: transform var(--transition-fast), background var(--transition-fast);
+
+    .on & {
+      transform: translateX(1rem);
+      background: var(--text-primary);
+    }
+  }
+
+  .toggle-label {
+    font-size: var(--font-md);
+    color: var(--ui-text-secondary);
+    line-height: 1;
+  }
+</style>

package/src/components/Tooltip.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  export let text: string = '';
+  export let position: 'top' | 'bottom' = 'top';
+</script>
+
+<div class="tooltip-wrapper">
+  <slot />
+  {#if text}
+    <div class="tooltip" class:bottom={position === 'bottom'}>
+      {text}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .tooltip-wrapper {
+    position: relative;
+    display: inline-block;
+  }
+
+  .tooltip {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    background: var(--surface-neutral-highest);
+    color: var(--text-primary);
+    padding: var(--space-6) var(--space-12);
+    border-radius: var(--radius-md);
+    font-size: var(--font-sm);
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity var(--transition-fast);
+    z-index: var(--z-tooltip);
+    box-shadow: var(--shadow-md);
+  }
+
+  .tooltip::after {
+    content: '';
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: var(--surface-neutral-highest);
+  }
+
+  .tooltip.bottom {
+    bottom: auto;
+    top: calc(100% + 8px);
+  }
+
+  .tooltip.bottom::after {
+    top: auto;
+    bottom: 100%;
+    border-top-color: transparent;
+    border-bottom-color: var(--surface-neutral-highest);
+  }
+
+  .tooltip-wrapper:hover .tooltip {
+    opacity: 1;
+  }
+</style>

package/src/lib/ColumnsOverlay.svelte

@@ -0,0 +1,120 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import { columnsVisible } from './columnsOverlay';
+
+  let count = 12;
+  let gutter = '';
+  let margin = '';
+
+  function readTokens() {
+    const cs = getComputedStyle(document.documentElement);
+    const rawCount = cs.getPropertyValue('--columns-count').trim();
+    const parsed = parseInt(rawCount, 10);
+    if (!Number.isNaN(parsed) && parsed > 0) count = parsed;
+    gutter = cs.getPropertyValue('--columns-gutter').trim();
+    margin = cs.getPropertyValue('--columns-margin').trim();
+  }
+
+  onMount(() => {
+    readTokens();
+    const onResize = () => readTokens();
+    window.addEventListener('resize', onResize);
+
+    const observer = new MutationObserver(readTokens);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['style'],
+    });
+
+    return () => {
+      window.removeEventListener('resize', onResize);
+      observer.disconnect();
+    };
+  });
+</script>
+
+{#if $columnsVisible}
+  <div class="columns-overlay" aria-hidden="true">
+    <div class="columns-overlay__inner">
+      {#each Array(count) as _, i}
+        <div class="columns-overlay__col">
+          <span class="columns-overlay__num">{i + 1}</span>
+        </div>
+      {/each}
+    </div>
+    <div class="columns-overlay__info">
+      <i class="fas fa-grip-lines-vertical"></i>
+      <span>{count} col</span>
+      <span class="sep">·</span>
+      <span>gutter {gutter || 'var(--columns-gutter)'}</span>
+      <span class="sep">·</span>
+      <span>margin {margin || 'var(--columns-margin)'}</span>
+    </div>
+  </div>
+{/if}
+
+<style>
+  .columns-overlay {
+    position: fixed;
+    inset: 0;
+    pointer-events: none;
+    z-index: 1500;
+    padding-inline: var(--columns-margin);
+    display: flex;
+    justify-content: center;
+  }
+
+  .columns-overlay__inner {
+    width: 100%;
+    max-width: var(--columns-max-width);
+    height: 100%;
+    display: grid;
+    grid-template-columns: repeat(var(--columns-count, 12), 1fr);
+    gap: var(--columns-gutter);
+  }
+
+  .columns-overlay__col {
+    background: rgba(239, 68, 68, 0.04);
+    border-left: 1px dashed rgba(239, 68, 68, 0.22);
+    border-right: 1px dashed rgba(239, 68, 68, 0.22);
+  }
+
+  .columns-overlay__num {
+    display: block;
+    font-family: var(--font-mono);
+    font-size: 9px;
+    line-height: 1;
+    color: rgba(255, 255, 255, 0.4);
+    text-align: center;
+    padding-top: 3px;
+  }
+
+  .columns-overlay__info {
+    position: fixed;
+    left: 12px;
+    bottom: 12px;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 5px 9px;
+    background: rgba(0, 0, 0, 0.72);
+    backdrop-filter: blur(6px);
+    -webkit-backdrop-filter: blur(6px);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    font-family: var(--font-mono);
+    font-size: 10px;
+    color: rgba(255, 255, 255, 0.75);
+    letter-spacing: 0.02em;
+    white-space: nowrap;
+  }
+
+  .columns-overlay__info i {
+    font-size: 9px;
+    opacity: 0.7;
+  }
+
+  .columns-overlay__info .sep {
+    opacity: 0.4;
+  }
+</style>