@w6w/embed 0.0.0-stage → 0.1.1

package/src/styles.css

@@ -0,0 +1,829 @@
+@import "@w6w/ui/styles.css";
+
+/* Editor chrome for <WorkflowEditor/>, copied from Studio's src/styles.css.
+   Every rule is scoped under `.w6w-embed-root`; nothing here styles a host
+   element. The palette resolves from the NEAREST `[data-theme]` ancestor:
+   Studio's token names are aliases of ui's inherited `--w6w-*` tokens, and the
+   two tokens ui lacks are namespaced `--w6w-embed-*` and declared the way ui
+   declares its palette (`:where([data-theme=…])`, zero specificity). No
+   `[data-theme] .w6w-embed-root` descendant blocks: with `<html>` and the
+   wrapper disagreeing they would tie on specificity and source order would
+   decide. */
+:where([data-theme="light"]) {
+  --w6w-embed-accent-2: #248a4a;
+  --w6w-embed-warn: #9a5a11;
+}
+:where([data-theme="dark"]) {
+  --w6w-embed-accent-2: #3b6;
+  --w6w-embed-warn: #ffb86b;
+}
+
+.w6w-embed-root {
+  --bg: var(--w6w-bg);
+  --panel: var(--w6w-panel);
+  --panel-2: var(--w6w-panel-2);
+  --border: var(--w6w-border);
+  --text: var(--w6w-text);
+  --muted: var(--w6w-muted);
+  --accent: var(--w6w-accent);
+  --danger: var(--w6w-danger);
+  --icon-swatch: var(--w6w-icon-swatch);
+  --radius: var(--w6w-radius, 10px);
+
+  /* OS fallback, used only when no ancestor carries `data-theme`. */
+  --w6w-embed-accent-2-os: #248a4a;
+  --w6w-embed-warn-os: #9a5a11;
+  --accent-2: var(--w6w-embed-accent-2, var(--w6w-embed-accent-2-os));
+  --warn: var(--w6w-embed-warn, var(--w6w-embed-warn-os));
+
+  /* Studio's `body {}` text defaults, moved onto the root. */
+  font-family: var(--w6w-font-sans);
+  background: var(--bg);
+  color: var(--text);
+  font-size: 14px;
+}
+@media (prefers-color-scheme: dark) {
+  .w6w-embed-root {
+    --w6w-embed-accent-2-os: #3b6;
+    --w6w-embed-warn-os: #ffb86b;
+  }
+}
+
+/* Studio's `* {}` box-sizing, scoped. */
+.w6w-embed-root,
+.w6w-embed-root * {
+  box-sizing: border-box;
+}
+
+.w6w-embed-root code {
+  font-family: var(--w6w-font-mono);
+  font-size: 0.85em;
+}
+
+.w6w-embed-root .muted {
+  color: var(--muted);
+}
+
+.w6w-embed-root .small {
+  font-size: 0.85em;
+}
+
+.w6w-embed-root .right-rail {
+  position: sticky;
+  top: 0;
+  align-self: start;
+  height: 100%;
+  display: flex;
+  border-left: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.w6w-embed-root .right-rail-strip {
+  width: 48px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  padding: var(--w6w-sp-2) 0;
+  overflow-y: auto;
+}
+
+.w6w-embed-root .right-rail-tool-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.w6w-embed-root .right-rail-tool-btn:hover {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.w6w-embed-root .right-rail-tool-btn.active {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+.w6w-embed-root .right-rail-panel {
+  width: 320px;
+  flex-shrink: 0;
+  border-left: 1px solid var(--border);
+  overflow-y: auto;
+  padding: var(--w6w-sp-4);
+}
+
+.w6w-embed-root .right-rail-panel-head h3 {
+  margin: 0 0 var(--w6w-sp-3);
+}
+
+.w6w-embed-root .rail-settings-panel {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-4);
+}
+
+.w6w-embed-root .rail-meta-list {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  gap: var(--w6w-sp-1-5) var(--w6w-sp-3);
+  margin: 0;
+  /*Allow long values to wrap inside the available rail width.*/
+  flex: 1;
+  min-width: 0;
+}
+
+.w6w-embed-root .rail-meta-list dt {
+  color: var(--text);
+  font-size: var(--w6w-fs-sm);
+  font-weight: var(--w6w-fw-semibold);
+  line-height: var(--w6w-lh-tight);
+}
+
+.w6w-embed-root .rail-meta-list dd {
+  margin: 0;
+  min-width: 0;
+  color: var(--muted);
+  /*lint-tokens-allow: T3.1.1 rail value size, em-relative to the rail; no w6w-fs token is byte-equal to 0.85em*/
+  font-size: 0.85em;
+  line-height: var(--w6w-lh-normal);
+  overflow-wrap: anywhere;
+}
+
+.w6w-embed-root .rail-link-icon {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  border: none;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  color: var(--w6w-accent);
+  text-decoration: underline;
+  font: inherit;
+  cursor: pointer;
+}
+
+.w6w-embed-root .rail-link-icon:hover {
+  color: var(--accent);
+}
+
+.w6w-embed-root .rail-danger-zone {
+  padding-top: var(--w6w-sp-4);
+  border-top: 1px solid var(--border);
+}
+
+.w6w-embed-root .rail-danger-zone--panel {
+  /*No margin-top here: `.rail-settings-panel`'s flex `gap` already spaces
+     this section from the one above it equally with every other section
+     (ST9's own invariant) — an extra margin here would double that gap.*/
+  padding: var(--w6w-sp-3);
+  border: 1px solid var(--danger);
+  border-radius: 8px;
+  background: color-mix(in srgb, var(--danger) 10%, var(--panel-2));
+}
+
+.w6w-embed-root .rail-danger-zone-delete {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-embed-root .rail-spec-menu-row {
+  margin: var(--w6w-sp-2) 0;
+}
+
+.w6w-embed-root .rail-code-langs {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--w6w-sp-2);
+  margin-bottom: var(--w6w-sp-2);
+}
+
+.w6w-embed-root .rail-code-lang {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  padding: var(--w6w-sp-3) var(--w6w-sp-2);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 0.8rem;
+  /*The glyph is the recognition; the name is the meaning. Both, always — a
+     monochrome mark alone would make `curl` and `CLI` a coin toss.*/
+}
+
+.w6w-embed-root .rail-code-lang:hover {
+  background: var(--panel-2);
+  border-color: var(--border-strong, var(--border));
+  color: var(--text);
+}
+
+.w6w-embed-root .rail-code-lang:focus-visible {
+  outline: 2px solid var(--accent, currentColor);
+  outline-offset: 2px;
+}
+
+@media (max-width: 820px) {
+  .w6w-embed-root .right-rail {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100%;
+    z-index: 30;
+  }
+}
+
+.w6w-embed-root .page-head h2 {
+  margin: var(--w6w-sp-1) 0;
+}
+
+.w6w-embed-root .row {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  align-items: center;
+  margin-top: var(--w6w-sp-2);
+}
+
+.w6w-embed-root .row input {
+  margin-top: 0;
+}
+
+.w6w-embed-root .btn {
+  background: var(--accent);
+  color: white;
+  border: none;
+  border-radius: 8px;
+  padding: var(--w6w-sp-2) 14px;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.w6w-embed-root .btn:hover {
+  filter: brightness(1.08);
+}
+
+.w6w-embed-root .btn:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.w6w-embed-root .btn.ghost {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+  text-decoration: none;
+}
+
+.w6w-embed-root .btn.ghost:hover {
+  background: var(--panel-2);
+}
+
+.w6w-embed-root .btn.ghost.active {
+  background: var(--panel-2);
+  color: var(--text);
+  border-color: var(--accent);
+}
+
+.w6w-embed-root .btn.link {
+  background: none;
+  border: none;
+  padding: 0;
+  color: var(--accent);
+  text-decoration: underline;
+  font-size: inherit;
+  cursor: pointer;
+}
+
+.w6w-embed-root .btn.link:hover {
+  filter: brightness(1.15);
+}
+
+.w6w-embed-root .btn.danger {
+  background: var(--danger);
+  color: white;
+}
+
+.w6w-embed-root .list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.w6w-embed-root .list li {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+  padding: var(--w6w-sp-2-5) 0;
+  border-bottom: 1px solid var(--border);
+}
+
+.w6w-embed-root .list li:last-child {
+  border-bottom: none;
+}
+
+.w6w-embed-root .list-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.w6w-embed-root .list li.selectable {
+  padding: 0;
+  display: block;
+}
+
+.w6w-embed-root .row-select {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+  width: 100%;
+  padding: var(--w6w-sp-2-5);
+  border: none;
+  border-radius: var(--radius);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.w6w-embed-root .row-select:hover {
+  background: var(--panel-2);
+}
+
+.w6w-embed-root .row-select:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+
+.w6w-embed-root .row-select.selected {
+  background: var(--panel-2);
+}
+
+.w6w-embed-root .list li.linked {
+  padding: 0;
+}
+
+.w6w-embed-root .badge {
+  display: inline-block;
+  padding: 1px var(--w6w-sp-2);
+  border-radius: 999px;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  font-size: 11px;
+  color: var(--muted);
+}
+
+.w6w-embed-root .error {
+  color: var(--danger);
+  margin-top: var(--w6w-sp-2);
+}
+
+.w6w-embed-root .ok {
+  color: var(--accent-2);
+}
+
+.w6w-embed-root .row.signup-id-row {
+  align-items: flex-end;
+}
+
+.w6w-embed-root .row.field-row {
+  align-items: flex-start;
+}
+
+.w6w-embed-root .row.field-row > .field {
+  flex: 1;
+  min-width: 0;
+}
+
+.w6w-embed-root .modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.55);
+  display: grid;
+  place-items: center;
+  padding: var(--w6w-sp-5);
+  z-index: 50;
+}
+
+.w6w-embed-root .modal {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  width: 100%;
+  max-width: 520px;
+  max-height: 90vh;
+  overflow: auto;
+  padding: var(--w6w-sp-5);
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-embed-root .modal-wide {
+  max-width: 820px;
+}
+
+.w6w-embed-root .modal-xl {
+  max-width: 1240px;
+}
+
+.w6w-embed-root .modal-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-embed-root .modal h3 {
+  margin: 0;
+}
+
+.w6w-embed-root .modal-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+}
+
+.w6w-embed-root .modal-actions {
+  display: flex;
+  gap: var(--w6w-sp-2);
+  justify-content: flex-end;
+  flex-shrink: 0;
+}
+
+.w6w-embed-root .field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1);
+}
+
+.w6w-embed-root .field label {
+  font-size: 0.9em;
+  color: var(--muted);
+  margin-bottom: 0;
+}
+
+.w6w-embed-root .field .hint {
+  color: var(--muted);
+  font-size: 0.8em;
+}
+
+.w6w-embed-root .result {
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-3);
+  font-family: var(--w6w-font-mono);
+  font-size: 0.85em;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.w6w-embed-root .result.ok {
+  border-color: var(--accent-2);
+  color: var(--accent-2);
+  background: color-mix(in srgb, var(--accent-2) 14%, var(--panel-2));
+}
+
+.w6w-embed-root .result.warn {
+  border-color: var(--warn);
+  color: var(--warn);
+  background: color-mix(in srgb, var(--warn) 14%, var(--panel-2));
+}
+
+.w6w-embed-root .result.error {
+  border-color: var(--danger);
+  color: var(--danger);
+  background: color-mix(in srgb, var(--danger) 14%, var(--panel-2));
+}
+
+.w6w-embed-root .result.notice {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--w6w-sp-2-5);
+  font-family: inherit;
+  font-size: 0.95em;
+  font-weight: 500;
+  padding: var(--w6w-sp-3) 14px;
+  animation: w6w-embed-notice-in 140ms ease-out;
+}
+
+.w6w-embed-root .result.notice .notice-icon {
+  flex: none;
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+  border-radius: 999px;
+  background: currentColor;
+  color: var(--panel);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.w6w-embed-root .result.notice .notice-text {
+  flex: 1;
+  min-width: 0;
+}
+
+@keyframes w6w-embed-notice-in {
+  from {
+    opacity: 0;
+    transform: translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .w6w-embed-root .result.notice {
+    animation: none;
+  }
+}
+
+.w6w-embed-root .tag {
+  display: inline-block;
+  background: var(--panel-2);
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  padding: var(--w6w-sp-0-5) var(--w6w-sp-2);
+  font-size: 0.75em;
+  color: var(--muted);
+  margin-right: var(--w6w-sp-1);
+}
+
+.w6w-embed-root .tag.warn {
+  color: #ffb86b;
+  border-color: #ffb86b;
+}
+
+.w6w-embed-root .tag.danger {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+.w6w-embed-root .list-main :not(.tag) + .tag {
+  margin-left: var(--w6w-sp-1);
+}
+
+.w6w-embed-root .tag-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-embed-root .tag.removable {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  margin-right: 0;
+}
+
+.w6w-embed-root .wf-row-tags {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--w6w-sp-1);
+  margin-top: var(--w6w-sp-1);
+}
+
+.w6w-embed-root .wf-col {
+  flex-shrink: 0;
+  text-align: right;
+}
+
+.w6w-embed-root .wf-col-stats {
+  min-width: 60px;
+}
+
+.w6w-embed-root .wf-status.draft {
+  color: var(--muted);
+}
+
+.w6w-embed-root .wf-status.active {
+  color: var(--accent-2);
+  border-color: var(--accent-2);
+}
+
+.w6w-embed-root .wf-status.archived {
+  color: var(--danger);
+  border-color: var(--danger);
+}
+
+.w6w-embed-root .wf-head-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--w6w-sp-1-5);
+}
+
+.w6w-embed-root .wf-publish.active {
+  color: var(--accent-2);
+  border-color: var(--accent-2);
+}
+
+.w6w-embed-root dialog.modal {
+  position: fixed;
+  inset: 0;
+  margin: auto;
+  background: var(--panel);
+  color: var(--text);
+  border: 1px solid var(--border);
+}
+
+.w6w-embed-root dialog.modal h3,
+.w6w-embed-root dialog.modal h4,
+.w6w-embed-root dialog.modal label,
+.w6w-embed-root dialog.modal p {
+  color: var(--text);
+}
+
+.w6w-embed-root dialog.modal::backdrop {
+  background: rgba(0, 0, 0, 0.55);
+}
+
+.w6w-embed-root .rail-settings-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-embed-root .rail-settings-head h3 {
+  margin: 0;
+}
+
+.w6w-embed-root .wf-fullbleed {
+  display: flex;
+  flex-direction: column;
+  height: calc(100vh - 56px);
+}
+
+.w6w-embed-root .wf-fullbleed-head {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-4);
+  padding: var(--w6w-sp-2-5) var(--w6w-sp-4);
+  border-bottom: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.w6w-embed-root .exec-profile-title {
+  margin: 0;
+  font-size: var(--w6w-fs-lg);
+  font-weight: var(--w6w-fw-semibold);
+  line-height: var(--w6w-lh-tight);
+}
+
+.w6w-embed-root .wf-fullbleed-head .wf-toolbar {
+  flex: 1;
+}
+
+.w6w-embed-root .wf-back-btn {
+  border: none;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.w6w-embed-root .wf-back-btn:hover {
+  color: var(--accent);
+}
+
+.w6w-embed-root .wf-fullbleed-head input.wf-title-input {
+  width: auto;
+  max-width: 60ch;
+  margin: 0;
+  padding: var(--w6w-sp-1) var(--w6w-sp-0-5);
+  border: none;
+  border-radius: 0;
+  background: transparent;
+  color: var(--text);
+  font-size: 18px;
+  font-weight: 600;
+  font-family: inherit;
+}
+
+.w6w-embed-root .wf-title-input::placeholder {
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.w6w-embed-root .wf-fullbleed-head input.wf-title-input:focus {
+  outline: none;
+  border: none;
+  background: transparent;
+}
+
+.w6w-embed-root .wf-fullbleed-canvas {
+  flex: 1;
+  min-height: 0;
+}
+
+.w6w-embed-root .wf-run-area {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  min-height: 0;
+}
+
+.w6w-embed-root .wf-run-canvas {
+  flex: 1;
+  min-height: 0;
+}
+
+.w6w-embed-root .wf-run-log {
+  border-top: 1px solid var(--border);
+  background: var(--panel-2);
+  max-height: 40vh;
+  overflow: auto;
+  padding: var(--w6w-sp-3);
+}
+
+@media (max-width: 899px) {
+  .w6w-embed-root .wf-run-log {
+    position: fixed;
+    inset: auto 0 0 0;
+    max-height: 60vh;
+    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.25);
+    z-index: 20;
+  }
+}
+
+@media (min-width: 1200px) {
+  .w6w-embed-root .wf-run-area {
+    flex-direction: row;
+  }
+
+  .w6w-embed-root .wf-run-log {
+    border-top: none;
+    border-left: 1px solid var(--border);
+    max-height: none;
+    width: 360px;
+    flex-shrink: 0;
+  }
+}
+
+.w6w-embed-root .wf-fullbleed-foot {
+  padding: var(--w6w-sp-2) var(--w6w-sp-4);
+  border-top: 1px solid var(--border);
+  background: var(--panel);
+}
+
+.w6w-embed-root .wf-fullbleed-foot .row {
+  margin-top: 0;
+}
+
+.w6w-embed-root .code-tabs {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  margin-bottom: var(--w6w-sp-2);
+}
+
+.w6w-embed-root .code-tabs-spacer {
+  flex: 1;
+}
+
+.w6w-embed-root .code-tab {
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  padding: var(--w6w-sp-1) var(--w6w-sp-3);
+}
+
+.w6w-embed-root .code-tab:hover {
+  color: var(--text);
+}
+
+.w6w-embed-root .code-tab.active {
+  background: var(--panel);
+  border-color: var(--border);
+  color: var(--text);
+}