@w6w/embed 0.1.1 → 0.2.0

package/src/styles.css

@@ -68,6 +68,19 @@
   font-size: 0.85em;
 }
 
+.w6w-embed-root .block {
+  display: block;
+}
+
+.w6w-embed-root .subpanel {
+  margin-top: var(--w6w-sp-3);
+  padding-top: var(--w6w-sp-3);
+  border-top: 1px solid var(--border);
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2);
+}
+
 .w6w-embed-root .right-rail {
   position: sticky;
   top: 0;
@@ -677,7 +690,7 @@
 .w6w-embed-root .wf-fullbleed {
   display: flex;
   flex-direction: column;
-  height: calc(100vh - 56px);
+  height: 100%;
 }
 
 .w6w-embed-root .wf-fullbleed-head {
@@ -827,3 +840,397 @@
   border-color: var(--border);
   color: var(--text);
 }
+
+/* ── ConnectionList ── */
+.w6w-embed-root .w6w-embed-conn-badge {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  color: var(--muted);
+  font-size: 0.75em;
+  padding: 0 var(--w6w-sp-1);
+}
+
+/* ── ConnectionDetail ── */
+.w6w-embed-root .w6w-embed-conn-detail {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-3);
+}
+
+.w6w-embed-root .w6w-embed-conn-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--w6w-sp-3);
+}
+
+.w6w-embed-root .w6w-embed-conn-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.w6w-embed-root .w6w-embed-conn-tests {
+  margin-left: var(--w6w-sp-4);
+  margin-top: var(--w6w-sp-1);
+}
+
+.w6w-embed-root .w6w-embed-conn-action {
+  background: transparent;
+  border: 0;
+  color: inherit;
+  cursor: pointer;
+  font: inherit;
+  padding: var(--w6w-sp-2);
+  text-align: left;
+  width: 100%;
+}
+
+.w6w-embed-root .w6w-embed-conn-action:hover {
+  background: var(--panel-2);
+}
+
+.w6w-embed-root .w6w-embed-conn-filter {
+  margin-bottom: var(--w6w-sp-2);
+}
+
+.w6w-embed-root .w6w-embed-conn-notice {
+  align-items: center;
+  display: flex;
+  gap: var(--w6w-sp-2);
+}
+
+.w6w-embed-root .w6w-embed-conn-notice-text {
+  flex: 1;
+}
+
+.w6w-embed-root .w6w-embed-conn-notice-ok,
+.w6w-embed-root .w6w-embed-conn-ok {
+  color: var(--accent-2);
+}
+
+.w6w-embed-root .w6w-embed-conn-notice-warn {
+  color: var(--warn);
+}
+
+.w6w-embed-root .w6w-embed-conn-notice-error,
+.w6w-embed-root .w6w-embed-conn-fail {
+  color: var(--danger);
+}
+
+/* ── Config list chrome (VarsManager, SecretsManager, DocumentList) ── */
+/* Copied from Studio's src/styles.css, selectors prefixed, declarations byte-identical. */
+.w6w-embed-root .section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-2-5);
+}
+.w6w-embed-root .section-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--w6w-sp-4);
+}
+.w6w-embed-root .section-head h3 {
+  margin: 0 0 var(--w6w-sp-0-5);
+}
+/* Let the description column absorb the wrapping; keep the action button on one
+   line (it was wrapping to "+ Add / secret" when the copy got long). */
+.w6w-embed-root .section-head > :first-child {
+  min-width: 0;
+}
+.w6w-embed-root .section-head > .btn {
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+/* ── CallableEditorFrame ── (ported from Studio src/styles.css; shared by the Function and
+   Endpoint editors, TargetSelector and InputListEditor) */
+.w6w-embed-root .card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--w6w-sp-4);
+}
+
+.w6w-embed-root .card h3,
+.w6w-embed-root .card h4 {
+  margin: 0 0 var(--w6w-sp-2);
+}
+
+.w6w-embed-root .exec-profile-editor {
+  min-width: 0;
+}
+
+.w6w-embed-root .exec-profile-body {
+  max-width: 1000px;
+  width: 100%;
+  margin: 0 auto;
+  padding: var(--w6w-sp-6) var(--w6w-sp-5);
+  min-width: 0;
+}
+
+.w6w-embed-root .status-failed {
+  color: var(--danger);
+  border-color: #a33;
+}
+
+/* ── ActivitySummary ── (declarations copied from Studio's `.card` / `.card h3`) */
+.w6w-embed-root .w6w-activity-card {
+  background: var(--panel);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: var(--w6w-sp-4);
+}
+
+.w6w-embed-root .w6w-activity-card h3 {
+  margin: 0 0 var(--w6w-sp-2);
+}
+
+.w6w-embed-root .w6w-activity-section {
+  margin-bottom: var(--w6w-sp-6);
+}
+
+.w6w-embed-root .w6w-activity-section > h3,
+.w6w-embed-root .w6w-activity-h3 {
+  margin: 0 0 var(--w6w-sp-2);
+}
+
+.w6w-embed-root .w6w-activity-stats {
+  display: flex;
+  gap: var(--w6w-sp-3);
+  flex-wrap: wrap;
+}
+
+.w6w-embed-root .w6w-activity-stat {
+  flex: 1 1 140px;
+  min-width: 140px;
+}
+
+.w6w-embed-root .w6w-activity-stat-value {
+  font-size: var(--w6w-fs-3xl);
+  font-weight: var(--w6w-fw-semibold);
+  line-height: 1.1;
+}
+
+.w6w-embed-root .w6w-activity-link {
+  background: none;
+  border: 0;
+  padding: 0;
+  font: inherit;
+  color: var(--accent);
+  cursor: pointer;
+  text-align: left;
+}
+
+.w6w-embed-root .list-preview {
+  margin-top: var(--w6w-sp-1);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.w6w-embed-root .list-name {
+  display: inline-block;
+  max-width: 100%;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+/* ── DocumentList, DocumentEditor ── */
+/* Blocks stack with the page rhythm Studio's .page gives its direct children. */
+.w6w-embed-root.w6w-doc-editor {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-4);
+}
+.w6w-embed-root a.list-link {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+  flex: 1;
+  min-width: 0;
+  padding: var(--w6w-sp-2-5) 0 var(--w6w-sp-2-5) var(--w6w-sp-2-5);
+  border-radius: var(--radius);
+  color: inherit;
+  text-decoration: none;
+}
+.w6w-embed-root a.list-link:hover {
+  background: var(--panel-2);
+}
+.w6w-embed-root a.list-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+/* Without `getHref` the same row is a button: reset it to read as the anchor does. */
+.w6w-embed-root button.list-link {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-3);
+  flex: 1;
+  min-width: 0;
+  padding: var(--w6w-sp-2-5) 0 var(--w6w-sp-2-5) var(--w6w-sp-2-5);
+  border: 0;
+  border-radius: var(--radius);
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.w6w-embed-root button.list-link:hover {
+  background: var(--panel-2);
+}
+.w6w-embed-root button.list-link:focus-visible {
+  outline: 2px solid var(--accent);
+  outline-offset: -2px;
+}
+.w6w-embed-root textarea.code {
+  font-family: var(--w6w-font-mono);
+  font-size: 12.5px;
+  resize: vertical;
+}
+
+/* ── ServiceDetail ── */
+/* One "days with traffic" row: day label, health pill, call count, error tags.
+ * Not `.row` (`:872-877`) — that rule's `margin-top` would stack an extra top
+ * margin onto every one of the (up to) 14 rows in the list; this is a
+ * dedicated rule instead. */
+.w6w-embed-root .rel-day-row {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-2);
+}
+/* The per-day error-kind tags — pushed to the row's right edge, with their
+   own gap between tags when there is more than one. */
+.w6w-embed-root .rel-errors {
+  display: flex;
+  align-items: center;
+  gap: var(--w6w-sp-1);
+  margin-left: auto;
+}
+/* Calls-per-day bar chart. Height is volume; colour is that day's own state,
+   same tokens as every other health signal on the board. */
+.w6w-embed-root .rel-daily-chart {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  height: 120px;
+}
+.w6w-embed-root .rel-daily-bar {
+  flex: 1 1 0;
+  min-width: 2px;
+  border-radius: 2px 2px 0 0;
+}
+.w6w-embed-root .rel-daily-bar-ok {
+  background: var(--w6w-health-ok);
+}
+.w6w-embed-root .rel-daily-bar-degraded {
+  background: var(--w6w-health-degraded);
+}
+.w6w-embed-root .rel-daily-bar-down {
+  background: var(--w6w-health-down);
+}
+.w6w-embed-root .rel-daily-bar-unknown {
+  background: var(--w6w-health-unknown);
+  opacity: 0.5;
+}
+
+/* Error-mix bars — the four kinds, as a horizontal scale rather than the
+   board's bare count chips, so a page otherwise made of cards and lists gets
+   at least one comparative picture. */
+.w6w-embed-root .rel-errormix-chart {
+  display: flex;
+  flex-direction: column;
+  gap: var(--w6w-sp-1-5);
+}
+.w6w-embed-root .rel-errormix-row {
+  display: grid;
+  grid-template-columns: 120px 1fr 40px;
+  align-items: center;
+  gap: var(--w6w-sp-2-5);
+}
+.w6w-embed-root .rel-errormix-track {
+  height: 10px;
+  background: var(--panel-2);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.w6w-embed-root .rel-errormix-bar {
+  display: block;
+  height: 100%;
+  background: var(--w6w-health-degraded);
+  border-radius: 999px;
+}
+.w6w-embed-root .rel-errormix-value {
+  text-align: right;
+  color: var(--muted);
+}
+
+/* The call log — the drill from "this service looks like that" to the requests
+   behind it. Scrolls inside itself so a long action name can never push the
+   page into a horizontal scroll. */
+.w6w-embed-root .rel-calls {
+  display: flex;
+  flex-direction: column;
+  overflow-x: auto;
+}
+.w6w-embed-root .rel-call {
+  display: grid;
+  grid-template-columns: 160px 1fr 70px 90px 80px;
+  gap: var(--w6w-sp-2-5);
+  align-items: center;
+  padding: var(--w6w-sp-1-5) 0;
+  border-bottom: 1px solid var(--border);
+  min-width: 520px;
+}
+.w6w-embed-root .rel-call:last-child {
+  border-bottom: none;
+}
+.w6w-embed-root .rel-call-head {
+  color: var(--muted);
+  font-size: 12px;
+  border-bottom-color: transparent;
+}
+
+/* ── EndpointEditor ── (`seg` / `seg-btn` ported from Studio src/styles.css — the URL card's
+   id/key segmented control; every other class the editor uses is already defined above) */
+.w6w-embed-root .seg {
+  display: inline-flex;
+  align-items: stretch;
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  overflow: hidden;
+  /* A <fieldset> carries UA padding, margin and a `min-inline-size: min-content`. */
+  padding: 0;
+  margin: 0 0 var(--w6w-sp-2-5);
+  min-inline-size: 0;
+}
+.w6w-embed-root .seg-btn {
+  background: transparent;
+  border: none;
+  border-left: 1px solid var(--border);
+  color: var(--muted);
+  cursor: pointer;
+  font: inherit;
+  font-size: 13px;
+  padding: 5px var(--w6w-sp-3);
+}
+.w6w-embed-root .seg-btn:first-child {
+  border-left: none;
+}
+.w6w-embed-root .seg-btn:hover {
+  color: var(--text);
+}
+.w6w-embed-root .seg-btn.active {
+  background: var(--panel-2);
+  color: var(--text);
+}
+
+/* ── EndpointList ── (Studio's `.list-main :not(.tag) + .tag` rule, ported: the "Unfinished" tag
+ * follows the name inside the row title, so it needs a leading gap — `.tag`'s own spacing is
+ * trailing-only.) */
+.w6w-embed-root .w6w-list-item-title :not(.tag) + .tag {
+  margin-left: var(--w6w-sp-1);
+}

package/dist/project-context-Dbk0Gr1K.js

@@ -1,16 +0,0 @@
-import { createContext as o, useContext as r } from "react";
-const n = o(void 0);
-function u() {
-  return r(n);
-}
-function c(t, e) {
-  return t === void 0 ? e || null : t || null;
-}
-function s(t) {
-  return c(t, u());
-}
-export {
-  n as E,
-  s as u
-};
-//# sourceMappingURL=project-context-Dbk0Gr1K.js.map

package/dist/project-context-Dbk0Gr1K.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"project-context-Dbk0Gr1K.js","sources":["../src/project-context.ts"],"sourcesContent":["/**\n * Which project does an embedded editor save into? One answer, in one place.\n *\n * A project-less workflow save is not harmless: the server resolves a missing `?project=` to the\n * account default and WRITES it on update, silently moving the row there. The editor therefore\n * always names its project explicitly, or refuses. Internal to the embed package (not exported\n * from any barrel).\n */\nimport { createContext, useContext } from \"react\";\n\n/** The provider's project, as frozen with the applied client (see `W6WEmbedProvider`). */\nexport const EmbedProjectContext = createContext<string | undefined>(undefined);\n\nexport function useProvidedProject(): string | undefined {\n  return useContext(EmbedProjectContext);\n}\n\n/**\n * The editor's own prop wins over the provider's project. `undefined` (omitted) defers to the\n * provider; `null` or `\"\"` means \"no project yet\" and REFUSES (`null`) — it never falls through,\n * so a host whose project is still loading cannot have edits saved into the provider's project.\n * (`prop ?? provided` would be wrong: `null` would fall through.)\n */\nexport function resolveEditorProject(\n  prop: string | null | undefined,\n  provided: string | undefined,\n): string | null {\n  if (prop === undefined) return provided ? provided : null;\n  return prop ? prop : null;\n}\n\nexport function useEditorProject(prop: string | null | undefined): string | null {\n  return resolveEditorProject(prop, useProvidedProject());\n}\n"],"names":["EmbedProjectContext","createContext","useProvidedProject","useContext","resolveEditorProject","prop","provided","useEditorProject"],"mappings":";AAWO,MAAMA,IAAsBC,EAAkC,MAAS;AAEvE,SAASC,IAAyC;AACvD,SAAOC,EAAWH,CAAmB;AACvC;AAQO,SAASI,EACdC,GACAC,GACe;AACf,SAAID,MAAS,SAAkBC,KAAsB,OAC9CD,KAAc;AACvB;AAEO,SAASE,EAAiBF,GAAgD;AAC/E,SAAOD,EAAqBC,GAAMH,GAAoB;AACxD;"}