@meddleware/token-deployer-ui 0.0.2 → 0.0.4

package/src/styles.css

@@ -1,64 +1,7 @@
-/* Accessible, lightweight styling. System fonts, dark/light aware, high-contrast
-   focus rings, and reduced-motion respect. No heavy CSS framework. */
+/* SPA shell globals — imported by main.ts only (standalone SPA mode).
+   Token variables come from @meddleware/design-tokens, imported before this.
+   Component utility classes live in component-styles.css. */
 
-/* Oxblood / Indigo (masonic) palette — vendored mirror of the shared design
-   system for visual parity with the dashboard. The repo is self-contained
-   (no cross-repo links), so the token VALUES are copied here.
-   TODO(unify): consume `@meddleware/design-tokens` once it is published.
-   Dark mode is driven by `data-theme` (see composables/useColorMode.ts, which
-   also enables the light/dark/system control); the `:not([data-theme])` media
-   block preserves OS-follow before that runs (anti-flash). */
-:root {
-  --bg: #f7f4f1;
-  --surface: #ffffff;
-  --border: #ded6cf;
-  --text: #201b19;
-  --muted: #6e635c;
-  --accent: #5e1622;
-  --accent-contrast: #ffffff;
-  --danger: #b3261e;
-  --ok: #1c5e4a;
-  --radius: 10px;
-  --lift: #efeae6;
-  color-scheme: light;
-}
-
-:root[data-theme="dark"] {
-  --bg: #120e10;
-  --surface: #1c1618;
-  --border: #372b2e;
-  --text: #f2eae6;
-  --muted: #b7a9a3;
-  --accent: #b0465a;
-  --accent-contrast: #ffffff;
-  --danger: #f08a7e;
-  --ok: #5bb392;
-  --lift: #241c1f;
-  color-scheme: dark;
-}
-
-/* Pre-JS OS-follow (only until useColorMode sets an explicit data-theme). */
-@media (prefers-color-scheme: dark) {
-  :root:not([data-theme]) {
-    --bg: #120e10;
-    --surface: #1c1618;
-    --border: #372b2e;
-    --text: #f2eae6;
-    --muted: #b7a9a3;
-    --accent: #b0465a;
-    --accent-contrast: #ffffff;
-    --danger: #f08a7e;
-    --ok: #5bb392;
-    --lift: #241c1f;
-    color-scheme: dark;
-  }
-}
-
-* {
-  box-sizing: border-box;
-}
-
-/* Top-right colour-mode control row (parity with the dashboard). */
 .theme-bar {
   display: flex;
   justify-content: flex-end;
@@ -101,284 +44,9 @@ p.lede {
   color: var(--muted);
   font-size: 1.05rem;
 }
-a {
-  color: var(--accent);
-}
-
-.card {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.25rem;
-  margin: 1.5rem 0 1rem;
-  border-top: 2px solid var(--border);
-}
-
-label {
-  display: block;
-  font-weight: 600;
-  margin: 0.9rem 0 0.3rem;
-}
-.hint {
-  color: var(--muted);
-  font-weight: 400;
-  font-size: 0.9rem;
-}
-
-input,
-select,
-textarea {
-  width: 100%;
-  padding: 0.6rem 0.7rem;
-  font: inherit;
-  color: var(--text);
-  background: var(--bg);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-}
-textarea {
-  min-height: 4rem;
-  resize: vertical;
-}
-
-input[aria-invalid='true'],
-select[aria-invalid='true'],
-textarea[aria-invalid='true'] {
-  border-color: var(--danger);
-}
-
-.field-error {
-  color: var(--danger);
-  font-size: 0.88rem;
-  margin-top: 0.3rem;
-}
-
-:focus-visible {
-  outline: 3px solid var(--accent);
-  outline-offset: 2px;
-}
-
-button {
-  font: inherit;
-  font-weight: 600;
-  padding: 0.6rem 1rem;
-  border-radius: 8px;
-  border: 1px solid var(--border);
-  background: var(--surface);
-  color: var(--text);
-  cursor: pointer;
-}
-button.primary {
-  background: var(--accent);
-  color: var(--accent-contrast);
-  border-color: transparent;
-}
-button:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
-}
-
-.row {
-  display: flex;
-  gap: 0.75rem;
-  flex-wrap: wrap;
-  align-items: center;
-}
-.grid2 {
-  display: grid;
-  grid-template-columns: 1fr;
-  gap: 0 1rem;
-}
-@media (min-width: 520px) {
-  .grid2 {
-    grid-template-columns: 1fr 1fr;
-  }
-}
-
-fieldset {
-  background: var(--lift);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  padding: 0.5rem 1rem 1rem;
-  margin: 1rem 0;
-}
-legend {
-  font-weight: 700;
-  padding: 0 0.4rem;
-}
-
-details {
-  margin: 1rem 0;
-}
-
-details > summary {
-  color: var(--accent);
-  font-weight: 700;
-  margin: 0.5rem 0;
-  padding: 0.75rem;
-  background: var(--lift);
-  border-radius: 8px;
-  border: 1px solid transparent;
-  transition: border-color 0.2s ease;
-}
-
-details > summary:hover {
-  border-color: var(--border);
-}
-
-details[open] > summary {
-  border-color: var(--border);
-  margin-bottom: 1rem;
-}
-
-details > fieldset {
-  margin-top: 0;
-}
-
-.permanent {
-  color: var(--danger);
-  font-weight: 600;
-}
-.mono {
-  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
-  word-break: break-all;
-}
-.badge {
-  display: inline-block;
-  font-size: 0.8rem;
-  padding: 0.15rem 0.5rem;
-  border-radius: 999px;
-  background: var(--border);
-}
-
-.visually-hidden {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
-/* Keyboard skip link: hidden until focused, then visible at the top-left. */
-.skip-link {
-  position: absolute;
-  left: 0.5rem;
-  top: -3rem;
-  z-index: 100;
-  background: var(--accent);
-  color: #fff;
-  padding: 0.5rem 0.9rem;
-  border-radius: 6px;
-  text-decoration: none;
-  transition: top 0.15s ease;
-}
-.skip-link:focus {
-  top: 0.5rem;
-}
-@media (prefers-reduced-motion: reduce) {
-  .skip-link {
-    transition: none;
-  }
-}
-
-.steps {
-  list-style: none;
-  padding: 0;
-}
-.steps li {
-  padding: 0.35rem 0;
-  color: var(--muted);
-}
-.steps li[data-state='active'] {
-  color: var(--text);
-  font-weight: 600;
-}
-.steps li[data-state='done'] {
-  color: var(--ok);
-}
-
-.spinner {
-  width: 1em;
-  height: 1em;
-  border: 2px solid currentColor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  display: inline-block;
-  animation: spin 0.7s linear infinite;
-  vertical-align: -0.15em;
-}
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-@media (prefers-reduced-motion: reduce) {
-  .spinner {
-    animation: none;
-  }
-  * {
-    scroll-behavior: auto;
-  }
-}
 
 footer {
   border-top: 1px solid var(--border);
   padding-top: 1.5rem;
   margin-top: 2rem;
 }
-
-.notice {
-  border-left: 4px solid var(--accent);
-  padding: 0.5rem 0.75rem;
-  background: var(--surface);
-  border-radius: 6px;
-}
-.notice.error {
-  border-color: var(--danger);
-}
-.notice.ok {
-  border-color: var(--ok);
-}
-
-dialog {
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  padding: 1.5rem;
-  width: min(420px, 90vw);
-  max-height: 90vh;
-  overflow-y: auto;
-  color: var(--text);
-}
-dialog::backdrop {
-  background: rgba(0, 0, 0, 0.45);
-  -webkit-backdrop-filter: blur(2px);
-  backdrop-filter: blur(2px);
-}
-.dialog-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 1.25rem;
-}
-.dialog-header h2 {
-  margin: 0;
-  font-size: 1.1rem;
-}
-.wallet-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.5rem;
-  margin-top: 1rem;
-}
-.wallet-list button {
-  display: flex;
-  align-items: center;
-  gap: 0.6rem;
-  width: 100%;
-  justify-content: flex-start;
-}

