create-yss-spec 1.1.1 → 1.1.3

package/template/.codex/skills/data-analytics/src/analytics-app/analytics-layout.test.mjs

@@ -0,0 +1,136 @@
+import assert from "node:assert/strict";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import { describe, test } from "node:test";
+import ts from "typescript";
+
+async function loadCore() {
+  const source = await readFile(join(process.cwd(), "src", "analyticsLayoutCore.ts"), "utf8");
+  const { outputText } = ts.transpileModule(source, {
+    compilerOptions: {
+      module: ts.ModuleKind.ES2022,
+      target: ts.ScriptTarget.ES2022
+    }
+  });
+  const url = `data:text/javascript;base64,${Buffer.from(outputText).toString("base64")}`;
+  return import(url);
+}
+
+describe("analytics layout core", () => {
+  test("normalizes stored order, removes unknown blocks, appends missing blocks, and expands orphan halves", async () => {
+    const { normalize } = await loadCore();
+    assert.deepEqual(
+      normalize(
+        [{ id: "chart-a" }, { id: "table-a" }, { id: "text-a" }],
+        [
+          { id: "table-a", layout: "half" },
+          { id: "ghost", layout: "full" },
+          { id: "chart-a", layout: "half" }
+        ]
+      ),
+      [
+        { id: "table-a", layout: "half" },
+        { id: "chart-a", layout: "half" },
+        { id: "text-a", layout: "full" }
+      ]
+    );
+  });
+
+  test("pairs a dragged block with a full-width target", async () => {
+    const { pairWithTarget } = await loadCore();
+    assert.deepEqual(
+      pairWithTarget(
+        [
+          { id: "a", layout: "full" },
+          { id: "b", layout: "full" },
+          { id: "c", layout: "full" }
+        ],
+        "c",
+        "a",
+        "after"
+      ),
+      [
+        { id: "a", layout: "half" },
+        { id: "c", layout: "half" },
+        { id: "b", layout: "full" }
+      ]
+    );
+  });
+
+  test("moving a half block above another block expands it and unpairs its previous row", async () => {
+    const { moveBlock } = await loadCore();
+    assert.deepEqual(
+      moveBlock(
+        [
+          { id: "a", layout: "half" },
+          { id: "b", layout: "half" },
+          { id: "c", layout: "full" }
+        ],
+        "a",
+        "c",
+        "before"
+      ),
+      [
+        { id: "b", layout: "full" },
+        { id: "a", layout: "full" },
+        { id: "c", layout: "full" }
+      ]
+    );
+  });
+
+  test("predicts center-zone reorder without half-width promotion", async () => {
+    const { predictPlacement } = await loadCore();
+    assert.deepEqual(
+      predictPlacement(
+        [
+          { id: "a", layout: "full" },
+          { id: "b", layout: "full" },
+          { id: "c", layout: "full" }
+        ],
+        { draggedId: "c", intent: "before", targetId: "b" }
+      ),
+      [
+        { id: "a", layout: "full" },
+        { id: "c", layout: "full" },
+        { id: "b", layout: "full" }
+      ]
+    );
+  });
+
+  test("holding in a split-intent zone keeps the current preview stable", async () => {
+    const { predictPlacement } = await loadCore();
+    const items = [
+      { id: "a", layout: "full" },
+      { id: "b", layout: "full" },
+      { id: "c", layout: "full" }
+    ];
+    assert.deepEqual(
+      predictPlacement(items, { draggedId: "c", intent: "hold", targetId: "a" }),
+      items
+    );
+  });
+
+  test("dragging to the end keeps mixed chart/table/text blocks packed", async () => {
+    const { moveBlock, packRows } = await loadCore();
+    const next = moveBlock(
+      [
+        { id: "chart-a", layout: "half" },
+        { id: "table-a", layout: "half" },
+        { id: "text-a", layout: "full" }
+      ],
+      "chart-a",
+      null,
+      "end"
+    );
+    assert.deepEqual(next, [
+      { id: "table-a", layout: "full" },
+      { id: "text-a", layout: "full" },
+      { id: "chart-a", layout: "full" }
+    ]);
+    assert.deepEqual(packRows(next), [
+      [{ id: "table-a", layout: "full" }],
+      [{ id: "text-a", layout: "full" }],
+      [{ id: "chart-a", layout: "full" }]
+    ]);
+  });
+});

package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartFrame.tsx

