failproofai 0.0.11-beta.1 → 0.0.11-beta.11

package/.next/standalone/app/audit/_components/sigil.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+/**
+ * Pixel sigil — 8×8 grid for the archetype. Bare implementation: no plate,
+ * no crosshairs, no reveal animation. The poster owns whatever framing it
+ * wants around the sigil.
+ *
+ * Cell letters: `.` empty · `o` ink · `p` pink accent · `g` green accent ·
+ * `d` dim.
+ */
+import React from "react";
+import { SIGILS, type ArchetypeKey } from "@/src/audit/archetypes";
+
+interface Props {
+  archetypeKey: ArchetypeKey;
+}
+
+export function Sigil({ archetypeKey }: Props) {
+  const grid = SIGILS[archetypeKey] ?? SIGILS.optimist;
+  const cells: React.ReactElement[] = [];
+
+  for (let y = 0; y < 8; y++) {
+    const row = grid[y] ?? "........";
+    for (let x = 0; x < 8; x++) {
+      const c = row[x] ?? ".";
+      let cls = "px";
+      if (c === "o") cls += " on";
+      else if (c === "p") cls += " p";
+      else if (c === "g") cls += " g";
+      else if (c === "d") cls += " d";
+      cells.push(<div key={`${y}-${x}`} className={cls} />);
+    }
+  }
+
+  return <div className="sigil">{cells}</div>;
+}

package/.next/standalone/app/audit/_components/strengths-section.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+/**
+ * Section 02 — STRENGTHS. "what it's great at." Calm row list:
+ * ✓ glyph · headline + sub · right-aligned metric. No card chrome,
+ * no hover backgrounds, no checkmark backdrop.
+ */
+import React from "react";
+import type { Strength } from "@/src/audit/strengths";
+
+interface Props {
+  strengths: Strength[];
+}
+
+export function StrengthsSection({ strengths }: Props) {
+  if (strengths.length === 0) return null;
+
+  return (
+    <section className="audit-sec" data-screen-label="02 Strengths">
+      <div className="audit-sec-head">
+        <span className="audit-sec-eyebrow">
+          <span className="ix">02</span>{"// strengths"}
+        </span>
+        <span className="audit-sec-meta">{strengths.length} standouts</span>
+      </div>
+      <h2 className="audit-sec-title">what it&apos;s great at</h2>
+
+      <div className="strength-list">
+        {strengths.map((s, i) => (
+          <div key={i} className="strength-row">
+            <span className="strength-check" aria-hidden="true">✓</span>
+            <span className="strength-body">
+              <span className="strength-headline">{s.headline}</span>
+              <span className="strength-detail">{s.detail}</span>
+            </span>
+            <span className="strength-metric">
+              {s.metric}
+              {s.unit && <span className="unit">{s.unit}</span>}
+            </span>
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}