package/src/components/AppNotice.vue

@@ -1,15 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{ type?: 'info' | 'error' | 'ok' }>()
-
-const role = computed(() => {
-  if (props.type === 'error') return 'alert'
-  if (props.type === 'ok') return 'status'
-  return undefined
-})
-</script>
-
-<template>
-  <p :class="['notice', type && type !== 'info' ? type : '']" :role="role"><slot /></p>
-</template>

package/src/components/ColorModeControl.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import type { ColorMode } from '../composables/useColorMode'
-
-/**
- * Presentational light/dark/system control. Owns no state — bind with `v-model`
- * to external state (`useColorMode`). Vendored mirror of `@meddleware/ui`'s
- * `ColorModeControl` for parity with the dashboard.
- * TODO(unify): consume `@meddleware/ui` once published.
- */
-withDefaults(
-  defineProps<{
-    modelValue: ColorMode
-    modes?: ColorMode[]
-  }>(),
-  { modes: () => ['light', 'dark', 'system'] },
-)
-
-defineEmits<{ 'update:modelValue': [ColorMode] }>()
-
-const LABEL: Record<ColorMode, string> = { light: 'Light', dark: 'Dark', system: 'System' }
-const GLYPH: Record<ColorMode, string> = { light: '☀', dark: '☾', system: '◐' }
-</script>
-
-<template>
-  <div class="mode-control" role="group" aria-label="Colour mode">
-    <button
-      v-for="m in modes"
-      :key="m"
-      type="button"
-      class="mode-control__btn"
-      :class="{ 'is-active': modelValue === m }"
-      :aria-pressed="modelValue === m"
-      :title="LABEL[m]"
-      @click="$emit('update:modelValue', m)"
-    >
-      <span aria-hidden="true">{{ GLYPH[m] }}</span>
-      <span class="mode-control__label">{{ LABEL[m] }}</span>
-    </button>
-  </div>
-</template>
-
-<style scoped>
-.mode-control {
-  display: inline-flex;
-  gap: 2px;
-  padding: 2px;
-  border: 1px solid var(--border);
-  border-radius: var(--radius);
-  background: var(--surface);
-}
-.mode-control__btn {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.35rem;
-  padding: 0.25rem 0.5rem;
-  border: 0;
-  border-radius: calc(var(--radius) - 3px);
-  background: transparent;
-  color: var(--text);
-  font: inherit;
-  font-size: 0.8rem;
-  cursor: pointer;
-  opacity: 0.7;
-}
-.mode-control__btn:hover {
-  opacity: 1;
-}
-.mode-control__btn.is-active {
-  opacity: 1;
-  background: var(--lift);
-}
-.mode-control__btn:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 1px;
-}
-@media (max-width: 640px) {
-  .mode-control__label {
-    display: none;
-  }
-}
-</style>

