@erd-studio/renderer 0.3.0 → 0.4.1

package/dist/styles.css

@@ -296,6 +296,7 @@
   font-size: 12px;
   box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
   overflow: hidden;
+  transition: opacity 0.15s ease, filter 0.15s ease;
 }
 .model-node--logical {
   border-color: var(--stage-logical);
@@ -303,6 +304,21 @@
 .model-node--physical {
   border-color: var(--stage-physical);
 }
+.model-node {
+  --model-node-ring: var(--stage-logical);
+  --model-node-ring-glow: var(--stage-logical-ring);
+}
+.model-node--stage-physical {
+  --model-node-ring: var(--stage-physical);
+  --model-node-ring-glow: var(--stage-physical-ring);
+}
+.editor-canvas--neutral .model-node--logical {
+  border-color: var(--canvas-neutral-border);
+}
+.editor-canvas--neutral .model-node {
+  --model-node-ring: var(--canvas-selection);
+  --model-node-ring-glow: var(--canvas-selection-glow);
+}
 .model-node--ghost {
   border-color: var(--stage-ghost);
   border-style: dashed;
@@ -314,19 +330,17 @@
 .model-node--disc-extra {
   box-shadow: 0 0 0 2px var(--discrepancy-extra), 0 0 12px 2px rgba(245, 158, 11, 0.35);
 }
-.model-node--selected {
-  box-shadow: 0 0 0 2px var(--stage-logical), 0 0 10px 1px rgba(96, 165, 250, 0.4);
-}
-.model-node--physical.model-node--selected {
-  box-shadow: 0 0 0 2px var(--stage-physical), 0 0 10px 1px rgba(34, 197, 94, 0.4);
+.model-node--selected,
+.react-flow__node.selected .model-node {
+  box-shadow: 0 0 0 2px var(--model-node-ring), 0 0 10px 1px var(--model-node-ring-glow);
 }
-.model-node--disc-extra.model-node--selected {
+.model-node--disc-extra.model-node--selected,
+.react-flow__node.selected .model-node--disc-extra {
   box-shadow: 0 0 0 2px var(--discrepancy-extra), 0 0 12px 2px rgba(245, 158, 11, 0.35);
 }
 .model-node--dimmed {
   opacity: 0.25;
   filter: grayscale(0.4);
-  transition: opacity 0.15s ease, filter 0.15s ease;
 }
 .model-node--dimmed:hover {
   opacity: 0.4;
@@ -348,6 +362,13 @@
   flex: 1;
   white-space: nowrap;
 }
+.model-node__schema {
+  font-weight: 400;
+  color: var(--dim-fg);
+}
+.model-node--layered .model-node__header {
+  box-shadow: inset 0 3px 0 var(--model-node-layer-color);
+}
 .model-node__model-id {
   margin-left: 8px;
   font-family: var(--vscode-editor-font-family, monospace);
@@ -379,10 +400,6 @@
   background: var(--ok-bg);
   color: var(--ok-fg);
 }
-.model-node__badge--layer {
-  opacity: 0.7;
-  font-style: italic;
-}
 .model-node__discrepancy-badge {
   flex-shrink: 0;
   display: inline-flex;
@@ -762,18 +779,55 @@
   color: var(--discrepancy-extra);
   font-weight: 500;
 }
-.react-flow__node.selected .model-node {
-  box-shadow: 0 0 0 2px var(--vscode-focusBorder, #007fd4), 0 2px 8px rgba(0, 127, 212, 0.3);
-}
 .react-flow__node.dragging .model-node {
   opacity: 0.85;
   box-shadow: 0 0 0 2px var(--vscode-focusBorder, #007fd4), 0 4px 12px rgba(0, 0, 0, 0.25);
 }
+.erd-flow--hover-focus .model-node {
+  opacity: 0.22;
+  filter: none;
+}
+.erd-flow--hover-focus .model-node--selected {
+  opacity: 0.4;
+}
+.erd-flow--hover-focus .model-node.model-node--focus-origin,
+.erd-flow--hover-focus .model-node.model-node--focus-related {
+  opacity: 1;
+  filter: none;
+}
+.erd-flow--hover-focus .model-node--ghost.model-node--focus-related {
+  opacity: 0.65;
+}
+.model-node--logical.model-node--focus-origin:not(.model-node--selected):not(.model-node--disc-extra) {
+  box-shadow: 0 0 0 3px var(--stage-logical-ring);
+}
+.model-node--physical.model-node--focus-origin:not(.model-node--selected):not(.model-node--disc-extra) {
+  box-shadow: 0 0 0 3px var(--stage-physical-ring);
+}
+@media (prefers-reduced-motion: reduce) {
+  .model-node {
+    transition: none;
+  }
+}
+.model-node__off-diagram {
+  flex-shrink: 0;
+  padding: 0 5px;
+  border: 1px solid var(--panel-border);
+  border-radius: 8px;
+  font-size: 9px;
+  font-weight: 600;
+  line-height: 14px;
+  color: var(--dim-fg);
+}
 
 /* src/components/Graph/FkEdge.css */
 .fk-edge {
   stroke-width: 2;
   fill: none;
+  transition: opacity 0.15s ease, filter 0.15s ease;
+}
+.fk-edge--flowing {
+  stroke-width: 2.5;
 }
 .fk-edge--logical {
   stroke: var(--stage-logical);
@@ -799,7 +853,6 @@
 .fk-edge--dimmed {
   opacity: 0.25;
   filter: grayscale(0.4);
-  transition: opacity 0.15s ease, filter 0.15s ease;
 }
 .fk-edge--dimmed:hover {
   opacity: 0.4;
@@ -873,8 +926,33 @@
 .fk-edge__label--dimmed {
   opacity: 0.25;
   filter: grayscale(0.4);
+}
+.fk-edge__adornment {
   transition: opacity 0.15s ease, filter 0.15s ease;
 }
+.fk-edge__flow-chevron,
+.fk-edge__flow-dot {
+  fill: currentColor;
+  stroke: var(--edge-flow-halo);
+  stroke-width: 1.5;
+  paint-order: stroke fill;
+  stroke-linejoin: round;
+}
+.fk-edge__flow--logical {
+  color: var(--stage-logical);
+}
+.fk-edge__flow--physical {
+  color: var(--stage-physical);
+}
+.fk-edge__flow--ghost {
+  color: var(--stage-ghost);
+}
+.fk-edge__flow--discrepancy-extra {
+  color: var(--discrepancy-extra);
+}
+.fk-edge__flow--discrepancy-cardinality-mismatch {
+  color: var(--discrepancy-mismatch);
+}
 .fk-edge:hover {
   stroke-width: 3;
 }
@@ -957,6 +1035,31 @@
   background: var(--button-bg);
   color: var(--button-fg);
 }
+.erd-flow--hover-focus .fk-edge {
+  opacity: 0.15;
+  filter: none;
+}
+.erd-flow--hover-focus .fk-edge.fk-edge--lit {
+  opacity: 1;
+}
+.erd-flow--hover-focus .fk-edge__adornment {
+  opacity: 0.2;
+}
+.erd-flow--hover-focus .fk-edge__adornment.fk-edge__adornment--lit {
+  opacity: 1;
+  filter: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .fk-edge,
+  .fk-edge__adornment {
+    transition: none;
+  }
+}
+@media print {
+  .fk-edge__flow {
+    display: none;
+  }
+}
 
 /* src/components/Graph/AnnotationNode.css */
 .annotation-node {
@@ -1896,199 +1999,528 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
   font-size: 10px;
 }
 
-/* src/components/DetailPanel/ColumnEditor.css */
-.column-editor {
+/* src/components/DetailPanel/FieldsSection.css */
+.fields-section {
   display: flex;
   flex-direction: column;
   gap: 8px;
 }
-.column-editor__header {
+.fields-section__head {
   display: flex;
-  align-items: center;
+  align-items: baseline;
   justify-content: space-between;
   gap: 8px;
 }
-.column-editor__header-actions {
-  display: flex;
-  align-items: center;
-  gap: 6px;
+.fields-section__title {
+  margin: 0;
 }
-.column-editor__expand-controls {
-  display: flex;
-  align-items: center;
-  gap: 2px;
+.fields-section__head .fields-section__title {
+  margin: 0;
 }
-.column-editor__expand-btn {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
+.fields-section__customise {
+  flex-shrink: 0;
   padding: 0;
   border: none;
-  border-radius: 3px;
   background: transparent;
-  color: var(--vscode-descriptionForeground, #888);
-  font-size: 12px;
+  color: var(--dim-fg);
+  font-size: 10px;
   cursor: pointer;
-  transition: color 0.1s ease, background 0.1s ease;
-}
-.column-editor__expand-btn:hover {
-  color: var(--editor-fg);
-  background: rgba(255, 255, 255, 0.08);
+  text-decoration: underline;
+  text-decoration-style: dotted;
 }
-.column-editor__expand-btn::after {
-  content: attr(data-tooltip);
-  position: absolute;
-  top: 100%;
-  left: 50%;
-  transform: translateX(-50%);
-  margin-top: 4px;
-  padding: 3px 6px;
-  background: var(--vscode-editorWidget-background, #252526);
-  border: 1px solid var(--panel-border);
-  border-radius: 3px;
-  font-size: 10px;
-  white-space: nowrap;
+.fields-section__customise:hover,
+.fields-section__customise:focus-visible {
   color: var(--editor-fg);
-  opacity: 0;
-  visibility: hidden;
-  transition: opacity 0.1s ease, visibility 0.1s ease;
-  pointer-events: none;
-  z-index: 100;
-}
-.column-editor__expand-btn:hover::after {
-  opacity: 1;
-  visibility: visible;
 }
-.column-editor__title {
-  margin: 0;
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--vscode-descriptionForeground, #888);
+.fields-section__customise:focus-visible {
+  outline: 1px solid var(--focus-border);
+  outline-offset: 2px;
 }
-.column-editor__add-btn {
-  padding: 3px 8px;
-  border: 1px dashed var(--panel-border);
-  border-radius: 3px;
-  background: transparent;
-  color: var(--button-bg);
+.fields-section__label {
   font-size: 10px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.1s ease, border-color 0.1s ease;
-}
-.column-editor__add-btn:hover:not(:disabled) {
-  background: rgba(59, 130, 246, 0.08);
-  border-color: var(--button-bg);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--dim-fg);
 }
-.column-editor__add-btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.fields-section__list {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
-.column-editor__list {
+.fields-section__row {
   display: flex;
   flex-direction: column;
-  gap: 1px;
+  gap: 2px;
 }
-.column-editor__empty {
-  padding: 8px 6px;
-  color: var(--vscode-descriptionForeground, #888);
-  font-style: italic;
-  text-align: center;
-  font-size: 11px;
+.fields-section__row .fields-section__name {
+  margin: 0;
 }
-.column-editor__separator {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 0;
+.fields-section__list[hidden] {
+  display: none;
 }
-.column-editor__separator::before,
-.column-editor__separator::after {
-  content: "";
-  flex: 1;
-  height: 1px;
-  background: var(--panel-border);
+.fields-section--read-only:not(.fields-section--compact) .fields-section__list {
+  gap: 0;
 }
-.column-editor__separator-text {
-  font-size: 9px;
-  font-weight: 600;
-  letter-spacing: 1px;
-  color: var(--model-design);
-  text-transform: uppercase;
+.fields-section--read-only:not(.fields-section--compact) .fields-section__row {
+  display: grid;
+  grid-template-columns: minmax(64px, 34%) minmax(0, 1fr);
+  column-gap: 10px;
+  align-items: baseline;
+  padding: 5px 0;
+  border-top: 1px solid var(--panel-border);
 }
-.column-editor__separator--approved .column-editor__separator-text {
-  color: var(--model-approved);
+.fields-section--read-only:not(.fields-section--compact) .fields-section__row:first-child {
+  border-top: none;
+  padding-top: 0;
 }
-.column-editor__add-btn--bottom {
-  width: 100%;
-  margin-top: 6px;
-  justify-content: center;
+.fields-section--read-only:not(.fields-section--compact) .fields-section__row:last-child {
+  padding-bottom: 0;
 }
-.column-editor__accept-all-btn {
-  padding: 3px 8px;
-  border: 1px solid var(--vscode-editorWarning-foreground, #cca700);
-  border-radius: 3px;
-  background: rgba(204, 167, 0, 0.1);
-  color: var(--vscode-editorWarning-foreground, #cca700);
-  font-size: 10px;
+.fields-section--read-only:not(.fields-section--compact) .fields-section__name {
+  line-height: 1.6;
+  font-size: 11px;
   font-weight: 500;
-  cursor: pointer;
-  transition: background 0.1s ease;
+  text-transform: none;
+  letter-spacing: normal;
 }
-.column-editor__accept-all-btn:hover {
-  background: rgba(204, 167, 0, 0.2);
+.fields-section--collapsible {
+  gap: 0;
 }
-
-/* src/components/DetailPanel/DetailPanel.css */
-.detail-panel {
-  width: 340px;
-  max-height: calc(100vh - 100px);
-  overflow-y: auto;
-  background: var(--panel-bg);
-  border: 1px solid var(--panel-border);
-  border-radius: 6px;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
-  font-size: 12px;
+.fields-section--collapsible .fields-section__title {
+  margin: 0;
 }
-.detail-panel__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
+.fields-section--collapsible.fields-section--open {
   gap: 8px;
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--panel-border);
-  background: var(--panel-bg);
-  position: sticky;
-  top: 0;
-  z-index: 1;
 }
-.detail-panel__title {
+.fields-section__toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
   margin: 0;
-  font-size: 14px;
-  font-weight: 600;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.fields-section__toggle:hover {
   color: var(--editor-fg);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex: 1;
-  min-width: 0;
 }
-.detail-panel__title--editable {
-  cursor: pointer;
+.fields-section__toggle:focus-visible {
+  outline: 1px solid var(--focus-border);
+  outline-offset: 2px;
+  border-radius: 2px;
 }
-.detail-panel__title--editable:hover {
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-underline-offset: 3px;
+.fields-section__chevron {
+  width: 10px;
+  font-size: 11px;
+  text-align: center;
 }
-.detail-panel__title-input {
-  flex: 1;
-  min-width: 0;
+.fields-section__count {
+  font-variant-numeric: tabular-nums;
+}
+.fields-section__value {
+  margin: 0;
+  min-width: 0;
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--editor-fg);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.fields-section__value--structured {
+  font-family: var(--vscode-editor-font-family);
+  color: var(--dim-fg);
+}
+.fields-section__field {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+}
+.fields-section__field-head {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  min-height: 20px;
+}
+.fields-section__name {
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--dim-fg);
+  overflow-wrap: anywhere;
+}
+.fields-section__badge {
+  padding: 0 5px;
+  border-radius: 8px;
+  font-size: 9px;
+  line-height: 15px;
+  white-space: nowrap;
+  border: 1px solid var(--panel-border);
+  color: var(--dim-fg);
+}
+.fields-section__badge--retired {
+  border-color: var(--warning-fg);
+  background: var(--warning-bg);
+  color: var(--warning-fg);
+}
+.fields-section__badge--dbt {
+  border-color: var(--ai-fg);
+  background: var(--ai-bg);
+  color: var(--ai-fg);
+}
+.fields-section__actions {
+  display: flex;
+  gap: 2px;
+  margin-left: auto;
+  visibility: hidden;
+}
+.fields-section__field:hover .fields-section__actions,
+.fields-section__field:focus-within .fields-section__actions {
+  visibility: visible;
+}
+.fields-section__icon-btn {
+  border: none;
+  background: transparent;
+  color: var(--dim-fg);
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  padding: 1px 3px;
+}
+.fields-section__icon-btn:hover,
+.fields-section__icon-btn:focus-visible {
+  color: var(--editor-fg);
+}
+.fields-section__text {
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--editor-fg);
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+.fields-section__empty-value {
+  color: var(--dim-fg);
+}
+.fields-section__placeholder {
+  padding: 3px 6px;
+  border: 1px dashed var(--panel-border);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--dim-fg);
+  font-size: 11px;
+  line-height: 1.4;
+  text-align: left;
+  cursor: text;
+}
+.fields-section__placeholder:hover,
+.fields-section__placeholder:focus-visible {
+  border-color: var(--ai-fg);
+  background: var(--ai-bg);
+  color: var(--editor-fg);
+}
+.fields-section__edit {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.fields-section__input,
+.fields-section__select {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 3px 6px;
+  border: 1px solid var(--input-border, var(--panel-border));
+  border-radius: 3px;
+  background: var(--input-bg);
+  color: var(--input-fg);
+  font-size: 12px;
+}
+.fields-section__select {
+  cursor: pointer;
+}
+.fields-section__input:focus,
+.fields-section__select:focus {
+  outline: 1px solid var(--focus-border);
+  outline-offset: -1px;
+}
+.fields-section__input--key {
+  font-family: var(--vscode-editor-font-family);
+}
+.fields-section__option--outside {
+  color: var(--warning-fg);
+}
+.fields-section__hint {
+  font-size: 10px;
+  line-height: 1.4;
+  color: var(--dim-fg);
+}
+.fields-section__group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 6px;
+  border-top: 1px dashed var(--panel-border);
+}
+.fields-section__group-title {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: var(--dim-fg);
+}
+.fields-section__new {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.fields-section__new-actions {
+  display: flex;
+  gap: 6px;
+}
+.fields-section__error {
+  font-size: 11px;
+  color: var(--error-fg);
+}
+.fields-section__warning {
+  font-size: 11px;
+  color: var(--warning-fg);
+}
+.fields-section__add-btn {
+  align-self: flex-start;
+}
+.fields-section--compact {
+  margin-top: 6px;
+  gap: 4px;
+}
+.fields-section--compact .fields-section__list {
+  gap: 4px;
+}
+.fields-section--compact .fields-section__add-btn {
+  padding: 3px 8px;
+  font-size: 10px;
+}
+
+/* src/components/DetailPanel/ColumnEditor.css */
+.column-editor {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.column-editor__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+.column-editor__header-actions {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.column-editor__expand-controls {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.column-editor__expand-btn {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 3px;
+  background: transparent;
+  color: var(--vscode-descriptionForeground, #888);
+  font-size: 12px;
+  cursor: pointer;
+  transition: color 0.1s ease, background 0.1s ease;
+}
+.column-editor__expand-btn:hover {
+  color: var(--editor-fg);
+  background: rgba(255, 255, 255, 0.08);
+}
+.column-editor__expand-btn::after {
+  content: attr(data-tooltip);
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  padding: 3px 6px;
+  background: var(--vscode-editorWidget-background, #252526);
+  border: 1px solid var(--panel-border);
+  border-radius: 3px;
+  font-size: 10px;
+  white-space: nowrap;
+  color: var(--editor-fg);
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.1s ease, visibility 0.1s ease;
+  pointer-events: none;
+  z-index: 100;
+}
+.column-editor__expand-btn:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+.column-editor__title {
+  margin: 0;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--vscode-descriptionForeground, #888);
+}
+.column-editor__add-btn {
+  padding: 3px 8px;
+  border: 1px dashed var(--panel-border);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--button-bg);
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.1s ease, border-color 0.1s ease;
+}
+.column-editor__add-btn:hover:not(:disabled) {
+  background: rgba(59, 130, 246, 0.08);
+  border-color: var(--button-bg);
+}
+.column-editor__add-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+.column-editor__list {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+}
+.column-editor__empty {
+  padding: 8px 6px;
+  color: var(--vscode-descriptionForeground, #888);
+  font-style: italic;
+  text-align: center;
+  font-size: 11px;
+}
+.column-editor__separator {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 0;
+}
+.column-editor__separator::before,
+.column-editor__separator::after {
+  content: "";
+  flex: 1;
+  height: 1px;
+  background: var(--panel-border);
+}
+.column-editor__separator-text {
+  font-size: 9px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  color: var(--model-design);
+  text-transform: uppercase;
+}
+.column-editor__separator--approved .column-editor__separator-text {
+  color: var(--model-approved);
+}
+.column-editor__add-btn--bottom {
+  width: 100%;
+  margin-top: 6px;
+  justify-content: center;
+}
+.column-editor__accept-all-btn {
+  padding: 3px 8px;
+  border: 1px solid var(--vscode-editorWarning-foreground, #cca700);
+  border-radius: 3px;
+  background: rgba(204, 167, 0, 0.1);
+  color: var(--vscode-editorWarning-foreground, #cca700);
+  font-size: 10px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.1s ease;
+}
+.column-editor__accept-all-btn:hover {
+  background: rgba(204, 167, 0, 0.2);
+}
+.column-editor .column-row-editor__name {
+  flex: 1 1 auto;
+  min-width: min(10ch, 40%);
+}
+.column-editor .column-row-editor__type {
+  flex: 0 1 auto;
+  min-width: 0;
+  max-width: 55%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* src/components/DetailPanel/DetailPanel.css */
+.detail-panel {
+  width: 340px;
+  max-height: calc(100vh - 100px);
+  overflow-y: auto;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-radius: 6px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+  font-size: 12px;
+}
+.detail-panel--viewer {
+  max-height: min(calc(100vh - 100px), calc(100% - 192px));
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+}
+.detail-panel--viewer .detail-panel__value {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.detail-panel__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 10px 12px;
+  border-bottom: 1px solid var(--panel-border);
+  background: var(--panel-bg);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+.detail-panel__title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--editor-fg);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  min-width: 0;
+}
+.detail-panel__title--editable {
+  cursor: pointer;
+}
+.detail-panel__title--editable:hover {
+  text-decoration: underline;
+  text-decoration-style: dotted;
+  text-underline-offset: 3px;
+}
+.detail-panel__title-input {
+  flex: 1;
+  min-width: 0;
   margin: 0;
   padding: 2px 6px;
   font-size: 14px;
@@ -2436,6 +2868,41 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+.detail-panel__relationship--wrap {
+  display: grid;
+  grid-template-columns: 16px minmax(0, 1fr);
+  column-gap: 6px;
+  row-gap: 2px;
+  align-items: start;
+}
+.detail-panel__relationship--wrap .detail-panel__rel-cardinality {
+  grid-column: 2;
+  justify-self: start;
+}
+.detail-panel__relationship--wrap .detail-panel__rel-columns {
+  flex-wrap: wrap;
+  row-gap: 1px;
+  overflow: visible;
+}
+.detail-panel__relationship--wrap .detail-panel__rel-local,
+.detail-panel__relationship--wrap .detail-panel__rel-target {
+  min-width: 0;
+  white-space: normal;
+  overflow: visible;
+  text-overflow: clip;
+  overflow-wrap: anywhere;
+}
+.detail-panel__relationship--wrap .detail-panel__rel-direction,
+.detail-panel__relationship--wrap .detail-panel__rel-cardinality {
+  margin-top: 1px;
+}
+.detail-panel__rel-role {
+  flex-basis: 100%;
+  font-size: 10px;
+  font-style: italic;
+  color: var(--dim-fg);
+  overflow-wrap: anywhere;
+}
 .detail-panel__rel-cardinality {
   flex-shrink: 0;
   padding: 1px 4px;
@@ -2583,49 +3050,7 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
 }
 .detail-panel__confirm-actions .detail-panel__button--danger:hover {
   background: rgba(239, 68, 68, 0.2);
-  border-color: #ef4444;
-}
-.detail-panel__rationale-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.detail-panel__rationale-toggle {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  padding: 0;
-  border: none;
-  background: none;
-  cursor: pointer;
-  color: var(--vscode-descriptionForeground, #888);
-  font-size: 11px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  font-family: inherit;
-}
-.detail-panel__rationale-toggle:hover {
-  color: var(--editor-fg);
-}
-.detail-panel__rationale-chevron {
-  display: inline-block;
-  font-size: 10px;
-  transition: transform 0.15s ease;
-}
-.detail-panel__rationale-chevron--open {
-  transform: rotate(90deg);
-}
-.detail-panel__rationale-count {
-  font-weight: 400;
-  font-size: 10px;
-  color: var(--vscode-descriptionForeground, #888);
-  opacity: 0.7;
-}
-.detail-panel__rationale-body {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
+  border-color: #ef4444;
 }
 .detail-panel__rationale-header {
   display: flex;
@@ -2654,9 +3079,6 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
     background 0.1s ease,
     color 0.1s ease;
 }
-.detail-panel__rationale-section:hover .detail-panel__rationale-edit-btn {
-  opacity: 1;
-}
 .detail-panel__rationale-edit-btn:hover {
   background: var(--button-bg);
   color: var(--button-fg);
@@ -2666,13 +3088,6 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
   flex-direction: column;
   gap: 2px;
 }
-.detail-panel__rationale-label {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: #8b5cf6;
-}
 .detail-panel__rationale-text {
   margin: 0;
   font-size: 11px;
@@ -2722,169 +3137,109 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
     border-color 0.1s ease;
 }
 .detail-panel__rationale-add-btn:hover {
-  background: rgba(139, 92, 246, 0.08);
-  color: #8b5cf6;
-  border-color: #8b5cf6;
-}
-.detail-panel__role-section {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+  background: var(--ai-bg);
+  color: var(--ai-fg);
+  border-color: var(--ai-fg);
 }
-.detail-panel__role-select {
-  padding: 4px 6px;
-  border: 1px solid var(--input-border, var(--panel-border));
-  background: var(--input-bg);
-  color: var(--input-fg);
-  font-size: 12px;
+.detail-panel__rel-backwards {
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border: 1px solid var(--warning-fg);
   border-radius: 3px;
+  background: var(--warning-bg);
+  color: var(--warning-fg);
+  font-size: 11px;
+  line-height: 1.4;
+  white-space: nowrap;
   cursor: pointer;
-  width: 100%;
-}
-.detail-panel__role-select:focus {
-  outline: 1px solid var(--focus-border);
-  outline-offset: -1px;
 }
-.detail-panel__grain-section {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-}
-.detail-panel__grain-section:hover .detail-panel__rationale-edit-btn {
-  opacity: 1;
-}
-.meta-editor {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
+.detail-panel__rel-backwards:hover {
+  border-color: var(--focus-border);
+  background: var(--button-bg);
+  color: var(--button-fg);
 }
-.meta-editor__title {
-  margin: 0;
+.detail-panel__file-path {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.meta-editor__label {
+.detail-panel__file-open,
+.detail-panel__off-add,
+.detail-panel__off-add-all {
+  flex-shrink: 0;
+  padding: 1px 6px;
+  border: 1px solid var(--panel-border);
+  border-radius: 3px;
+  background: transparent;
+  color: var(--editor-fg);
   font-size: 10px;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--vscode-descriptionForeground, #888);
+  cursor: pointer;
+  white-space: nowrap;
 }
-.meta-editor__list {
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
+.detail-panel__file-open:hover,
+.detail-panel__off-add:hover,
+.detail-panel__off-add-all:hover {
+  background: var(--button-hover-bg);
+  border-color: var(--focus-border);
+  color: var(--button-fg);
 }
-.meta-editor__row {
-  display: grid;
-  grid-template-columns: minmax(70px, 35%) 1fr auto;
-  align-items: baseline;
+.detail-panel__off-diagram-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 8px;
-  padding: 2px 4px;
-  border-radius: 3px;
+  margin-bottom: 8px;
 }
-.meta-editor__row:hover {
-  background: var(--input-bg);
+.detail-panel__off-diagram-title {
+  margin: 0;
 }
-.meta-editor__key {
-  font-family: var(--vscode-editor-font-family);
-  font-size: 11px;
-  color: var(--vscode-descriptionForeground, #888);
+.detail-panel__off-text {
+  flex: 1;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
-.meta-editor__value {
-  margin: 0;
-  min-width: 0;
-  font-size: 12px;
-  color: var(--editor-fg);
-}
-.meta-editor__text {
-  overflow-wrap: anywhere;
-}
-.meta-editor__text--structured {
-  font-family: var(--vscode-editor-font-family);
-  font-size: 11px;
+.detail-panel__off-detail {
   color: var(--dim-fg);
 }
-.meta-editor__actions {
-  display: flex;
-  gap: 2px;
-  visibility: hidden;
-}
-.meta-editor__row:hover .meta-editor__actions,
-.meta-editor__row:focus-within .meta-editor__actions {
-  visibility: visible;
+.detail-panel__modelling {
+  padding-top: 6px;
+  padding-bottom: 6px;
 }
-.meta-editor__icon-btn {
+.detail-panel__modelling-toggle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 2px 0;
   border: none;
   background: transparent;
-  color: var(--vscode-descriptionForeground, #888);
+  color: var(--dim-fg);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.5px;
+  text-transform: uppercase;
+  text-align: left;
   cursor: pointer;
-  font-size: 12px;
-  line-height: 1;
-  padding: 1px 3px;
 }
-.meta-editor__icon-btn:hover,
-.meta-editor__icon-btn:focus-visible {
+.detail-panel__modelling-toggle:hover {
   color: var(--editor-fg);
 }
-.meta-editor__input {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 3px 6px;
-  border: 1px solid var(--panel-border);
-  border-radius: 3px;
-  background: var(--input-bg);
-  color: var(--input-fg);
-  font-size: 12px;
-}
-.meta-editor__input:focus {
-  outline: none;
-  border-color: var(--focus-border);
-}
-.meta-editor__input--key {
-  font-family: var(--vscode-editor-font-family);
-}
-.meta-editor__new {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.meta-editor__new-actions {
-  display: flex;
-  gap: 6px;
-}
-.meta-editor__error {
-  font-size: 11px;
-  color: var(--error-fg);
-}
-.meta-editor__add-btn {
-  align-self: flex-start;
-}
-.meta-editor--compact {
-  margin-top: 6px;
-  gap: 4px;
+.detail-panel__modelling-toggle:focus-visible {
+  outline: 1px solid var(--focus-border);
+  outline-offset: 2px;
 }
-.meta-editor--compact .meta-editor__add-btn {
-  padding: 3px 8px;
+.detail-panel__modelling-chevron {
+  width: 10px;
   font-size: 10px;
 }
-.detail-panel__rel-backwards {
-  flex-shrink: 0;
-  padding: 1px 6px;
-  border: 1px solid var(--warning-fg);
-  border-radius: 3px;
-  background: var(--warning-bg);
-  color: var(--warning-fg);
-  font-size: 11px;
-  line-height: 1.4;
-  white-space: nowrap;
-  cursor: pointer;
-}
-.detail-panel__rel-backwards:hover {
-  border-color: var(--focus-border);
-  background: var(--button-bg);
-  color: var(--button-fg);
+.detail-panel__modelling-optional {
+  font-weight: 400;
+  text-transform: none;
+  letter-spacing: 0;
 }
 
 /* src/components/Legend/Legend.css */
@@ -2911,6 +3266,10 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
   background: var(--button-bg);
   color: var(--button-fg);
 }
+.legend--stage-physical {
+  --stage-logical: var(--stage-physical);
+  --stage-logical-ring: var(--stage-physical-ring);
+}
 .legend {
   max-width: 260px;
   background: var(--panel-bg);
@@ -2959,6 +3318,8 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
   max-height: min(60vh, 520px);
   overflow-y: auto;
   overflow-x: hidden;
+  scrollbar-width: thin;
+  scrollbar-color: var(--dim-fg) transparent;
 }
 .legend__section {
   padding: 8px 12px;
@@ -3053,6 +3414,15 @@ body[data-vscode-theme-kind=vscode-high-contrast] .annotation-node__link-badge {
 .legend__edge {
   stroke-width: 2;
 }
+.legend__flow-line {
+  width: 48px;
+  height: 12px;
+  flex-shrink: 0;
+  overflow: visible;
+}
+.legend__items--flow {
+  gap: 6px;
+}
 .legend__edge--logical {
   stroke: var(--stage-logical);
 }
@@ -3146,14 +3516,21 @@ body[data-vscode-theme-kind=vscode-high-contrast] .legend__annotation-card {
 .legend__items--symbols {
   margin-top: 10px;
 }
-.legend__badge--schema,
+.legend__badge--layer,
 .legend__badge--source {
   flex-shrink: 0;
   min-width: 26px;
 }
-.legend__badge--schema {
-  background: rgba(96, 165, 250, 0.2);
-  color: var(--stage-logical);
+.legend__badge--layer {
+  background: var(--layer-silver-bg);
+  color: var(--layer-silver);
+}
+.legend__schema-sample {
+  flex-shrink: 0;
+  min-width: 26px;
+  font-size: 11px;
+  font-weight: 400;
+  color: var(--dim-fg);
 }
 .legend__badge--source {
   background: var(--dim-fg);
@@ -3212,6 +3589,80 @@ body[data-vscode-theme-kind=vscode-high-contrast] .legend__annotation-card {
   background: rgba(156, 163, 175, 0.12);
 }
 
+/* src/components/StatusBar/StatusBar.css */
+.status-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 10px;
+  margin-left: 40px;
+  background: var(--panel-bg);
+  border: 1px solid var(--panel-border);
+  border-radius: 4px;
+  font-size: 11px;
+  color: var(--editor-fg);
+  opacity: 0.85;
+}
+.status-bar__item {
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.status-bar__counts {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  white-space: nowrap;
+}
+.status-bar__divider {
+  color: var(--panel-border);
+}
+.status-bar__layers {
+  display: inline-flex;
+  align-items: center;
+  gap: 10px;
+}
+.status-bar__layer {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+.status-bar__badge {
+  padding: 0 4px;
+  border-radius: 3px;
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.5px;
+  line-height: 1.5;
+  background: var(--button-bg);
+  color: var(--button-fg);
+}
+.status-bar--viewer {
+  margin-left: 51px;
+  max-width: calc(100% - 51px - 231px);
+  flex-direction: column;
+  align-items: flex-start;
+  flex-wrap: nowrap;
+  row-gap: 2px;
+}
+.status-bar--viewer .status-bar__divider--layers {
+  display: none;
+}
+.status-bar--viewer.status-bar--beside-legend {
+  margin-left: 283px;
+  max-width: calc(100% - 283px - 231px);
+}
+.status-bar--viewer .status-bar__layers {
+  flex-wrap: wrap;
+  row-gap: 2px;
+}
+@container (max-width: 719px) {
+  .status-bar--viewer.status-bar--beside-legend {
+    display: none;
+  }
+}
+
 /* src/styles/theme.css */
 *,
 *::before,
@@ -3258,6 +3709,12 @@ body {
   --stage-physical-border: rgba(34, 197, 94, 0.2);
   --stage-ghost: #9ca3af;
   --stage-ghost-bg: rgba(156, 163, 175, 0.08);
+  --canvas-neutral-line: var(--vscode-descriptionForeground, #8a94a3);
+  --canvas-neutral-border: color-mix(in srgb, var(--canvas-neutral-line) 55%, transparent);
+  --canvas-neutral-ring: color-mix(in srgb, var(--canvas-neutral-line) 30%, transparent);
+  --canvas-selection: var(--vscode-focusBorder, #007fd4);
+  --canvas-selection-glow: color-mix(in srgb, var(--canvas-selection) 40%, transparent);
+  --edge-flow-halo: var(--editor-bg);
   --discrepancy-extra: #f59e0b;
   --discrepancy-mismatch: #ef4444;
   --model-built: var(--stage-physical);
@@ -3279,6 +3736,17 @@ body {
   --layer-silver-bg: rgba(192, 192, 192, 0.2);
   --layer-gold: #d4a800;
   --layer-gold-bg: rgba(255, 215, 0, 0.2);
+  --star-gold: #e3b341;
+  --star-gold-light: #f5d76e;
+  --star-gold-dark: #b8860b;
+  --star-gold-fg: #241a00;
+  --star-gold-glow: rgba(227, 179, 65, 0.5);
+  --star-gold-shine: rgba(255, 255, 255, 0.6);
+}
+.editor-canvas--neutral .react-flow__viewport,
+.editor-canvas--neutral .legend {
+  --stage-logical: var(--canvas-neutral-line);
+  --stage-logical-ring: var(--canvas-neutral-ring);
 }
 .react-flow {
   background-color: var(--editor-bg);
@@ -3287,4 +3755,89 @@ body {
   display: none;
 }
 
+/* src/canvas/EdgeRouting.css */
+.edge-overlay {
+  position: absolute;
+  left: 0;
+  top: 0;
+  overflow: visible;
+  pointer-events: none;
+  z-index: 1000;
+  color: var(--stage-logical);
+}
+.edge-overlay__tunnel {
+  color: var(--stage-logical);
+  transition: opacity 0.15s ease;
+}
+.edge-overlay__tunnel--physical {
+  color: var(--stage-physical);
+}
+.edge-overlay__tunnel--ghost {
+  color: var(--stage-ghost);
+}
+.edge-overlay__tunnel--discrepancy-extra {
+  color: var(--discrepancy-extra);
+}
+.edge-overlay__tunnel--discrepancy-missing {
+  color: var(--stage-ghost);
+}
+.edge-overlay__tunnel--discrepancy-cardinality-mismatch {
+  color: var(--discrepancy-mismatch);
+}
+.edge-overlay__tunnel-line {
+  fill: none;
+  stroke: color-mix(in srgb, currentColor 70%, var(--editor-fg));
+  stroke-width: 1.5;
+  stroke-dasharray: 4 4;
+  stroke-linecap: butt;
+  opacity: 0.55;
+  transition: opacity 0.15s ease, stroke-width 0.15s ease;
+}
+.edge-overlay__portal {
+  stroke: currentColor;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  opacity: 0.9;
+  fill: var(--editor-bg);
+  transition: opacity 0.15s ease;
+}
+.edge-overlay__tunnel--lit .edge-overlay__tunnel-line {
+  opacity: 0.95;
+  stroke-width: 2;
+}
+.edge-overlay__tunnel--lit .edge-overlay__portal {
+  opacity: 1;
+}
+.edge-overlay__tunnel--dimmed {
+  opacity: 0.2;
+}
+.erd-flow--hover-focus .edge-overlay__tunnel {
+  opacity: 0.1;
+}
+.erd-flow--hover-focus .edge-overlay__tunnel.edge-overlay__tunnel--lit {
+  opacity: 1;
+}
+@media (prefers-reduced-motion: reduce) {
+  .edge-overlay__tunnel,
+  .edge-overlay__tunnel-line,
+  .edge-overlay__portal {
+    transition: none;
+  }
+}
+.fk-edge__halo {
+  fill: none;
+  stroke: var(--editor-bg);
+  stroke-width: 7;
+  stroke-linecap: butt;
+}
+.editor-canvas--neutral .fk-edge--logical.fk-edge--lit,
+.editor-canvas--neutral .fk-edge--logical.fk-edge--flowing,
+.editor-canvas--neutral .fk-edge__flow--logical,
+.editor-canvas--neutral .fk-edge__adornment--lit {
+  --stage-logical: var(--diagram-layer-color, var(--canvas-neutral-line));
+}
+.editor-canvas--neutral .edge-overlay__tunnel--logical.edge-overlay__tunnel--lit {
+  color: var(--diagram-layer-color, var(--canvas-neutral-line));
+}
+
 /* src/styles.css */