tablewalk 0.0.1

package/dist/client/composer.css

@@ -0,0 +1,495 @@
+/* The view composer.
+
+   Every colour here is a token from style.css — nothing names a colour
+   directly, so the composer follows the light/dark switch without knowing
+   there is one. Shapes are borrowed too: `.panel`, `.tab`, `.ac`, `.dd` and
+   the results grid all come from the main sheet and are only positioned
+   here, so a view looks like the rest of the tool rather than like a second
+   application bolted to the side of it. */
+
+.composer {
+  position: fixed;
+  top: 0; /* set from the top bar's height on open — see positionRoot() */
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 40;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg);
+  color: var(--text);
+}
+
+/* The page behind is inert but still visible above the composer; stopping it
+   from scrolling keeps the two layers from arguing about the wheel. */
+body.composing { overflow: hidden; }
+
+/* ---------- the composer's own bar ---------- */
+
+.composer-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex: none;
+  padding: 8px 14px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+}
+
+.composer-eyebrow {
+  font-size: 10px;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--text-faint);
+  flex: none;
+}
+
+.composer-name {
+  flex: 1;
+  min-width: 0;
+  max-width: 26rem;
+  padding: 6px 9px;
+  font: 13px var(--sans);
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+}
+.composer-name:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
+
+.composer-on {
+  color: var(--text-dim);
+  font: 12px var(--mono);
+  flex: none;
+}
+
+.composer-bar-actions { display: flex; gap: 6px; margin-left: auto; flex: none; }
+
+.composer-close { font-size: 15px; line-height: 1; padding: 5px 10px; }
+
+/* ---------- two columns ---------- */
+
+.composer-body { display: flex; flex: 1; min-height: 0; }
+
+/* The sidebar itself does not scroll; its sections do.
+
+   With one scroller for the whole column, the relationship list — which is
+   long, and the tallest thing here — pushes everything under it off the
+   bottom of the window. Saved views were reachable only by scrolling past
+   thirty relationships, which is to say they were not reachable. Giving the
+   long section its own scroller pins the short ones in place. */
+.composer-side {
+  width: 336px;
+  flex: none;
+  border-right: 1px solid var(--border);
+  background: var(--surface);
+  overflow: hidden;
+  padding: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-height: 0;
+}
+
+.composer-panel { display: flex; flex-direction: column; min-height: 0; }
+.composer-panel > h3 { flex: none; }
+.composer-panel > .composer-rel,
+.composer-panel > .composer-saved { overflow-y: auto; min-height: 0; }
+
+/* Saved views take what they need up to a third of the column; the
+   relationship list takes the rest. */
+.composer-side > .composer-panel:nth-child(2) > .composer-saved { max-height: 32vh; }
+.composer-related { flex: 1; }
+
+.composer-main {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.composer-pad { padding: 8px 10px; }
+
+/* ---------- related tables ----------
+
+   The phrase leads and the mechanism follows it in mono, one size down: you
+   read "each invoice has one customer" and only look at `via customer_id` if
+   you need to know how. Reversing that order is what makes join builders feel
+   like paperwork. */
+
+.composer-rel { list-style: none; margin: 0; padding: 4px 0 6px; }
+
+.composer-rel-head {
+  padding: 8px 10px 3px;
+  font: 600 10px var(--sans);
+  text-transform: uppercase;
+  letter-spacing: 0.07em;
+  color: var(--text-faint);
+}
+
+.composer-rel-item {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  align-items: baseline;
+  gap: 2px 8px;
+  padding: 5px 10px;
+  border-left: 2px solid transparent;
+}
+.composer-rel-item:hover { background: var(--surface-2); }
+.composer-rel-item.open { border-left-color: var(--accent); background: var(--accent-soft); }
+
+.composer-phrase { font: 12.5px/1.35 var(--sans); color: var(--text); }
+.composer-rel-item.many .composer-phrase { color: var(--text-dim); }
+
+.composer-via {
+  grid-column: 1;
+  font: 11px var(--mono);
+  color: var(--text-faint);
+}
+
+.composer-add {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  align-self: center;
+  background: none;
+  border: 1px solid var(--border-strong);
+  border-radius: 999px;
+  color: var(--text-dim);
+  padding: 2px 10px;
+  font: 11.5px var(--sans);
+  cursor: pointer;
+}
+.composer-add:hover { border-color: var(--accent); color: var(--accent); }
+.composer-add.on { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
+
+.composer-cap {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  align-self: center;
+  font: 11px var(--mono);
+  color: var(--text-faint);
+}
+
+/* A table reachable several ways is stated once, with its routes beneath.
+   Three sentences differing only in a trailing column name is a list you have
+   to read rather than scan. */
+.composer-rel-group {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 8px 10px 2px;
+}
+.composer-rel-group .composer-phrase { font-size: 12.5px; }
+.composer-ways {
+  margin-left: auto;
+  flex: none;
+  font: 10.5px var(--mono);
+  color: var(--text-faint);
+}
+.composer-rel-item.in-group { padding-top: 2px; padding-bottom: 2px; }
+.composer-rel-item.in-group .composer-via { grid-row: 1; align-self: center; }
+
+/* The many side: two real options and a warning, rather than a disabled
+   button and no explanation.
+
+   Its controls sit on their own row rather than beside the sentence. In a
+   `1fr auto` row the `auto` column sizes to three stacked controls, which on
+   a 336px sidebar left the sentence a column about one word wide — "each /
+   customer / has many / invoices", read downwards. A sentence and a control
+   stack cannot share a row this narrow, so they do not. */
+.composer-rel-item.many { grid-template-columns: 1fr; }
+.composer-many-actions {
+  grid-row: auto;
+  grid-column: 1;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-top: 4px;
+}
+.composer-menu { display: inline-block; min-width: 9rem; }
+.composer-menu .dd-button { padding: 2px 8px; font-size: 11.5px; }
+/* Positioning is handled in the viewport by dropdown.js, so nothing here
+   needs to fight the sidebar's clip. */
+.composer-menu .dd-list { min-width: 13rem; }
+
+/* ---------- saved views ---------- */
+
+.composer-saved { list-style: none; margin: 0; padding: 4px 0 6px; }
+.composer-saved-item { display: flex; align-items: stretch; }
+.composer-saved-item:hover { background: var(--surface-2); }
+.composer-saved-item.active { background: var(--accent-soft); }
+
+.composer-pin {
+  flex: none;
+  align-self: center;
+  background: none;
+  border: none;
+  border-radius: 0;
+  color: var(--text-faint);
+  cursor: pointer;
+  padding: 6px 2px 6px 8px;
+  font-size: 12px;
+  line-height: 1;
+}
+.composer-pin:hover { color: var(--text-dim); }
+.composer-pin.on { color: var(--accent); }
+
+.composer-saved-open {
+  flex: 1;
+  min-width: 0;
+  padding-left: 4px;
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  background: none;
+  border: none;
+  border-radius: 0;
+  text-align: left;
+  padding: 6px 10px;
+  cursor: pointer;
+  color: var(--text);
+}
+.composer-saved-open[disabled] { color: var(--text-faint); cursor: default; }
+.composer-saved-name {
+  font: 12.5px var(--sans);
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+}
+.composer-saved-item.active .composer-saved-name { color: var(--accent); font-weight: 600; }
+.composer-saved-base { font: 11px var(--mono); color: var(--text-dim); }
+
+.composer-saved-tag {
+  align-self: center;
+  flex: none;
+  margin-right: 8px;
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--text-dim);
+  background: var(--surface-2);
+  border-radius: 3px;
+  padding: 1px 5px;
+}
+
+/* ---------- fields ---------- */
+
+.composer-fields {
+  margin: 10px 14px 0;
+  max-height: 38%;
+  overflow-y: auto;
+  flex: none;
+}
+.composer-fields > h3 { position: sticky; top: 0; z-index: 1; display: flex; gap: 8px; align-items: baseline; }
+.composer-count { margin-left: auto; font-weight: 400; text-transform: none; letter-spacing: 0; font-size: 11px; }
+
+.composer-empty {
+  margin: 0;
+  padding: 10px 12px 12px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  border-bottom: 1px solid var(--border);
+}
+.composer-empty strong { color: var(--text); font-weight: 600; }
+
+.composer-group { border-bottom: 1px solid var(--border); }
+.composer-group:last-child { border-bottom: none; }
+/* A moment's emphasis on the group that just arrived, then nothing. A badge
+   that stays becomes furniture and stops meaning "new". */
+.composer-group.fresh { background: var(--accent-soft); }
+.composer-group-new {
+  margin-left: auto;
+  font-size: 9.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--accent);
+}
+@media (prefers-reduced-motion: no-preference) {
+  .composer-group { transition: background 400ms ease; }
+}
+
+.composer-group-head {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  padding: 6px 12px 2px;
+}
+.composer-group-name { font: 600 12px var(--mono); color: var(--text); }
+.composer-group-path { font: 11px var(--mono); color: var(--text-faint); }
+
+/* A wrapping grid rather than a list: a table with twenty-seven columns is
+   the case that matters, and one per line makes it a scroll instead of a
+   glance. */
+.composer-checks {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px 4px;
+  padding: 2px 10px 8px;
+}
+
+.composer-check {
+  display: inline-flex;
+  align-items: baseline;
+  gap: 5px;
+  padding: 3px 8px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  cursor: pointer;
+  font: 12px var(--mono);
+  color: var(--text-dim);
+  max-width: 100%;
+}
+.composer-check:hover { border-color: var(--border-strong); color: var(--text); }
+.composer-check.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
+.composer-check input { margin: 0; accent-color: var(--accent); }
+.composer-field-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.composer-field-type { font-size: 10.5px; color: var(--text-faint); }
+.composer-mark { font-size: 10px; }
+.composer-mark.pk { color: var(--key); }
+.composer-mark.fk { color: var(--accent); }
+
+/* ---------- filter ---------- */
+
+.composer-filter { flex: none; padding: 10px 14px 0; }
+
+.composer-filter-row { display: flex; align-items: center; gap: 8px; }
+
+.composer-filter-label {
+  font: 11px var(--mono);
+  color: var(--text-faint);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  flex: none;
+}
+
+.composer-query-wrap { position: relative; flex: 1; min-width: 0; display: block; }
+
+.composer-query {
+  width: 100%;
+  padding: 7px 10px;
+  font: 13px/1.4 var(--mono);
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+}
+.composer-query:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
+
+.composer-limit {
+  width: 5rem;
+  padding: 7px 8px;
+  font: 13px var(--mono);
+  color: var(--text);
+  background: var(--bg);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius);
+}
+
+/* The suggestion list is `.ac` from style.css; only its anchor changes. */
+.composer-ac { top: calc(100% + 4px); left: 0; }
+
+.composer-hint { margin: 6px 0 0; font-size: 11.5px; color: var(--text-faint); }
+
+/* What the result *is*, in words, immediately above the grid that shows it.
+   The panels above describe ingredients; this is the only line that describes
+   the answer, which is the thing people cannot otherwise assemble in their
+   heads. */
+.composer-summary {
+  flex: none;
+  margin: 10px 0 0;
+  padding: 8px 14px;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--text-dim);
+  background: var(--surface-2);
+  border-top: 1px solid var(--border);
+  border-bottom: 1px solid var(--border);
+}
+.composer-summary strong { color: var(--text); font-weight: 600; }
+
+/* ---------- the view, written down ---------- */
+
+.composer-textpanel {
+  flex: none;
+  margin: 10px 14px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.composer-text {
+  width: 100%;
+  resize: vertical;
+  padding: 10px 12px;
+  font: 12.5px/1.6 var(--mono);
+  color: var(--text);
+  background: var(--surface);
+  border: 1px solid var(--border-strong);
+  border-radius: 8px;
+  tab-size: 2;
+}
+.composer-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent; }
+
+.composer-text-actions { display: flex; align-items: center; gap: 10px; }
+.composer-text-actions .composer-hint { margin: 0; flex: 1; min-width: 0; }
+.composer-text-apply { padding: 4px 12px; font-size: 12px; }
+.composer-text-apply[disabled] { opacity: 0.45; cursor: default; }
+
+/* ---------- SQL ---------- */
+
+.composer-explain {
+  flex: none;
+  margin: 10px 14px 0;
+  max-height: 12rem;
+  overflow: auto;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  background: var(--surface-2);
+}
+
+/* ---------- preview ---------- */
+
+.composer-preview { flex: 1; min-height: 0; overflow: auto; }
+.composer-preview .result-head { padding-top: 12px; }
+.composer-errors { border-bottom: none; margin: 10px 14px; border-radius: 8px; }
+
+/* Headers in a view carry two names — the table and the column — because a
+   view of thirty fields drawn from five tables is unreadable when every third
+   one is called "name". */
+.composer-th-table { color: var(--text-faint); font-weight: 400; text-transform: none; letter-spacing: 0; }
+/* A summary is a different kind of column — computed from many rows rather
+   than read from one — and is coloured like a key so the eye separates it
+   from the fields beside it. */
+.composer-preview th.is-summary { cursor: default; color: var(--key); }
+.composer-preview th.is-summary:hover { color: var(--key); }
+.composer-preview th.is-summary .composer-th-table { color: var(--key); opacity: 0.75; }
+.composer-th-sort { color: var(--accent); }
+.composer-preview th.sorted-asc, .composer-preview th.sorted-desc { color: var(--accent); }
+/* Nothing to click through to: a view row is a join of several rows and has
+   no single identity to open. Saying so with the cursor is cheaper than
+   letting someone find out. */
+.composer-preview tbody tr { cursor: default; }
+.composer-preview tbody tr:hover { background: var(--surface-2); }
+
+/* ---------- narrow windows ---------- */
+
+@media (max-width: 860px) {
+  .composer-body { flex-direction: column; }
+  .composer-side { width: auto; border-right: none; border-bottom: 1px solid var(--border); max-height: 40%; }
+  .composer-fields { max-height: none; }
+}
+
+/* Renaming a column, on the header where the ambiguity shows. Hidden until
+   the header is hovered: it is an occasional action and a pencil on every
+   column of a thirty-column view is noise. */
+.composer-th-rename {
+  background: none; border: none; border-radius: 3px;
+  color: var(--text-faint); cursor: pointer;
+  padding: 0 4px; margin-left: 6px; font-size: 10px; line-height: 1;
+  opacity: 0; transition: opacity 120ms ease;
+}
+th:hover .composer-th-rename,
+.composer-th-rename:focus-visible { opacity: 1; }
+.composer-th-rename:hover { color: var(--accent); }