package/src/components/FieldHint.vue

@@ -1,79 +0,0 @@
-<script setup lang="ts">
-defineProps<{ fieldId: string }>()
-
-function onKeyDown(e: KeyboardEvent) {
-  if (e.key === 'Escape') (e.currentTarget as HTMLElement).blur()
-}
-</script>
-
-<template>
-  <span class="field-hint">
-    <button
-      type="button"
-      class="field-hint-btn"
-      :aria-describedby="`${fieldId}-hint`"
-      aria-label="Help"
-      @keydown="onKeyDown"
-    >?</button>
-    <span :id="`${fieldId}-hint`" role="tooltip" class="field-hint-tip">
-      <slot />
-    </span>
-  </span>
-</template>
-
-<style scoped>
-.field-hint {
-  position: relative;
-  display: inline-block;
-  margin-left: 0.35rem;
-  vertical-align: middle;
-}
-
-.field-hint-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 1.1em;
-  height: 1.1em;
-  padding: 0;
-  font-size: 0.75rem;
-  font-weight: 700;
-  line-height: 1;
-  border-radius: 50%;
-  border: 1px solid var(--muted);
-  color: var(--muted);
-  background: transparent;
-  cursor: help;
-}
-
-.field-hint-tip {
-  position: absolute;
-  top: calc(100% + 6px);
-  left: 0;
-  z-index: 10;
-  min-width: 200px;
-  max-width: min(300px, 90vw);
-  padding: 0.6rem 0.75rem;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  font-size: 0.85rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: var(--text);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
-  visibility: hidden;
-  opacity: 0;
-  transition:
-    opacity 0.15s ease,
-    visibility 0.15s ease;
-  pointer-events: none;
-}
-
-.field-hint:hover .field-hint-tip,
-.field-hint:focus-within .field-hint-tip {
-  visibility: visible;
-  opacity: 1;
-  pointer-events: auto;
-}
-</style>

