feat: styles
This commit is contained in:
1
frontend/src/assets/baldoth.min.svg
Normal file
1
frontend/src/assets/baldoth.min.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 30 KiB |
43
frontend/src/assets/baldoth.svg
Normal file
43
frontend/src/assets/baldoth.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 58 KiB |
@@ -23,45 +23,43 @@ export default function PreviewPane() {
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center px-3 py-1.5 border-b shrink-0 gap-2">
|
||||
<div className="flex items-center px-3 py-1.5 border-b-2 border-border shrink-0 gap-2">
|
||||
<span className="text-xs text-muted-foreground flex-1">
|
||||
Preview
|
||||
{isDynamic && (
|
||||
<span className="ml-1.5 text-amber-400" title="This page has dynamic features (source, if, for)">
|
||||
⚡ dynamic
|
||||
</span>
|
||||
<span className="ml-1.5 text-primary/60 text-[10px]" title="Dynamic page">⚡</span>
|
||||
)}
|
||||
{isCompiling && (
|
||||
<span className="ml-2 text-yellow-500 animate-pulse">
|
||||
compiling…
|
||||
</span>
|
||||
<span className="ml-1 text-primary/40 text-[10px] animate-pulse">…</span>
|
||||
)}
|
||||
{compileError && (
|
||||
<span className="ml-2 text-red-400" title={compileError}>
|
||||
✗ error
|
||||
</span>
|
||||
<span className="ml-1 text-red-400 text-[10px]" title={compileError}>✗</span>
|
||||
)}
|
||||
</span>
|
||||
<div className="flex gap-1">
|
||||
<div className="flex items-center">
|
||||
{tabs
|
||||
.filter((t) => t.show)
|
||||
.map((tab) => (
|
||||
<button
|
||||
key={tab.value}
|
||||
onClick={() => setPreviewMode(tab.value)}
|
||||
className={cn(
|
||||
"text-xs px-2 py-0.5 uppercase tracking-wider transition-all border-2",
|
||||
previewMode === tab.value
|
||||
? "bg-background text-foreground border-border"
|
||||
: "text-muted-foreground hover:text-foreground border-transparent",
|
||||
.map((tab, i, arr) => (
|
||||
<span key={tab.value} className="flex items-center">
|
||||
<button
|
||||
onClick={() => setPreviewMode(tab.value)}
|
||||
className={cn(
|
||||
"text-[10px] uppercase tracking-wider transition-colors cursor-pointer px-1.5",
|
||||
previewMode === tab.value
|
||||
? "text-foreground font-bold"
|
||||
: "text-muted-foreground hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
{i < arr.length - 1 && (
|
||||
<span className="text-muted-foreground text-[8px]">·</span>
|
||||
)}
|
||||
>
|
||||
{tab.label}
|
||||
</button>
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-1 bg-background overflow-auto">
|
||||
<div className="flex-1 bg-background overflow-auto min-h-0">
|
||||
{previewMode === "ascii" ? (
|
||||
<pre className="p-2 font-mono text-[11px] whitespace-pre leading-tight text-green-100/90">
|
||||
{compiledAscii || (
|
||||
|
||||
@@ -1,26 +1,14 @@
|
||||
import { useRef, useState } from "react";
|
||||
import { BookOpen, Upload } from "lucide-react";
|
||||
import { toast } from "sonner";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { ChevronLeft, Pencil } from "lucide-react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
} from "@/components/ui/popover";
|
||||
import { useEditorStore } from "@/stores/editorStore";
|
||||
import { useBacklinks } from "@/hooks/useBacklinks";
|
||||
import BacklinkIndicator from "@/components/editor/BacklinkIndicator";
|
||||
import { EXAMPLES } from "@/components/editor/examples";
|
||||
|
||||
interface Props {
|
||||
pageName: string;
|
||||
onNameChange?: (name: string) => void;
|
||||
onSaveDraft: () => void;
|
||||
onPublish: () => void;
|
||||
onInsertExample: (source: string) => void;
|
||||
saving: boolean;
|
||||
isDirty: boolean;
|
||||
}
|
||||
@@ -30,84 +18,35 @@ export default function ToolBar({
|
||||
onNameChange,
|
||||
onSaveDraft,
|
||||
onPublish,
|
||||
onInsertExample,
|
||||
saving,
|
||||
isDirty,
|
||||
}: Props) {
|
||||
const currentPage = useEditorStore((s) => s.currentPage);
|
||||
const backlinks = useBacklinks(currentPage?.name);
|
||||
const [examplesOpen, setExamplesOpen] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="flex items-center gap-3 px-4 py-2 border-b bg-card shrink-0">
|
||||
{onNameChange ? (
|
||||
<Input
|
||||
value={pageName}
|
||||
onChange={(e) => onNameChange(e.target.value)}
|
||||
placeholder="page-name"
|
||||
className="font-mono w-48 h-8 text-sm"
|
||||
/>
|
||||
) : (
|
||||
<span className="font-mono font-semibold text-sm">{pageName}</span>
|
||||
<div className="flex items-center gap-2 px-3 py-1.5 border-b-2 border-border shrink-0">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1 text-xs uppercase tracking-wider"
|
||||
>
|
||||
<ChevronLeft className="h-3.5 w-3.5" />
|
||||
Pages
|
||||
</button>
|
||||
|
||||
<span className="text-muted-foreground/30 text-xs">│</span>
|
||||
|
||||
<PageNameField pageName={pageName} onNameChange={onNameChange} />
|
||||
|
||||
{isDirty && (
|
||||
<span className="text-[10px] text-muted-foreground/50">●</span>
|
||||
)}
|
||||
|
||||
<Popover open={examplesOpen} onOpenChange={setExamplesOpen}>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<button
|
||||
className="inline-flex items-center justify-center gap-1.5 text-xs font-medium h-8 px-3 border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground transition-all uppercase tracking-wider "
|
||||
title="Insert example template"
|
||||
>
|
||||
<BookOpen className="h-3.5 w-3.5" />
|
||||
<span>Examples</span>
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent side="bottom" align="start" sideOffset={8}>
|
||||
<PopoverHeader>
|
||||
<PopoverTitle>Insert Example</PopoverTitle>
|
||||
</PopoverHeader>
|
||||
<div className="flex flex-col gap-0.5 max-h-72 overflow-y-auto -mx-1">
|
||||
{EXAMPLES.map((ex) => (
|
||||
<button
|
||||
key={ex.name}
|
||||
onClick={() => {
|
||||
onInsertExample(ex.source);
|
||||
setExamplesOpen(false);
|
||||
}}
|
||||
className="flex flex-col items-start rounded-md px-2 py-1.5 text-left hover:bg-accent transition-colors"
|
||||
>
|
||||
<span className="text-sm font-medium">{ex.name}</span>
|
||||
<span className="text-xs text-muted-foreground leading-tight">
|
||||
{ex.description}
|
||||
</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<UploadImageButton onUploaded={(path) => onInsertExample(
|
||||
`image "${path}" braille 30\n align center`
|
||||
)} />
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<BacklinkIndicator backlinks={backlinks} />
|
||||
|
||||
{isDirty && (
|
||||
<span className="text-xs text-muted-foreground">Unsaved</span>
|
||||
)}
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={onSaveDraft}
|
||||
disabled={saving}
|
||||
>
|
||||
<Button variant="outline" onClick={onSaveDraft} disabled={saving}>
|
||||
Save Draft
|
||||
</Button>
|
||||
<Button size="sm" onClick={onPublish} disabled={saving}>
|
||||
<Button onClick={onPublish} disabled={saving}>
|
||||
Publish
|
||||
</Button>
|
||||
</div>
|
||||
@@ -115,49 +54,38 @@ export default function ToolBar({
|
||||
}
|
||||
|
||||
|
||||
function UploadImageButton({ onUploaded }: { onUploaded: (path: string) => void }) {
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
function PageNameField({
|
||||
pageName,
|
||||
onNameChange,
|
||||
}: {
|
||||
pageName: string;
|
||||
onNameChange?: (name: string) => void;
|
||||
}) {
|
||||
const [editing, setEditing] = useState(!pageName || !!onNameChange);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
|
||||
setUploading(true);
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
const res = await fetch("/api/upload-image", { method: "POST", body: form });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
const data = await res.json();
|
||||
toast.success(`Uploaded ${data.filename}`);
|
||||
onUploaded(data.path);
|
||||
} catch (err) {
|
||||
toast.error(`Upload failed: ${err}`);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
};
|
||||
if (editing || onNameChange) {
|
||||
return (
|
||||
<Input
|
||||
ref={inputRef}
|
||||
value={pageName}
|
||||
onChange={(e) => onNameChange?.(e.target.value)}
|
||||
onBlur={() => { if (pageName) setEditing(false); }}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && pageName) setEditing(false); }}
|
||||
placeholder="page-name"
|
||||
className="font-mono w-36 h-6 text-xs border-0 bg-transparent px-1"
|
||||
autoFocus
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<input
|
||||
ref={fileRef}
|
||||
type="file"
|
||||
accept="image/*"
|
||||
className="hidden"
|
||||
onChange={handleUpload}
|
||||
/>
|
||||
<button
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="inline-flex items-center justify-center gap-1.5 text-xs font-medium h-8 px-3 border-2 border-border bg-background hover:bg-accent hover:text-accent-foreground transition-all uppercase tracking-wider disabled:opacity-50"
|
||||
title="Upload image for embedding"
|
||||
>
|
||||
<Upload className="h-3.5 w-3.5" />
|
||||
<span>{uploading ? "Uploading…" : "Image"}</span>
|
||||
</button>
|
||||
</>
|
||||
<button
|
||||
onClick={() => setEditing(true)}
|
||||
className="flex items-center gap-1 font-mono text-xs font-semibold hover:text-primary transition-colors cursor-pointer"
|
||||
>
|
||||
{pageName}
|
||||
<Pencil className="w-2.5 h-2.5 text-muted-foreground" />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@ function insert(text: string): Completion["apply"] {
|
||||
function slashSnippet(template: string): Completion["apply"] {
|
||||
const snip = snippet(template);
|
||||
return (view: EditorView, c: Completion, from: number, to: number) => {
|
||||
snip(view, c, from - 1, to - 1);
|
||||
snip(view, c, from - 1, to);
|
||||
};
|
||||
}
|
||||
|
||||
@@ -120,3 +120,98 @@ export function uframeCommandSource(
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Attribute value hints — suggests valid values based on the keyword
|
||||
* on the current line. Triggers when typing a word after a keyword.
|
||||
*
|
||||
* e.g. typing `box ` suggests: light, heavy, double, rounded
|
||||
* typing `status "Server" ` suggests: online, offline, degraded
|
||||
* typing `hnav ` suggests: bar, tabs, pills, breadcrumb, underline
|
||||
*/
|
||||
|
||||
// keyword → list of valid attribute values
|
||||
const KEYWORD_VALUES: Record<string, { values: string[]; hint: string }> = {
|
||||
box: { values: ["light", "heavy", "double", "rounded"], hint: "border weight" },
|
||||
divider: { values: ["light", "heavy", "double", "dash", "dot"], hint: "divider style" },
|
||||
heading: { values: ["1", "2", "3"], hint: "heading level" },
|
||||
list: { values: ["bullet", "dash", "number", "arrow"], hint: "list style" },
|
||||
align: { values: ["left", "center", "right"], hint: "alignment" },
|
||||
status: { values: ["online", "offline", "degraded", "unknown", "alert"], hint: "state" },
|
||||
hnav: { values: ["bar", "tabs", "pills", "breadcrumb", "underline"], hint: "nav style" },
|
||||
vnav: { values: ["list", "boxed", "tree", "sidebar", "minimal"], hint: "nav style" },
|
||||
bigtitle: { values: ["block", "thin", "pixel"], hint: "font" },
|
||||
image: { values: ["braille", "block", "ascii", "halfblock"], hint: "render mode" },
|
||||
dither: { values: ["floyd", "threshold", "none"], hint: "dither algorithm" },
|
||||
source: { values: ["shell", "file", "json", "python", "rns", "param"], hint: "source type" },
|
||||
theme: { values: ["default", "nouveau", "gothic", "bamboo", "circuit", "brutalist"], hint: "theme" },
|
||||
};
|
||||
|
||||
export function uframeValueHintSource(
|
||||
ctx: CompletionContext,
|
||||
): CompletionResult | null {
|
||||
// Get the current line text up to cursor
|
||||
const line = ctx.state.doc.lineAt(ctx.pos);
|
||||
const textBefore = line.text.slice(0, ctx.pos - line.from);
|
||||
|
||||
// Don't trigger if we're typing a slash command
|
||||
if (textBefore.trimStart().startsWith("/")) return null;
|
||||
|
||||
// Extract the keyword (first word on the line, after indentation)
|
||||
const kwMatch = textBefore.match(/^\s*(\w+)\s/);
|
||||
if (!kwMatch) return null;
|
||||
|
||||
const keyword = kwMatch[1].toLowerCase();
|
||||
const entry = KEYWORD_VALUES[keyword];
|
||||
if (!entry) return null;
|
||||
|
||||
// Don't suggest if we're inside quotes
|
||||
const quotesBefore = (textBefore.match(/"/g) || []).length;
|
||||
if (quotesBefore % 2 !== 0) return null;
|
||||
|
||||
// Match: `word:partial` OR `partial` — the colon acts as a trigger
|
||||
// e.g. `bigtitle "text" font:` → match `font:` → suggest block, thin, pixel
|
||||
// e.g. `bigtitle "text" font:b` → match `font:b` → filter to block
|
||||
// e.g. `box l` → match `l` → suggest light
|
||||
// Colon trigger: `font:` or `font:b` → replace entire `font:...` with the value
|
||||
const colonWordMatch = ctx.matchBefore(/\w+:\w*/);
|
||||
if (colonWordMatch) {
|
||||
return {
|
||||
from: colonWordMatch.from, // replace from start of `font:`
|
||||
filter: false, // show all options, we handle filtering
|
||||
options: entry.values.map((v) => ({
|
||||
label: v,
|
||||
detail: entry.hint,
|
||||
type: "enum" as const,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
// Plain word match (no colon)
|
||||
const wordMatch = ctx.matchBefore(/\w+/);
|
||||
if (!wordMatch) {
|
||||
if (!ctx.explicit) return null;
|
||||
return {
|
||||
from: ctx.pos,
|
||||
options: entry.values.map((v) => ({
|
||||
label: v,
|
||||
detail: entry.hint,
|
||||
type: "enum" as const,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
const typed = ctx.state.sliceDoc(wordMatch.from, wordMatch.to);
|
||||
if (typed.toLowerCase() === keyword) return null;
|
||||
|
||||
return {
|
||||
from: wordMatch.from,
|
||||
filter: true,
|
||||
options: entry.values.map((v) => ({
|
||||
label: v,
|
||||
detail: entry.hint,
|
||||
type: "enum" as const,
|
||||
boost: -1,
|
||||
})),
|
||||
};
|
||||
}
|
||||
|
||||
281
frontend/src/components/editor/uframeHover.ts
Normal file
281
frontend/src/components/editor/uframeHover.ts
Normal file
@@ -0,0 +1,281 @@
|
||||
import { hoverTooltip, type EditorView, type Tooltip } from "@codemirror/view";
|
||||
|
||||
/**
|
||||
* µFrame keyword hover tooltips — shows syntax, attributes, and examples
|
||||
* when hovering over a DSL keyword in the editor.
|
||||
*/
|
||||
|
||||
interface KeywordDoc {
|
||||
syntax: string;
|
||||
attrs: string;
|
||||
example: string;
|
||||
}
|
||||
|
||||
const KEYWORD_DOCS: Record<string, KeywordDoc> = {
|
||||
// Layout
|
||||
page: {
|
||||
syntax: 'page "title" [width]',
|
||||
attrs: "title: string — page title\nwidth: number — page width in chars (default: 64)",
|
||||
example: 'page "Node Status" 60',
|
||||
},
|
||||
box: {
|
||||
syntax: 'box [weight] "title"',
|
||||
attrs: "weight: light | heavy | double | rounded\ntitle: string — title in top border",
|
||||
example: 'box double "System"\n text "Content here"',
|
||||
},
|
||||
row: {
|
||||
syntax: "row [gap]",
|
||||
attrs: "gap: number — space between columns (default: 1)",
|
||||
example: "row 2\n col 20\n text \"Left\"\n col\n text \"Right\"",
|
||||
},
|
||||
col: {
|
||||
syntax: "col [width]",
|
||||
attrs: "width: number — column width in chars (auto if omitted)",
|
||||
example: "col 30\n text \"Fixed width column\"",
|
||||
},
|
||||
spacer: {
|
||||
syntax: "spacer [lines]",
|
||||
attrs: "lines: number — vertical space (default: 1)",
|
||||
example: "spacer 2",
|
||||
},
|
||||
pad: {
|
||||
syntax: "pad [top] [right] [bottom] [left]",
|
||||
attrs: "top, right, bottom, left: number — padding in chars",
|
||||
example: "pad 1 2 1 2\n text \"Padded content\"",
|
||||
},
|
||||
|
||||
// Content
|
||||
heading: {
|
||||
syntax: 'heading [level] "text"',
|
||||
attrs: "level: 1 | 2 | 3 — heading size\ntext: string — heading text",
|
||||
example: 'heading 1 "Main Title"',
|
||||
},
|
||||
text: {
|
||||
syntax: 'text "content"',
|
||||
attrs: "content: string — supports @bold{}, @italic{},\n @color{hex}{}, @bg{hex}{}, @under{}",
|
||||
example: 'text "Hello @bold{world} @color{0f0}{green}"',
|
||||
},
|
||||
label: {
|
||||
syntax: 'label "key" "value"',
|
||||
attrs: "key: string — label name (bold)\nvalue: string — label value",
|
||||
example: 'label "Uptime" "14d 3h 22m"',
|
||||
},
|
||||
divider: {
|
||||
syntax: "divider [style]",
|
||||
attrs: "style: light | heavy | double | dash | dot",
|
||||
example: "divider heavy",
|
||||
},
|
||||
link: {
|
||||
syntax: 'link "display" "destination"',
|
||||
attrs: "display: string — visible text\ndestination: string — Micron page path",
|
||||
example: 'link "Home" "/page/index.mu"',
|
||||
},
|
||||
list: {
|
||||
syntax: "list [style]",
|
||||
attrs: "style: bullet | dash | number | arrow",
|
||||
example: 'list bullet\n item "First entry"\n item "Second entry"',
|
||||
},
|
||||
item: {
|
||||
syntax: 'item "text" OR item "label" "dest" [active]',
|
||||
attrs: "text: string — list item content\nlabel, dest: nav item with link\nactive: flag — highlight as current",
|
||||
example: 'item "Entry" — in list\nitem "Home" "/page/index.mu" active — in nav',
|
||||
},
|
||||
|
||||
// Data Visualization
|
||||
gauge: {
|
||||
syntax: 'gauge "label" value max width [warn=N] [crit=N]',
|
||||
attrs: "label: string — gauge name\nvalue: number — current value\nmax: number — maximum\nwidth: number — bar width in chars\nwarn: number — warning threshold\ncrit: number — critical threshold",
|
||||
example: 'gauge "CPU" 62 100 28 warn=75 crit=90',
|
||||
},
|
||||
sparkline: {
|
||||
syntax: 'sparkline "label" "values" width',
|
||||
attrs: "label: string — chart name\nvalues: string — comma-separated numbers\nwidth: number — chart width in chars",
|
||||
example: 'sparkline "Traffic" "1,3,5,8,7,5,3" 20',
|
||||
},
|
||||
status: {
|
||||
syntax: 'status "label" state',
|
||||
attrs: "label: string — indicator name\nstate: online | offline | degraded | unknown | alert",
|
||||
example: 'status "East Relay" online',
|
||||
},
|
||||
table: {
|
||||
syntax: 'table "title"',
|
||||
attrs: "title: string — table caption\nchildren: columns + row entries",
|
||||
example: 'table "Routes"\n columns "Dest" 20 | "Hops" 6\n row "east" | "2"',
|
||||
},
|
||||
columns: {
|
||||
syntax: 'columns "name" width | "name" width | ...',
|
||||
attrs: "name: string — column header\nwidth: number — column width in chars\nseparated by | pipes",
|
||||
example: 'columns "Name" 20 | "Status" 10',
|
||||
},
|
||||
|
||||
// Navigation
|
||||
hnav: {
|
||||
syntax: "hnav [style]",
|
||||
attrs: "style: bar | tabs | pills | breadcrumb | underline\nchildren: item, separator",
|
||||
example: 'hnav bar\n item "Status" "/page/status.mu" active\n item "Peers" "/page/peers.mu"',
|
||||
},
|
||||
vnav: {
|
||||
syntax: "vnav [style] [width]",
|
||||
attrs: "style: list | boxed | tree | sidebar | minimal\nwidth: number — panel width (auto if omitted)\nchildren: item, separator, heading",
|
||||
example: 'vnav boxed\n heading "Section"\n item "Page" "/page/page.mu" active',
|
||||
},
|
||||
|
||||
// Forms
|
||||
form: {
|
||||
syntax: 'form "name"',
|
||||
attrs: "name: string — form identifier\nchildren: field, password, radio, checkbox, button",
|
||||
example: 'form "search"\n field "query" 30 "Search..."\n button "Go" "/page/search.mu"',
|
||||
},
|
||||
field: {
|
||||
syntax: 'field "name" [width] "placeholder"',
|
||||
attrs: "name: string — field name\nwidth: number — input width (default: 24)\nplaceholder: string — hint text",
|
||||
example: 'field "query" 30 "Enter search term..."',
|
||||
},
|
||||
password: {
|
||||
syntax: 'password "name" [width] "placeholder"',
|
||||
attrs: "name: string — field name\nwidth: number — input width (default: 24)\nplaceholder: string — hint text",
|
||||
example: 'password "pass" 24 "Enter password"',
|
||||
},
|
||||
radio: {
|
||||
syntax: 'radio "group" "opt1" | "opt2" | "opt3"',
|
||||
attrs: "group: string — radio group name\noptions: strings separated by | pipes",
|
||||
example: 'radio "mode" "Ping" | "Trace" | "Page"',
|
||||
},
|
||||
checkbox: {
|
||||
syntax: 'checkbox "name" "label"',
|
||||
attrs: "name: string — field name\nlabel: string — display text",
|
||||
example: 'checkbox "verbose" "Verbose output"',
|
||||
},
|
||||
button: {
|
||||
syntax: 'button "label" "destination"',
|
||||
attrs: "label: string — button text\ndestination: string — link target on click",
|
||||
example: 'button "Submit" "/page/submit.mu"',
|
||||
},
|
||||
|
||||
// Big Text & Image
|
||||
bigtitle: {
|
||||
syntax: 'bigtitle "text" [font]',
|
||||
attrs: "text: string — text to render large\nfont: block | thin | pixel\nmodifiers: align, color",
|
||||
example: 'bigtitle "RELAY" block\n align center\n color 0cf',
|
||||
},
|
||||
image: {
|
||||
syntax: 'image "path" [mode] [width]',
|
||||
attrs: "path: string — image file path\nmode: braille | block | ascii | halfblock\nwidth: number — output width in chars\nmodifiers: dither, invert, align, caption",
|
||||
example: 'image "logo.png" braille 30\n dither floyd\n caption "Logo"',
|
||||
},
|
||||
|
||||
// Style
|
||||
align: {
|
||||
syntax: "align [direction]",
|
||||
attrs: "direction: left | center | right",
|
||||
example: "align center",
|
||||
},
|
||||
color: {
|
||||
syntax: "color [hex]",
|
||||
attrs: "hex: 3-digit hex color (e.g. 0f0, f00, 0cf)",
|
||||
example: "color 0cf",
|
||||
},
|
||||
bold: {
|
||||
syntax: "bold",
|
||||
attrs: "no arguments — applies bold to parent",
|
||||
example: "box light \"Title\"\n bold\n text \"Bold content\"",
|
||||
},
|
||||
theme: {
|
||||
syntax: "theme [name]",
|
||||
attrs: "name: default | nouveau | gothic | bamboo | circuit | brutalist",
|
||||
example: "theme nouveau",
|
||||
},
|
||||
|
||||
// Dynamic
|
||||
source: {
|
||||
syntax: 'source name : type "command"',
|
||||
attrs: "name: string — variable name\ntype: shell | file | json | python | rns | param\ncommand: string — command to execute",
|
||||
example: 'source cpu : shell "cat /proc/loadavg"',
|
||||
},
|
||||
let: {
|
||||
syntax: 'let name = "value"',
|
||||
attrs: "name: string — variable name\nvalue: string or number",
|
||||
example: 'let node_name = "Relay Alpha"',
|
||||
},
|
||||
cache: {
|
||||
syntax: "cache [seconds]",
|
||||
attrs: "seconds: number — cache duration (0 = never cache)",
|
||||
example: "cache 0",
|
||||
},
|
||||
if: {
|
||||
syntax: "if condition",
|
||||
attrs: "condition: expression with $variables\nchildren: content to show when true",
|
||||
example: "if $cpu > 90\n text \"ALERT: CPU critical\"",
|
||||
},
|
||||
for: {
|
||||
syntax: "for var in $collection",
|
||||
attrs: "var: string — loop variable name\ncollection: $variable — iterable data",
|
||||
example: "for peer in $peers\n status \"$peer\" online",
|
||||
},
|
||||
on_submit: {
|
||||
syntax: 'on_submit "form_name"',
|
||||
attrs: "form_name: string — form to handle\nchildren: handler logic with $field vars",
|
||||
example: 'on_submit "search"\n source results : shell "search.py \'$query\'"',
|
||||
},
|
||||
state: {
|
||||
syntax: 'state "name" "path"',
|
||||
attrs: "name: string — state variable name\npath: string — JSON file path for persistence",
|
||||
example: 'state "counter" "/tmp/counter.json"',
|
||||
},
|
||||
|
||||
// Components
|
||||
component: {
|
||||
syntax: "component name(arg1, arg2, ...)",
|
||||
attrs: "name: string — component name\nargs: parameter names\nchildren: component body template",
|
||||
example: 'component stat(label, value, max)\n gauge "$label" $value $max 20',
|
||||
},
|
||||
use: {
|
||||
syntax: 'use "library"',
|
||||
attrs: "library: std/dashboard | std/status-bar | std/nav |\n std/network | std/form | or file path",
|
||||
example: "use std/dashboard\nbanner \"My Node\" \"Mesh\"",
|
||||
},
|
||||
};
|
||||
|
||||
function getWordAt(view: EditorView, pos: number): { word: string; from: number; to: number } | null {
|
||||
const line = view.state.doc.lineAt(pos);
|
||||
const text = line.text;
|
||||
const col = pos - line.from;
|
||||
|
||||
let start = col;
|
||||
let end = col;
|
||||
while (start > 0 && /\w/.test(text[start - 1])) start--;
|
||||
while (end < text.length && /\w/.test(text[end])) end++;
|
||||
|
||||
if (start === end) return null;
|
||||
return { word: text.slice(start, end), from: line.from + start, to: line.from + end };
|
||||
}
|
||||
|
||||
export const keywordHoverTooltip = hoverTooltip((view, pos) => {
|
||||
const result = getWordAt(view, pos);
|
||||
if (!result) return null;
|
||||
|
||||
const doc = KEYWORD_DOCS[result.word.toLowerCase()];
|
||||
if (!doc) return null;
|
||||
|
||||
return {
|
||||
pos: result.from,
|
||||
end: result.to,
|
||||
above: true,
|
||||
create() {
|
||||
const dom = document.createElement("div");
|
||||
dom.className = "cm-keyword-tooltip";
|
||||
dom.innerHTML = `
|
||||
<div style="font-family:var(--font-mono);font-size:11px;max-width:360px;line-height:1.4">
|
||||
<div style="color:var(--primary);font-weight:bold;margin-bottom:4px;font-size:12px">${escHtml(doc.syntax)}</div>
|
||||
<div style="color:var(--muted-foreground);white-space:pre-wrap;margin-bottom:6px;border-bottom:1px solid var(--border);padding-bottom:6px">${escHtml(doc.attrs)}</div>
|
||||
<div style="color:var(--foreground);opacity:0.8;white-space:pre;background:var(--muted);padding:4px 6px;margin:-2px -6px -6px">${escHtml(doc.example)}</div>
|
||||
</div>
|
||||
`;
|
||||
return { dom };
|
||||
},
|
||||
} satisfies Tooltip;
|
||||
});
|
||||
|
||||
function escHtml(s: string): string {
|
||||
return s.replace(/&/g, "&").replace(/</g, "<").replace(/>/g, ">");
|
||||
}
|
||||
@@ -1,14 +1,43 @@
|
||||
import type { ReactNode } from "react";
|
||||
import { useEffect, useState, type ReactNode } from "react";
|
||||
import NavBar from "./NavBar";
|
||||
import { TooltipProvider } from "@/components/ui/tooltip";
|
||||
import { Toaster } from "@/components/ui/sonner";
|
||||
|
||||
function toRoman(n: number): string {
|
||||
const vals = [1000,900,500,400,100,90,50,40,10,9,5,4,1];
|
||||
const syms = ["M","CM","D","CD","C","XC","L","XL","X","IX","V","IV","I"];
|
||||
let r = "";
|
||||
for (let i = 0; i < vals.length; i++) {
|
||||
while (n >= vals[i]) { r += syms[i]; n -= vals[i]; }
|
||||
}
|
||||
return r;
|
||||
}
|
||||
|
||||
function RomanClock() {
|
||||
const [time, setTime] = useState(new Date());
|
||||
useEffect(() => {
|
||||
const id = setInterval(() => setTime(new Date()), 1000);
|
||||
return () => clearInterval(id);
|
||||
}, []);
|
||||
const h = time.getHours();
|
||||
const m = time.getMinutes();
|
||||
const s = time.getSeconds();
|
||||
return (
|
||||
<span>{toRoman(h || 12)}:{toRoman(m || 1).padStart(2, " ")}:{toRoman(s || 1).padStart(3, " ")}</span>
|
||||
);
|
||||
}
|
||||
|
||||
export default function AppShell({ children }: { children: ReactNode }) {
|
||||
return (
|
||||
<TooltipProvider>
|
||||
<div className="flex flex-col h-screen bg-background text-foreground">
|
||||
<NavBar />
|
||||
<main className="flex-1 overflow-auto">{children}</main>
|
||||
<footer className="flex items-center justify-center gap-3 text-[10px] text-muted-foreground py-4 shrink-0 tracking-widest uppercase">
|
||||
<span>Built with hubris by the demiurge · MMXXVI</span>
|
||||
<span className="text-muted-foreground/50">│</span>
|
||||
<span className="font-mono"><RomanClock /></span>
|
||||
</footer>
|
||||
</div>
|
||||
<Toaster />
|
||||
</TooltipProvider>
|
||||
|
||||
@@ -1,90 +1,46 @@
|
||||
import { useState } from "react";
|
||||
import { NavLink } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
AlertDialogCancel,
|
||||
AlertDialogContent,
|
||||
AlertDialogDescription,
|
||||
AlertDialogFooter,
|
||||
AlertDialogHeader,
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import baldothSvg from "@/assets/baldoth.min.svg";
|
||||
|
||||
const navLink = ({ isActive }: { isActive: boolean }) =>
|
||||
cn(
|
||||
"px-3 py-1.5 text-sm rounded-md transition-colors",
|
||||
isActive
|
||||
? "bg-accent text-accent-foreground font-medium"
|
||||
: "text-muted-foreground hover:text-foreground hover:bg-accent"
|
||||
);
|
||||
const TITLE = ` █████ ██ ██
|
||||
██████ █████ █████ █
|
||||
██ █ █ █████ █████ ███
|
||||
█ █ █ █ ██ █ ██ █
|
||||
█ █ █ █ ███ ████ ████ ████
|
||||
██ ██ █ █ ███ ████ ████ ████ █ █ ███ ████ ████ █ ███ ████ ████ ████ ███ ████ █ ███ ████ ████
|
||||
██ ██ █ █ ███ █ ███ █ ██ ████ █ ████ ████ ████ █ █ ████ ███ ████ ███ █ ███ █ ███ █ █ ████ ████ ████ █
|
||||
██ ██ █ █ ██ █ ████ ██ ██ ██ ██ ████ ██ ██ ██ ████ ████ ██ █ ████ ██ ██ ██ ████
|
||||
██ ██ █ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
██ ██ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
█ ██ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
█ █ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██ ██
|
||||
████ █ ██ ██ ███ █ ███ ██████ ██ ██ ██████ ██ ██ ██ ██ ███ █ ██████ ██ ██
|
||||
█ █████ ██ ███ █ ███████ ███ ████ ███ ███ ████ ███ ███ ███ ███ █ ███████ ████ ███ ███
|
||||
█ ██ ███ █████ ███ ███ ███ ███ ███ ███ █████ ███ ███
|
||||
█
|
||||
█
|
||||
██`;
|
||||
|
||||
export default function NavBar() {
|
||||
const [restartOpen, setRestartOpen] = useState(false);
|
||||
const [restarting, setRestarting] = useState(false);
|
||||
|
||||
const handleRestart = async () => {
|
||||
setRestarting(true);
|
||||
try {
|
||||
const res = await fetch("/api/restart", { method: "POST" });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
toast.success("NomadNet restarted");
|
||||
} catch (e) {
|
||||
toast.error(`Restart failed: ${e}`);
|
||||
} finally {
|
||||
setRestarting(false);
|
||||
setRestartOpen(false);
|
||||
}
|
||||
};
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<nav className="flex items-center gap-1 px-4 h-12 border-b bg-card shrink-0">
|
||||
<span className="mr-6 text-primary font-bold tracking-widest" title="Micronomicon"
|
||||
style={{ fontVariantLigatures: "none" }}
|
||||
>╠═ MICRONOMICON ═╣</span>
|
||||
|
||||
<NavLink to="/" end className={navLink}>
|
||||
Dashboard
|
||||
</NavLink>
|
||||
<NavLink to="/editor/new" className={navLink}>
|
||||
New Page
|
||||
</NavLink>
|
||||
<NavLink to="/graph" className={navLink}>
|
||||
Graph
|
||||
</NavLink>
|
||||
|
||||
<div className="flex-1" />
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
disabled={restarting}
|
||||
onClick={() => setRestartOpen(true)}
|
||||
<div className="flex flex-col items-center pt-6 pb-3 shrink-0 gap-2">
|
||||
<button
|
||||
onClick={() => navigate("/")}
|
||||
className="hover:opacity-80 transition-opacity cursor-pointer flex flex-col items-center gap-2"
|
||||
title="Go to Dashboard"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
Restart NomadNet
|
||||
</Button>
|
||||
|
||||
<AlertDialog open={restartOpen} onOpenChange={setRestartOpen}>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Restart NomadNet?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This will briefly interrupt mesh network connectivity.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={handleRestart}>
|
||||
Restart
|
||||
</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</nav>
|
||||
<div
|
||||
className="h-28 w-28"
|
||||
style={{
|
||||
backgroundColor: "var(--primary)",
|
||||
opacity: 0.5,
|
||||
mask: `url(${baldothSvg}) center/contain no-repeat`,
|
||||
WebkitMask: `url(${baldothSvg}) center/contain no-repeat`,
|
||||
}}
|
||||
/>
|
||||
<pre className="text-[4px] leading-[1] tracking-tighter select-none text-primary/40">{TITLE}</pre>
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -171,6 +171,19 @@
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Keyword hover tooltip */
|
||||
.cm-tooltip.cm-tooltip-hover {
|
||||
background: var(--card) !important;
|
||||
border: 2px solid var(--border) !important;
|
||||
padding: 8px 10px;
|
||||
box-shadow:
|
||||
3px 3px 0 0 var(--border),
|
||||
5px 3px 0 0 transparent,
|
||||
7px 3px 0 0 var(--border),
|
||||
4px 4px 0 0 transparent,
|
||||
6px 4px 0 0 var(--border);
|
||||
}
|
||||
|
||||
/* Ensure all interactive elements have pointer cursor */
|
||||
a, [role="link"], [role="tab"], [role="option"],
|
||||
[data-slot="popover-trigger"], [data-slot="toggle-group-item"],
|
||||
@@ -188,12 +201,9 @@
|
||||
dots at alternating positions. Works even with overflow:auto.
|
||||
*/
|
||||
|
||||
/* Panels and containers — checkerboard dot shadow */
|
||||
[data-slot="table-container"],
|
||||
/* Panels — dithered shadow (dialogs, popovers) */
|
||||
[data-slot="alert-dialog-content"],
|
||||
[data-slot="popover-content"],
|
||||
[data-slot="card"],
|
||||
.panel-shadow {
|
||||
[data-slot="popover-content"] {
|
||||
border: 2px solid var(--border);
|
||||
box-shadow:
|
||||
3px 3px 0 0 var(--border),
|
||||
@@ -208,6 +218,12 @@
|
||||
6px 6px 0 0 transparent;
|
||||
}
|
||||
|
||||
/* Table container — no own border when inside a bordered parent */
|
||||
[data-slot="table-container"] {
|
||||
border: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/* Primary (default) buttons only — dithered shadow */
|
||||
button[data-slot="button"][data-variant="default"] {
|
||||
border: 2px solid var(--border);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { Pencil, Plus, Trash2 } from "lucide-react";
|
||||
import { MoreVertical, Plus, RotateCcw } from "lucide-react";
|
||||
import { usePagesStore } from "@/stores/pagesStore";
|
||||
import StatusBadge from "@/components/dashboard/StatusBadge";
|
||||
import { Button } from "@/components/ui/button";
|
||||
@@ -13,6 +13,11 @@ import {
|
||||
TableHeader,
|
||||
TableRow,
|
||||
} from "@/components/ui/table";
|
||||
import {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
AlertDialog,
|
||||
AlertDialogAction,
|
||||
@@ -28,11 +33,61 @@ export default function DashboardView() {
|
||||
const { pages, isLoading, fetchPages, deletePage } = usePagesStore();
|
||||
const navigate = useNavigate();
|
||||
const [pageToDelete, setPageToDelete] = useState<string | null>(null);
|
||||
const [restarting, setRestarting] = useState(false);
|
||||
|
||||
const handleRestart = async () => {
|
||||
setRestarting(true);
|
||||
try {
|
||||
const res = await fetch("/api/restart", { method: "POST" });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
toast.success("NomadNet restarted");
|
||||
} catch (e) {
|
||||
toast.error(`Restart failed: ${e}`);
|
||||
} finally {
|
||||
setRestarting(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
fetchPages();
|
||||
}, []);
|
||||
|
||||
const handleUnpublish = async (name: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/pages/${name}`);
|
||||
const data = await res.json();
|
||||
if (data.source) {
|
||||
await fetch(`/api/pages/${name}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ source: data.source, publish: false }),
|
||||
});
|
||||
toast.success(`"${name}" unpublished`);
|
||||
fetchPages();
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error(`Failed: ${e}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handlePublish = async (name: string) => {
|
||||
try {
|
||||
const res = await fetch(`/api/pages/${name}`);
|
||||
const data = await res.json();
|
||||
if (data.source) {
|
||||
await fetch(`/api/pages/${name}`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ source: data.source, publish: true }),
|
||||
});
|
||||
toast.success(`"${name}" published`);
|
||||
fetchPages();
|
||||
}
|
||||
} catch (e) {
|
||||
toast.error(`Failed: ${e}`);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDelete = async () => {
|
||||
if (!pageToDelete) return;
|
||||
await deletePage(pageToDelete);
|
||||
@@ -48,28 +103,41 @@ export default function DashboardView() {
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="p-8 max-w-4xl mx-auto">
|
||||
<div className="flex justify-between items-center mb-6">
|
||||
<h1 className="text-xl font-semibold">Pages</h1>
|
||||
<Button onClick={() => navigate("/editor/new")}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Page
|
||||
</Button>
|
||||
<div className="max-w-5xl mx-auto px-4">
|
||||
<div className="border-2 border-border" style={{boxShadow:'3px 3px 0 0 var(--border),5px 3px 0 0 transparent,7px 3px 0 0 var(--border),4px 4px 0 0 transparent,6px 4px 0 0 var(--border),3px 5px 0 0 var(--border),5px 5px 0 0 transparent,7px 5px 0 0 var(--border),4px 6px 0 0 var(--border),6px 6px 0 0 transparent'}}>
|
||||
{/* Header row */}
|
||||
<div className="flex items-center px-4 py-2 border-b-2 border-border">
|
||||
<h1 className="text-sm font-semibold flex-1">Pages</h1>
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" onClick={handleRestart} disabled={restarting}>
|
||||
<RotateCcw className="w-4 h-4 mr-2" />
|
||||
Restart
|
||||
</Button>
|
||||
<Button onClick={() => navigate("/editor/new")}>
|
||||
<Plus className="w-4 h-4 mr-2" />
|
||||
New Page
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{/* Table inside bordered container */}
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
<TableHead>Name</TableHead>
|
||||
<TableHead>Title</TableHead>
|
||||
<TableHead>Status</TableHead>
|
||||
<TableHead>Size</TableHead>
|
||||
<TableHead />
|
||||
<TableHead className="w-8" />
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{pages.map((p) => (
|
||||
<TableRow key={p.name}>
|
||||
<TableRow
|
||||
key={p.name}
|
||||
className="cursor-pointer"
|
||||
onClick={() => navigate(`/editor/${p.name}`)}
|
||||
>
|
||||
<TableCell className="font-mono">
|
||||
{p.name}
|
||||
{p.name === "index" && (
|
||||
@@ -85,26 +153,42 @@ export default function DashboardView() {
|
||||
<TableCell className="text-muted-foreground">
|
||||
{p.size != null ? `${p.size} B` : "—"}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<div className="flex gap-1 justify-end">
|
||||
{p.has_source && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => navigate(`/editor/${p.name}`)}
|
||||
>
|
||||
<Pencil className="w-4 h-4" />
|
||||
</Button>
|
||||
)}
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-destructive hover:text-destructive"
|
||||
onClick={() => setPageToDelete(p.name)}
|
||||
<TableCell className="text-right w-8">
|
||||
<Popover>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<button
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="p-1 text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
|
||||
>
|
||||
<MoreVertical className="w-4 h-4" />
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent side="bottom" align="end" sideOffset={4}
|
||||
className="w-36 p-1"
|
||||
>
|
||||
<Trash2 className="w-4 h-4" />
|
||||
</Button>
|
||||
</div>
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); navigate(`/editor/${p.name}`); }}
|
||||
className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
|
||||
>Edit</button>
|
||||
{p.published ? (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handleUnpublish(p.name); }}
|
||||
className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
|
||||
>Unpublish</button>
|
||||
) : (
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); handlePublish(p.name); }}
|
||||
className="w-full text-left px-3 py-1.5 text-xs hover:bg-accent transition-colors cursor-pointer"
|
||||
>Publish</button>
|
||||
)}
|
||||
<button
|
||||
onClick={(e) => { e.stopPropagation(); setPageToDelete(p.name); }}
|
||||
className="w-full text-left px-3 py-1.5 text-xs text-destructive hover:bg-accent transition-colors cursor-pointer"
|
||||
>Delete</button>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))}
|
||||
@@ -119,7 +203,8 @@ export default function DashboardView() {
|
||||
</TableRow>
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</Table>
|
||||
</div>{/* end bordered container */}
|
||||
|
||||
<AlertDialog
|
||||
open={pageToDelete !== null}
|
||||
|
||||
@@ -1,16 +1,27 @@
|
||||
import { useEffect, useRef, useState, useCallback, useMemo } from "react";
|
||||
import { useParams, useNavigate } from "react-router-dom";
|
||||
import { toast } from "sonner";
|
||||
import { BookOpen, Upload } from "lucide-react";
|
||||
import { autocompletion } from "@codemirror/autocomplete";
|
||||
import type { Extension } from "@codemirror/state";
|
||||
import { useEditorStore } from "@/stores/editorStore";
|
||||
import { usePagesStore } from "@/stores/pagesStore";
|
||||
import { useUnsavedGuard } from "@/hooks/useUnsavedGuard";
|
||||
import { useCompile } from "@/hooks/useCompile";
|
||||
import { uframeHighlight } from "@/components/editor/uframeHighlight";
|
||||
import { uframeCommandSource, loadCommandsFromApi } from "@/components/editor/uframeCommands";
|
||||
import { uframeCommandSource, uframeValueHintSource, loadCommandsFromApi } from "@/components/editor/uframeCommands";
|
||||
import { keywordHoverTooltip } from "@/components/editor/uframeHover";
|
||||
import EditorPane from "@/components/editor/EditorPane";
|
||||
import PreviewPane from "@/components/editor/PreviewPane";
|
||||
import ToolBar from "@/components/editor/ToolBar";
|
||||
import { EXAMPLES } from "@/components/editor/examples";
|
||||
import {
|
||||
Popover,
|
||||
PopoverTrigger,
|
||||
PopoverContent,
|
||||
PopoverHeader,
|
||||
PopoverTitle,
|
||||
} from "@/components/ui/popover";
|
||||
import {
|
||||
ResizablePanelGroup,
|
||||
ResizablePanel,
|
||||
@@ -38,11 +49,12 @@ export default function EditorView() {
|
||||
() => [
|
||||
...uframeHighlight(),
|
||||
autocompletion({
|
||||
override: [uframeCommandSource],
|
||||
override: [uframeCommandSource, uframeValueHintSource],
|
||||
icons: false,
|
||||
activateOnTyping: true,
|
||||
maxOptions: 50,
|
||||
}),
|
||||
keywordHoverTooltip,
|
||||
],
|
||||
[],
|
||||
);
|
||||
@@ -130,29 +142,115 @@ export default function EditorView() {
|
||||
}, [handleSave]);
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<ToolBar
|
||||
pageName={pageName}
|
||||
onNameChange={isNew ? setPageName : undefined}
|
||||
onSaveDraft={() => handleSave(false)}
|
||||
onPublish={() => handleSave(true)}
|
||||
onInsertExample={(source) => setSource(source)}
|
||||
saving={saving}
|
||||
isDirty={isDirty}
|
||||
/>
|
||||
<ResizablePanelGroup orientation="horizontal" className="flex-1">
|
||||
<ResizablePanel defaultSize={50} minSize={20}>
|
||||
<EditorPane
|
||||
value={ufSource}
|
||||
onChange={setSource}
|
||||
extensions={extensions}
|
||||
/>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel defaultSize={50} minSize={20}>
|
||||
<PreviewPane />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
<div className="flex flex-col h-full max-w-5xl mx-auto w-full px-4">
|
||||
<div className="flex flex-col flex-1 border-2 border-border min-h-0" style={{boxShadow:'3px 3px 0 0 var(--border),5px 3px 0 0 transparent,7px 3px 0 0 var(--border),4px 4px 0 0 transparent,6px 4px 0 0 var(--border),3px 5px 0 0 var(--border),5px 5px 0 0 transparent,7px 5px 0 0 var(--border),4px 6px 0 0 var(--border),6px 6px 0 0 transparent'}}>
|
||||
<ToolBar
|
||||
pageName={pageName}
|
||||
onNameChange={isNew ? setPageName : undefined}
|
||||
onSaveDraft={() => handleSave(false)}
|
||||
onPublish={() => handleSave(true)}
|
||||
saving={saving}
|
||||
isDirty={isDirty}
|
||||
/>
|
||||
<ResizablePanelGroup orientation="horizontal" className="flex-1 min-h-0">
|
||||
<ResizablePanel defaultSize={50} minSize={20}>
|
||||
<SourcePane
|
||||
ufSource={ufSource}
|
||||
setSource={setSource}
|
||||
extensions={extensions}
|
||||
/>
|
||||
</ResizablePanel>
|
||||
<ResizableHandle />
|
||||
<ResizablePanel defaultSize={50} minSize={20}>
|
||||
<PreviewPane />
|
||||
</ResizablePanel>
|
||||
</ResizablePanelGroup>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
/** Source pane — editor with header bar matching the Preview pane */
|
||||
function SourcePane({
|
||||
ufSource,
|
||||
setSource,
|
||||
extensions,
|
||||
}: {
|
||||
ufSource: string;
|
||||
setSource: (s: string) => void;
|
||||
extensions: Extension[];
|
||||
}) {
|
||||
const [examplesOpen, setExamplesOpen] = useState(false);
|
||||
const fileRef = useRef<HTMLInputElement>(null);
|
||||
const [uploading, setUploading] = useState(false);
|
||||
|
||||
const handleUpload = async (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (!file) return;
|
||||
setUploading(true);
|
||||
try {
|
||||
const form = new FormData();
|
||||
form.append("file", file);
|
||||
const res = await fetch("/api/upload-image", { method: "POST", body: form });
|
||||
if (!res.ok) throw new Error(await res.text());
|
||||
const data = await res.json();
|
||||
toast.success(`Uploaded ${data.filename}`);
|
||||
setSource(`image "${data.path}" braille 30\n align center`);
|
||||
} catch (err) {
|
||||
toast.error(`Upload failed: ${err}`);
|
||||
} finally {
|
||||
setUploading(false);
|
||||
if (fileRef.current) fileRef.current.value = "";
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
<div className="flex items-center px-3 py-1.5 border-b-2 border-border shrink-0 gap-2">
|
||||
<span className="text-xs text-muted-foreground flex-1">Source</span>
|
||||
|
||||
<Popover open={examplesOpen} onOpenChange={setExamplesOpen}>
|
||||
<PopoverTrigger
|
||||
render={
|
||||
<button className="text-[10px] text-muted-foreground hover:text-foreground transition-colors uppercase tracking-wider flex items-center gap-1 cursor-pointer">
|
||||
<BookOpen className="h-3 w-3" />
|
||||
Examples
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<PopoverContent side="bottom" align="end" sideOffset={8}>
|
||||
<PopoverHeader>
|
||||
<PopoverTitle>Insert Example</PopoverTitle>
|
||||
</PopoverHeader>
|
||||
<div className="flex flex-col gap-0.5 max-h-72 overflow-y-auto -mx-1">
|
||||
{EXAMPLES.map((ex) => (
|
||||
<button
|
||||
key={ex.name}
|
||||
onClick={() => { setSource(ex.source); setExamplesOpen(false); }}
|
||||
className="flex flex-col items-start px-2 py-1.5 text-left hover:bg-accent transition-colors cursor-pointer"
|
||||
>
|
||||
<span className="text-sm font-medium">{ex.name}</span>
|
||||
<span className="text-xs text-muted-foreground leading-tight">{ex.description}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</PopoverContent>
|
||||
</Popover>
|
||||
|
||||
<input ref={fileRef} type="file" accept="image/*" className="hidden" onChange={handleUpload} />
|
||||
<button
|
||||
onClick={() => fileRef.current?.click()}
|
||||
disabled={uploading}
|
||||
className="text-[10px] text-muted-foreground hover:text-foreground transition-colors uppercase tracking-wider flex items-center gap-1 disabled:opacity-50 cursor-pointer"
|
||||
>
|
||||
<Upload className="h-3 w-3" />
|
||||
{uploading ? "Uploading…" : "Image"}
|
||||
</button>
|
||||
</div>
|
||||
<div className="flex-1 overflow-auto min-h-0">
|
||||
<EditorPane value={ufSource} onChange={setSource} extensions={extensions} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user