cabletidy 0.2.0 → 0.3.0-rc.3

package/web/styles.css

@@ -1,1132 +0,0 @@
-:root {
-  --ink: #242a30;
-  --muted: #636c75;
-  --paper: #fafbfc;
-  --panel: #ffffff;
-  --line: #e1e5e8;
-  --line-strong: #bfc7ce;
-  --rail: #f3f5f6;
-  --rail-soft: #e5eeea;
-  --accent: #277456;
-  --accent-soft: #edf5f0;
-  --warning: #906017;
-  --danger: #b43a3a;
-  --shadow: 0 4px 18px rgba(36, 42, 48, 0.1);
-  --radius: 4px;
-  font-family: "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-  font-size: 14px;
-  line-height: 1.5;
-  font-variant-numeric: tabular-nums;
-  color: var(--ink);
-  background: var(--paper);
-  font-synthesis: none;
-}
-
-* {
-  box-sizing: border-box;
-}
-
-body {
-  min-width: 320px;
-  min-height: 100dvh;
-  margin: 0;
-  background: var(--paper);
-}
-
-button,
-input,
-select,
-textarea {
-  font: inherit;
-}
-
-button {
-  cursor: pointer;
-}
-
-[hidden] {
-  display: none !important;
-}
-
-button:focus-visible,
-summary:focus-visible {
-  outline: 2px solid var(--accent);
-  outline-offset: 3px;
-}
-
-button:disabled {
-  cursor: default;
-  opacity: 0.5;
-}
-
-.muted {
-  color: var(--muted);
-  font-size: 13px;
-}
-
-.app-shell {
-  display: grid;
-  min-height: 100dvh;
-  grid-template-columns: 184px minmax(0, 1fr);
-}
-
-.rail {
-  position: sticky;
-  top: 0;
-  display: flex;
-  height: 100dvh;
-  align-self: start;
-  flex-direction: column;
-  padding: 22px 12px 16px;
-  border-right: 1px solid var(--line);
-  color: var(--ink);
-  background: var(--rail);
-}
-
-.brand {
-  display: flex;
-  align-items: center;
-  padding: 0 10px 12px;
-}
-
-.brand strong {
-  color: var(--ink);
-  font-size: 17px;
-  letter-spacing: -0.02em;
-}
-
-.rail-status,
-.rail-footer {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.rail-status {
-  margin: 0 10px 24px;
-}
-
-.status-light {
-  width: 7px;
-  height: 7px;
-  flex: 0 0 auto;
-  border-radius: 50%;
-  background: var(--accent);
-}
-
-.is-offline .status-light {
-  background: var(--danger);
-}
-
-.nav {
-  display: grid;
-  gap: 4px;
-}
-
-.nav-item {
-  min-height: 36px;
-  padding: 0 11px;
-  border: 1px solid transparent;
-  border-radius: var(--radius);
-  color: var(--muted);
-  background: transparent;
-  text-align: left;
-  transition: color 160ms ease, background 160ms ease, border-color 160ms ease;
-}
-
-.nav-item:hover,
-.nav-item.is-active {
-  color: var(--accent);
-  background: var(--rail-soft);
-}
-
-.nav-item.is-active {
-  font-weight: 600;
-}
-
-.rail-footer {
-  margin-top: auto;
-  padding: 14px 10px 0;
-  border-top: 1px solid var(--line);
-}
-
-.main {
-  min-width: 0;
-}
-
-.topbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-  max-width: 1420px;
-  margin: 0 auto;
-  padding: 22px 28px;
-}
-
-.topbar > div:first-child {
-  min-width: 0;
-}
-
-h1,
-h2,
-h3,
-p {
-  margin-top: 0;
-}
-
-h1 {
-  margin-bottom: 0;
-  font-size: 22px;
-  font-weight: 600;
-  line-height: 1.4;
-  overflow-wrap: anywhere;
-}
-
-h2 {
-  margin-bottom: 8px;
-  font-size: 15px;
-  font-weight: 600;
-}
-
-h3 {
-  margin-bottom: 5px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.topbar-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 8px;
-  align-items: center;
-  flex-shrink: 0;
-}
-
-.button {
-  min-height: 34px;
-  padding: 5px 12px;
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius);
-  color: var(--ink);
-  background: var(--panel);
-  font-size: 13px;
-  font-weight: 500;
-  transition: border-color 120ms ease, background 120ms ease;
-}
-
-.button:hover:not(:disabled) {
-  border-color: var(--muted);
-  background: var(--rail);
-}
-
-.button:active:not(:disabled) {
-  background: var(--line);
-}
-
-.button-primary {
-  color: #fff;
-  border-color: var(--accent);
-  background: var(--accent);
-}
-
-.button-primary:hover:not(:disabled) {
-  border-color: #205d46;
-  background: #205d46;
-}
-
-.button-quiet {
-  color: var(--muted);
-  background: transparent;
-}
-
-.button-danger {
-  color: var(--danger);
-  border-color: rgba(188, 76, 76, 0.35);
-  background: transparent;
-}
-
-.page-content {
-  display: grid;
-  gap: 16px;
-  max-width: 1420px;
-  margin: 0 auto;
-  padding: 0 28px 36px;
-}
-
-.suite-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 20px;
-}
-
-.suite-list {
-  overflow: auto;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--panel);
-}
-
-.suite-table {
-  width: 100%;
-  border-collapse: collapse;
-  text-align: left;
-  font-size: 13px;
-}
-
-.suite-table th,
-.suite-table td {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--line);
-  font-weight: 400;
-}
-
-.suite-table thead th {
-  padding-block: 9px;
-  color: var(--muted);
-  background: var(--paper);
-  white-space: nowrap;
-  font-size: 12px;
-}
-
-.suite-table tbody tr:last-child > * {
-  border-bottom: 0;
-}
-
-.suite-table tbody tr:hover {
-  background: var(--paper);
-}
-
-.suite-table tbody th {
-  width: 32%;
-}
-
-.suite-name {
-  padding: 0;
-  border: 0;
-  color: var(--ink);
-  background: transparent;
-  font-weight: 600;
-  text-align: left;
-  overflow-wrap: anywhere;
-}
-
-.suite-name:hover {
-  color: var(--accent);
-  text-decoration: underline;
-}
-
-.suite-upstream {
-  display: block;
-  margin-top: 3px;
-  color: var(--muted);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.config-form {
-  width: 100%;
-  max-width: 920px;
-}
-
-.config-section {
-  padding: 20px;
-}
-
-.config-section + .config-section {
-  border-top: 1px solid var(--line);
-}
-
-.config-section > h2 {
-  margin-bottom: 16px;
-}
-
-.config-form-footer {
-  display: flex;
-  justify-content: flex-end;
-  flex-wrap: wrap;
-  gap: 8px;
-  padding: 14px 20px;
-  border-top: 1px solid var(--line);
-  background: var(--paper);
-}
-
-.create-model-list {
-  display: grid;
-  gap: 16px;
-}
-
-.create-model-row {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 12px;
-}
-
-.create-model-row > .mini-button {
-  min-height: 36px;
-  margin-top: 24px;
-}
-
-.empty-state-panel {
-  min-height: 140px;
-  display: grid;
-  align-items: center;
-}
-
-.text-button {
-  justify-self: start;
-  padding: 0;
-  border: 0;
-  color: var(--muted);
-  background: transparent;
-  font-size: 13px;
-}
-
-.text-button:hover {
-  color: var(--accent);
-}
-
-.suite-status,
-.suite-connection-actions {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 12px;
-}
-
-.suite-status {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.suite-connection-actions {
-  gap: 8px;
-}
-
-.suite-connection-actions .button {
-  white-space: nowrap;
-}
-
-.suite-connection-facts {
-  display: grid;
-  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
-  gap: 20px;
-  margin: 0;
-}
-
-.suite-connection-facts > div {
-  min-width: 0;
-}
-
-.suite-connection-facts dt {
-  margin-bottom: 5px;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.suite-connection-facts dd {
-  margin: 0;
-  font-size: 13px;
-}
-
-.suite-section {
-  padding: 20px;
-}
-
-.suite-section + .suite-section {
-  border-top: 1px solid var(--line);
-}
-
-.suite-section-heading {
-  margin-bottom: 16px;
-}
-
-.suite-section-heading h2 {
-  margin: 0;
-}
-
-.suite-section-heading p {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.suite-models-heading,
-.suite-section-footer {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.suite-section-footer {
-  margin-top: 16px;
-}
-
-.suite-section-footer .form-actions {
-  margin: 0;
-  flex-shrink: 0;
-}
-
-.suite-models-heading .button {
-  flex-shrink: 0;
-}
-
-.suite-section .catalog-status {
-  margin-bottom: 16px;
-}
-
-.suite-model-list {
-  display: grid;
-  gap: 16px;
-}
-
-.catalog-status {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin: 0;
-  color: var(--muted);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.config-section .catalog-status {
-  margin-bottom: 16px;
-}
-
-.suite-model-card {
-  min-width: 0;
-}
-
-.suite-model-card + .suite-model-card {
-  padding-top: 16px;
-  border-top: 1px solid var(--line);
-}
-
-.suite-model-mapping {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr) auto;
-  gap: 12px;
-  align-items: start;
-}
-
-.suite-model-mapping > .mini-button {
-  min-height: 36px;
-  margin-top: 24px;
-  white-space: nowrap;
-}
-
-.suite-mapping-arrow {
-  display: grid;
-  align-items: center;
-  min-height: 36px;
-  margin-top: 24px;
-  color: var(--muted);
-  font-size: 18px;
-  text-align: center;
-}
-
-.suite-model-settings {
-  margin-top: 10px;
-}
-
-.suite-model-settings summary {
-  width: fit-content;
-  max-width: 100%;
-  padding: 4px 0;
-  color: var(--muted);
-  font-size: 12px;
-  cursor: pointer;
-}
-
-.suite-model-settings summary > .field-hint {
-  margin-left: 12px;
-}
-
-.suite-model-settings summary:hover,
-.suite-model-settings[open] summary {
-  color: var(--ink);
-}
-
-.suite-model-policy .checkbox-field {
-  padding-top: 18px;
-}
-
-.mono {
-  font-family: "SFMono-Regular", "Cascadia Code", monospace;
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.field-hint,
-.table-meta {
-  color: var(--muted);
-  font-size: 12px;
-  overflow-wrap: anywhere;
-}
-
-.panel {
-  min-width: 0;
-  border: 1px solid var(--line);
-  border-radius: var(--radius);
-  background: var(--panel);
-}
-
-.panel-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--line);
-}
-
-.panel-header h2 {
-  margin: 0;
-}
-
-.panel-header button {
-  flex-shrink: 0;
-}
-
-.panel-body {
-  padding: 16px;
-}
-
-.list {
-  display: grid;
-  gap: 0;
-}
-
-.list-row {
-  width: 100%;
-  border: 0;
-  border-bottom: 1px solid var(--line);
-  text-align: left;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) auto;
-  gap: 16px;
-  align-items: center;
-  padding: 15px 0;
-  border-radius: 0;
-  background: transparent;
-  min-width: 0;
-}
-
-.list-row > * {
-  min-width: 0;
-  overflow-wrap: anywhere;
-}
-
-.list-row:first-child {
-  padding-top: 0;
-}
-
-.list-row:last-child {
-  padding-bottom: 0;
-  border-bottom: 0;
-}
-
-button.list-row:hover,
-.list-row.is-selected {
-  background: rgba(37, 184, 120, 0.055);
-}
-
-.checkbox-field {
-  align-content: center;
-  min-height: 40px;
-  padding: 0 4px;
-}
-
-.list-row p {
-  margin: 4px 0 0;
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.status-badge {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  color: var(--accent);
-  font-size: 12px;
-  white-space: nowrap;
-}
-
-.status-badge::before {
-  width: 6px;
-  height: 6px;
-  content: "";
-  border-radius: 50%;
-  background: currentColor;
-}
-
-.status-badge.warning {
-  color: var(--warning);
-}
-
-.status-badge.danger {
-  color: var(--danger);
-}
-
-.status-badge.neutral {
-  color: var(--muted);
-}
-
-.empty {
-  padding: 34px 8px;
-  color: var(--muted);
-  text-align: center;
-}
-
-.empty strong {
-  display: block;
-  margin-bottom: 7px;
-  color: var(--ink);
-}
-
-.form-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.68fr);
-  gap: 22px;
-  align-items: start;
-}
-
-.form-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 14px;
-}
-
-.suite-model-policy {
-  grid-template-columns: repeat(4, minmax(0, 1fr));
-  align-items: start;
-  margin-top: 12px;
-  padding: 16px;
-  border-left: 2px solid var(--line-strong);
-  background: var(--paper);
-}
-
-.field {
-  display: grid;
-  min-width: 0;
-  gap: 6px;
-}
-
-.field.full {
-  grid-column: 1 / -1;
-}
-
-.field label,
-.field > span:first-child {
-  color: var(--muted);
-  font-size: 12px;
-}
-
-.field input,
-.field select,
-.field textarea {
-  width: 100%;
-  min-width: 0;
-  min-height: 36px;
-  padding: 0 11px;
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius);
-  outline: 0;
-  color: var(--ink);
-  background: #fff;
-  font-size: 13px;
-}
-
-.field textarea {
-  min-height: 78px;
-  padding-top: 10px;
-  resize: vertical;
-}
-
-.field input:focus,
-.field select:focus,
-.field textarea:focus {
-  border-color: var(--accent);
-  box-shadow: 0 0 0 3px rgba(37, 184, 120, 0.14);
-}
-
-.field input:disabled {
-  color: var(--muted);
-  background: var(--rail);
-}
-
-.field.checkbox-field > span {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 40px;
-  font-size: 13px;
-}
-
-.field.checkbox-field input {
-  width: 18px;
-  height: 18px;
-  min-height: 18px;
-  margin: 0;
-  padding: 0;
-  flex-shrink: 0;
-  accent-color: var(--accent);
-}
-
-.field-hint {
-  line-height: 1.45;
-}
-
-.form-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 18px;
-}
-
-.form-feedback {
-  margin-bottom: 16px;
-  overflow-wrap: anywhere;
-}
-
-.config-form > .form-feedback {
-  margin: 16px 20px 0;
-}
-
-.form-feedback ul {
-  margin: 8px 0 0;
-  padding-left: 20px;
-}
-
-.subsection {
-  margin-top: 22px;
-  padding-top: 18px;
-  border-top: 1px solid var(--line);
-}
-
-.subsection:first-child {
-  margin-top: 0;
-  padding-top: 0;
-  border-top: 0;
-}
-
-.subsection-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.subsection-header h2,
-.subsection-header h3 {
-  margin-bottom: 0;
-}
-
-.mini-button {
-  min-height: 32px;
-  padding: 0 9px;
-  border: 1px solid var(--line-strong);
-  border-radius: var(--radius);
-  color: var(--muted);
-  background: transparent;
-  font-size: 12px;
-}
-
-.mini-button:hover {
-  color: var(--ink);
-  border-color: var(--accent);
-}
-
-.code-preview {
-  min-width: 0;
-  max-height: 460px;
-  overflow: auto;
-  margin: 0;
-  padding: 16px;
-  border: 1px solid var(--line);
-  color: var(--ink);
-  background: var(--rail);
-  font-family: "SFMono-Regular", "Cascadia Code", monospace;
-  font-size: 12px;
-  line-height: 1.65;
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.notice {
-  padding: 12px 14px;
-  border-left: 3px solid var(--accent);
-  color: #3d5d4e;
-  background: var(--accent-soft);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.notice.warning {
-  border-color: var(--warning);
-  color: #785326;
-  background: #fff0dc;
-}
-
-.notice > .button {
-  margin-left: 12px;
-  vertical-align: middle;
-}
-
-.toast-region {
-  position: fixed;
-  z-index: 10;
-  bottom: 20px;
-  right: 22px;
-  display: grid;
-  gap: 8px;
-  width: min(360px, calc(100vw - 44px));
-  pointer-events: none;
-}
-
-.toast {
-  padding: 13px 15px;
-  border: 1px solid var(--line-strong);
-  border-left: 3px solid var(--accent);
-  color: var(--ink);
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  font-size: 12px;
-  animation: toast-in 200ms ease both;
-}
-
-.toast.error {
-  border-left-color: var(--danger);
-}
-
-@keyframes toast-in {
-  from {
-    opacity: 0;
-    transform: translateX(8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(0);
-  }
-}
-
-@media (max-width: 1020px) {
-  .suite-model-policy {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .app-shell {
-    grid-template-columns: 160px minmax(0, 1fr);
-  }
-
-  .topbar,
-  .page-content {
-    padding-right: 20px;
-    padding-left: 20px;
-  }
-  .form-layout {
-    grid-template-columns: 1fr;
-  }
-}
-
-@media (max-width: 720px) {
-  .suite-connection .panel-header {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .suite-connection-facts {
-    grid-template-columns: 1fr;
-    gap: 12px;
-  }
-
-  .suite-section {
-    padding: 16px;
-  }
-
-  .suite-section-footer {
-    align-items: flex-start;
-    flex-direction: column;
-  }
-
-  .suite-model-mapping {
-    grid-template-columns: minmax(0, 1fr) auto;
-    gap: 12px 8px;
-  }
-
-  .suite-model-mapping > .field {
-    grid-column: 1 / -1;
-  }
-
-  .suite-model-mapping > .mini-button {
-    grid-column: 2;
-    margin-top: 0;
-  }
-
-  .suite-mapping-arrow {
-    display: none;
-  }
-
-  .suite-model-policy .checkbox-field {
-    padding-top: 0;
-  }
-
-  .app-shell {
-    display: block;
-  }
-
-  .rail {
-    position: static;
-    height: auto;
-    padding: 16px;
-    border-right: 0;
-    border-bottom: 1px solid var(--line);
-  }
-
-  .brand {
-    padding: 0 0 12px;
-  }
-
-  .rail-status {
-    position: absolute;
-    top: 23px;
-    right: 16px;
-    margin: 0;
-    border: 0;
-  }
-
-  .nav {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .nav-item {
-    min-height: 40px;
-    text-align: center;
-  }
-
-  .rail-footer {
-    display: none;
-  }
-
-  .topbar {
-    align-items: flex-start;
-    flex-direction: column;
-    gap: 12px;
-    padding: 18px 16px;
-  }
-
-  .topbar-actions {
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-
-  .page-content {
-    padding-inline: 16px;
-  }
-
-  .suite-table,
-  .suite-table tbody,
-  .suite-table tr,
-  .suite-table th,
-  .suite-table td {
-    display: block;
-  }
-
-  .suite-table thead {
-    display: none;
-  }
-
-  .suite-table tbody tr {
-    padding: 12px 16px;
-  }
-
-  .suite-table tbody tr + tr {
-    border-top: 1px solid var(--line);
-  }
-
-  .suite-table tbody th,
-  .suite-table tbody td {
-    width: 100%;
-    padding: 4px 0;
-    border: 0;
-  }
-
-  .suite-table tbody td {
-    display: grid;
-    grid-template-columns: 64px minmax(0, 1fr);
-    gap: 8px;
-  }
-
-  .suite-table td::before {
-    content: attr(data-label);
-    color: var(--muted);
-    font: 12px/1.5 "Aptos", "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
-  }
-
-  .config-section {
-    padding: 16px;
-  }
-
-  .create-model-row {
-    grid-template-columns: minmax(0, 1fr) auto;
-  }
-
-  .create-model-row > .field {
-    grid-column: 1 / -1;
-  }
-
-  .create-model-row > button {
-    grid-column: 2;
-    margin-top: 0;
-  }
-
-  .create-model-row + .create-model-row {
-    border-top: 1px solid var(--line);
-    padding-top: 16px;
-  }
-
-  .form-grid {
-    grid-template-columns: 1fr;
-  }
-
-  .field.full {
-    grid-column: auto;
-  }
-
-  .list-row {
-    grid-template-columns: minmax(0, 1fr);
-    gap: 8px;
-  }
-
-  .button,
-  .mini-button {
-    min-height: 40px;
-  }
-
-
-  .notice > .button {
-    margin-top: 10px;
-    margin-left: 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  *,
-  *::before,
-  *::after {
-    animation-duration: 0.001ms !important;
-    animation-iteration-count: 1 !important;
-    scroll-behavior: auto !important;
-    transition-duration: 0.001ms !important;
-  }
-}