@@ -0,0 +1,54 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { ChartSurface } from "./chart-contract";
+import { ChartLegend, type ChartLegendItem } from "./ChartLegend";
+
+export function ChartFrame({
+  children,
+  className = "",
+  height,
+  interactiveLegend = false,
+  legendItems = [],
+  legendPosition = "bottom",
+  legendTitle,
+  onVisibleChange,
+  surface = "card",
+  visibleIds,
+}: {
+  children: ReactNode;
+  className?: string;
+  height?: number | string;
+  interactiveLegend?: boolean;
+  legendItems?: ChartLegendItem[];
+  legendPosition?: "bottom" | "right";
+  legendTitle?: string;
+  onVisibleChange?: (visible: Set<string>) => void;
+  surface?: ChartSurface;
+  visibleIds?: Set<string>;
+}) {
+  const frameStyle = height == null ? undefined : ({ height } as CSSProperties);
+  const showLegend = legendItems.length > 0;
+  return (
+    <div
+      className={[
+        "chart-frame",
+        `chart-frame--${surface}`,
+        showLegend ? "chart-frame--with-legend" : "",
+        showLegend && legendPosition === "right" ? "chart-frame--legend-right" : "",
+        className,
+      ].filter(Boolean).join(" ")}
+      style={frameStyle}
+    >
+      <div className="chart-plot">{children}</div>
+      {showLegend ? (
+        <ChartLegend
+          interactive={interactiveLegend}
+          items={legendItems}
+          position={legendPosition}
+          title={legendTitle}
+          onVisibleChange={onVisibleChange}
+          visibleIds={visibleIds}
+        />
+      ) : null}
+    </div>
+  );
+}

package/template/.codex/skills/data-analytics/src/analytics-app/charting/ChartLegend.tsx

@@ -0,0 +1,96 @@
+import type { CSSProperties } from "react";
+
+export type ChartLegendItem = {
+  color: string;
+  id: string;
+  lineStyle?: "solid" | "dashed" | "dotted";
+  value: string;
+};
+
+function strokeDasharrayForLegend(lineStyle: ChartLegendItem["lineStyle"]) {
+  if (lineStyle === "dotted") return "2 4";
+  if (lineStyle === "dashed") return "6 5";
+  return undefined;
+}
+
+function orderedVisibleIds(items: ChartLegendItem[], visibleIds: Set<string>): Set<string> {
+  return new Set(items.map((item) => item.id).filter((id) => visibleIds.has(id)));
+}
+
+export function ChartLegend({
+  interactive = false,
+  items,
+  onVisibleChange,
+  position = "bottom",
+  title,
+  visibleIds,
+}: {
+  interactive?: boolean;
+  items: ChartLegendItem[];
+  onVisibleChange?: (visible: Set<string>) => void;
+  position?: "bottom" | "right";
+  title?: string;
+  visibleIds?: Set<string>;
+}) {
+  if (!items.length) return null;
+  const activeIds = visibleIds ?? new Set(items.map((item) => item.id));
+
+  function toggle(id: string) {
+    if (!interactive || !onVisibleChange) return;
+    const next = new Set(activeIds);
+    if (next.has(id)) {
+      if (next.size === 1) return;
+      next.delete(id);
+    }
+    else next.add(id);
+    onVisibleChange(orderedVisibleIds(items, next));
+  }
+
+  return (
+    <div className={`chart-legend-wrap chart-legend-wrap--${position}`}>
+      {title ? <div className="chart-legend-title">{title}</div> : null}
+      <ul className="recharts-default-legend chart-legend">
+        {items.map((item) => {
+          const isVisible = activeIds.has(item.id);
+          const markerStyle = { "--legend-color": item.color } as CSSProperties;
+          const marker = item.lineStyle ? (
+            <svg aria-hidden="true" className="chart-legend-line" style={markerStyle} viewBox="0 0 28 8">
+              <line
+                stroke="var(--legend-color)"
+                strokeDasharray={strokeDasharrayForLegend(item.lineStyle)}
+                strokeLinecap="round"
+                strokeWidth="2.5"
+                x1="1.5"
+                x2="26.5"
+                y1="4"
+                y2="4"
+              />
+            </svg>
+          ) : (
+            <span aria-hidden="true" className="chart-legend-dot" style={markerStyle} />
+          );
+          return (
+            <li className="recharts-legend-item chart-legend-item" key={item.id}>
+              {interactive ? (
+                <button
+                  aria-pressed={isVisible}
+                  className="chart-legend-button"
+                  onClick={() => toggle(item.id)}
+                  type="button"
+                >
+                  {marker}
+                  <span>{item.value}</span>
+                </button>
+              ) : (
+                <>
+                  {marker}
+                  <span>{item.value}</span>
+                </>
+              )}
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+}