@leanspec/ui 0.2.6-dev.20251125092944 → 0.2.6-dev.20251125125653

package/.next/standalone/packages/ui/.next/static/chunks/turbopack-5fa55215af0efb15.js

@@ -0,0 +1,3 @@
+(globalThis.TURBOPACK||(globalThis.TURBOPACK=[])).push(["object"==typeof document?document.currentScript:void 0,{otherChunks:["static/chunks/b8353eb8c6fb895e.js","static/chunks/f0376ba3b56dbf10.js","static/chunks/1f052e076ca9a3ff.js","static/chunks/0f108f65249f8820.js","static/chunks/2a33b9246ea4be03.js"],runtimeModuleIds:[979757]}]),(()=>{let e;if(!Array.isArray(globalThis.TURBOPACK))return;let t="/_next/",r=new WeakMap;function n(e,t){this.m=e,this.e=t}let o=n.prototype,l=Object.prototype.hasOwnProperty,i="undefined"!=typeof Symbol&&Symbol.toStringTag;function s(e,t,r){l.call(e,t)||Object.defineProperty(e,t,r)}function u(e,t){let r=e[t];return r||(r=a(t),e[t]=r),r}function a(e){return{exports:{},error:void 0,id:e,namespaceObject:void 0}}function c(e,t){s(e,"__esModule",{value:!0}),i&&s(e,i,{value:"Module"});let r=0;for(;r<t.length;){let n=t[r++],o=t[r++];if("number"==typeof o)if(0===o)s(e,n,{value:t[r++],enumerable:!0,writable:!1});else throw Error(`unexpected tag: ${o}`);else"function"==typeof t[r]?s(e,n,{get:o,set:t[r++],enumerable:!0}):s(e,n,{get:o,enumerable:!0})}Object.seal(e)}o.s=function(e,t){let r,n;null!=t?n=(r=u(this.c,t)).exports:(r=this.m,n=this.e),r.namespaceObject=n,c(n,e)},o.j=function(e,t){var n,o;let i,s,a;null!=t?s=(i=u(this.c,t)).exports:(i=this.m,s=this.e);let c=(n=i,o=s,(a=r.get(n))||(r.set(n,a=[]),n.exports=n.namespaceObject=new Proxy(o,{get(e,t){if(l.call(e,t)||"default"===t||"__esModule"===t)return Reflect.get(e,t);for(let e of a){let r=Reflect.get(e,t);if(void 0!==r)return r}},ownKeys(e){let t=Reflect.ownKeys(e);for(let e of a)for(let r of Reflect.ownKeys(e))"default"===r||t.includes(r)||t.push(r);return t}})),a);"object"==typeof e&&null!==e&&c.push(e)},o.v=function(e,t){(null!=t?u(this.c,t):this.m).exports=e},o.n=function(e,t){let r;(r=null!=t?u(this.c,t):this.m).exports=r.namespaceObject=e};let f=Object.getPrototypeOf?e=>Object.getPrototypeOf(e):e=>e.__proto__,p=[null,f({}),f([]),f(f)];function h(e,t,r){let n=[],o=-1;for(let t=e;("object"==typeof t||"function"==typeof t)&&!p.includes(t);t=f(t))for(let r of Object.getOwnPropertyNames(t))n.push(r,function(e,t){return()=>e[t]}(e,r)),-1===o&&"default"===r&&(o=n.length-1);return r&&o>=0||(o>=0?n.splice(o,1,0,e):n.push("default",0,e)),c(t,n),t}function d(e){let t=N(e,this.m);if(t.namespaceObject)return t.namespaceObject;let r=t.exports;return t.namespaceObject=h(r,"function"==typeof r?function(...e){return r.apply(this,e)}:Object.create(null),r&&r.__esModule)}function m(){let e,t;return{promise:new Promise((r,n)=>{t=n,e=r}),resolve:e,reject:t}}o.i=d,o.A=function(e){return this.r(e)(d.bind(this))},o.t="function"==typeof require?require:function(){throw Error("Unexpected use of runtime require")},o.r=function(e){return N(e,this.m).exports},o.f=function(e){function t(t){if(l.call(e,t))return e[t].module();let r=Error(`Cannot find module '${t}'`);throw r.code="MODULE_NOT_FOUND",r}return t.keys=()=>Object.keys(e),t.resolve=t=>{if(l.call(e,t))return e[t].id();let r=Error(`Cannot find module '${t}'`);throw r.code="MODULE_NOT_FOUND",r},t.import=async e=>await t(e),t};let b=Symbol("turbopack queues"),y=Symbol("turbopack exports"),O=Symbol("turbopack error");function g(e){e&&1!==e.status&&(e.status=1,e.forEach(e=>e.queueCount--),e.forEach(e=>e.queueCount--?e.queueCount++:e()))}o.a=function(e,t){let r=this.m,n=t?Object.assign([],{status:-1}):void 0,o=new Set,{resolve:l,reject:i,promise:s}=m(),u=Object.assign(s,{[y]:r.exports,[b]:e=>{n&&e(n),o.forEach(e),u.catch(()=>{})}}),a={get:()=>u,set(e){e!==u&&(u[y]=e)}};Object.defineProperty(r,"exports",a),Object.defineProperty(r,"namespaceObject",a),e(function(e){let t=e.map(e=>{if(null!==e&&"object"==typeof e){if(b in e)return e;if(null!=e&&"object"==typeof e&&"then"in e&&"function"==typeof e.then){let t=Object.assign([],{status:0}),r={[y]:{},[b]:e=>e(t)};return e.then(e=>{r[y]=e,g(t)},e=>{r[O]=e,g(t)}),r}}return{[y]:e,[b]:()=>{}}}),r=()=>t.map(e=>{if(e[O])throw e[O];return e[y]}),{promise:l,resolve:i}=m(),s=Object.assign(()=>i(r),{queueCount:0});function u(e){e!==n&&!o.has(e)&&(o.add(e),e&&0===e.status&&(s.queueCount++,e.push(s)))}return t.map(e=>e[b](u)),s.queueCount?l:r()},function(e){e?i(u[O]=e):l(u[y]),g(n)}),n&&-1===n.status&&(n.status=0)};let w=function(e){let t=new URL(e,"x:/"),r={};for(let e in t)r[e]=t[e];for(let t in r.href=e,r.pathname=e.replace(/[?#].*/,""),r.origin=r.protocol="",r.toString=r.toJSON=(...t)=>e,r)Object.defineProperty(this,t,{enumerable:!0,configurable:!0,value:r[t]})};function j(e,t){throw Error(`Invariant: ${t(e)}`)}w.prototype=URL.prototype,o.U=w,o.z=function(e){throw Error("dynamic usage of require is not supported")},o.g=globalThis;let R=n.prototype;var C,U=((C=U||{})[C.Runtime=0]="Runtime",C[C.Parent=1]="Parent",C[C.Update=2]="Update",C);let k=new Map;o.M=k;let v=new Map,_=new Map;async function P(e,t,r){let n;if("string"==typeof r)return A(e,t,S(r));let o=r.included||[],l=o.map(e=>!!k.has(e)||v.get(e));if(l.length>0&&l.every(e=>e))return void await Promise.all(l);let i=r.moduleChunks||[],s=i.map(e=>_.get(e)).filter(e=>e);if(s.length>0){if(s.length===i.length)return void await Promise.all(s);let r=new Set;for(let e of i)_.has(e)||r.add(e);for(let n of r){let r=A(e,t,S(n));_.set(n,r),s.push(r)}n=Promise.all(s)}else{for(let o of(n=A(e,t,S(r.path)),i))_.has(o)||_.set(o,n)}for(let e of o)v.has(e)||v.set(e,n);await n}R.l=function(e){return P(1,this.m.id,e)};let $=Promise.resolve(void 0),T=new WeakMap;function A(t,r,n){let o=e.loadChunkCached(t,n),l=T.get(o);if(void 0===l){let e=T.set.bind(T,o,$);l=o.then(e).catch(e=>{let o;switch(t){case 0:o=`as a runtime dependency of chunk ${r}`;break;case 1:o=`from module ${r}`;break;case 2:o="from an HMR update";break;default:j(t,e=>`Unknown source type: ${e}`)}throw Error(`Failed to load chunk ${n} ${o}${e?`: ${e}`:""}`,e?{cause:e}:void 0)}),T.set(o,l)}return l}function S(e){return`${t}${e.split("/").map(e=>encodeURIComponent(e)).join("/")}`}R.L=function(e){return A(1,this.m.id,e)},R.R=function(e){let t=this.r(e);return t?.default??t},R.P=function(e){return`/ROOT/${e??""}`},R.b=function(e){let t=new Blob([`self.TURBOPACK_WORKER_LOCATION = ${JSON.stringify(location.origin)};
+self.TURBOPACK_NEXT_CHUNK_URLS = ${JSON.stringify(e.reverse().map(S),null,2)};
+importScripts(...self.TURBOPACK_NEXT_CHUNK_URLS.map(c => self.TURBOPACK_WORKER_LOCATION + c).reverse());`],{type:"text/javascript"});return URL.createObjectURL(t)};let E=/\.js(?:\?[^#]*)?(?:#.*)?$/,K=/\.css(?:\?[^#]*)?(?:#.*)?$/;function x(e){return K.test(e)}o.w=function(t,r,n){return e.loadWebAssembly(1,this.m.id,t,r,n)},o.u=function(t,r){return e.loadWebAssemblyModule(1,this.m.id,t,r)};let M={};o.c=M;let N=(e,t)=>{let r=M[e];if(r){if(r.error)throw r.error;return r}return L(e,U.Parent,t.id)};function L(e,t,r){let o=k.get(e);if("function"!=typeof o)throw Error(function(e,t,r){let n;switch(t){case 0:n=`as a runtime entry of chunk ${r}`;break;case 1:n=`because it was required from module ${r}`;break;case 2:n="because of an HMR update";break;default:j(t,e=>`Unknown source type: ${e}`)}return`Module ${e} was instantiated ${n}, but the module factory is not available.`}(e,t,r));let l=a(e),i=l.exports;M[e]=l;let s=new n(l,i);try{o(s,l,i)}catch(e){throw l.error=e,e}return l.namespaceObject&&l.exports!==l.namespaceObject&&h(l.exports,l.namespaceObject),l}function q(r){let n,o=function(e){if("string"==typeof e)return e;let r=decodeURIComponent(("undefined"!=typeof TURBOPACK_NEXT_CHUNK_URLS?TURBOPACK_NEXT_CHUNK_URLS.pop():e.getAttribute("src")).replace(/[?#].*$/,""));return r.startsWith(t)?r.slice(t.length):r}(r[0]);return 2===r.length?n=r[1]:(n=void 0,!function(e,t,r,n){let o=1;for(;o<e.length;){let t=e[o],n=o+1;for(;n<e.length&&"function"!=typeof e[n];)n++;if(n===e.length)throw Error("malformed chunk format, expected a factory function");if(!r.has(t)){let l=e[n];for(Object.defineProperty(l,"name",{value:"module evaluation"});o<n;o++)t=e[o],r.set(t,l)}o=n+1}}(r,0,k)),e.registerChunk(o,n)}let B=new Map;function W(e){let t=B.get(e);if(!t){let r,n;t={resolved:!1,loadingStarted:!1,promise:new Promise((e,t)=>{r=e,n=t}),resolve:()=>{t.resolved=!0,r()},reject:n},B.set(e,t)}return t}e={async registerChunk(e,t){if(W(S(e)).resolve(),null!=t){for(let e of t.otherChunks)W(S("string"==typeof e?e:e.path));if(await Promise.all(t.otherChunks.map(t=>P(0,e,t))),t.runtimeModuleIds.length>0)for(let r of t.runtimeModuleIds)!function(e,t){let r=M[t];if(r){if(r.error)throw r.error;return}L(t,U.Runtime,e)}(e,r)}},loadChunkCached:(e,t)=>(function(e,t){let r=W(t);if(r.loadingStarted)return r.promise;if(e===U.Runtime)return r.loadingStarted=!0,x(t)&&r.resolve(),r.promise;if("function"==typeof importScripts)if(x(t));else if(E.test(t))self.TURBOPACK_NEXT_CHUNK_URLS.push(t),importScripts(TURBOPACK_WORKER_LOCATION+t);else throw Error(`can't infer type of chunk from URL ${t} in worker`);else{let e=decodeURI(t);if(x(t))if(document.querySelectorAll(`link[rel=stylesheet][href="${t}"],link[rel=stylesheet][href^="${t}?"],link[rel=stylesheet][href="${e}"],link[rel=stylesheet][href^="${e}?"]`).length>0)r.resolve();else{let e=document.createElement("link");e.rel="stylesheet",e.href=t,e.onerror=()=>{r.reject()},e.onload=()=>{r.resolve()},document.head.appendChild(e)}else if(E.test(t)){let n=document.querySelectorAll(`script[src="${t}"],script[src^="${t}?"],script[src="${e}"],script[src^="${e}?"]`);if(n.length>0)for(let e of Array.from(n))e.addEventListener("error",()=>{r.reject()});else{let e=document.createElement("script");e.src=t,e.onerror=()=>{r.reject()},document.head.appendChild(e)}}else throw Error(`can't infer type of chunk from URL ${t}`)}return r.loadingStarted=!0,r.promise})(e,t),async loadWebAssembly(e,t,r,n,o){let l=fetch(S(r)),{instance:i}=await WebAssembly.instantiateStreaming(l,o);return i.exports},async loadWebAssemblyModule(e,t,r,n){let o=fetch(S(r));return await WebAssembly.compileStreaming(o)}};let I=globalThis.TURBOPACK;globalThis.TURBOPACK={push:q},I.forEach(q)})();

package/.next/standalone/packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leanspec/ui",
-  "version": "0.2.6-dev.20251125092944",
+  "version": "0.2.6-dev.20251125125653",
   "description": "LeanSpec web UI launcher for visual spec management",
   "type": "module",
   "bin": {
@@ -78,6 +78,7 @@
     "highlight.js": "^11.11.1",
     "js-yaml": "^4.1.0",
     "lucide-react": "^0.553.0",
+    "mermaid": "^11.12.1",
     "next": "16.0.1",
     "next-themes": "^0.4.6",
     "open": "^11.0.0",

package/.next/standalone/packages/ui/src/components/mermaid-diagram.test.ts

@@ -0,0 +1,92 @@
+/**
+ * Tests for MermaidDiagram component logic
+ */
+
+import { describe, it, expect } from 'vitest';
+
+/**
+ * Helper function to extract mermaid code from a pre/code block
+ * This mirrors the logic used in spec-detail-client.tsx to determine
+ * if a code block should be rendered as a mermaid diagram
+ */
+function shouldRenderAsMermaid(className: string | undefined): boolean {
+  if (!className) return false;
+  return className.includes('language-mermaid');
+}
+
+/**
+ * Helper function to extract the mermaid code from child content
+ * Returns the code as a string, trimmed for rendering
+ */
+function extractMermaidCode(children: unknown): string {
+  if (typeof children === 'string') {
+    return children.trim();
+  }
+  return '';
+}
+
+describe('Mermaid diagram detection', () => {
+  it('detects mermaid language class', () => {
+    expect(shouldRenderAsMermaid('language-mermaid')).toBe(true);
+    expect(shouldRenderAsMermaid('hljs language-mermaid')).toBe(true);
+    expect(shouldRenderAsMermaid('language-mermaid hljs')).toBe(true);
+  });
+
+  it('does not match other language classes', () => {
+    expect(shouldRenderAsMermaid('language-javascript')).toBe(false);
+    expect(shouldRenderAsMermaid('language-typescript')).toBe(false);
+    expect(shouldRenderAsMermaid('language-markdown')).toBe(false);
+    expect(shouldRenderAsMermaid(undefined)).toBe(false);
+    expect(shouldRenderAsMermaid('')).toBe(false);
+  });
+});
+
+describe('Mermaid code extraction', () => {
+  it('extracts string content directly', () => {
+    const code = 'graph TD\n  A --> B';
+    expect(extractMermaidCode(code)).toBe('graph TD\n  A --> B');
+  });
+
+  it('trims whitespace from content', () => {
+    const code = '  \ngraph TD\n  A --> B\n  ';
+    expect(extractMermaidCode(code)).toBe('graph TD\n  A --> B');
+  });
+
+  it('returns empty string for non-string content', () => {
+    expect(extractMermaidCode(null)).toBe('');
+    expect(extractMermaidCode(undefined)).toBe('');
+    expect(extractMermaidCode(123)).toBe('');
+    expect(extractMermaidCode({})).toBe('');
+  });
+});
+
+describe('Mermaid diagram types', () => {
+  const validDiagrams = [
+    // Flowchart
+    'graph TD\n  A --> B',
+    'graph LR\n  A --> B --> C',
+    'flowchart TB\n  Start --> Stop',
+    // Sequence diagram
+    'sequenceDiagram\n  Alice->>John: Hello John',
+    // Class diagram
+    'classDiagram\n  Class01 <|-- Class02',
+    // State diagram
+    'stateDiagram-v2\n  [*] --> Still',
+    // ER diagram
+    'erDiagram\n  CUSTOMER ||--o{ ORDER : places',
+    // Gantt chart
+    'gantt\n  title A Gantt Diagram\n  section Section',
+    // Pie chart
+    'pie title Pets\n  "Dogs" : 386',
+  ];
+
+  validDiagrams.forEach((diagram) => {
+    const type = diagram.split('\n')[0].split(' ')[0];
+    it(`recognizes ${type} diagram syntax`, () => {
+      // These are valid mermaid diagrams that should be detected
+      const extracted = extractMermaidCode(diagram);
+      expect(extracted).toBeTruthy();
+      expect(extracted.length).toBeGreaterThan(0);
+    });
+  });
+});

package/.next/standalone/packages/ui/src/components/mermaid-diagram.tsx

@@ -0,0 +1,139 @@
+'use client';
+
+import * as React from 'react';
+import { useTheme } from 'next-themes';
+import { Skeleton } from '@/components/ui/skeleton';
+import { Button } from '@/components/ui/button';
+import { Code2, AlertCircle } from 'lucide-react';
+
+interface MermaidDiagramProps {
+  code: string;
+}
+
+// Counter for generating unique IDs
+let diagramIdCounter = 0;
+
+export function MermaidDiagram({ code }: MermaidDiagramProps) {
+  const containerRef = React.useRef<HTMLDivElement>(null);
+  const [svg, setSvg] = React.useState<string>('');
+  const [error, setError] = React.useState<string | null>(null);
+  const [isLoading, setIsLoading] = React.useState(true);
+  const [showSource, setShowSource] = React.useState(false);
+  const { resolvedTheme } = useTheme();
+  const [mounted, setMounted] = React.useState(false);
+
+  // Track mount state for SSR safety
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  // Render the mermaid diagram
+  React.useEffect(() => {
+    if (!mounted) return;
+
+    const renderDiagram = async () => {
+      setIsLoading(true);
+      setError(null);
+
+      try {
+        // Dynamically import mermaid to avoid SSR issues
+        const mermaid = (await import('mermaid')).default;
+
+        mermaid.initialize({
+          startOnLoad: false,
+          theme: resolvedTheme === 'dark' ? 'dark' : 'default',
+          // Use 'strict' for security - specs are developer-authored
+          // but we still want to prevent potential XSS from code blocks
+          securityLevel: 'strict',
+          fontFamily: 'inherit',
+        });
+
+        // Generate unique ID for the diagram using counter
+        const id = `mermaid-${Date.now()}-${++diagramIdCounter}`;
+        const cleanedCode = code.trim();
+
+        const { svg: renderedSvg } = await mermaid.render(id, cleanedCode);
+        setSvg(renderedSvg);
+        setError(null);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : 'Diagram render failed';
+        setError(errorMessage);
+        setSvg('');
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    renderDiagram();
+  }, [code, resolvedTheme, mounted]);
+
+  // Show skeleton during SSR or initial mount
+  if (!mounted) {
+    return <DiagramSkeleton />;
+  }
+
+  // Show loading state
+  if (isLoading) {
+    return <DiagramSkeleton />;
+  }
+
+  // Show error state with fallback to source
+  if (error) {
+    return (
+      <div className="my-4 border border-destructive/50 bg-destructive/10 rounded-md overflow-hidden">
+        <div className="flex items-center gap-2 px-4 py-2 bg-destructive/20 border-b border-destructive/30">
+          <AlertCircle className="h-4 w-4 text-destructive" />
+          <span className="text-sm font-medium text-destructive">Diagram error</span>
+        </div>
+        <div className="p-4">
+          <p className="text-sm text-destructive mb-3">{error}</p>
+          <pre className="text-xs overflow-x-auto bg-muted/50 p-3 rounded border">
+            <code>{code}</code>
+          </pre>
+        </div>
+      </div>
+    );
+  }
+
+  // Show rendered diagram with source toggle
+  return (
+    <div className="my-4 border rounded-md overflow-hidden">
+      <div className="flex items-center justify-end px-3 py-1.5 bg-muted/30 border-b">
+        <Button
+          variant="ghost"
+          size="sm"
+          onClick={() => setShowSource(!showSource)}
+          className="h-7 text-xs"
+        >
+          <Code2 className="h-3.5 w-3.5 mr-1.5" />
+          {showSource ? 'View Diagram' : 'View Source'}
+        </Button>
+      </div>
+
+      {showSource ? (
+        <pre className="text-xs overflow-x-auto p-4 bg-muted/20">
+          <code className="language-mermaid">{code}</code>
+        </pre>
+      ) : (
+        <div
+          ref={containerRef}
+          className="flex justify-center overflow-x-auto p-4 bg-background"
+          dangerouslySetInnerHTML={{ __html: svg }}
+        />
+      )}
+    </div>
+  );
+}
+
+function DiagramSkeleton() {
+  return (
+    <div className="my-4 border rounded-md overflow-hidden">
+      <div className="flex items-center justify-end px-3 py-1.5 bg-muted/30 border-b">
+        <Skeleton className="h-7 w-24" />
+      </div>
+      <div className="flex justify-center items-center p-8">
+        <Skeleton className="h-48 w-full max-w-md" />
+      </div>
+    </div>
+  );
+}

package/.next/standalone/packages/ui/src/components/spec-detail-client.tsx

@@ -21,6 +21,7 @@ import { MarkdownLink } from '@/components/markdown-link';
 import { TableOfContents, TableOfContentsSidebar } from '@/components/table-of-contents';
 import { BackToTop } from '@/components/back-to-top';
 import { SpecDependencyGraph } from '@/components/spec-dependency-graph';
+import { MermaidDiagram } from '@/components/mermaid-diagram';
 import {
   Dialog,
   DialogContent,
@@ -411,6 +412,27 @@ export function SpecDetailClient({ initialSpec, initialSubSpec }: SpecDetailClie
                 rehypePlugins={[rehypeHighlight, rehypeSlug]}
                 components={{
                   a: (props) => <MarkdownLink {...props} currentSpecNumber={spec.specNumber || undefined} />,
+                  pre: ({ children, ...props }) => {
+                    // Safely get the first child element
+                    const childArray = React.Children.toArray(children);
+                    const firstChild = childArray[0];
+                    
+                    // Check if this is a mermaid code block
+                    if (
+                      React.isValidElement(firstChild) &&
+                      firstChild.type === 'code' &&
+                      typeof (firstChild.props as { className?: string }).className === 'string' &&
+                      (firstChild.props as { className?: string }).className?.includes('language-mermaid')
+                    ) {
+                      const codeProps = firstChild.props as { children?: React.ReactNode };
+                      const code = typeof codeProps.children === 'string'
+                        ? codeProps.children
+                        : '';
+                      return <MermaidDiagram code={code} />;
+                    }
+                    // Default pre rendering
+                    return <pre {...props}>{children}</pre>;
+                  },
                 }}
               >
                 {displayContent}