plannar 0.0.1

package/dist/editor/src/plan-list.tsx

@@ -0,0 +1,42 @@
+import { plans, plansDir } from "virtual:plannar-plans";
+
+interface PlanListProps {
+  navigate: (to: string) => void;
+}
+
+export function PlanList({ navigate }: PlanListProps) {
+  const planList = plans.map((f) => f.replace(/\.mdx$/, ""));
+
+  if (planList.length === 0) {
+    return (
+      <div>
+        <h1>Plannar Editor</h1>
+        <p>No plans found in {plansDir}.</p>
+        <p>
+          Run <code>plannar init</code> to create your first plan.
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div>
+      <h1>Plans</h1>
+      <ul>
+        {planList.map((name) => (
+          <li key={name}>
+            <a
+              href={`/${name}`}
+              onClick={(e) => {
+                e.preventDefault();
+                navigate(`/${name}`);
+              }}
+            >
+              {name}
+            </a>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}

package/dist/editor/src/plan-view.tsx

@@ -0,0 +1,107 @@
+import { Suspense, lazy, useMemo, useEffect, useRef } from "react";
+import { useCommentState } from "./comment-state.js";
+import { CommentOverlay } from "./comment-overlay.js";
+
+interface PlanViewProps {
+  slug: string;
+  navigate: (to: string) => void;
+}
+
+function PlanNotFound({ slug, navigate }: { slug: string; navigate: (to: string) => void }) {
+  return (
+    <div>
+      <h1>Plan not found</h1>
+      <p>
+        No plan named <code>{slug}</code> found.
+      </p>
+      <p>
+        <a
+          href="/"
+          onClick={(e) => {
+            e.preventDefault();
+            navigate("/");
+          }}
+        >
+          &larr; Back
+        </a>
+      </p>
+    </div>
+  );
+}
+
+function Loading() {
+  return <p>Loading plan...</p>;
+}
+
+function createPlanComponent(slug: string, navigate: (to: string) => void) {
+  return lazy(() =>
+    import(/* @vite-ignore */ `/__plannar/plan/${slug}.js`).catch(() => ({
+      default: () => <PlanNotFound slug={slug} navigate={navigate} />,
+    })),
+  );
+}
+
+function clearCommentable(root: HTMLElement) {
+  for (const el of root.querySelectorAll("[data-commentable]")) {
+    delete (el as HTMLElement).dataset.commentable;
+    delete (el as HTMLElement).dataset.commentableText;
+  }
+}
+
+function MarkCommentable({ children }: { children: React.ReactNode }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const { mode } = useCommentState();
+
+  useEffect(() => {
+    if (!ref.current) return;
+    clearCommentable(ref.current);
+    if (!mode) return;
+    const headings = ref.current.querySelectorAll("h1, h2, h3, h4, h5, h6");
+    for (const el of headings) {
+      (el as HTMLElement).dataset.commentable = "heading";
+      (el as HTMLElement).dataset.commentableText = el.textContent?.slice(0, 120) || "";
+    }
+    const codeBlocks = ref.current.querySelectorAll("figure[data-rehype-pretty-code-figure], pre");
+    for (const el of codeBlocks) {
+      (el as HTMLElement).dataset.commentable = "code";
+      (el as HTMLElement).dataset.commentableText = el.textContent?.slice(0, 120) || "";
+    }
+    const allChildren = ref.current.querySelectorAll(
+      "p, ul, ol, blockquote, table, input, textarea, button, select, label",
+    );
+    for (const el of allChildren) {
+      if ((el as HTMLElement).dataset.commentable) continue;
+      (el as HTMLElement).dataset.commentable = "block";
+      (el as HTMLElement).dataset.commentableText = el.textContent?.slice(0, 120) || "";
+    }
+  }, [mode, children]);
+
+  return <div ref={ref}>{children}</div>;
+}
+
+export function PlanView({ slug, navigate }: PlanViewProps) {
+  const PlanComponent = useMemo(() => createPlanComponent(slug, navigate), [slug, navigate]);
+
+  return (
+    <div>
+      <p>
+        <a
+          href="/"
+          onClick={(e) => {
+            e.preventDefault();
+            navigate("/");
+          }}
+        >
+          &larr; All plans
+        </a>
+      </p>
+      <CommentOverlay planFile={`${slug}.mdx`}>
+        <MarkCommentable>
+          <Suspense fallback={<Loading />}>
+            <PlanComponent />
+          </Suspense>
+        </MarkCommentable>
+      </CommentOverlay>
+    </div>
+  );
+}

package/dist/editor/src/plannar.d.ts

@@ -0,0 +1,6 @@
+declare module "virtual:plannar-global-css" {}
+
+declare module "virtual:plannar-plans" {
+  export const plans: string[];
+  export const plansDir: string;
+}

package/dist/editor/src/prompt-dialog.tsx

@@ -0,0 +1,61 @@
+import { useState, useCallback } from "react";
+import { Copy, Check } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "./components/ui/dialog.js";
+import { useCommentState } from "./comment-state.js";
+import { generatePrompt } from "./grep-source.js";
+
+type PromptDialogProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function PromptDialog({ open, onOpenChange }: PromptDialogProps) {
+  const { comments } = useCommentState();
+  const [copied, setCopied] = useState(false);
+
+  const prompt = generatePrompt(comments);
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText(prompt).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }, [prompt]);
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>Generated Prompt</DialogTitle>
+          <DialogDescription>Ready to paste into any LLM</DialogDescription>
+        </DialogHeader>
+
+        <div className="bg-zinc-950 rounded-lg p-4 overflow-auto max-h-80">
+          <pre className="whitespace-pre-wrap text-[12px] leading-relaxed text-zinc-300 font-mono">
+            <code>{prompt || "No comments to generate."}</code>
+          </pre>
+        </div>
+
+        <div className="flex items-center justify-between text-[10px] text-muted-foreground">
+          <span>
+            {comments.length} comment{comments.length !== 1 ? "s" : ""}
+          </span>
+          <button
+            onClick={handleCopy}
+            disabled={!prompt}
+            className="inline-flex items-center gap-1.5 rounded-lg border border-border bg-background px-2.5 py-1 text-xs text-foreground hover:bg-muted disabled:opacity-50"
+          >
+            {copied ? <Check className="size-3 text-green-500" /> : <Copy className="size-3" />}
+            {copied ? "Copied" : "Copy"}
+          </button>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/dist/editor/src/sample.mdx

@@ -0,0 +1,69 @@
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+
+# Plannar Editor
+
+A comprehensive MDX renderer with state binding playgrounds.
+
+## Features
+
+- **GitHub Flavored Markdown** via `remark-gfm`
+- **Syntax highlighting** via `rehype-pretty-code`
+- **Auto-linked headings** via `rehype-autolink-headings`
+- **shadcn/ui** components in playgrounds
+
+### Code Example
+
+```ts
+function hello(name: string): string {
+  return `Hello, ${name}!`;
+}
+```
+
+### GFM Table
+
+| Feature | Status |
+| ------- | ------ |
+| GFM     | ✓      |
+| Code    | ✓      |
+| State   | ✓      |
+
+## Playground
+
+Native `<input>` with `bind="text:'Hello world'"` auto-wires `value` + `onChange`:
+
+<Playground>
+  <input
+    bind="text:'Hello world'"
+    placeholder="Type something..."
+    className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm"
+  />
+  <p>You typed: {text}</p>
+</Playground>
+
+`<Button>` with `bind="count:0"` creates state only — you wire `onClick` manually:
+
+<Playground>
+  <Button bind="count:0" onClick={() => setCount(count + 1)} variant="outline">
+    Clicked {count} times
+  </Button>
+</Playground>
+
+`<Checkbox>` with `bind="checked:true"` auto-wires `checked` + `onCheckedChange`:
+
+<Playground>
+  <label>
+    <Checkbox bind="checked:true" /> Toggle me ({String(checked)})
+  </label>
+</Playground>
+
+Number `<input>` with `bind="amount:10"` auto-wires `value` + `onChange`:
+
+<Playground>
+  <input
+    type="number"
+    bind="amount:10"
+    className="h-8 w-full rounded-lg border border-input bg-transparent px-2.5 py-1 text-sm"
+  />
+  <p>Amount: {amount}</p>
+</Playground>

package/dist/editor/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "es2023",
+    "module": "esnext",
+    "lib": ["ES2023", "DOM"],
+    "types": ["vite-plus/client"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/dist/editor/vite.config.ts

@@ -0,0 +1,14 @@
+import { defineConfig } from "vite";
+import { fileURLToPath } from "node:url";
+import { resolve } from "node:path";
+import { createEditorViteConfig } from "./vite.shared.ts";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const workspaceRoot = process.env.PLANNAR_CWD ?? resolve(__dirname, "../..");
+
+export default defineConfig(
+  createEditorViteConfig({
+    appDir: __dirname,
+    workspaceRoot,
+  }),
+);

package/dist/editor/vite.shared.d.ts

@@ -0,0 +1,12 @@
+import type { BindingMeta } from "../core/index.mjs";
+import type { UserConfig } from "vite";
+export declare const shadcnBindings: Record<string, BindingMeta>;
+export declare function isSafePlanSlug(slug: string): boolean;
+export declare function resolvePlanPath(plansDir: string, slug: string): string | null;
+export declare function injectTailwindSource(css: string, plannarRoot: string): string;
+type CreateEditorViteConfigOptions = {
+    appDir: string;
+    workspaceRoot: string;
+};
+export declare function createEditorViteConfig({ appDir, workspaceRoot, }: CreateEditorViteConfigOptions): UserConfig;
+export {};

package/dist/editor/vite.shared.ts

@@ -0,0 +1,265 @@
+import react from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+import { mdxPlugin, generateMdx } from "../core/index.mjs";
+import type { BindingMeta } from "../core/index.mjs";
+import { existsSync, readFileSync, readdirSync } from "node:fs";
+import { join, resolve } from "node:path";
+import type { Plugin, UserConfig } from "vite";
+
+export const shadcnBindings: Record<string, BindingMeta> = {
+  input: {
+    valueProp: "value",
+    changeProp: "onChange",
+    extract: "e.target.value",
+  },
+  checkbox: {
+    valueProp: "checked",
+    changeProp: "onCheckedChange",
+    extract: "e",
+  },
+};
+
+function resolveUserMeta(): Record<string, BindingMeta> {
+  const raw = process.env.PLANNAR_META;
+  if (!raw) return {};
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (err) {
+    console.warn("[plannar] Failed to parse PLANNAR_META as JSON; ignoring.", err);
+    return {};
+  }
+  if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) {
+    console.warn("[plannar] PLANNAR_META must be a JSON object; ignoring.");
+    return {};
+  }
+  return parsed as Record<string, BindingMeta>;
+}
+
+const SAFE_PLAN_SEGMENT = /^[a-z0-9][a-z0-9_-]*$/;
+
+export function isSafePlanSlug(slug: string): boolean {
+  if (!slug || slug.includes("\\") || slug.startsWith("/") || slug.endsWith("/")) {
+    return false;
+  }
+
+  return slug.split("/").every((segment) => SAFE_PLAN_SEGMENT.test(segment));
+}
+
+export function resolvePlanPath(plansDir: string, slug: string): string | null {
+  if (!isSafePlanSlug(slug)) {
+    return null;
+  }
+
+  const plansRoot = resolve(plansDir);
+  const planPath = resolve(plansRoot, `${slug}.mdx`);
+  const plansPrefix = `${plansRoot}${process.platform === "win32" ? "\\" : "/"}`;
+
+  return planPath.startsWith(plansPrefix) ? planPath : null;
+}
+
+function hoistImports(code: string): string {
+  const imports: string[] = [];
+  const rest: string[] = [];
+
+  for (const line of code.split("\n")) {
+    if (line.startsWith("import ")) {
+      imports.push(line);
+    } else {
+      rest.push(line);
+    }
+  }
+
+  return [...imports, ...rest].join("\n");
+}
+
+function createPlannarPlansPlugin(plansDir: string, bindings: Record<string, BindingMeta>): Plugin {
+  return {
+    name: "plannar-plans",
+    resolveId(id: string) {
+      if (id === "virtual:plannar-plans") return "\0plannar-plans";
+
+      const planMatch = id.match(/^virtual:plannar-plan\/(.+)$/);
+      if (planMatch && isSafePlanSlug(planMatch[1])) {
+        return `\0plannar-plan/${planMatch[1]}`;
+      }
+
+      const sourceMatch = id.match(/^virtual:plannar-plan-source\/(.+)$/);
+      if (sourceMatch && isSafePlanSlug(sourceMatch[1])) {
+        return `\0plannar-plan-source/${sourceMatch[1]}`;
+      }
+
+      const sourceHttpMatch = id.match(/^\/__plannar\/plan-source\/(.+)\.js$/);
+      if (sourceHttpMatch && isSafePlanSlug(sourceHttpMatch[1])) {
+        return `\0plannar-plan-source/${sourceHttpMatch[1]}`;
+      }
+
+      const httpMatch = id.match(/^\/__plannar\/plan\/(.+)\.js$/);
+      if (httpMatch && isSafePlanSlug(httpMatch[1])) {
+        return `\0plannar-plan/${httpMatch[1]}`;
+      }
+    },
+    async load(id: string) {
+      if (id === "\0plannar-plans") {
+        let files: string[] = [];
+
+        try {
+          files = readdirSync(plansDir).filter((file) => file.endsWith(".mdx"));
+        } catch {
+          // Plans directory does not exist yet.
+        }
+
+        return [
+          `export const plans = ${JSON.stringify(files)};`,
+          `export const plansDir = ${JSON.stringify(plansDir)};`,
+        ].join("\n");
+      }
+
+      if (id.startsWith("\0plannar-plan-source/")) {
+        const planName = id.slice("\0plannar-plan-source/".length);
+        const planPath = resolvePlanPath(plansDir, planName);
+
+        if (!planPath || !existsSync(planPath)) {
+          return 'export const source = "";\nexport const lines = [];\nexport default source;';
+        }
+
+        const raw = readFileSync(planPath, "utf-8");
+        const lines = raw.split("\n");
+        return `export const source = ${JSON.stringify(raw)};\nexport const lines = ${JSON.stringify(lines)};\nexport default source;`;
+      }
+
+      if (!id.startsWith("\0plannar-plan/")) {
+        return;
+      }
+
+      const planName = id.slice("\0plannar-plan/".length);
+      const planPath = resolvePlanPath(plansDir, planName);
+
+      if (!planPath || !existsSync(planPath)) {
+        return "export default function() { return null; }";
+      }
+
+      const raw = readFileSync(planPath, "utf-8");
+      return hoistImports(
+        await generateMdx(planPath, {
+          content: raw,
+          bindings,
+          development: true,
+        }),
+      );
+    },
+    handleHotUpdate(ctx) {
+      const plansListMod = ctx.server.moduleGraph.getModuleById("\0plannar-plans");
+
+      const plansPrefix = resolve(plansDir);
+      const pathSep = process.platform === "win32" ? "\\" : "/";
+      const prefix = `${plansPrefix}${pathSep}`;
+
+      if (ctx.file.startsWith(prefix) && ctx.file.endsWith(".mdx")) {
+        const slug = ctx.file.slice(prefix.length, -".mdx".length).replaceAll("\\", "/");
+        const planMod = ctx.server.moduleGraph.getModuleById(`\0plannar-plan/${slug}`);
+        const sourceMod = ctx.server.moduleGraph.getModuleById(`\0plannar-plan-source/${slug}`);
+
+        if (plansListMod) void ctx.server.reloadModule(plansListMod);
+        if (planMod) void ctx.server.reloadModule(planMod);
+        if (sourceMod) void ctx.server.reloadModule(sourceMod);
+      } else if (plansListMod) {
+        void ctx.server.reloadModule(plansListMod);
+      }
+    },
+  };
+}
+
+function createGlobalCssPlugin(): Plugin {
+  return {
+    name: "plannar-global-css",
+    resolveId(id: string) {
+      if (id === "virtual:plannar-global-css") return "\0plannar-global-css";
+    },
+    load(id: string) {
+      if (id !== "\0plannar-global-css") {
+        return;
+      }
+
+      const globalCss = process.env.PLANNAR_GLOBAL_CSS;
+      const cssFilePath = process.env.PLANNAR_CSS_FILE_PATH;
+      const imports: string[] = [];
+
+      if (globalCss && existsSync(globalCss)) {
+        imports.push(globalCss);
+      }
+
+      if (cssFilePath && existsSync(cssFilePath)) {
+        imports.push(cssFilePath);
+      }
+
+      return imports.map((filePath) => `import '${filePath}';`).join("\n") || "";
+    },
+  };
+}
+
+export function injectTailwindSource(css: string, plannarRoot: string): string {
+  const tailwindImport = '@import "tailwindcss";';
+  const sourceDirective = `@source ${JSON.stringify(plannarRoot.replaceAll("\\", "/"))};`;
+
+  if (!css.includes(tailwindImport) || css.includes(sourceDirective)) {
+    return css;
+  }
+
+  return css.replace(tailwindImport, `${tailwindImport}\n${sourceDirective}`);
+}
+
+function createTailwindSourcePlugin(plannarRoot: string): Plugin {
+  return {
+    name: "plannar-tailwind-source",
+    enforce: "pre",
+    load(id: string) {
+      if (!id.endsWith("/src/index.css")) {
+        return;
+      }
+
+      return injectTailwindSource(readFileSync(id, "utf-8"), plannarRoot);
+    },
+  };
+}
+
+type CreateEditorViteConfigOptions = {
+  appDir: string;
+  workspaceRoot: string;
+};
+
+export function createEditorViteConfig({
+  appDir,
+  workspaceRoot,
+}: CreateEditorViteConfigOptions): UserConfig {
+  const plannarFolder = process.env.PLANNAR_FOLDER || ".plannar";
+  const plannarRoot = join(workspaceRoot, plannarFolder);
+  const plansDir = join(plannarRoot, "plans");
+
+  const bindings = { ...shadcnBindings, ...resolveUserMeta() };
+
+  return {
+    plugins: [
+      tailwindcss(),
+      react(),
+      mdxPlugin({ bindings, development: true }),
+      createPlannarPlansPlugin(plansDir, bindings),
+      createGlobalCssPlugin(),
+      createTailwindSourcePlugin(plannarRoot),
+    ],
+    server: {
+      fs: {
+        allow: [appDir, workspaceRoot],
+      },
+    },
+    resolve: {
+      dedupe: ["react", "react-dom"],
+      alias: [
+        {
+          find: /^@\//,
+          replacement: `${plannarRoot}/`,
+        },
+      ],
+    },
+  };
+}

package/dist/editor-Bv5RTgcT.mjs

@@ -0,0 +1,59 @@
+import { n as resolveConfig, t as merge } from "./config-FJViU9hJ.mjs";
+import { defineCommand } from "citty";
+import { existsSync } from "node:fs";
+import { resolve } from "node:path";
+import { createServer } from "vite";
+import { fileURLToPath } from "node:url";
+//#region src/commands/editor.ts
+function findEditorRoot(startDir) {
+	if (existsSync(resolve(startDir, "editor", "index.html"))) return resolve(startDir, "editor");
+	let dir = startDir;
+	for (let i = 0; i < 10; i++) {
+		if (existsSync(resolve(dir, "apps/editor/index.html"))) return resolve(dir, "apps/editor");
+		dir = resolve(dir, "..");
+	}
+	throw new Error("Could not find apps/editor relative to CLI package");
+}
+var editor_default = defineCommand({
+	meta: {
+		name: "editor",
+		description: "Start the plan editor in dev mode with HMR"
+	},
+	args: {
+		port: {
+			type: "string",
+			description: "Port to listen on",
+			default: "5173"
+		},
+		host: {
+			type: "string",
+			description: "Host to listen on",
+			default: "localhost"
+		}
+	},
+	async run({ args }) {
+		const cwd = process.cwd();
+		const config = await resolveConfig(cwd);
+		process.env.PLANNAR_CWD = cwd;
+		process.env.PLANNAR_FOLDER = config.plannarFolder;
+		process.env.PLANNAR_EXPORTS_FOLDER = config.exportsFolder;
+		if (config.globalCss) process.env.PLANNAR_GLOBAL_CSS = resolve(cwd, config.globalCss);
+		if (config.cssFilePath) process.env.PLANNAR_CSS_FILE_PATH = resolve(cwd, config.cssFilePath);
+		if (config.meta) process.env.PLANNAR_META = JSON.stringify(config.meta);
+		const editorRoot = findEditorRoot(fileURLToPath(new URL("..", import.meta.url)));
+		const baseServerConfig = {
+			configFile: resolve(editorRoot, "vite.config.ts"),
+			root: editorRoot,
+			server: {
+				fs: { allow: [editorRoot, cwd] },
+				port: Number(args.port),
+				host: args.host
+			}
+		};
+		const server = await createServer(config.viteConfig?.editor ? merge(baseServerConfig, config.viteConfig.editor) : baseServerConfig);
+		await server.listen();
+		server.printUrls();
+	}
+});
+//#endregion
+export { editor_default as default };