@legionworks/facet 1.9.0

package/dist/gallery/frame/frame.css

@@ -0,0 +1,183 @@
+html,
+body {
+  margin: 0;
+  height: 100%;
+  background: var(--facet-frame-surface);
+  color: var(--facet-frame-text);
+  font:
+    14px/1.55 ui-sans-serif,
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
+}
+
+:root {
+  --facet-frame-surface: #151823;
+  --facet-frame-stage: #151823;
+  --facet-frame-text: #c8d3f5;
+  --facet-frame-muted: #a9b8e8;
+  --facet-frame-faint: #737aa2;
+  --facet-frame-focus: #82aaff;
+  --facet-frame-link: #82aaff;
+  --facet-frame-code: #c3e88d;
+  --facet-frame-code-surface: #1e2030;
+  --facet-frame-rule: #2f334d;
+  --facet-frame-quote: #a9b8e8;
+  --facet-frame-quote-rule: #444a73;
+}
+
+[data-theme="winter"] {
+  --facet-frame-surface: #ffffff;
+  --facet-frame-stage: #f8fafc;
+  --facet-frame-text: #172033;
+  --facet-frame-muted: #334155;
+  --facet-frame-faint: #475569;
+  --facet-frame-focus: #075985;
+  --facet-frame-link: #075985;
+  --facet-frame-code: #166534;
+  --facet-frame-code-surface: #f1f5f9;
+  --facet-frame-rule: #cbd5e1;
+  --facet-frame-quote: #334155;
+  --facet-frame-quote-rule: #64748b;
+}
+
+#artifact {
+  box-sizing: border-box;
+  height: 100%;
+  margin: 0;
+  padding: 16px;
+  overflow: auto;
+}
+
+/*
+ * Standalone diagrams (mermaid/svg/chart) center on both axes when
+ * the rendered root fits the stage. `safe` is load-bearing: it falls
+ * back to start-aligned scrolling the moment the root overflows, so
+ * zoomed-in or naturally oversized content stays 100% reachable by
+ * scroll instead of clipping unreachable off-screen (the regression
+ * a plain `center` reintroduces).
+ */
+#artifact[data-facet-artifact-type="mermaid"],
+#artifact[data-facet-artifact-type="svg"],
+#artifact[data-facet-artifact-type="chart"] {
+  display: flex;
+  justify-content: safe center;
+  align-items: safe center;
+}
+
+/*
+ * Markdown reads top-down (no vertical centering) but should not
+ * stretch to an unreadable line length at wide viewports: cap the
+ * column at a ~92ch measure and center it horizontally. Below that
+ * measure the calc() collapses to the original 16px padding, so
+ * narrow viewports are unaffected.
+ */
+#artifact[data-facet-artifact-type="markdown"] {
+  padding-inline: max(16px, calc((100% - 92ch) / 2));
+}
+
+/*
+ * Native dashboard artifacts (html, interactive tsx) read top-down
+ * like markdown — vertical stays start-aligned — but unlike markdown
+ * their width is whatever the fixture authored (often a fixed-width
+ * `max-w-*` container), not a fluid readable column. Left unstyled,
+ * that narrow content sits pinned to the container's left edge,
+ * stranding most of a wide desktop stage as dead space.
+ *
+ * The centering has to land on the renderer-ROOT element
+ * (`.facet-html-root` / `#facet-tsx-mount`), not `#artifact` itself:
+ * `renderHtml`/`renderTsx` always mount a single full-width wrapper
+ * as `#artifact`'s only child, and the fixture's own narrow content
+ * (e.g. `<main class="max-w-2xl">`) is a GRANDCHILD of `#artifact`
+ * inside that wrapper — centering `#artifact`'s single full-width
+ * child does nothing. `safe center` on the horizontal axis only —
+ * the same fallback-to-start mechanism the standalone-diagram rule
+ * above uses — centers content that fits and never clips content
+ * wider than the stage (it start-aligns and stays reachable by
+ * scroll instead).
+ */
+#artifact[data-facet-artifact-type="html"] > [data-facet-renderer-root],
+#artifact[data-facet-artifact-type="tsx"] > [data-facet-renderer-root] {
+  display: flex;
+  justify-content: safe center;
+  align-items: flex-start;
+  min-height: 100%;
+}
+
+#artifact > svg {
+  display: block;
+  width: fit-content;
+  max-height: none;
+  height: auto;
+  /* Flex items shrink by default (min-width: auto); without this a
+     wide diagram would squeeze toward the flex container's width
+     instead of overflowing it — the exact jail regression `safe
+     center` above is meant to prevent. */
+  flex-shrink: 0;
+}
+
+#artifact > canvas,
+#artifact > iframe {
+  display: block;
+  flex-shrink: 0;
+}
+
+#artifact [data-facet-diagram-region] {
+  display: block;
+  overflow: hidden;
+  outline: 1px solid transparent;
+  outline-offset: 2px;
+}
+
+#artifact [data-facet-diagram-region][data-facet-diagram-engaged="true"] {
+  outline-color: var(--facet-frame-focus);
+}
+
+#artifact [data-facet-diagram-region] > svg {
+  display: block;
+  max-width: none;
+}
+
+#artifact a {
+  color: var(--facet-frame-link);
+}
+
+#artifact code,
+#artifact pre {
+  color: var(--facet-frame-code);
+  background: var(--facet-frame-code-surface);
+  border-radius: 4px;
+}
+
+#artifact code {
+  padding: 1px 4px;
+}
+
+#artifact pre {
+  padding: 10px;
+  overflow: auto;
+}
+
+#artifact table {
+  border-collapse: collapse;
+}
+
+#artifact th,
+#artifact td {
+  padding: 4px 8px;
+  border: 1px solid var(--facet-frame-rule);
+}
+
+#artifact blockquote {
+  margin: 0 0 0 8px;
+  padding-left: 12px;
+  color: var(--facet-frame-quote);
+  border-left: 3px solid var(--facet-frame-quote-rule);
+}
+
+#artifact hr {
+  border: 0;
+  border-top: 1px solid var(--facet-frame-rule);
+}