Development

README.md

@@ -19,7 +19,7 @@
 </div>
 
 <p align="center">
-  <img src="apps/web/public/placeholders/feature-preview.gif" alt="Luthor feature preview" width="960" />
+  <img src="public/assets/preview.png" alt="Luthor feature preview" width="960" />
 </p>
 
 ## :sparkles: Why Luthor

apps/demo/src/App.css

@@ -73,3 +73,101 @@
 [data-theme="dark"] .slash-panel-label {
   color: #94a3b8;
 }
+
+.app-shell {
+  min-height: 100vh;
+  width: 100%;
+  background: var(--demo-bg);
+  color: var(--demo-fg);
+}
+
+.app-layout {
+  box-sizing: border-box;
+  width: min(1200px, 100%);
+  min-height: 100vh;
+  margin: 0 auto;
+  padding: 20px;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  gap: 16px;
+}
+
+.app-header {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px;
+  border: 1px solid var(--demo-border);
+  border-radius: 12px;
+  background: var(--demo-panel-bg);
+}
+
+.control-group {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.control-label {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
+  color: var(--demo-muted);
+}
+
+.preset-select,
+.theme-toggle {
+  height: 38px;
+  border-radius: 8px;
+  border: 1px solid var(--demo-border);
+  background: var(--demo-control-bg);
+  color: var(--demo-fg);
+  font: inherit;
+  font-weight: 500;
+}
+
+.preset-select {
+  min-width: 220px;
+  padding: 0 12px;
+}
+
+.theme-toggle {
+  cursor: pointer;
+  padding: 0 14px;
+}
+
+.theme-toggle:hover {
+  background: var(--demo-control-hover-bg);
+}
+
+.editor-stage {
+  min-height: 0;
+  border: 1px solid var(--demo-border);
+  border-radius: 12px;
+  background: var(--demo-panel-bg);
+  overflow: auto;
+  padding: 20px;
+}
+
+.editor-frame {
+  width: min(980px, 100%);
+  margin: 0 auto;
+}
+
+@media (max-width: 720px) {
+  .app-layout {
+    padding: 12px;
+  }
+
+  .app-header {
+    flex-direction: column;
+    align-items: stretch;
+  }
+
+  .preset-select,
+  .theme-toggle {
+    width: 100%;
+  }
+}

apps/demo/src/App.tsx

@@ -14,33 +14,59 @@ import { useMemo, useState } from "react";
 import { useDemoTheme } from "./hooks/useDemoTheme";
 import "highlight.js/styles/github.css";
 
+type PresetId =
+  | "extensive"
+  | "simple-text"
+  | "rich-text-box"
+  | "chat-window"
+  | "email-compose"
+  | "md-text"
+  | "notion-like"
+  | "headless-editor"
+  | "notes";
+
+const PRESET_OPTIONS: Array<{ value: PresetId; label: string }> = [
+  { value: "extensive", label: "Extensive" },
+  { value: "simple-text", label: "Simple Text" },
+  { value: "rich-text-box", label: "Rich Text Box" },
+  { value: "chat-window", label: "Chat Window" },
+  { value: "email-compose", label: "Email Compose" },
+  { value: "md-text", label: "MD Text" },
+  { value: "notion-like", label: "Notion Like" },
+  { value: "headless-editor", label: "Headless" },
+  { value: "notes", label: "Notes" },
+];
+
 function App() {
   const { theme, toggleTheme } = useDemoTheme();
-  const [preset, setPreset] = useState("extensive");
+  const [preset, setPreset] = useState<PresetId>("extensive");
 
-  const fontFamilyOptions = [
-    { value: "default", label: "Default", fontFamily: "inherit" },
-    {
-      value: "geist",
-      label: "Geist",
-      fontFamily: "'Geist', 'Segoe UI', Arial, sans-serif",
-      cssImportUrl: "https://fonts.googleapis.com/css2?family=Geist:wght@400;500;700&display=swap",
-    },
-    {
-      value: "comfortaa",
-      label: "Comfortaa",
-      fontFamily: "'Comfortaa', 'Segoe UI', Arial, sans-serif",
-      cssImportUrl: "https://fonts.googleapis.com/css2?family=Comfortaa:wght@300..700&display=swap",
-    },
-  ];
   const presetNode = useMemo(() => {
     switch (preset) {
       case "simple-text":
         return <SimpleTextEditor showDefaultContent={false} placeholder="Simple text only..." />;
       case "rich-text-box":
         return <RichTextBoxEditor showDefaultContent={false} compactToolbar placeholder="Short rich text..." />;
       case "chat-window":
-        return <ChatWindowEditor showDefaultContent={false} onSend={(payload) => console.log("chat send", payload)} />;
+        return <ChatWindowEditor
+          placeholder="Type a message"
+          maxHeight={250}
+          minHeight={150}
+          submitOnEnter={false}
+          showBottomToolbar
+          toolbarButtons={[
+            { id: 'attachment', content: 'Attach', ariaLabel: 'Attach file', onClick: () => {} },
+            { id: 'image', content: 'Image', ariaLabel: 'Add image', onClick: () => {} },
+          ]}
+          sendButtonPlacement="inside"
+          outputFormat="md"
+          formattingOptions={{ bold: true, italic: true, strikethrough: true }}
+          onSend={({ format, text, markdown, json }) => {
+            console.log("chat-send", { format, text });
+            // Full payload available if needed:
+            // console.log({ format, text, markdown, json });
+          }}
+        />
       case "email-compose":
         return <EmailComposeEditor showDefaultContent={false} showCc showSubject />;
       case "md-text":
@@ -62,55 +88,37 @@ function App() {
           />
         );
     }
-  }, [fontFamilyOptions, preset, theme]);
+  }, [preset]);
 
   return (
     <div className="app-shell" data-theme={theme}>
-      <button
-        style={{
-          position: "absolute",
-          top: 16,
-          right: 16,
-          zIndex: 10,
-          padding: "8px 16px",
-          borderRadius: 8,
-          border: "none",
-          background: theme === "dark" ? "#222" : "#eee",
-          color: theme === "dark" ? "#fff" : "#222",
-          cursor: "pointer",
-          fontWeight: 600,
-        }}
-        onClick={toggleTheme}
-      >
-        {theme === "dark" ? "Switch to Light" : "Switch to Dark"}
-      </button>
+      <div className="app-layout">
+        <header className="app-header">
+          <div className="control-group">
+            <label className="control-label" htmlFor="preset-select">
+              Preset
+            </label>
+            <select
+              id="preset-select"
+              className="preset-select"
+              value={preset}
+              onChange={(event) => setPreset(event.target.value as PresetId)}
+            >
+              {PRESET_OPTIONS.map((option) => (
+                <option key={option.value} value={option.value}>
+                  {option.label}
+                </option>
+              ))}
+            </select>
+          </div>
+          <button className="theme-toggle" type="button" onClick={toggleTheme}>
+            {theme === "dark" ? "Light Mode" : "Dark Mode"}
+          </button>
+        </header>
 
-      <div
-        style={{
-          minHeight: "100vh",
-          display: "flex",
-          flexDirection: "column",
-          gap: 12,
-          alignItems: "center",
-          justifyContent: "center",
-        }}
-      >
-        <select
-          value={preset}
-          onChange={(event) => setPreset(event.target.value)}
-          style={{ height: 36, borderRadius: 8, padding: "0 10px" }}
-        >
-          <option value="extensive">Extensive</option>
-          <option value="simple-text">Simple Text</option>
-          <option value="rich-text-box">Rich Text Box</option>
-          <option value="chat-window">Chat Window</option>
-          <option value="email-compose">Email Compose</option>
-          <option value="md-text">MD Text</option>
-          <option value="notion-like">Notion Like</option>
-          <option value="headless-editor">Headless</option>
-          <option value="notes">Notes</option>
-        </select>
-        {presetNode}
+        <main className="editor-stage">
+          <div className="editor-frame">{presetNode}</div>
+        </main>
       </div>
     </div>
   );

apps/demo/src/index.css

@@ -2,6 +2,13 @@
   font-family: Inter, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
+  --demo-bg: #f8fafc;
+  --demo-fg: #0f172a;
+  --demo-muted: #475569;
+  --demo-border: #cbd5e1;
+  --demo-panel-bg: #ffffff;
+  --demo-control-bg: #ffffff;
+  --demo-control-hover-bg: #f1f5f9;
   color: #0f172a;
   background-color: #f8fafc;
 
@@ -26,6 +33,16 @@ html[data-theme="dark"] body {
   color: #e2e8f0;
 }
 
+html[data-theme="dark"] {
+  --demo-bg: #05070c;
+  --demo-fg: #e2e8f0;
+  --demo-muted: #94a3b8;
+  --demo-border: #334155;
+  --demo-panel-bg: #0f172a;
+  --demo-control-bg: #111827;
+  --demo-control-hover-bg: #1f2937;
+}
+
 #root {
   min-height: 100vh;
 }