plannar 0.0.1

package/dist/editor/src/comment-state.tsx

@@ -0,0 +1,120 @@
+import { createContext, useContext, useState, useCallback, type ReactNode } from "react";
+import { toast } from "sonner";
+
+export type CommentAnchor =
+  | { type: "text"; text: string }
+  | { type: "element"; tag: string; text: string };
+
+export type Comment = {
+  id: string;
+  anchor: CommentAnchor;
+  content: string;
+  file: string;
+  line: number | null;
+  lineEnd: number | null;
+  timestamp: number;
+};
+
+type CommentContextType = {
+  mode: boolean;
+  toggleMode: () => void;
+  comments: Comment[];
+  addComment: (
+    anchor: CommentAnchor,
+    content: string,
+    file: string,
+    line?: number,
+    lineEnd?: number,
+  ) => void;
+  removeComment: (id: string) => void;
+  editComment: (id: string, content: string) => void;
+  clearComments: () => void;
+};
+
+const CommentContext = createContext<CommentContextType | null>(null);
+
+let nextId = 0;
+
+const TIP_TOAST_ID = "comment-tip";
+const TIP_COOKIE = "plannar-comment-tip-seen";
+
+function hasSeenTip(): boolean {
+  return document.cookie.includes(`${TIP_COOKIE}=1`);
+}
+
+function markTipSeen(): void {
+  document.cookie = `${TIP_COOKIE}=1; max-age=31536000; path=/; SameSite=Lax`;
+}
+
+export function CommentProvider({ children }: { children: ReactNode }) {
+  const [mode, setMode] = useState(false);
+  const [comments, setComments] = useState<Comment[]>([]);
+
+  const toggleMode = useCallback(() => {
+    setMode((m) => {
+      const next = !m;
+      if (next) {
+        if (!hasSeenTip()) {
+          toast("Highlight text or click on a section to comment", {
+            id: TIP_TOAST_ID,
+            duration: Infinity,
+            dismissible: true,
+            onDismiss: markTipSeen,
+            onAutoClose: markTipSeen,
+          });
+        }
+      } else {
+        toast.dismiss(TIP_TOAST_ID);
+      }
+      return next;
+    });
+  }, []);
+
+  const addComment = useCallback(
+    (anchor: CommentAnchor, content: string, file: string, line?: number, lineEnd?: number) => {
+      if (!content.trim()) return;
+      toast.dismiss(TIP_TOAST_ID);
+      const id = `comment-${++nextId}`;
+      setComments((prev) => [
+        ...prev,
+        {
+          id,
+          anchor,
+          content: content.trim(),
+          file,
+          line: line ?? null,
+          lineEnd: lineEnd ?? null,
+          timestamp: Date.now(),
+        },
+      ]);
+      return id;
+    },
+    [],
+  );
+
+  const removeComment = useCallback((id: string) => {
+    setComments((prev) => prev.filter((c) => c.id !== id));
+  }, []);
+
+  const editComment = useCallback((id: string, content: string) => {
+    setComments((prev) => prev.map((c) => (c.id === id ? { ...c, content: content.trim() } : c)));
+  }, []);
+
+  const clearComments = useCallback(() => {
+    setComments([]);
+  }, []);
+
+  return (
+    <CommentContext.Provider
+      value={{ mode, toggleMode, comments, addComment, removeComment, editComment, clearComments }}
+    >
+      {children}
+    </CommentContext.Provider>
+  );
+}
+
+export function useCommentState(): CommentContextType {
+  const ctx = useContext(CommentContext);
+  if (!ctx) throw new Error("useCommentState must be used within CommentProvider");
+  return ctx;
+}

package/dist/editor/src/comment-toggle.tsx

@@ -0,0 +1,28 @@
+import { MessageSquarePlus, MessageSquare } from "lucide-react";
+import { useCommentState } from "./comment-state.js";
+import { cn } from "./lib/utils.js";
+
+export function CommentToggle() {
+  const { mode, toggleMode, comments } = useCommentState();
+
+  return (
+    <button
+      onClick={toggleMode}
+      title={mode ? "Exit comment mode" : "Enter comment mode"}
+      aria-label={mode ? "Exit comment mode" : "Enter comment mode"}
+      className={cn(
+        "fixed bottom-6 right-6 z-40 inline-flex size-10 items-center justify-center rounded-xl border bg-background shadow-lg transition-all hover:scale-105 active:scale-95",
+        mode
+          ? "border-primary/40 bg-primary/10 text-primary ring-2 ring-primary/20"
+          : "border-border text-muted-foreground hover:text-foreground",
+      )}
+    >
+      {mode ? <MessageSquare className="size-4.5" /> : <MessageSquarePlus className="size-4.5" />}
+      {comments.length > 0 && (
+        <span className="absolute -right-1 -top-1 flex size-4 items-center justify-center rounded-full bg-primary text-[9px] font-bold text-primary-foreground">
+          {comments.length}
+        </span>
+      )}
+    </button>
+  );
+}

