steveruizok

You are an expert in tldraw and can generate XML to create and manipulate shapes on a tldraw canvas. You can create geometric shapes (rectangles, circles, stars, hearts, arrows, etc.), text, notes, frames, lines, highlights, and more. You can respond with a combination of thoughts, statements, and actions, using the following XML format.

Thoughts

Thoughts should be enclosed in <thoughts> tags. You can have multiple thoughts sections. Use thoughts to plan your actions, reflect on the user's request, and reason about what to do. Each <thoughts> section must be properly closed with </thoughts>.

Example with single thought:

<thoughts>

steveruizok

Make Real System Prompt

You are an expert web developer who specializes in transforming wireframes and sketches into polished, interactive single-page websites. Your mission is to create impressive, functional prototypes that exceed expectations.

Core Responsibilities

• Convert low-fidelity designs into high-fidelity, responsive HTML prototypes
• Create a single, complete HTML file with embedded CSS and JavaScript
• Build interactive, working features rather than static mockups
• Make intelligent assumptions to fill gaps in specifications

steveruizok

import { useEffect, useState } from 'react'

export type TLTypeFace = {
	url: string
	display?: any // FontDisplay
	featureSettings?: string
	stretch?: string
	style?: string
	unicodeRange?: string
	variant?: string

steveruizok

/**
 * Get a point along an arc.
 *
 * @param center - The arc's center.
 * @param radius - The arc's radius.
 * @param startAngle - The start point of the arc.
 * @param size - The size of the arc.
 * @param t - The point along the arc to get.
 */

steveruizok

function getTextBoundingBox(text: SVGTextElement) {
	const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
	svg.appendChild(text)

	document.body.appendChild(svg)
	const bbox = text.getBoundingClientRect()
	document.body.removeChild(svg)

	return bbox
}

steveruizok

// =========================
// Modified code originally from <https://github.com/qzb/is-animated>
//
// # [MIT License](https://spdx.org/licenses/MIT)
//
// Copyright (c) 2016 Józef Sokołowski <[email protected]>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

steveruizok

import '@tldraw/tldraw/tldraw.css'
import { RecordsDiff, TLRecord, Tldraw, useEditor } from '@tldraw/tldraw'
import { useEffect, useRef } from 'react'

export default function App() {
	return (
		<div className="tldraw__editor">
			<Tldraw autoFocus>
				<Slider />
			</Tldraw>

steveruizok

const serializableTypes = new Set(['string', 'number', 'boolean', 'undefined'])

/**
 * Get whether a value is serializable.
 *
 * @example
 *
 * ```ts
 * const A = isSerializable(1) // true

steveruizok

import { Node, mergeAttributes } from "@tiptap/core";
import { NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
import { Tldraw } from "@tldraw/tldraw"; // use @tldraw/tldraw@canary
import "@tldraw/tldraw/tldraw.css";

function Component() {
  return (
    <NodeViewWrapper className="react-component">
      <div style={{ width: "100%", height: 500 }}>
        <Tldraw />

steveruizok

export async function writeV1ContentsToIdb() {
	// openDB is a wrapper around indexedDB.open that adds a version migration hook, but we've had to drop it as a dependency. Here it is quicky re-implemented:

	function openDB(name: string, version: number) {
		const request = indexedDB.open(name, version)
		return new Promise<IDBDatabase>((resolve, reject) => {
			request.onerror = () => reject(request.error)
			request.onsuccess = () => resolve(request.result)
			request.onupgradeneeded = () => {
				const db = request.result