create-yss-spec 3.5.0 → 3.5.3

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

@@ -1,136 +0,0 @@
-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

@@ -1,54 +0,0 @@
-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

@@ -1,96 +0,0 @@
-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>
-  );
-}