package/dist/editor/src/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../../lib/utils.js";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: ButtonPrimitive.Props & VariantProps<typeof buttonVariants>) {
+  return (
+    <ButtonPrimitive
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/dist/editor/src/components/ui/dialog.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import { Dialog as DialogPrimitive } from "@base-ui/react/dialog";
+
+import { cn } from "../../lib/utils.js";
+import { Button } from "./button.js";
+import { XIcon } from "lucide-react";
+
+function Dialog({ ...props }: DialogPrimitive.Root.Props) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: DialogPrimitive.Trigger.Props) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: DialogPrimitive.Portal.Props) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: DialogPrimitive.Close.Props) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({ className, ...props }: DialogPrimitive.Backdrop.Props) {
+  return (
+    <DialogPrimitive.Backdrop
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: DialogPrimitive.Popup.Props & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Popup
+        data-slot="dialog-content"
+        className={cn(
+          "fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            data-slot="dialog-close"
+            render={<Button variant="ghost" className="absolute top-2 right-2" size="icon-sm" />}
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Popup>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="dialog-header" className={cn("flex flex-col gap-2", className)} {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close render={<Button variant="outline" />}>Close</DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: DialogPrimitive.Title.Props) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base leading-none font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({ className, ...props }: DialogPrimitive.Description.Props) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        "text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/dist/editor/src/components/ui/popover.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { Popover as PopoverPrimitive } from "@base-ui/react/popover";
+
+import { cn } from "../../lib/utils.js";
+
+function Popover({ ...props }: PopoverPrimitive.Root.Props) {
+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
+}
+
+function PopoverTrigger({ ...props }: PopoverPrimitive.Trigger.Props) {
+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
+}
+
+function PopoverContent({
+  className,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  sideOffset = 4,
+  ...props
+}: PopoverPrimitive.Popup.Props &
+  Pick<PopoverPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <PopoverPrimitive.Portal>
+      <PopoverPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <PopoverPrimitive.Popup
+          data-slot="popover-content"
+          className={cn(
+            "z-50 flex w-72 origin-(--transform-origin) flex-col gap-2.5 rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        />
+      </PopoverPrimitive.Positioner>
+    </PopoverPrimitive.Portal>
+  );
+}
+
+function PopoverHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="popover-header"
+      className={cn("flex flex-col gap-0.5 text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverTitle({ className, ...props }: PopoverPrimitive.Title.Props) {
+  return (
+    <PopoverPrimitive.Title
+      data-slot="popover-title"
+      className={cn("font-medium", className)}
+      {...props}
+    />
+  );
+}
+
+function PopoverDescription({ className, ...props }: PopoverPrimitive.Description.Props) {
+  return (
+    <PopoverPrimitive.Description
+      data-slot="popover-description"
+      className={cn("text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+export { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger };

package/dist/editor/src/components/ui/sonner.tsx

@@ -0,0 +1,21 @@
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  return (
+    <Sonner
+      position="bottom-left"
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/dist/editor/src/components/ui/textarea.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+
+import { cn } from "../../lib/utils.js";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

package/dist/editor/src/components/ui/tooltip.tsx

@@ -0,0 +1,54 @@
+"use client";
+
+import { Tooltip as TooltipPrimitive } from "@base-ui/react/tooltip";
+
+import { cn } from "../../lib/utils.js";
+
+function TooltipProvider({ delay = 0, ...props }: TooltipPrimitive.Provider.Props) {
+  return <TooltipPrimitive.Provider data-slot="tooltip-provider" delay={delay} {...props} />;
+}
+
+function Tooltip({ ...props }: TooltipPrimitive.Root.Props) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: TooltipPrimitive.Trigger.Props) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  side = "top",
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  children,
+  ...props
+}: TooltipPrimitive.Popup.Props &
+  Pick<TooltipPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset">) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Positioner
+        align={align}
+        alignOffset={alignOffset}
+        side={side}
+        sideOffset={sideOffset}
+        className="isolate z-50"
+      >
+        <TooltipPrimitive.Popup
+          data-slot="tooltip-content"
+          className={cn(
+            "z-50 inline-flex w-fit max-w-xs origin-(--transform-origin) items-center gap-1.5 rounded-md bg-foreground px-3 py-1.5 text-xs text-background has-data-[slot=kbd]:pr-1.5 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 **:data-[slot=kbd]:relative **:data-[slot=kbd]:isolate **:data-[slot=kbd]:z-50 **:data-[slot=kbd]:rounded-sm data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          <TooltipPrimitive.Arrow className="z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px] bg-foreground fill-foreground data-[side=bottom]:top-1 data-[side=inline-end]:top-1/2! data-[side=inline-end]:-left-1 data-[side=inline-end]:-translate-y-1/2 data-[side=inline-start]:top-1/2! data-[side=inline-start]:-right-1 data-[side=inline-start]:-translate-y-1/2 data-[side=left]:top-1/2! data-[side=left]:-right-1 data-[side=left]:-translate-y-1/2 data-[side=right]:top-1/2! data-[side=right]:-left-1 data-[side=right]:-translate-y-1/2 data-[side=top]:-bottom-2.5" />
+        </TooltipPrimitive.Popup>
+      </TooltipPrimitive.Positioner>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/dist/editor/src/grep-source.ts

@@ -0,0 +1,95 @@
+import type { CommentAnchor } from "./comment-state.js";
+
+export type PlanSource = {
+  source: string;
+  lines: string[];
+};
+
+export function findLineRange(
+  anchor: CommentAnchor,
+  source: PlanSource,
+): { start: number; end: number } | null {
+  if (!source.lines.length) return null;
+  const search = anchor.text.replace(/\s+/g, " ").trim();
+  if (!search) return null;
+
+  let startLine: number | null = null;
+
+  for (let i = 0; i < source.lines.length; i++) {
+    const lineClean = source.lines[i].replace(/\s+/g, " ").trim();
+    if (lineClean.includes(search)) {
+      startLine = i + 1;
+      break;
+    }
+  }
+
+  if (startLine === null) {
+    const words = search.split(/\s+/).filter((w) => w.length > 2);
+    for (let i = 0; i < source.lines.length; i++) {
+      const lineClean = source.lines[i].replace(/\s+/g, " ").trim();
+      const matchCount = words.filter((w) =>
+        lineClean.toLowerCase().includes(w.toLowerCase()),
+      ).length;
+      if (matchCount >= Math.ceil(words.length / 2)) {
+        startLine = i + 1;
+        break;
+      }
+    }
+    if (startLine === null) return null;
+  }
+
+  if (anchor.type === "text") {
+    return { start: startLine, end: startLine };
+  }
+
+  const headingLevel = getHeadingLevel(source.lines[startLine - 1]);
+  if (headingLevel === 0) return { start: startLine, end: startLine };
+
+  let endLine = source.lines.length;
+  for (let i = startLine; i < source.lines.length; i++) {
+    const level = getHeadingLevel(source.lines[i]);
+    if (level > 0 && level <= headingLevel) {
+      endLine = i;
+      break;
+    }
+  }
+
+  return { start: startLine, end: endLine };
+}
+
+function getHeadingLevel(line: string): number {
+  const match = line.match(/^(#{1,6})\s/);
+  return match ? match[1].length : 0;
+}
+
+export function generatePrompt(
+  comments: {
+    anchor: CommentAnchor;
+    content: string;
+    file: string;
+    line: number | null;
+    lineEnd: number | null;
+  }[],
+): string {
+  const sorted = [...comments].sort((a, b) => (a.line ?? Infinity) - (b.line ?? Infinity));
+  if (sorted.length === 0) return "";
+
+  let prompt = "The user left the following comments for you to address:\n\n";
+  for (const c of sorted) {
+    const loc = formatLoc(c);
+    const quoted = truncateContext(c.anchor);
+    prompt += `${loc}: "${quoted}" — ${c.content}\n`;
+  }
+  return prompt.trimEnd();
+}
+
+function formatLoc(c: { file: string; line: number | null; lineEnd: number | null }): string {
+  if (!c.line) return c.file;
+  if (c.lineEnd && c.lineEnd > c.line) return `lines ${c.line}-${c.lineEnd} ${c.file}`;
+  return `line ${c.line} ${c.file}`;
+}
+
+function truncateContext(anchor: CommentAnchor): string {
+  const cleaned = anchor.text.replace(/\s+/g, " ").trim();
+  return cleaned.length > 80 ? cleaned.slice(0, 77) + "..." : cleaned;
+}

package/dist/editor/src/index.css

@@ -0,0 +1,36 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "../../core-styles/theme.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}

package/dist/editor/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/dist/editor/src/main.tsx

@@ -0,0 +1,10 @@
+import "./index.css";
+import "../../core-styles/mdx.css";
+import "virtual:plannar-global-css";
+import { createRoot } from "react-dom/client";
+import { App } from "./app.js";
+
+const root = document.getElementById("root");
+if (root) {
+  createRoot(root).render(<App />);
+}

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

@@ -0,0 +1,4 @@
+declare module "*.mdx" {
+  const MDXComponent: (props: Record<string, unknown>) => JSX.Element;
+  export default MDXComponent;
+}