package/src/components/FormField.vue

@@ -1,28 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-
-const props = defineProps<{
-  id: string
-  label: string
-  error?: string | null
-  hint?: string
-}>()
-
-const errorId = computed(() => `${props.id}-err`)
-const slotAttrs = computed(() => ({
-  id: props.id,
-  'aria-invalid': props.error ? (true as const) : undefined,
-  'aria-describedby': props.error ? errorId.value : undefined,
-}))
-</script>
-
-<template>
-  <div class="form-field">
-    <label :for="id">
-      {{ label }}<slot name="label-suffix" />
-    </label>
-    <slot :attrs="slotAttrs" />
-    <p v-if="hint && !error" class="hint">{{ hint }}</p>
-    <p v-if="error" :id="errorId" class="field-error">{{ error }}</p>
-  </div>
-</template>

package/src/components/FormSelect.vue

@@ -1,43 +0,0 @@
-<script setup lang="ts">
-defineOptions({ inheritAttrs: false })
-const model = defineModel<string>()
-</script>
-
-<template>
-  <div class="select-wrapper">
-    <select v-bind="$attrs" v-model="model"><slot /></select>
-    <svg
-      class="select-chevron"
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="8"
-      viewBox="0 0 12 8"
-      aria-hidden="true"
-    >
-      <path d="M1 1l5 5 5-5" />
-    </svg>
-  </div>
-</template>
-
-<style scoped>
-.select-wrapper {
-  position: relative;
-}
-
-.select-wrapper select {
-  appearance: none;
-  padding-right: 2.5rem;
-  width: 100%;
-}
-
-.select-chevron {
-  position: absolute;
-  right: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  stroke: var(--muted);
-  stroke-width: 1.5;
-  fill: none;
-}
-</style>

package/src/composables/useColorMode.ts

@@ -1,76 +0,0 @@
-import { ref, watch, type Ref } from 'vue'
-
-/**
- * Colour-mode state manager (light | dark | system). Sets `data-theme` on
- * <html>, persists the choice, and follows the OS in `system` mode.
- *
- * Vendored mirror of `@meddleware/ui`'s `useColorMode` for visual/UX parity with
- * the dashboard — this repo is self-contained (no cross-repo links).
- * TODO(unify): consume `@meddleware/ui` once it is published.
- */
-
-export type ColorMode = 'light' | 'dark' | 'system'
-
-const STORAGE_KEY = 'sui-deployer:color-mode'
-
-const mode: Ref<ColorMode> = ref<ColorMode>('system')
-let initialized = false
-
-function systemPrefersDark(): boolean {
-  return (
-    typeof window !== 'undefined' &&
-    typeof window.matchMedia === 'function' &&
-    window.matchMedia('(prefers-color-scheme: dark)').matches
-  )
-}
-
-function resolveDark(m: ColorMode): boolean {
-  return m === 'dark' || (m === 'system' && systemPrefersDark())
-}
-
-function apply(m: ColorMode): void {
-  if (typeof document === 'undefined') return
-  document.documentElement.setAttribute('data-theme', resolveDark(m) ? 'dark' : 'light')
-}
-
-export function useColorMode(defaultMode: ColorMode = 'system') {
-  if (!initialized) {
-    initialized = true
-    let stored: ColorMode | null = null
-    try {
-      stored =
-        typeof localStorage !== 'undefined'
-          ? (localStorage.getItem(STORAGE_KEY) as ColorMode | null)
-          : null
-    } catch {
-      /* no storage — ignore */
-    }
-    mode.value = stored ?? defaultMode
-    apply(mode.value)
-
-    if (typeof window !== 'undefined' && typeof window.matchMedia === 'function') {
-      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
-        if (mode.value === 'system') apply('system')
-      })
-    }
-
-    watch(mode, (m) => {
-      apply(m)
-      try {
-        if (typeof localStorage !== 'undefined') localStorage.setItem(STORAGE_KEY, m)
-      } catch {
-        /* ignore */
-      }
-    })
-  }
-
-  function set(m: ColorMode): void {
-    mode.value = m
-  }
-
-  function cycle(): void {
-    set(mode.value === 'light' ? 'dark' : mode.value === 'dark' ? 'system' : 'light')
-  }
-
-  return { mode, set, cycle, isDark: () => resolveDark(mode.value) }
-}