v0.16.3

web/css/styles.css

@@ -636,7 +636,7 @@ h3 {
   min-width: 0;
 }
 
-.louver-control > span {
+.louver-control>span {
   color: var(--muted);
   font-size: 11px;
   line-height: 1.15;
@@ -1549,20 +1549,20 @@ legend {
   gap: 10px;
 }
 
-.local-discovery-head > input[type="checkbox"] {
+.local-discovery-head>input[type="checkbox"] {
   width: 18px;
   height: 18px;
   margin: 0;
 }
 
-.local-discovery-head > label {
+.local-discovery-head>label {
   display: grid;
   gap: 2px;
   min-width: 0;
   cursor: pointer;
 }
 
-.local-discovery-head > .badge {
+.local-discovery-head>.badge {
   justify-self: end;
 }
 
@@ -6608,6 +6608,59 @@ textarea[aria-invalid="true"] {
   margin: 2px 0 0;
 }
 
+.flow-inspector-description {
+  margin: -7px 0 15px;
+  color: var(--muted);
+  font-size: .82rem;
+  line-height: 1.5;
+}
+
+.flow-block-help {
+  margin: 16px 0 18px;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--surface-2);
+  color: var(--text);
+  font-size: .81rem;
+  line-height: 1.5;
+}
+
+.flow-block-help summary {
+  cursor: pointer;
+  font-weight: 700;
+}
+
+.flow-block-help[open] summary {
+  margin-bottom: 10px;
+}
+
+.flow-block-help p {
+  margin: 8px 0 10px;
+}
+
+.flow-block-help strong {
+  display: block;
+  margin: 12px 0 5px;
+}
+
+.flow-block-help ul {
+  margin: 0 0 10px;
+  padding-left: 19px;
+}
+
+.flow-block-help li {
+  margin-bottom: 6px;
+}
+
+.flow-block-library-description {
+  display: block;
+  color: var(--muted);
+  font-weight: 400;
+  line-height: 1.45;
+  margin-top: 4px;
+}
+
 .flow-inspector label {
   display: grid;
   gap: 6px;
@@ -10632,6 +10685,7 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
     min-height: 140px;
   }
 }
+
 /* Keep Flow interpretation compact on every viewport. Details are opt-in. */
 .flow-natural-preview {
   display: block;
@@ -10708,7 +10762,7 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   margin-top: 14px;
 }
 
-.flow-shortcut-grid > div {
+.flow-shortcut-grid>div {
   display: grid;
   grid-template-columns: minmax(0, auto) 1fr;
   align-items: center;
@@ -10725,7 +10779,7 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   gap: 4px;
 }
 
-.flow-shortcut-grid > div > span:last-child {
+.flow-shortcut-grid>div>span:last-child {
   grid-column: 2;
 }
 
@@ -10765,14 +10819,17 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   transition: opacity .14s ease, transform .14s ease;
   pointer-events: none;
 }
+
 .flow-editor-notice.is-visible {
   opacity: 1;
   transform: translateY(0);
 }
+
 .flow-editor-notice.is-error {
   color: var(--danger);
   background: var(--danger-soft);
 }
+
 .flow-context-menu {
   position: fixed;
   z-index: 1200;
@@ -10784,7 +10841,11 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   background: var(--surface);
   box-shadow: 0 16px 38px rgba(0, 0, 0, .28);
 }
-.flow-context-menu[hidden] { display: none; }
+
+.flow-context-menu[hidden] {
+  display: none;
+}
+
 .flow-context-menu button {
   width: 100%;
   min-height: 34px;
@@ -10797,22 +10858,28 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   font: inherit;
   font-size: .82rem;
 }
+
 .flow-context-menu button:hover:not(:disabled),
 .flow-context-menu button:focus-visible:not(:disabled) {
   background: var(--accent-soft);
   outline: none;
 }
+
 .flow-context-menu button:disabled {
   opacity: .45;
   cursor: default;
 }
+
 .flow-context-separator {
   height: 1px;
   margin: 5px 4px;
   background: var(--line);
 }
+
 @media (max-width: 760px) {
-  .flow-editor-notice { max-width: 42vw; }
+  .flow-editor-notice {
+    max-width: 42vw;
+  }
 }
 
 /* Flow quick actions: description editing and simple simulator */
@@ -10920,12 +10987,12 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   background: var(--surface-2);
 }
 
-.flow-simple-intro > div {
+.flow-simple-intro>div {
   display: grid;
   gap: 3px;
 }
 
-.flow-simple-intro > div > span {
+.flow-simple-intro>div>span {
   color: var(--muted);
   font-size: .88rem;
 }
@@ -10971,7 +11038,7 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   background: var(--surface-2);
 }
 
-.flow-simple-scenario-field > span {
+.flow-simple-scenario-field>span {
   display: grid;
   gap: 2px;
 }
@@ -11012,19 +11079,19 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   gap: 12px;
 }
 
-.flow-simple-result-head > div {
+.flow-simple-result-head>div {
   display: grid;
   gap: 3px;
 }
 
-.flow-simple-result-head > div > small {
+.flow-simple-result-head>div>small {
   color: var(--muted);
   font-weight: 700;
   text-transform: uppercase;
   letter-spacing: .05em;
 }
 
-.flow-simple-result > p {
+.flow-simple-result>p {
   margin: 0;
   color: var(--muted);
 }
@@ -11050,7 +11117,7 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
   border-top: 1px solid var(--line);
 }
 
-.flow-simple-condition > span:nth-child(2) {
+.flow-simple-condition>span:nth-child(2) {
   display: grid;
   gap: 2px;
   min-width: 0;
@@ -11079,7 +11146,7 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
     align-items: flex-start;
   }
 
-  .flow-card .card-footer > small {
+  .flow-card .card-footer>small {
     max-width: 100%;
     white-space: normal;
   }
@@ -11121,4 +11188,4 @@ select.select-native-proxy[aria-invalid="true"]+.custom-select .custom-select-tr
     grid-column: 2;
     text-align: left;
   }
-}
+}