@processengine/uikit 0.1.0

package/dist/styles.css

@@ -0,0 +1,675 @@
+/* tokens.css */
+:root {
+  --page-bg: #f5f3ee;
+  --page-glow:
+    radial-gradient(circle at top left, rgba(79, 70, 229, 0.08), transparent 28rem),
+    radial-gradient(circle at top right, rgba(251, 191, 36, 0.08), transparent 24rem);
+
+  --surface-canvas: rgba(255, 255, 255, 0.52);
+  --surface-card: #ffffff;
+  --surface-subtle: #faf7f1;
+  --surface-muted: #f3efe7;
+  --surface-hover: #fffdf9;
+
+  --text-strong: #1a1a2e;
+  --text-strong-soft: #23233a;
+  --text-medium: #4b5563;
+  --text-dim: #6b7280;
+  --text-muted: #8b95a7;
+  --text-faint: #a2aaba;
+
+  --border-color: #e8e5df;
+  --border-strong: #d8d2c8;
+  --accent-color: #4f46e5;
+  --accent-soft: #eef2ff;
+  --accent-strong: #3730a3;
+
+  --status-success-bg: #f0fdf4;
+  --status-success-border: #bbf7d0;
+  --status-success-text: #166534;
+  --status-error-bg: #fff1f2;
+  --status-error-border: #fecdd3;
+  --status-error-text: #be123c;
+  --status-neutral-bg: #f1f5f9;
+  --status-neutral-border: #cbd5e1;
+  --status-neutral-text: #334155;
+
+  --stage-success-bg: #f0fdf4;
+  --stage-success-border: #bbf7d0;
+  --stage-success-accent: #16a34a;
+  --stage-active-bg: #fffbeb;
+  --stage-active-border: #fde68a;
+  --stage-active-accent: #d97706;
+  --stage-error-bg: #fff1f2;
+  --stage-error-border: #fecdd3;
+  --stage-error-accent: #e11d48;
+  --stage-pending-bg: #f8fafc;
+  --stage-pending-border: #e2e8f0;
+  --stage-pending-accent: #94a3b8;
+
+  --font-sans:
+    Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-input: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-mono:
+    'JetBrains Mono', 'SFMono-Regular', 'SF Mono', Menlo, Consolas, 'Liberation Mono',
+    monospace;
+
+  --shadow-sm: 0 2px 8px rgba(26, 26, 46, 0.06);
+  --shadow-md: 0 4px 20px rgba(26, 26, 46, 0.09);
+  --shadow-lg: 0 8px 32px rgba(26, 26, 46, 0.12);
+
+  --shell-max-width: 88rem;
+  --page-inline-padding: clamp(1.25rem, 3vw, 2rem);
+  --page-block-start: clamp(1.25rem, 3vw, 2rem);
+  --page-block-end: clamp(2rem, 4vw, 3rem);
+
+  --space-1: 0.125rem;
+  --space-2: 0.25rem;
+  --space-3: 0.5rem;
+  --space-4: 0.75rem;
+  --space-5: 1rem;
+  --space-6: 1.25rem;
+  --space-7: 1.5rem;
+  --space-8: 2rem;
+  --space-9: 2.5rem;
+
+  --radius-sm: 0.625rem;
+  --radius-md: 0.875rem;
+  --radius-lg: 1.25rem;
+  --radius-xl: 1.75rem;
+}
+
+/* base.css */
+html {
+  background: var(--page-bg);
+}
+
+body {
+  margin: 0;
+  min-width: 20rem;
+  min-height: 100svh;
+  background: var(--page-bg);
+  background-image: var(--page-glow);
+  color: var(--text-strong);
+  font-family: var(--font-sans);
+  font-size: 100%;
+  line-height: 1.5;
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+#root {
+  min-height: 100svh;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+button,
+input,
+textarea,
+select {
+  font: inherit;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+pre {
+  margin: 0;
+}
+
+a {
+  color: inherit;
+}
+
+/* components.css */
+.app-page {
+  min-height: 100svh;
+  padding: var(--page-block-start) var(--page-inline-padding)
+    var(--page-block-end);
+}
+
+.app-shell-frame {
+  inline-size: min(100%, var(--shell-max-width));
+  margin: 0 auto;
+  padding: 0.875rem;
+  border: 0.0625rem solid rgba(255, 255, 255, 0.72);
+  border-radius: calc(var(--radius-xl) + 0.5rem);
+  background: var(--surface-canvas);
+  box-shadow: var(--shadow-lg);
+  backdrop-filter: blur(12px);
+}
+
+.app-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 0.625rem 0.875rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: calc(var(--radius-lg) - 0.125rem);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-toolbar__brand {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.75rem;
+  color: var(--text-strong);
+  text-decoration: none;
+}
+
+.app-toolbar__brand-mark {
+  inline-size: 2rem;
+  block-size: 2rem;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 999px;
+  background: var(--text-strong);
+  color: #fff;
+  font-weight: 800;
+  font-size: 0.95rem;
+  letter-spacing: -0.02em;
+}
+
+.app-toolbar__brand-text {
+  font-size: 1rem;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+}
+
+.app-toolbar__breadcrumbs {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+  color: var(--text-dim);
+  font-size: 0.86rem;
+}
+
+.app-toolbar__crumb {
+  white-space: nowrap;
+}
+
+.app-toolbar__crumb--current {
+  color: var(--text-strong);
+  font-weight: 600;
+}
+
+.app-toolbar__crumb-separator {
+  color: var(--text-faint);
+}
+
+.app-toolbar__actions {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  margin-left: auto;
+  min-width: 0;
+}
+
+.app-server-control__form {
+  min-width: min(28rem, 45vw);
+}
+
+.app-server-control {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 0.125rem;
+  min-width: 0;
+  max-width: min(28rem, 45vw);
+  padding: 0.3rem 0.55rem;
+  border: 0.0625rem solid transparent;
+  border-radius: var(--radius-md);
+  background: transparent;
+  color: var(--text-dim);
+}
+
+.app-server-control:not(label) {
+  cursor: pointer;
+}
+
+.app-server-control:not(label):hover,
+.app-server-control:not(label):focus-visible {
+  border-color: var(--border-color);
+  background: var(--surface-subtle);
+  outline: none;
+}
+
+.app-server-control--editing {
+  align-items: stretch;
+  inline-size: 100%;
+}
+
+.app-server-control__label {
+  font-size: 0.62rem;
+  line-height: 1.2;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-faint);
+}
+
+.app-server-control__value {
+  max-width: 100%;
+  overflow: hidden;
+  color: var(--text-muted);
+  font-size: 0.78rem;
+  line-height: 1.35;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.app-server-control__input {
+  inline-size: 100%;
+  min-block-size: 2.2rem;
+  padding: 0.45rem 0.6rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-md);
+  background: var(--surface-card);
+  color: var(--text-strong);
+  font-family: var(--font-input);
+  font-size: 0.82rem;
+  line-height: 1.3;
+  box-shadow: var(--shadow-sm);
+}
+
+.app-server-control__input:focus {
+  outline: none;
+  border-color: var(--accent-color);
+}
+
+.app-server-control__input--error {
+  border-color: var(--status-error-border);
+}
+
+.app-toolbar__pill {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-block-size: 2.375rem;
+  padding: 0.4rem 0.9rem;
+  border-radius: 999px;
+  background: var(--text-strong);
+  color: #fff;
+  font-size: 0.8rem;
+  font-weight: 700;
+  letter-spacing: 0.01em;
+}
+
+.app-toolbar__pill--soft {
+  background: var(--surface-subtle);
+  color: var(--text-medium);
+  border: 0.0625rem solid var(--border-color);
+}
+
+.app-shell {
+  padding: 1.5rem 1rem 1rem;
+}
+
+.app-back-link {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  margin-bottom: 1.125rem;
+  padding: 0.5rem 0.875rem;
+  border-radius: 999px;
+  background: var(--surface-card);
+  border: 0.0625rem solid var(--border-color);
+  box-shadow: var(--shadow-sm);
+  color: var(--text-dim);
+  font-size: 0.85rem;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.app-back-link__icon {
+  inline-size: 0.95rem;
+  block-size: 0.95rem;
+  flex: 0 0 auto;
+  opacity: 0.78;
+}
+
+.app-back-link:hover,
+.app-back-link:focus-visible {
+  color: var(--text-strong);
+  background: var(--surface-hover);
+}
+
+.app-back-link:hover .app-back-link__icon,
+.app-back-link:focus-visible .app-back-link__icon {
+  opacity: 1;
+}
+
+.app-page-header {
+  margin-bottom: 1.5rem;
+}
+
+.app-page-header__eyebrow {
+  margin-bottom: 0.35rem;
+  color: var(--text-faint);
+  font-size: 0.72rem;
+  font-weight: 800;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.app-page-header__title {
+  /* max-inline-size: 32rem; */
+  margin-bottom: 0.5rem;
+  font-size: clamp(2rem, 4vw, 2.85rem);
+  line-height: 0.98;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  color: var(--text-strong);
+}
+
+.app-page-header__subtitle {
+  max-inline-size: 42rem;
+  font-size: 1rem;
+  line-height: 1.45;
+  color: var(--text-dim);
+}
+
+.app-page-header--detail .app-page-header__title {
+  max-inline-size: 38rem;
+  font-size: clamp(1.85rem, 3vw, 2.45rem);
+}
+
+.app-page-header--detail .app-page-header__subtitle {
+  font-size: 1.08rem;
+}
+
+.app-search {
+  margin-bottom: 1.25rem;
+}
+
+.app-search__field {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.35rem 0.95rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-search__icon {
+  color: var(--text-faint);
+  font-size: 1rem;
+  flex: 0 0 auto;
+}
+
+.app-search__icon svg {
+  display: block;
+  inline-size: 1rem;
+  block-size: 1rem;
+}
+
+.app-search__input {
+  inline-size: 100%;
+  min-block-size: 3rem;
+  border: 0;
+  background: transparent;
+  color: var(--text-strong);
+  font-family: var(--font-input);
+  font-size: 0.96rem;
+  line-height: 1.4;
+}
+
+.app-search__input::placeholder {
+  color: var(--text-faint);
+}
+
+.app-search__input:focus {
+  outline: none;
+}
+
+.app-state-card {
+  padding: 1.5rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-xl);
+  background: var(--surface-card);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-state-card__title {
+  margin-bottom: 0.5rem;
+  font-size: 1.4rem;
+  line-height: 1.15;
+  font-weight: 700;
+  color: var(--text-strong);
+  letter-spacing: -0.03em;
+}
+
+.app-state-card__text {
+  max-inline-size: 36rem;
+  font-size: 0.97rem;
+  line-height: 1.55;
+  color: var(--text-dim);
+}
+
+.app-state-card__action {
+  margin-top: 1rem;
+  padding: 0.7rem 1rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  color: var(--text-strong);
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    border-color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.app-state-card__action:hover,
+.app-state-card__action:focus-visible {
+  background: var(--surface-hover);
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-sm);
+}
+
+.app-tabs {
+  display: inline-flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.35rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8);
+}
+
+.app-tabs__tab {
+  padding: 0.6rem 0.95rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  color: var(--text-dim);
+  font-size: 0.82rem;
+  line-height: 1;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background-color 160ms ease,
+    color 160ms ease,
+    box-shadow 160ms ease;
+}
+
+.app-tabs__tab:hover,
+.app-tabs__tab:focus-visible {
+  color: var(--text-strong);
+}
+
+.app-tabs__tab--active {
+  color: var(--surface-card);
+  background: var(--text-strong);
+  box-shadow: var(--shadow-sm);
+}
+.app-tabs__tab--active:hover {
+  color: var(--surface-card);
+}
+
+.app-empty-text {
+  font-size: 0.95rem;
+  line-height: 1.6;
+  color: var(--text-dim);
+}
+
+.app-error {
+  padding: 0.85rem 1rem;
+  border: 0.0625rem solid var(--status-error-border);
+  border-radius: var(--radius-md);
+  background: var(--status-error-bg);
+  color: var(--status-error-text);
+  font-weight: 650;
+}
+
+.app-json-panel {
+  max-block-size: 40rem;
+  overflow: auto;
+  padding: 1rem 1.1rem;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: var(--radius-lg);
+  background: var(--surface-subtle);
+  color: var(--text-medium);
+  font-family: var(--font-mono);
+  font-size: 0.81rem;
+  line-height: 1.6;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.app-copyable {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.45rem;
+  min-width: 0;
+}
+
+.app-copyable__value {
+  min-width: 0;
+  order: 2;
+  overflow-wrap: anywhere;
+}
+
+.app-copyable__button {
+  flex: 0 0 auto;
+  order: 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 1.45rem;
+  block-size: 1.45rem;
+  padding: 0;
+  border: 0.0625rem solid var(--border-color);
+  border-radius: 999px;
+  background: var(--surface-subtle);
+  color: var(--text-faint);
+  font-size: 0.78rem;
+  line-height: 1;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    border-color 140ms ease,
+    color 140ms ease,
+    background-color 140ms ease;
+}
+
+.app-copyable__button--copied {
+  border-color: var(--status-success-border);
+  background: var(--status-success-bg);
+}
+
+.app-copyable__icon {
+  inline-size: 0.7rem;
+  block-size: 0.7rem;
+  opacity: 0.62;
+}
+
+.app-copyable__button:hover,
+.app-copyable__button:focus-visible {
+  border-color: var(--border-strong);
+  color: var(--text-strong);
+  background: var(--surface-hover);
+  outline: none;
+}
+
+.app-copyable__button:hover .app-copyable__icon,
+.app-copyable__button:focus-visible .app-copyable__icon,
+.app-copyable__button--copied .app-copyable__icon {
+  opacity: 0.92;
+}
+
+.app-visually-hidden {
+  position: absolute;
+  width: 0.0625rem;
+  height: 0.0625rem;
+  padding: 0;
+  margin: -0.0625rem;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@media (max-width: 52rem) {
+  .app-page {
+    padding: 1rem;
+  }
+
+  .app-shell-frame {
+    padding: 0.75rem;
+  }
+
+  .app-toolbar {
+    flex-wrap: wrap;
+  }
+
+  .app-toolbar__breadcrumbs {
+    order: 3;
+    inline-size: 100%;
+  }
+
+  .app-toolbar__actions {
+    width: 100%;
+    margin-left: 0;
+    justify-content: flex-end;
+  }
+
+  .app-shell {
+    padding: 1.25rem 0.5rem 0.5rem;
+  }
+
+  .app-tabs {
+    inline-size: 100%;
+    justify-content: flex-start;
+    border-radius: var(--radius-lg);
+  }
+
+  .app-tab-panel {
+    padding: 1rem;
+  }
+
+  .app-server-control__form,
+  .app-server-control {
+    max-width: min(100%, 28rem);
+  }
+}
+