@deckspec/theme-noir-display 0.1.0

package/patterns/body-message/index.tsx

@@ -0,0 +1,295 @@
+import { z } from "zod";
+import { SlideHeader } from "../../components/index.js";
+
+const nodeSchema = z.object({
+  id: z.string().min(1).max(3).describe("Node ID (A, B, C)"),
+  title: z.string().min(1).max(30).describe("Node title"),
+});
+
+const explanationSchema = z.object({
+  id: z.string().min(1).max(3).describe("Explanation ID matching node"),
+  title: z.string().min(1).max(30).describe("Explanation title"),
+  items: z.array(z.string()).min(1).max(5).describe("Detail points"),
+});
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(60).describe("Section heading"),
+  center: z.string().min(1).max(40).describe("Central concept"),
+  nodes: z.array(nodeSchema).min(2).max(5).describe("Surrounding nodes"),
+  explanations: z.array(explanationSchema).min(2).max(5).describe("Explanations for each node"),
+  footer: z.string().min(1).max(100).optional().describe("Footer message"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function BodyMessage({
+  label,
+  heading,
+  center,
+  nodes,
+  explanations,
+  footer,
+}: Props) {
+  // Position nodes around the center concept in a radial layout
+  const nodePositions = getNodePositions(nodes.length);
+
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--color-card-background)",
+        padding: "40px 60px",
+        gap: 20,
+      }}
+    >
+      {/* Header */}
+      <SlideHeader label={label} heading={heading} />
+
+      {/* Main content: diagram + explanations */}
+      <div style={{ display: "flex", gap: 32, flex: 1, minHeight: 0 }}>
+        {/* Left: diagram (60%) */}
+        <div
+          style={{
+            width: "58%",
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          {/* Center concept card */}
+          <div
+            style={{
+              position: "absolute",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              backgroundColor: "var(--color-card-background)",
+              border: "2px solid var(--color-primary)",
+              borderRadius: 16,
+              padding: "20px 28px",
+              textAlign: "center",
+              zIndex: 2,
+              boxShadow: "4px 4px 12px rgba(0,0,0,0.06)",
+            }}
+          >
+            <span
+              style={{
+                fontSize: 19,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                letterSpacing: "-0.022em",
+                color: "var(--color-foreground)",
+                lineHeight: 1.3,
+              }}
+            >
+              {center}
+            </span>
+          </div>
+
+          {/* Surrounding node cards */}
+          {nodes.map((node, i) => {
+            const pos = nodePositions[i];
+            return (
+              <div
+                key={i}
+                style={{
+                  position: "absolute",
+                  left: `${pos.x}%`,
+                  top: `${pos.y}%`,
+                  transform: "translate(-50%, -50%)",
+                  backgroundColor: "var(--color-muted)",
+                  borderRadius: 12,
+                  padding: "12px 18px",
+                  textAlign: "center",
+                  zIndex: 1,
+                  minWidth: 100,
+                }}
+              >
+                <span
+                  style={{
+                    fontSize: 12,
+                    fontWeight: 600,
+                    fontFamily: "var(--font-heading)",
+                    color: "var(--color-primary)",
+                    display: "block",
+                    marginBottom: 2,
+                  }}
+                >
+                  {node.id}
+                </span>
+                <span
+                  style={{
+                    fontSize: 14,
+                    fontWeight: 600,
+                    fontFamily: "var(--font-heading)",
+                    letterSpacing: "-0.016em",
+                    color: "var(--color-foreground)",
+                    lineHeight: 1.3,
+                  }}
+                >
+                  {node.title}
+                </span>
+              </div>
+            );
+          })}
+
+          {/* Connecting lines (SVG) */}
+          <svg
+            style={{
+              position: "absolute",
+              left: 0,
+              top: 0,
+              width: "100%",
+              height: "100%",
+              zIndex: 0,
+              overflow: "visible",
+            }}
+            viewBox="0 0 100 100"
+            preserveAspectRatio="none"
+          >
+            {nodes.map((_, i) => {
+              const pos = nodePositions[i];
+              return (
+                <line
+                  key={i}
+                  x1="50"
+                  y1="50"
+                  x2={pos.x}
+                  y2={pos.y}
+                  stroke="var(--color-border)"
+                  strokeWidth="0.4"
+                  strokeDasharray="1,1"
+                />
+              );
+            })}
+          </svg>
+        </div>
+
+        {/* Right: explanations (40%) */}
+        <div
+          style={{
+            width: "42%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "center",
+            gap: 16,
+          }}
+        >
+          {explanations.map((exp, i) => (
+            <div
+              key={i}
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                gap: 6,
+              }}
+            >
+              <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+                <span
+                  style={{
+                    fontSize: 13,
+                    fontWeight: 600,
+                    fontFamily: "var(--font-heading)",
+                    color: "var(--color-primary)",
+                    backgroundColor: "var(--color-background)",
+                    borderRadius: 6,
+                    padding: "2px 8px",
+                    lineHeight: 1.4,
+                  }}
+                >
+                  {exp.id}
+                </span>
+                <span
+                  style={{
+                    fontSize: 17,
+                    fontWeight: 600,
+                    fontFamily: "var(--font-heading)",
+                    letterSpacing: "-0.022em",
+                    color: "var(--color-foreground)",
+                    lineHeight: 1.3,
+                  }}
+                >
+                  {exp.title}
+                </span>
+              </div>
+              <ul
+                style={{
+                  listStyle: "none",
+                  margin: 0,
+                  padding: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 4,
+                  paddingLeft: 4,
+                }}
+              >
+                {exp.items.map((item, j) => (
+                  <li
+                    key={j}
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 400,
+                      fontFamily: "var(--font-body)",
+                      letterSpacing: "-0.016em",
+                      lineHeight: 1.43,
+                      color: "var(--color-muted-foreground)",
+                      paddingLeft: 14,
+                      position: "relative",
+                    }}
+                  >
+                    <span
+                      style={{
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        color: "var(--color-muted-foreground)",
+                      }}
+                    >
+                      &#x2022;
+                    </span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+
+      {/* Footer */}
+      {footer && (
+        <div style={{ textAlign: "center" }}>
+          <span
+            style={{
+              fontSize: 14,
+              fontWeight: 400,
+              fontFamily: "var(--font-body)",
+              letterSpacing: "-0.016em",
+              color: "var(--color-muted-foreground)",
+              lineHeight: 1.43,
+            }}
+          >
+            {footer}
+          </span>
+        </div>
+      )}
+    </div>
+  );
+}
+
+/** Compute radial positions (%) for nodes around center (50,50) */
+function getNodePositions(count: number): Array<{ x: number; y: number }> {
+  const radius = 36;
+  const startAngle = -Math.PI / 2; // Start from top
+  return Array.from({ length: count }, (_, i) => {
+    const angle = startAngle + (2 * Math.PI * i) / count;
+    return {
+      x: 50 + radius * Math.cos(angle),
+      y: 50 + radius * Math.sin(angle),
+    };
+  });
+}

package/patterns/bullet-list/index.tsx

@@ -0,0 +1,132 @@
+import { z } from "zod";
+
+const itemSchema = z.object({
+  title: z.string().min(1).describe("Item title"),
+  description: z.string().optional().describe("Item description"),
+});
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(80).describe("Section heading"),
+  items: z.array(itemSchema).min(2).max(6).describe("List items"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function BulletList({ label, heading, items }: Props) {
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        background: "#ffffff",
+        overflow: "hidden",
+      }}
+    >
+      {/* Left: heading area */}
+      <div
+        style={{
+          width: "40%",
+          padding: "60px 48px 60px 80px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+          gap: 8,
+        }}
+      >
+        {label && (
+          <span
+            style={{
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: "-0.022em",
+              color: "var(--color-primary)",
+            }}
+          >
+            {label}
+          </span>
+        )}
+        <h2
+          style={{
+            fontSize: 40,
+            fontWeight: 600,
+            lineHeight: 1.1,
+            letterSpacing: "-0.009em",
+          }}
+        >
+          {heading}
+        </h2>
+      </div>
+
+      {/* Right: list items */}
+      <div
+        style={{
+          flex: 1,
+          padding: "60px 80px 60px 0",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "center",
+        }}
+      >
+        {items.map((item, i) => (
+          <div
+            key={i}
+            style={{
+              display: "flex",
+              alignItems: "baseline",
+              gap: 16,
+              padding: "14px 0",
+              borderBottom:
+                i < items.length - 1
+                  ? "1px solid rgba(0,0,0,0.08)"
+                  : "none",
+            }}
+          >
+            <span
+              style={{
+                fontSize: 14,
+                fontWeight: 600,
+                fontFamily: "var(--font-heading)",
+                color: "var(--color-muted-foreground)",
+                letterSpacing: "-0.016em",
+                minWidth: 24,
+                flexShrink: 0,
+              }}
+            >
+              {String(i + 1).padStart(2, "0")}
+            </span>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: 4 }}>
+              <span
+                style={{
+                  fontSize: 19,
+                  fontWeight: 600,
+                  fontFamily: "var(--font-heading)",
+                  letterSpacing: "0.012em",
+                  color: "var(--color-foreground)",
+                  lineHeight: 1.37,
+                }}
+              >
+                {item.title}
+              </span>
+              {item.description && (
+                <span
+                  style={{
+                    fontSize: 15,
+                    fontWeight: 400,
+                    fontFamily: "var(--font-body)",
+                    letterSpacing: "-0.022em",
+                    color: "var(--color-muted-foreground)",
+                    lineHeight: 1.47,
+                  }}
+                >
+                  {item.description}
+                </span>
+              )}
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/challenge-cards/index.tsx

@@ -0,0 +1,112 @@
+import { z } from "zod";
+import { Icon } from "../_lib/icon.js";
+import { SlideHeader } from "../../components/index.js";
+
+const challengeSchema = z.object({
+  title: z.string().min(1).max(30).describe("Challenge card title"),
+  icon: z.string().min(1).describe("Lucide icon name"),
+  items: z.array(z.string()).min(2).max(5).describe("Bullet points"),
+});
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(60).describe("Section heading"),
+  challenges: z.array(challengeSchema).min(2).max(3).describe("Challenge cards (2-3)"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function ChallengeCards({ label, heading, challenges }: Props) {
+  return (
+    <div
+      className="slide-stack"
+      style={{ gap: 32, justifyContent: "center" }}
+    >
+      {/* Header */}
+      <SlideHeader label={label} heading={heading} />
+
+      {/* Cards */}
+      <div
+        style={{
+          display: "grid",
+          gridTemplateColumns: `repeat(${challenges.length}, 1fr)`,
+          gap: 20,
+        }}
+      >
+        {challenges.map((c, i) => (
+          <div
+            key={i}
+            style={{
+              backgroundColor: "var(--color-card-background)",
+              borderRadius: 18,
+              padding: 0,
+              boxShadow: "4px 4px 12px rgba(0,0,0,0.06)",
+              display: "flex",
+              flexDirection: "column",
+              overflow: "hidden",
+            }}
+          >
+            {/* Content */}
+            <div style={{ padding: "24px 24px 28px", display: "flex", flexDirection: "column", gap: 16 }}>
+              {/* Title */}
+              <span
+                style={{
+                  fontSize: 21,
+                  fontWeight: 600,
+                  fontFamily: "var(--font-heading)",
+                  letterSpacing: "-0.022em",
+                  color: "var(--color-foreground)",
+                  lineHeight: 1.24,
+                }}
+              >
+                {c.title}
+              </span>
+              <div style={{ color: "var(--color-muted-foreground)" }}>
+                <Icon name={c.icon} size={48} />
+              </div>
+
+              <ul
+                style={{
+                  listStyle: "none",
+                  margin: 0,
+                  padding: 0,
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: 8,
+                }}
+              >
+                {c.items.map((item, j) => (
+                  <li
+                    key={j}
+                    style={{
+                      fontSize: 14,
+                      fontWeight: 400,
+                      fontFamily: "var(--font-body)",
+                      letterSpacing: "-0.016em",
+                      lineHeight: 1.43,
+                      color: "var(--color-foreground)",
+                      paddingLeft: 14,
+                      position: "relative",
+                    }}
+                  >
+                    <span
+                      style={{
+                        position: "absolute",
+                        left: 0,
+                        top: 0,
+                        color: "var(--color-muted-foreground)",
+                      }}
+                    >
+                      &#x2022;
+                    </span>
+                    {item}
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/patterns/chart-bar/index.tsx

@@ -0,0 +1,107 @@
+import { z } from "zod";
+import { BarChart, Bar, CartesianGrid, XAxis, YAxis, Tooltip } from "recharts";
+
+const dataSchema = z.object({
+  label: z.string().min(1).describe("Category label"),
+  value: z.number().describe("Bar value"),
+  value2: z.number().optional().describe("Second bar value"),
+});
+
+export const schema = z.object({
+  label: z.string().min(1).max(30).optional().describe("Accent eyebrow"),
+  heading: z.string().min(1).max(60).describe("Chart heading"),
+  data: z.array(dataSchema).min(2).max(8).describe("Bar data"),
+  series1Name: z.string().optional().describe("First series name"),
+  series2Name: z.string().optional().describe("Second series name"),
+});
+
+type Props = z.infer<typeof schema>;
+
+export default function ChartBarPattern({ label, heading, data, series1Name, series2Name }: Props) {
+  const hasSecond = data.some((d) => d.value2 !== undefined);
+
+  return (
+    <div
+      className="slide"
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        background: "#ffffff",
+        padding: "48px 80px",
+        gap: 32,
+      }}
+    >
+      {/* Header */}
+      <div>
+        {label && (
+          <span
+            style={{
+              fontSize: 17,
+              fontWeight: 600,
+              letterSpacing: "-0.022em",
+              color: "var(--color-primary)",
+              display: "block",
+              marginBottom: 8,
+            }}
+          >
+            {label}
+          </span>
+        )}
+        <h2
+          style={{
+            fontSize: 40,
+            fontWeight: 600,
+            lineHeight: 1.1,
+            letterSpacing: "-0.009em",
+          }}
+        >
+          {heading}
+        </h2>
+      </div>
+
+      {/* Legend */}
+      {hasSecond && (
+        <div style={{ display: "flex", gap: 24 }}>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <div style={{ width: 12, height: 12, borderRadius: 3, backgroundColor: "#0071e3" }} />
+            <span style={{ fontSize: 14, color: "#6e6e73" }}>{series1Name ?? "Series 1"}</span>
+          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+            <div style={{ width: 12, height: 12, borderRadius: 3, backgroundColor: "#1d1d1f" }} />
+            <span style={{ fontSize: 14, color: "#6e6e73" }}>{series2Name ?? "Series 2"}</span>
+          </div>
+        </div>
+      )}
+
+      {/* Chart — fixed size for SSR */}
+      <div style={{ flex: 1, display: "flex", alignItems: "center", justifyContent: "center" }}>
+        <BarChart width={1020} height={380} data={data} margin={{ top: 8, right: 8, bottom: 8, left: 0 }}>
+          <CartesianGrid strokeDasharray="3 3" stroke="rgba(0,0,0,0.06)" vertical={false} />
+          <XAxis
+            dataKey="label"
+            tick={{ fontSize: 13, fill: "#6e6e73" }}
+            axisLine={{ stroke: "rgba(0,0,0,0.08)" }}
+            tickLine={false}
+          />
+          <YAxis
+            tick={{ fontSize: 13, fill: "#6e6e73" }}
+            axisLine={false}
+            tickLine={false}
+          />
+          <Tooltip
+            contentStyle={{
+              backgroundColor: "#fff",
+              border: "1px solid rgba(0,0,0,0.08)",
+              borderRadius: 8,
+              fontSize: 13,
+            }}
+          />
+          <Bar dataKey="value" fill="#0071e3" radius={[4, 4, 0, 0]} name={series1Name} />
+          {hasSecond && (
+            <Bar dataKey="value2" fill="#1d1d1f" radius={[4, 4, 0, 0]} name={series2Name} />
+          )}
+        </BarChart>
+      </div>
+    </div>
+  );
+}