PyDecisionGraph 0.3.2.post1__cp315-cp315-win_amd64.whl

decision_graph/webui/bake/static/style.css

@@ -0,0 +1,920 @@
+/* ==========================================================================
+   Bake Graph — a card per node, laid out on a grid.
+
+   Everything the drawing uses is a custom property, so the theme toggle is one
+   attribute on <html> and an export can snapshot the values it finds: the SVG
+   is styled by the same names the page is.
+   ========================================================================== */
+
+:root {
+    --font-ui: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono", Menlo, Consolas, monospace;
+
+    --radius-lg: 14px;
+    --radius-md: 9px;
+    --radius-sm: 5px;
+
+    --sidebar-w: 268px;
+    --titlebar-h: 52px;
+
+    --t-fast: 120ms;
+    --t-slow: 260ms;
+}
+
+/* ---- Dark (default) ---- */
+:root,
+:root[data-theme="dark"] {
+    --bg: #0e1015;
+    --bg-grid: #171a21;
+    /* The paper the cards sit on: a step off the background, not an edge. At
+       the line colour it reads as a second graph drawn behind the first. */
+    --grid-line: #1b1f28;
+    --panel: #14171e;
+    --panel-2: #1b1f28;
+    --item: #222733;
+    --line: #2b3140;
+    --text: #e8ecf4;
+    --text-dim: #9aa4b8;
+    --text-faint: #667089;
+    --accent: #6ea8fe;
+    --accent-soft: rgba(110, 168, 254, 0.16);
+    --ok: #4ade80;
+    --warn: #fbbf24;
+    --bad: #f87171;
+    --shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
+
+    --card-bg: #1a1f29;
+    --card-line: #313847;
+    --card-repr: #dfe6f2;
+    --card-meta: #8b95a9;
+    --card-active-ring: #7dd3fc;
+
+    --fam-input: #3b82f6;
+    --fam-op: #a855f7;
+    --fam-action: #f59e0b;
+    --fam-special: #ec4899;
+    --fam-other: #64748b;
+    --fam-on: #0b0e14;
+
+    /* The action family says more than "it is an action": what it DOES is the
+       colour, so a leaf is read at a glance without reading its text. */
+    --act-long: #22c55e;
+    --act-short: #ef4444;
+    --act-none: #6b7280;
+    --act-cancel: #eab308;
+    --act-clear: #14b8a6;
+    --act-placeholder: #4b5563;
+}
+
+/* ---- Light ---- */
+:root[data-theme="light"] {
+    --bg: #eef1f6;
+    --bg-grid: #e3e7ee;
+    --grid-line: #e8ebf1;
+    --panel: #ffffff;
+    --panel-2: #f7f9fc;
+    --item: #eceff5;
+    --line: #d6dbe4;
+    --text: #1a2230;
+    --text-dim: #5a6577;
+    --text-faint: #8b95a6;
+    --accent: #2563eb;
+    --accent-soft: rgba(37, 99, 235, 0.12);
+    --ok: #16a34a;
+    --warn: #b45309;
+    --bad: #dc2626;
+    --shadow: 0 6px 16px rgba(24, 33, 51, 0.12);
+
+    --card-bg: #ffffff;
+    --card-line: #d3d9e3;
+    --card-repr: #1f2733;
+    --card-meta: #6b7686;
+    --card-active-ring: #0284c7;
+
+    --fam-input: #2563eb;
+    --fam-op: #7c3aed;
+    --fam-action: #d97706;
+    --fam-special: #db2777;
+    --fam-other: #64748b;
+    --fam-on: #ffffff;
+
+    --act-long: #16a34a;
+    --act-short: #dc2626;
+    --act-none: #64748b;
+    --act-cancel: #ca8a04;
+    --act-clear: #0d9488;
+    --act-placeholder: #94a3b8;
+}
+
+* { box-sizing: border-box; }
+
+html, body {
+    height: 100%;
+    margin: 0;
+}
+
+body {
+    display: flex;
+    flex-direction: column;
+    background: var(--bg);
+    color: var(--text);
+    font-family: var(--font-ui);
+    font-size: 13px;
+    overflow: hidden;
+}
+
+/* ============================ Title bar ============================ */
+
+#titlebar {
+    height: var(--titlebar-h);
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    padding: 0 16px;
+    background: var(--panel);
+    border-bottom: 1px solid var(--line);
+    z-index: 5;
+}
+
+.brand {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: 600;
+    letter-spacing: 0.2px;
+}
+
+.brand-mark {
+    display: grid;
+    place-items: center;
+    width: 24px;
+    height: 24px;
+    border-radius: var(--radius-sm);
+    background: var(--accent-soft);
+    color: var(--accent);
+    font-size: 15px;
+}
+
+.graph-title {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-family: var(--font-mono);
+    color: var(--text-dim);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.title-stats {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+.stat {
+    padding: 3px 9px;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: var(--panel-2);
+    color: var(--text-dim);
+    font-size: 12px;
+    white-space: nowrap;
+}
+
+.stat b {
+    color: var(--text);
+    font-weight: 600;
+}
+
+/* ============================ Shell ============================ */
+
+#shell {
+    flex: 1 1 auto;
+    min-height: 0;
+    display: flex;
+}
+
+#sidebar {
+    width: var(--sidebar-w);
+    flex: 0 0 var(--sidebar-w);
+    background: var(--panel);
+    border-right: 1px solid var(--line);
+    overflow-y: auto;
+    padding: 12px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.panel {
+    background: var(--panel-2);
+    border: 1px solid var(--line);
+    border-radius: var(--radius-md);
+    padding: 10px 12px 12px;
+}
+
+.panel-title {
+    margin: 0 0 10px;
+    font-size: 11px;
+    font-weight: 600;
+    letter-spacing: 0.9px;
+    text-transform: uppercase;
+    color: var(--text-faint);
+}
+
+/* ---- A panel folds ---- */
+
+.panel-toggle {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.panel-toggle:hover {
+    color: var(--text-dim);
+}
+
+.panel-toggle:focus-visible {
+    outline: 1px solid var(--accent);
+    outline-offset: 3px;
+    border-radius: var(--radius-sm);
+}
+
+.panel-caret {
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    transition: transform var(--t-fast) ease;
+}
+
+.panel.is-collapsed .panel-caret {
+    transform: rotate(-90deg);
+}
+
+.panel.is-collapsed .panel-title {
+    margin-bottom: 0;
+}
+
+.panel.is-collapsed .panel-body {
+    display: none;
+}
+
+.field {
+    margin-bottom: 10px;
+}
+
+.field:last-child {
+    margin-bottom: 0;
+}
+
+.field-label {
+    display: block;
+    margin-bottom: 5px;
+    font-size: 11px;
+    color: var(--text-dim);
+}
+
+/* ---- Segmented control ---- */
+
+.segmented {
+    display: flex;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    overflow: hidden;
+}
+
+.segmented button {
+    flex: 1 1 0;
+    padding: 5px 6px;
+    border: 0;
+    background: var(--item);
+    color: var(--text-dim);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background var(--t-fast), color var(--t-fast);
+}
+
+.segmented button + button {
+    border-left: 1px solid var(--line);
+}
+
+.segmented button:hover {
+    color: var(--text);
+}
+
+.segmented button.active {
+    background: var(--accent-soft);
+    color: var(--accent);
+    font-weight: 600;
+}
+
+/* ---- Buttons ---- */
+
+.btn-row {
+    display: flex;
+    gap: 6px;
+    margin-bottom: 8px;
+}
+
+.btn-row:last-child {
+    margin-bottom: 0;
+}
+
+.btn {
+    flex: 1 1 auto;
+    padding: 6px 8px;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: var(--item);
+    color: var(--text);
+    font: inherit;
+    font-size: 12px;
+    cursor: pointer;
+    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+}
+
+.btn:hover {
+    border-color: var(--accent);
+    color: var(--accent);
+}
+
+.btn:active {
+    transform: translateY(1px);
+}
+
+.btn-primary {
+    background: var(--accent-soft);
+    border-color: var(--accent);
+    color: var(--accent);
+    font-weight: 600;
+}
+
+.btn[disabled] {
+    opacity: 0.45;
+    cursor: not-allowed;
+}
+
+.icon-btn {
+    width: 26px;
+    height: 26px;
+    display: grid;
+    place-items: center;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: var(--item);
+    color: var(--text-dim);
+    cursor: pointer;
+    font: inherit;
+}
+
+.icon-btn:hover {
+    color: var(--accent);
+    border-color: var(--accent);
+}
+
+/* ---- Switch ---- */
+
+.switch-row {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 8px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.switch-row input {
+    position: absolute;
+    opacity: 0;
+    pointer-events: none;
+}
+
+.switch-track {
+    flex: 0 0 auto;
+    width: 30px;
+    height: 17px;
+    border-radius: 999px;
+    background: var(--item);
+    border: 1px solid var(--line);
+    position: relative;
+    transition: background var(--t-fast), border-color var(--t-fast);
+}
+
+.switch-knob {
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 11px;
+    height: 11px;
+    border-radius: 50%;
+    background: var(--text-faint);
+    transition: transform var(--t-fast), background var(--t-fast);
+}
+
+.switch-row input:checked + .switch-track {
+    background: var(--accent-soft);
+    border-color: var(--accent);
+}
+
+.switch-row input:checked + .switch-track .switch-knob {
+    transform: translateX(13px);
+    background: var(--accent);
+}
+
+.switch-text {
+    font-size: 12px;
+    color: var(--text-dim);
+}
+
+/* ---- Readout ---- */
+
+.readout {
+    margin: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+}
+
+.readout > div {
+    display: flex;
+    gap: 8px;
+    align-items: baseline;
+}
+
+.readout dt {
+    flex: 0 0 58px;
+    color: var(--text-faint);
+    font-size: 11px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.readout dd {
+    margin: 0;
+    flex: 1 1 auto;
+    min-width: 0;
+    font-family: var(--font-mono);
+    font-size: 12px;
+    color: var(--text);
+    overflow-wrap: anywhere;
+}
+
+.readout-wide dt {
+    flex: 0 0 72px;
+}
+
+/* ---- Sliders ---- */
+
+.slider-row {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+    column-gap: 8px;
+    row-gap: 3px;
+    margin-bottom: 10px;
+    cursor: pointer;
+}
+
+.slider-row:last-of-type {
+    margin-bottom: 8px;
+}
+
+.slider-label {
+    grid-column: 1;
+    font-size: 11px;
+    color: var(--text-dim);
+}
+
+.slider-value {
+    grid-column: 2;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-faint);
+}
+
+.slider-row input[type="range"] {
+    grid-column: 1 / -1;
+    width: 100%;
+    height: 16px;
+    margin: 0;
+    accent-color: var(--accent);
+    cursor: pointer;
+}
+
+/* ---- Chips ---- */
+
+.chips {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+}
+
+/* The logic groups: one label per row. A group name is a word or two, and a
+   wrapped row of chips reads as a sentence rather than as a list. */
+#ctl-groups {
+    flex-direction: column;
+    align-items: stretch;
+}
+
+#ctl-groups .chip {
+    text-align: left;
+    overflow-wrap: anywhere;
+}
+
+.chip {
+    padding: 3px 9px;
+    border: 1px solid var(--line);
+    border-radius: 999px;
+    background: var(--item);
+    color: var(--text-dim);
+    font-size: 11px;
+    cursor: pointer;
+    transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
+}
+
+.chip:hover {
+    color: var(--text);
+}
+
+.chip.active {
+    background: var(--accent-soft);
+    border-color: var(--accent);
+    color: var(--accent);
+    font-weight: 600;
+}
+
+.hint {
+    margin: 8px 0 0;
+    font-size: 11px;
+    line-height: 1.45;
+    color: var(--text-faint);
+}
+
+.hint.is-error {
+    color: var(--bad);
+}
+
+.hint.is-ok {
+    color: var(--ok);
+}
+
+.textarea {
+    width: 100%;
+    resize: vertical;
+    padding: 6px 8px;
+    margin-bottom: 8px;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-sm);
+    background: var(--item);
+    color: var(--text);
+    font-family: var(--font-mono);
+    font-size: 11px;
+    line-height: 1.5;
+}
+
+.textarea:focus {
+    outline: none;
+    border-color: var(--accent);
+}
+
+/* ============================ Stage ============================ */
+
+#stage {
+    flex: 1 1 auto;
+    min-width: 0;
+    position: relative;
+    overflow: hidden;
+    background-color: var(--bg-grid);
+    /* The grid the cards are laid out on: paper, not edges. */
+    background-image:
+        linear-gradient(var(--grid-line) 1px, transparent 1px),
+        linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+    background-size: 24px 24px, 24px 24px;
+}
+
+#canvas {
+    position: absolute;
+    inset: 0;
+    cursor: grab;
+}
+
+#canvas.is-panning {
+    cursor: grabbing;
+}
+
+#graph {
+    width: 100%;
+    height: 100%;
+    display: block;
+    touch-action: none;
+}
+
+/* `hidden` has to win over the layout below it, or a page that drew nothing
+   would say it drew nothing forever - including when it drew something. */
+#empty-note[hidden] {
+    display: none;
+}
+
+#empty-note.is-visible {
+    display: grid;
+}
+
+#empty-note {
+    position: absolute;
+    inset: 0;
+    display: none;
+    place-items: center;
+    padding: 24px;
+    text-align: center;
+    color: var(--text-faint);
+    font-size: 13px;
+}
+
+/* ============================ Edges ============================ */
+
+.edge {
+    fill: none;
+    stroke: var(--line);
+    /* Set from the presentation slider; the active line is a multiple of it. */
+    stroke-width: var(--edge-width, 1.6);
+    transition: stroke var(--t-slow), stroke-width var(--t-slow), opacity var(--t-slow);
+}
+
+.edge.is-active {
+    stroke: var(--card-active-ring);
+    stroke-width: calc(var(--edge-width, 1.6) * 1.6);
+}
+
+.edge.is-dim {
+    opacity: 0.25;
+}
+
+.vlink {
+    fill: none;
+    stroke: var(--fam-special);
+    stroke-width: var(--edge-width, 1.6);
+    stroke-dasharray: 6 5;
+    opacity: 0.75;
+    transition: opacity var(--t-slow);
+}
+
+.vlink.is-dim {
+    opacity: 0.18;
+}
+
+.edge-chip {
+    transition: opacity var(--t-slow);
+}
+
+.edge-chip.is-dim {
+    opacity: 0.25;
+}
+
+.edge-chip.is-active .edge-chip-bg {
+    stroke: var(--card-active-ring);
+    stroke-width: 1.6;
+}
+
+.edge-chip.is-active .edge-chip-text {
+    fill: var(--card-active-ring);
+}
+
+.edge-chip-bg {
+    fill: var(--panel);
+    stroke: var(--line);
+    stroke-width: 1;
+}
+
+.edge-chip-text {
+    fill: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    dominant-baseline: middle;
+    text-anchor: middle;
+}
+
+.edge-chip.is-true .edge-chip-bg { stroke: var(--ok); }
+.edge-chip.is-false .edge-chip-bg { stroke: var(--bad); }
+.edge-chip.is-else .edge-chip-bg { stroke: var(--warn); }
+.edge-chip.is-value .edge-chip-bg { stroke: var(--accent); }
+
+/* ============================ Cards ============================ */
+
+.card {
+    cursor: pointer;
+}
+
+/* The copy of what has just left the drawing. It is there to be looked at on
+   its way out, not to be touched or read. */
+.ghost-layer {
+    pointer-events: none;
+}
+
+.card-body {
+    fill: var(--card-bg);
+    stroke: var(--card-line);
+    stroke-width: 1.4;
+    transition: stroke var(--t-slow), stroke-width var(--t-slow);
+}
+
+.card-band {
+    fill: var(--fam-other);
+}
+
+.card.fam-INPUT .card-band { fill: var(--fam-input); }
+.card.fam-OP .card-band { fill: var(--fam-op); }
+.card.fam-ACTION .card-band { fill: var(--fam-action); }
+.card.fam-SPECIAL .card-band { fill: var(--fam-special); }
+.card.fam-OTHER .card-band { fill: var(--fam-other); }
+
+/* An action node's own colour, on top of its family's: the family says where
+   it sits, the type says what it does. These follow the family rules, so the
+   order here is what gives them the last word. */
+.card.type-LONGACTION .card-band { fill: var(--act-long); }
+.card.type-SHORTACTION .card-band { fill: var(--act-short); }
+.card.type-NOACTION .card-band { fill: var(--act-none); }
+.card.type-CANCELACTION .card-band { fill: var(--act-cancel); }
+.card.type-CLEARACTION .card-band { fill: var(--act-clear); }
+.card.type-PLACEHOLDER .card-band { fill: var(--act-placeholder); }
+
+.card-type {
+    fill: var(--fam-on);
+    font-family: var(--font-ui);
+    font-size: 10px;
+    font-weight: 700;
+    letter-spacing: 0.8px;
+    dominant-baseline: middle;
+}
+
+.card-badge-text {
+    /* The band's own contrast colour, not the card's: a badge sits ON the band,
+       and a grey band under grey text is a badge nobody can read. */
+    fill: var(--fam-on);
+    opacity: 0.72;
+    font-family: var(--font-ui);
+    font-size: 9px;
+    dominant-baseline: middle;
+    text-anchor: end;
+}
+
+.card-repr {
+    fill: var(--card-repr);
+    font-family: var(--font-mono);
+    font-size: 11.5px;
+    dominant-baseline: middle;
+}
+
+.card-meta {
+    fill: var(--card-meta);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    dominant-baseline: middle;
+}
+
+.card.is-active .card-body {
+    stroke: var(--card-active-ring);
+    stroke-width: 2.2;
+}
+
+.card.is-active .card-band {
+    filter: saturate(1.25) brightness(1.08);
+}
+
+.card.is-dim {
+    opacity: 0.28;
+}
+
+.card.is-selected .card-body {
+    stroke: var(--accent);
+    stroke-width: 2.6;
+}
+
+.card.is-failed .card-body {
+    stroke: var(--bad);
+    stroke-width: 2.2;
+}
+
+.card.is-leaf .card-repr {
+    font-weight: 600;
+}
+
+.card-note {
+    fill: var(--text-faint);
+    font-family: var(--font-ui);
+    font-size: 9px;
+    font-style: italic;
+    dominant-baseline: middle;
+}
+
+.card-toggle-bg {
+    fill: var(--item);
+    stroke: var(--card-line);
+    stroke-width: 1;
+}
+
+.card-toggle-text {
+    fill: var(--text-dim);
+    font-family: var(--font-mono);
+    font-size: 10px;
+    dominant-baseline: middle;
+    text-anchor: middle;
+}
+
+.card:hover .card-body {
+    stroke: var(--accent);
+}
+
+/* ============================ Inspector ============================ */
+
+#inspector {
+    position: absolute;
+    right: 16px;
+    bottom: 16px;
+    width: 340px;
+    max-height: 60vh;
+    overflow-y: auto;
+    padding: 12px;
+    border: 1px solid var(--line);
+    border-radius: var(--radius-lg);
+    background: var(--panel);
+    box-shadow: var(--shadow);
+    z-index: 8;
+}
+
+.inspector-head {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.inspector-type {
+    font-family: var(--font-mono);
+    font-size: 12px;
+    font-weight: 700;
+    letter-spacing: 0.6px;
+    color: var(--accent);
+}
+
+.inspector-block {
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--line);
+}
+
+.field-note {
+    color: var(--text-faint);
+    font-weight: 400;
+    letter-spacing: 0;
+    text-transform: none;
+}
+
+#ins-arms,
+#ins-operands {
+    margin: 6px 0 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+    font-family: var(--font-mono);
+    font-size: 11px;
+    color: var(--text-dim);
+}
+
+#ins-arms li,
+#ins-operands li {
+    display: flex;
+    gap: 6px;
+    align-items: baseline;
+}
+
+#ins-arms .arm-key,
+#ins-operands .arm-key {
+    flex: 0 0 auto;
+    padding: 1px 6px;
+    border-radius: var(--radius-sm);
+    background: var(--item);
+    color: var(--text);
+}
+
+#ins-arms .arm-key.is-true { color: var(--ok); }
+#ins-arms .arm-key.is-false { color: var(--bad); }
+#ins-arms .arm-key.is-else { color: var(--warn); }
+
+#ins-arms .arm-name,
+#ins-operands .arm-name {
+    min-width: 0;
+    overflow-wrap: anywhere;
+}
+
+#ins-operands .arm-name.is-own {
+    color: var(--text);
+}