+
}
- onMount={(editor) => onMount(editor, makeReal)}
+ shareZone={}
+ onMount={onMount}
/>
);
diff --git a/ui-sketcher-webview/src/ExportButton.tsx b/ui-sketcher-webview/src/ExportButton.tsx
deleted file mode 100644
index 0edd4ba..0000000
--- a/ui-sketcher-webview/src/ExportButton.tsx
+++ /dev/null
@@ -1,31 +0,0 @@
-import { useEditor } from "@tldraw/tldraw";
-import { useState } from "react";
-import { useMakeReal } from "./lib/useMakeReal";
-
-export const ExportButton = () => {
- const editor = useEditor();
- const { makeReal } = useMakeReal();
- const [loading, setLoading] = useState(false);
-
- const onClick = async () => {
- setLoading(true);
- await makeReal(editor);
- setTimeout(() => {
- // TODO: Fake loading to prevent double clicks, to improve
- setLoading(false);
- }, 3000);
- };
-
- return (
-
- );
-};
diff --git a/ui-sketcher-webview/src/chat/Chat.stories.tsx b/ui-sketcher-webview/src/chat/Chat.stories.tsx
new file mode 100644
index 0000000..ba12885
--- /dev/null
+++ b/ui-sketcher-webview/src/chat/Chat.stories.tsx
@@ -0,0 +1,12 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Chat } from "./Chat";
+
+const meta: Meta
= {
+ component: Chat,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Primary: Story = {};
diff --git a/ui-sketcher-webview/src/chat/Chat.tsx b/ui-sketcher-webview/src/chat/Chat.tsx
new file mode 100644
index 0000000..41d8ba6
--- /dev/null
+++ b/ui-sketcher-webview/src/chat/Chat.tsx
@@ -0,0 +1,87 @@
+import {
+ FormEvent,
+ KeyboardEvent,
+ Suspense,
+ useEffect,
+ useRef,
+ useState,
+} from "react";
+import { ArrowUpSquareFill } from "react-bootstrap-icons";
+import { useAssistant } from "./use-assistant";
+import { History } from "./History";
+
+interface InputProps {
+ onSubmit: (message: string) => void;
+}
+
+const Input = ({ onSubmit }: InputProps) => {
+ const ref = useRef(null);
+ const [message, setMessage] = useState("");
+ const isEmpty = message.trim().length === 0;
+
+ const forwardSubmit = (
+ e: FormEvent | KeyboardEvent,
+ ) => {
+ e.preventDefault();
+ onSubmit(message);
+ setMessage("");
+ };
+
+ const handleKeyDown = (e: React.KeyboardEvent) => {
+ if (e.key === "Enter" && (e.ctrlKey || e.metaKey)) {
+ forwardSubmit(e);
+ }
+ };
+
+ useEffect(() => {
+ if (ref.current) {
+ // Find a way to make this cleaner, up to 5 lines
+ if (ref.current.scrollHeight / 32 < 5) {
+ ref.current.style.height = "auto";
+ ref.current.style.height = ref.current.scrollHeight + "px";
+ }
+ }
+ }, [message]);
+
+ return (
+
+ );
+};
+
+export const Chat = () => (
+ waiting...}>
+
+
+);
+
+const ChatSuspense = () => {
+ const state = useAssistant();
+
+ return (
+
+
+
+
+ );
+};
diff --git a/ui-sketcher-webview/src/chat/History.stories.tsx b/ui-sketcher-webview/src/chat/History.stories.tsx
new file mode 100644
index 0000000..36d8948
--- /dev/null
+++ b/ui-sketcher-webview/src/chat/History.stories.tsx
@@ -0,0 +1,133 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { History } from "./History";
+
+const meta: Meta = {
+ component: History,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Running: Story = {
+ args: {
+ history: [
+ {
+ id: "1",
+ role: "user",
+ content: `### Hello I need to create a new file
+
+\`\`\`json
+{
+ "test": "test"
+}
+\`\`\``,
+ },
+ {
+ id: "2",
+ role: "system",
+ state: "thinking",
+ steps: [
+ {
+ type: "tools",
+ status: "running",
+ tools: [
+ {
+ id: "1",
+ name: "tool 1",
+ args: { test: "test 1" },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+};
+
+export const Fixing: Story = {
+ args: {
+ history: [
+ {
+ id: "1",
+ role: "user",
+ content: "Hello I need to create a new file",
+ },
+ {
+ id: "2",
+ role: "system",
+ state: "thinking",
+ steps: [
+ {
+ type: "tools",
+ status: "done",
+ tools: [
+ {
+ id: "1",
+ status: "error",
+ name: "tool 1",
+ args: { test: "test 1" },
+ output: { error: "error" },
+ },
+ ],
+ },
+ {
+ type: "tools",
+ status: "running",
+ tools: [
+ {
+ id: "1",
+ name: "tool 1",
+ args: { test: "test 1" },
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+};
+
+export const Done: Story = {
+ args: {
+ history: [
+ {
+ id: "1",
+ role: "user",
+ content: "Hello World",
+ },
+ {
+ id: "2",
+ role: "system",
+ state: "done",
+ steps: [
+ {
+ type: "tools",
+ status: "done",
+ tools: [
+ {
+ id: "1",
+ status: "success",
+ name: "tool 1",
+ args: { test: "test 1" },
+ output: { success: true },
+ },
+ ],
+ },
+ {
+ type: "message",
+ content: `I've create a new file for you using:
+
+- Test
+- List
+
+\`\`\`bash
+touch file.json
+\`\`\`
+`,
+ },
+ ],
+ },
+ ],
+ },
+};
diff --git a/ui-sketcher-webview/src/chat/History.tsx b/ui-sketcher-webview/src/chat/History.tsx
new file mode 100644
index 0000000..092d083
--- /dev/null
+++ b/ui-sketcher-webview/src/chat/History.tsx
@@ -0,0 +1,153 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { ArrowDownCircleFill } from "react-bootstrap-icons";
+import RMarkdown from "react-markdown";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import remarkGfm from "remark-gfm";
+import { DeepReadOnly } from "../ts.utils";
+import { StateIndicator } from "./SystemStateIndicator";
+import { ToolsStep } from "./ToolsStep";
+import { Message } from "./chat.types";
+
+const Mardown = ({ children }: { children: string }) => (
+
+ {children}
+
+);
+
+const Code = (
+ props: React.DetailedHTMLProps<
+ React.HTMLAttributes,
+ HTMLElement
+ >,
+) => {
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const { children, className, ref, ...rest } = props;
+ const match = /language-(\w+)/.exec(className || "");
+
+ if (!match) {
+ return (
+
+ {children}
+
+ );
+ }
+
+ return (
+
+
+ {String(children).replace(/\n$/, "")}
+
+
+ );
+};
+
+export const History = ({ history }: { history: DeepReadOnly }) => {
+ const scrollRef = useRef(null);
+ const [displayScrollButton, setDisplayScrollButton] = useState(false);
+
+ const onScroll = (e: React.UIEvent) => {
+ const element = e.currentTarget;
+ if (element.scrollTop + element.clientHeight < element.scrollHeight) {
+ setDisplayScrollButton(true);
+ } else {
+ setDisplayScrollButton(false);
+ }
+ };
+
+ const scrollToBottom = useCallback(
+ (smooth = true) => {
+ if (scrollRef.current) {
+ scrollRef.current.scrollTo({
+ top: scrollRef.current.scrollHeight,
+ behavior: smooth ? "smooth" : "instant",
+ });
+ }
+ },
+ [scrollRef],
+ );
+
+ // Start at bottom on mount
+ useEffect(() => {
+ scrollToBottom(false);
+ }, [scrollToBottom]);
+
+ // Scroll to bottom when history changes
+ useEffect(() => {
+ scrollToBottom();
+ }, [history?.length, scrollToBottom]);
+
+ return (
+
+ {history.map((item, index) => {
+ switch (item.role) {
+ case "system":
+ return (
+
+
+
+ {item.steps.map((step, i) => {
+ switch (step.type) {
+ case "tools":
+ return
;
+ case "message":
+ return (
+
+
{i + 1}. Response
+
+ {step.content}
+
+
+ );
+ }
+ })}
+
+
+ );
+ case "user":
+ return (
+
+ );
+ }
+ })}
+ {displayScrollButton && (
+
+
+
+ )}
+
+
+ Thinking
+
+ );
+ case "cancelled":
+ return (
+
+
+ Cancelled
+
+ );
+ case "cancelling":
+ return (
+
+
+ Cancelling
+
+ );
+ case "done":
+ return (
+
+
+ Done
+
+ );
+ case "expired":
+ return (
+
+
+ Expired
+
+ );
+ case "failed":
+ return (
+
+
+ Failed
+
+ );
+ default:
+ never(state);
+ }
+};
diff --git a/ui-sketcher-webview/src/chat/ToolsStep.stories.tsx b/ui-sketcher-webview/src/chat/ToolsStep.stories.tsx
new file mode 100644
index 0000000..a4d4d06
--- /dev/null
+++ b/ui-sketcher-webview/src/chat/ToolsStep.stories.tsx
@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { ToolsStep } from "./ToolsStep";
+
+const meta: Meta = {
+ component: ToolsStep,
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Running: Story = {
+ args: {
+ index: 1,
+ step: {
+ type: "tools",
+ status: "running",
+ tools: [
+ {
+ id: "1",
+ name: "tool 1",
+ args: { test: "test 1" },
+ },
+ {
+ id: "2",
+ name: "tool 2",
+ args: { test: "test 2" },
+ },
+ {
+ id: "3",
+ name: "tool 3",
+ args: { test: "test 3" },
+ },
+ ],
+ },
+ },
+};
+
+export const Done: Story = {
+ args: {
+ index: 1,
+ step: {
+ type: "tools",
+ status: "done",
+ tools: [
+ {
+ id: "1",
+ status: "success",
+ name: "tool 1",
+ args: { test: "test 1" },
+ output: { success: true },
+ },
+ {
+ id: "2",
+ status: "error",
+ name: "tool 2",
+ args: { test: "test 2" },
+ output: { error: "error" },
+ },
+ {
+ id: "3",
+ status: "success",
+ name: "tool 3",
+ args: { test: "test 3" },
+ output: { success: true },
+ },
+ ],
+ },
+ },
+};
diff --git a/ui-sketcher-webview/src/chat/ToolsStep.tsx b/ui-sketcher-webview/src/chat/ToolsStep.tsx
new file mode 100644
index 0000000..e51dd40
--- /dev/null
+++ b/ui-sketcher-webview/src/chat/ToolsStep.tsx
@@ -0,0 +1,72 @@
+import { ToolStep } from "./chat.types";
+import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
+import { a11yDark } from "react-syntax-highlighter/dist/esm/styles/prism";
+import { CheckCircle, XCircle } from "react-bootstrap-icons";
+import { DeepReadOnly } from "../ts.utils";
+
+interface ToolsStepProps {
+ step: DeepReadOnly;
+ index: number;
+}
+
+export const ToolsStep = ({ step, index }: ToolsStepProps) => {
+ return (
+
+
+ {index + 1}. Executing tools
+
+
+ {step.tools.map((tool, ti) => (
+
+ ))}
+
+
+
+ {tool.status === "success" ? (
+
+ ) : tool.status === "error" ? (
+
+ ) : (
+
+ )}
+ {tool.name}
+
+
+
+
+ {"// Args:\n" + JSON.stringify(tool.args, null, 2)}
+
+
+ {tool.output && (
+
+
+ {"// Output:\n" + JSON.stringify(tool.output, null, 2)}
+
+
+ )}
+
+
= typeof ShapeUtil,
+>(
+ Shape: U,
+): S | null => {
+ const editor = useEditor();
+ const [shape, setShape] = useState(null);
+
+ useEffect(() => {
+ const onEvent = () => {
+ const selectedShapes = editor.getSelectedShapes();
+ if (
+ selectedShapes.length === 1 &&
+ selectedShapes[0].type === Shape.type
+ ) {
+ setShape(selectedShapes[0] as S);
+ } else {
+ setShape(null);
+ }
+ };
+
+ editor.addListener("update", onEvent);
+
+ return () => {
+ editor.removeListener("event", onEvent);
+ };
+ }, [editor, setShape, Shape.type]);
+
+ return shape;
+};
+
+export const MermaidEditor = () => {
+ const editor = useEditor();
+ const mermaidShape = useSingleSelectedShape(MermaidShapeUtil);
+ const [value, setValue] = useState("");
+
+ useEffect(() => {
+ setValue(mermaidShape ? mermaidShape.props.source : "");
+ }, [mermaidShape]);
+
+ if (!mermaidShape) return null;
+
+ const onChange = (e: React.ChangeEvent) => {
+ setValue(e.target.value);
+ editor.updateShape({
+ id: mermaidShape.id,
+ type: mermaidShape.type,
+ props: { source: e.target.value },
+ });
+ };
+
+ return (
+
+
+
+ );
+};
diff --git a/ui-sketcher-webview/src/share-zone/share-zone.tsx b/ui-sketcher-webview/src/share-zone/share-zone.tsx
new file mode 100644
index 0000000..78af194
--- /dev/null
+++ b/ui-sketcher-webview/src/share-zone/share-zone.tsx
@@ -0,0 +1,13 @@
+import { MakeRealButton } from "./make-real-button";
+import { MermaidEditor } from "./mermaid-editor";
+
+export const ShareZone = () => {
+ return (
+
+ );
+};
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.config.ts b/ui-sketcher-webview/src/tools/mermaid/mermaid.config.ts
new file mode 100644
index 0000000..43b8ec0
--- /dev/null
+++ b/ui-sketcher-webview/src/tools/mermaid/mermaid.config.ts
@@ -0,0 +1,10 @@
+import { MermaidConfig } from "mermaid";
+import mermaidStyles from "./mermaid.css?raw";
+
+export const mermaidConfig: MermaidConfig = {
+ startOnLoad: true,
+ theme: "default",
+ securityLevel: "loose",
+ themeCSS: mermaidStyles,
+ fontFamily: "Fira Code",
+};
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.css b/ui-sketcher-webview/src/tools/mermaid/mermaid.css
new file mode 100644
index 0000000..15c3206
--- /dev/null
+++ b/ui-sketcher-webview/src/tools/mermaid/mermaid.css
@@ -0,0 +1,48 @@
+g.classGroup rect {
+ fill: #282a36;
+ stroke: #6272a4;
+}
+merm g.classGroup text {
+ fill: #f8f8f2;
+}
+g.classGroup line {
+ stroke: #f8f8f2;
+ stroke-width: 0.5;
+}
+.classLabel .box {
+ stroke: #21222c;
+ stroke-width: 3;
+ fill: #21222c;
+ opacity: 1;
+}
+.classLabel .label {
+ fill: #f1fa8c;
+}
+.relation {
+ stroke: #ff79c6;
+ stroke-width: 1;
+}
+#compositionStart,
+#compositionEnd {
+ fill: #bd93f9;
+ stroke: #bd93f9;
+ stroke-width: 1;
+}
+#aggregationEnd,
+#aggregationStart {
+ fill: #21222c;
+ stroke: #50fa7b;
+ stroke-width: 1;
+}
+#dependencyStart,
+#dependencyEnd {
+ fill: #00bcd4;
+ stroke: #00bcd4;
+ stroke-width: 1;
+}
+#extensionStart,
+#extensionEnd {
+ fill: #f8f8f2;
+ stroke: #f8f8f2;
+ stroke-width: 1;
+}
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.shape-util.tsx b/ui-sketcher-webview/src/tools/mermaid/mermaid.shape-util.tsx
new file mode 100644
index 0000000..37caae4
--- /dev/null
+++ b/ui-sketcher-webview/src/tools/mermaid/mermaid.shape-util.tsx
@@ -0,0 +1,158 @@
+import {
+ BaseBoxShapeUtil,
+ Editor,
+ Geometry2d,
+ HTMLContainer,
+ Rectangle2d,
+ SvgExportContext,
+ TLBaseShape,
+ TLUnknownShape,
+ useIsEditing,
+} from "@tldraw/tldraw";
+import { useBoxShadow } from "../use-box-shadow.hook";
+
+import mermaid from "mermaid";
+import { useEffect, useRef, useState } from "react";
+import { mermaidConfig } from "./mermaid.config";
+import { SourceStyleProp } from "../style-props";
+import { T } from "@tldraw/validate";
+
+mermaid.initialize(mermaidConfig);
+
+export type MermaidShape = TLBaseShape<
+ "mermaid",
+ {
+ source: string;
+ w: number;
+ h: number;
+ }
+>;
+
+export class MermaidShapeUtil extends BaseBoxShapeUtil {
+ static override type = "mermaid" as const satisfies string;
+
+ svgNode: SVGElement | null = null;
+
+ getDefaultProps(): MermaidShape["props"] {
+ return {
+ source: "",
+ w: (200 * 2) / 3,
+ h: (300 * 2) / 3,
+ };
+ }
+
+ static override props = {
+ source: SourceStyleProp,
+ w: T.number,
+ h: T.number,
+ };
+
+ override canEdit = () => true;
+ override isAspectRatioLocked = (_shape: TLUnknownShape) => false;
+ override canResize = (_shape: TLUnknownShape) => false;
+ override canBind = (_shape: TLUnknownShape) => true;
+ override canUnmount = () => true;
+ override canSnap = (_shape: TLUnknownShape) => true;
+
+ override getGeometry(shape: MermaidShape): Geometry2d {
+ return new Rectangle2d({
+ width: shape.props.w,
+ height: shape.props.h,
+ isFilled: true,
+ });
+ }
+
+ override toSvg(
+ _shape: MermaidShape,
+ _ctx: SvgExportContext,
+ ): SVGElement | Promise {
+ if (!this.svgNode)
+ return document.createElementNS("http://www.w3.org/2000/svg", "g");
+
+ return this.svgNode.cloneNode(true) as SVGElement;
+ }
+
+ constructor(editor: Editor) {
+ super(editor);
+ }
+
+ override component(shape: MermaidShape) {
+ const renderOnce = useRef(false);
+ const diagramRef = useRef(null);
+ const boxShadow = useBoxShadow(this.editor, shape);
+ const isEditing = useIsEditing(shape.id);
+ const mermaidDivId = `mermaid-${shape.id.replace(":", "-")}`;
+ const [svg, setSvg] = useState(null);
+
+ const { source } = shape.props;
+
+ // Render mermaid diagram
+ useEffect(() => {
+ (async () => {
+ if (isEditing || !diagramRef.current) return;
+
+ // This is a hack to get arround https://github.com/mermaid-js/mermaid/issues/2651
+ if (!renderOnce.current) {
+ renderOnce.current = true;
+ await mermaid.render(mermaidDivId, source);
+ await new Promise((resolve) => setTimeout(resolve, 1));
+ }
+
+ const { svg: renderedSvg } = await mermaid.render(mermaidDivId, source);
+
+ setSvg(renderedSvg);
+ })();
+ }, [source, isEditing, shape.id, setSvg, mermaidDivId]);
+
+ // Resize bounding box to fit diagram & update svg node ref
+ useEffect(() => {
+ if (!diagramRef.current) return;
+
+ const current = diagramRef.current;
+
+ const onResize = () => {
+ if (
+ current.offsetWidth !== shape.props.w ||
+ current.offsetHeight !== shape.props.h
+ ) {
+ this.editor.updateShape({
+ id: shape.id,
+ type: shape.type,
+ props: {
+ w: current.offsetWidth,
+ h: current.offsetHeight,
+ },
+ });
+ }
+
+ const svgNode = diagramRef.current?.querySelector("svg");
+ if (svgNode) this.svgNode = svgNode;
+ };
+
+ const observer = new ResizeObserver(onResize);
+ observer.observe(current);
+ return () => {
+ observer.unobserve(current);
+ observer.disconnect();
+ };
+ }, [diagramRef, shape.props.w, shape.props.h, shape.id, shape.type]);
+
+ return (
+
+
+
+ );
+ }
+
+ indicator(shape: MermaidShape) {
+ return ;
+ }
+}
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.test.ts b/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.test.ts
new file mode 100644
index 0000000..1a763b4
--- /dev/null
+++ b/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.test.ts
@@ -0,0 +1,20 @@
+import { describe, expect, test } from "vitest";
+import { isMermaid } from "./mermaid.utils";
+
+
+describe("isMermaid", () => {
+ test("should return true if code is mermaid", () => {
+ expect(isMermaid("flowchart\n")).toBe(true)
+ expect(isMermaid("flowchart LR\n")).toBe(true)
+
+ const code = `
+ flowchart TD
+ A[Christmas] -->|Get money| B(Go shopping)
+ B --> C{Let me think}
+ C -->|One| D[Laptop]
+ C -->|Two| E[iPhone]
+ C -->|Three| F[fa:fa-car Car]
+ `
+ expect(isMermaid(code)).toBe(true)
+ });
+});
diff --git a/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.ts b/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.ts
new file mode 100644
index 0000000..a9cbe5f
--- /dev/null
+++ b/ui-sketcher-webview/src/tools/mermaid/mermaid.utils.ts
@@ -0,0 +1,9 @@
+const mermaidTypes = ["flowchart", "sequenceDiagram", "gantt", "classDiagram", "stateDiagram-v2", "pie", "gantt", "journey", "C4Context"]
+
+export const isMermaid = (code: string) => {
+ const firstWord = code.trimStart().split(/[\s\n]/)?.[0];
+
+ if (!firstWord) return false;
+
+ return mermaidTypes.some(type => firstWord === type);
+}
\ No newline at end of file
diff --git a/ui-sketcher-webview/src/tools/style-props.ts b/ui-sketcher-webview/src/tools/style-props.ts
new file mode 100644
index 0000000..9a578d2
--- /dev/null
+++ b/ui-sketcher-webview/src/tools/style-props.ts
@@ -0,0 +1,13 @@
+import { StyleProp } from "@tldraw/tldraw";
+
+const validateString = (text: unknown): string => {
+ if (typeof text !== "string") {
+ throw new Error("Expected string");
+ }
+ return text;
+};
+
+export const SourceStyleProp = StyleProp.define("tldraw:TextStyle", {
+ defaultValue: "",
+ type: { validate: validateString },
+});
diff --git a/ui-sketcher-webview/src/tools/use-box-shadow.hook.ts b/ui-sketcher-webview/src/tools/use-box-shadow.hook.ts
new file mode 100644
index 0000000..1f5faf9
--- /dev/null
+++ b/ui-sketcher-webview/src/tools/use-box-shadow.hook.ts
@@ -0,0 +1,37 @@
+import { Editor, TLBaseShape, Vec2d, useValue } from "@tldraw/tldraw";
+
+export const useBoxShadow = (editor: Editor, shape: TLBaseShape) => useValue(
+ "box shadow",
+ () => {
+ const rotation = editor.getShapePageTransform(shape)!.rotation();
+ return getRotatedBoxShadow(rotation);
+ },
+ [editor, shape],
+);
+
+const ROTATING_BOX_SHADOWS = [
+ {
+ offsetX: 0,
+ offsetY: 2,
+ blur: 4,
+ spread: -1,
+ color: "#0000003a",
+ },
+ {
+ offsetX: 0,
+ offsetY: 3,
+ blur: 12,
+ spread: -2,
+ color: "#0000001f",
+ },
+];
+
+function getRotatedBoxShadow(rotation: number) {
+ const cssStrings = ROTATING_BOX_SHADOWS.map((shadow) => {
+ const { offsetX, offsetY, blur, spread, color } = shadow;
+ const vec = new Vec2d(offsetX, offsetY);
+ const { x, y } = vec.rot(-rotation);
+ return `${x}px ${y}px ${blur}px ${spread}px ${color}`;
+ });
+ return cssStrings.join(", ");
+}
\ No newline at end of file
diff --git a/ui-sketcher-webview/src/ts.utils.ts b/ui-sketcher-webview/src/ts.utils.ts
new file mode 100644
index 0000000..5576f43
--- /dev/null
+++ b/ui-sketcher-webview/src/ts.utils.ts
@@ -0,0 +1,16 @@
+export function never(x: never): never {
+ throw new Error("Unexpected object: " + x);
+}
+
+export type DeepReadOnly = {
+ readonly [P in keyof T]: T[P] extends (infer R)[]
+ ? DeepReadOnlyArray
+ : // eslint-disable-next-line @typescript-eslint/ban-types
+ T[P] extends Function
+ ? T[P]
+ : T[P] extends object
+ ? DeepReadOnly
+ : T[P];
+};
+
+interface DeepReadOnlyArray extends ReadonlyArray> {}
diff --git a/ui-sketcher-webview/src/vite-env.d.ts b/ui-sketcher-webview/src/vite-env.d.ts
index 11f02fe..a46a17f 100644
--- a/ui-sketcher-webview/src/vite-env.d.ts
+++ b/ui-sketcher-webview/src/vite-env.d.ts
@@ -1 +1,9 @@
///
+
+interface ImportMetaEnv {
+ readonly VITE_OPENAI_API_KEY: string;
+}
+
+interface ImportMeta {
+ readonly env: ImportMetaEnv;
+}
diff --git a/ui-sketcher-webview/tailwind.config.js b/ui-sketcher-webview/tailwind.config.js
index 614c86b..8acf04b 100644
--- a/ui-sketcher-webview/tailwind.config.js
+++ b/ui-sketcher-webview/tailwind.config.js
@@ -1,8 +1,48 @@
+import daisyui from "daisyui";
+import typography from "@tailwindcss/typography";
+
/** @type {import('tailwindcss').Config} */
export default {
content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
theme: {
- extend: {},
+ extend: {
+ zIndex: {
+ 300: 300,
+ 1000: 1000,
+ },
+ boxShadow: {
+ "tl-2": "var(--shadow-2)",
+ },
+ },
},
- plugins: [],
+ daisyui: {
+ themes: [
+ {
+ tldraw: {
+ primary: "#0766AD",
+ secondary: "#29ADB2",
+ accent: "#C5E898",
+ neutral: "#030d10",
+ "base-100": "#f5f5f4",
+ info: "#00efff",
+ success: "#edf3ec",
+ warning: "#fbf3db",
+ error: "#fdebec",
+ ".text-error": {
+ color: "#D44747",
+ },
+ ".text-warning": {
+ color: "#D9730D",
+ },
+ ".text-success": {
+ color: "#448361",
+ },
+ "--rounded-box": "0.5rem", // border radius rounded-box utility class, used in card and other large boxes
+ "--rounded-btn": "0.5rem", // border radius rounded-btn utility class, used in buttons and similar element
+ "--rounded-badge": "1rem", // border radius rounded-badge utility class, used in badges and similar
+ },
+ },
+ ],
+ },
+ plugins: [typography, daisyui],
};
diff --git a/ui-sketcher-webview/tldraw-examples/tools.ts b/ui-sketcher-webview/tldraw-examples/tools.ts
new file mode 100644
index 0000000..4c40507
--- /dev/null
+++ b/ui-sketcher-webview/tldraw-examples/tools.ts
@@ -0,0 +1,38 @@
+import { TLUiOverrides, toolbarItem } from "@tldraw/tldraw";
+
+export const myOverrides: TLUiOverrides = {
+ actions(editor, actions) {
+ // Create a new action or replace an existing one
+ actions["my-new-action"] = {
+ id: "my-new-action",
+ label: "My new action",
+ readonlyOk: true,
+ kbd: "$u",
+ onSelect(_source: any) {
+ // Whatever you want to happen when the action is run
+ window.alert("My new action just happened!");
+ },
+ };
+ return actions;
+ },
+ tools(editor, tools) {
+ // Create a tool item in the ui's context.
+ tools.myNewTool = {
+ id: "my-new-tool",
+ icon: "triangle-down",
+ label: "New Tool",
+ kbd: "c",
+ readonlyOk: false,
+ onSelect: () => {
+ // Wccchatever you want to happen when the tool is selected
+ alert("Card tool selected!");
+ editor.setCurrentTool("card");
+ },
+ };
+ return tools;
+ },
+ toolbar(editor, toolbar, { tools }) {
+ toolbar.splice(4, 0, toolbarItem(tools.myNewTool));
+ return toolbar;
+ },
+};
diff --git a/ui-sketcher-webview/tsconfig.json b/ui-sketcher-webview/tsconfig.json
index a7fc6fb..9995662 100644
--- a/ui-sketcher-webview/tsconfig.json
+++ b/ui-sketcher-webview/tsconfig.json
@@ -16,8 +16,6 @@
/* Linting */
"strict": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src"],
diff --git a/ui-sketcher.code-workspace b/ui-sketcher.code-workspace
index 8bdf152..45bf9c2 100644
--- a/ui-sketcher.code-workspace
+++ b/ui-sketcher.code-workspace
@@ -1,17 +1,21 @@
{
"folders": [
- {
- "path": "."
- },
- {
- "path": "ui-sketcher-webview"
- },
- {
- "path": "ui-sketcher-extension"
- }
-],
+ {
+ "path": "."
+ },
+ {
+ "path": "ui-sketcher-webview"
+ },
+ {
+ "path": "ui-sketcher-extension"
+ }
+ ],
"settings": {
"typescript.tsc.autoDetect": "off",
- "editor.formatOnSave": true
+ "editor.formatOnSave": true,
+ "files.associations": {
+ "*.css": "tailwindcss"
+ },
+ "editor.defaultFormatter": "esbenp.prettier-vscode"
}
}