create-visualbuild-app 0.1.0

package/visual-app-builder/src/data/primitiveRegistry.ts

@@ -0,0 +1,368 @@
+import type { PrimitiveDefinition, PrimitiveType, PropSchema } from '../types'
+
+const commonProps = {
+  id: { type: 'string', label: 'ID', default: '' },
+  className: { type: 'string', label: 'Tailwind classes', default: '' },
+} as const
+
+const textProp = { type: 'string', label: 'Text', default: 'Text' } as const
+const textAreaProp = { type: 'text', label: 'Text', default: 'Text' } as const
+
+function node(
+  type: PrimitiveType,
+  category: string,
+  description: string,
+  defaultProps: Record<string, unknown> = {},
+  propSchema: Record<string, PropSchema> = commonProps,
+  acceptsChildren = true
+): PrimitiveDefinition {
+  return {
+    type,
+    label: type,
+    category,
+    icon: type,
+    description,
+    defaultProps,
+    propSchema,
+    acceptsChildren,
+  }
+}
+
+function textNode(
+  type: PrimitiveType,
+  category: string,
+  description: string,
+  text: string,
+  className = ''
+): PrimitiveDefinition {
+  return node(
+    type,
+    category,
+    description,
+    { text, className },
+    {
+      text: { ...textProp, default: text },
+      ...commonProps,
+    },
+    false
+  )
+}
+
+export const primitiveRegistry: Record<PrimitiveType, PrimitiveDefinition> = {
+  header: node('header', 'Semantic', 'Introductory page or section content', {
+    className: 'w-full',
+  }),
+  nav: node('nav', 'Semantic', 'Navigation region', {
+    className: 'flex items-center justify-between px-6 py-3 bg-gray-900 text-white',
+  }),
+  main: node('main', 'Semantic', 'Primary page content', {
+    className: 'w-full min-h-screen',
+  }),
+  section: node('section', 'Semantic', 'Standalone page section', {
+    className: 'w-full px-6 py-10',
+  }),
+  article: node('article', 'Semantic', 'Self-contained content region', {
+    className: 'w-full bg-white border border-gray-200 p-5 shadow-sm',
+  }),
+  aside: node('aside', 'Semantic', 'Secondary sidebar content', {
+    className: 'w-full',
+  }),
+  footer: node('footer', 'Semantic', 'Footer region', {
+    className: 'w-full bg-gray-900 text-gray-400 text-center py-4 text-xs',
+  }),
+  address: textNode(
+    'address',
+    'Semantic',
+    'Contact information',
+    'Contact information',
+    'not-italic'
+  ),
+  hgroup: node('hgroup', 'Semantic', 'Grouped heading content', {
+    className: 'space-y-2',
+  }),
+
+  div: node('div', 'Layout', 'Generic layout box', {
+    className: 'w-full min-h-12',
+  }),
+  span: textNode('span', 'Layout', 'Inline text wrapper', 'Inline text', 'text-sm'),
+
+  h1: textNode('h1', 'Text', 'Main heading', 'Heading', 'text-3xl font-bold'),
+  h2: textNode(
+    'h2',
+    'Text',
+    'Section heading',
+    'Section heading',
+    'text-2xl font-semibold'
+  ),
+  h3: textNode('h3', 'Text', 'Small heading', 'Small heading', 'text-xl font-semibold'),
+  h4: textNode('h4', 'Text', 'Fourth-level heading', 'Heading', 'text-lg font-semibold'),
+  h5: textNode('h5', 'Text', 'Fifth-level heading', 'Heading', 'text-base font-semibold'),
+  h6: textNode('h6', 'Text', 'Sixth-level heading', 'Heading', 'text-sm font-semibold'),
+  p: node(
+    'p',
+    'Text',
+    'Paragraph text',
+    { text: 'Paragraph text', className: 'text-sm text-gray-600' },
+    {
+      text: { ...textAreaProp, default: 'Paragraph text' },
+      ...commonProps,
+    },
+    false
+  ),
+  br: node('br', 'Text', 'Line break', {}, commonProps, false),
+  hr: node('hr', 'Text', 'Thematic divider', { className: 'border-gray-200' }, commonProps, false),
+  pre: textNode('pre', 'Text', 'Preformatted text', 'Preformatted text', 'font-mono text-sm'),
+  blockquote: textNode(
+    'blockquote',
+    'Text',
+    'Quoted block',
+    'Quote text',
+    'border-l-4 border-gray-300 pl-4 italic'
+  ),
+  strong: textNode('strong', 'Text', 'Strong importance', 'Strong text', 'font-bold'),
+  b: textNode('b', 'Text', 'Bold text', 'Bold text', 'font-bold'),
+  em: textNode('em', 'Text', 'Emphasized text', 'Emphasized text', 'italic'),
+  i: textNode('i', 'Text', 'Italic text', 'Italic text', 'italic'),
+  u: textNode('u', 'Text', 'Underlined text', 'Underlined text', 'underline'),
+  s: textNode('s', 'Text', 'Struck-through text', 'Struck text', 'line-through'),
+  small: textNode('small', 'Text', 'Small print text', 'Small text', 'text-xs'),
+  mark: textNode('mark', 'Text', 'Highlighted text', 'Highlighted text', 'bg-yellow-200'),
+  sub: textNode('sub', 'Text', 'Subscript text', 'subscript'),
+  sup: textNode('sup', 'Text', 'Superscript text', 'superscript'),
+  code: textNode('code', 'Text', 'Inline code', 'code', 'font-mono text-sm'),
+  kbd: textNode('kbd', 'Text', 'Keyboard input', 'Ctrl K', 'font-mono text-xs'),
+  samp: textNode('samp', 'Text', 'Sample output', 'Sample output', 'font-mono text-sm'),
+  var: textNode('var', 'Text', 'Variable text', 'variable', 'italic'),
+  abbr: textNode('abbr', 'Text', 'Abbreviation', 'HTML'),
+  cite: textNode('cite', 'Text', 'Citation title', 'Citation', 'italic'),
+  q: textNode('q', 'Text', 'Inline quotation', 'Inline quote'),
+  time: textNode('time', 'Text', 'Time or date', '2026-07-10'),
+
+  a: node(
+    'a',
+    'Links & Lists',
+    'Anchor link',
+    { text: 'Link', href: '#', target: '_self', className: 'text-sm text-blue-600' },
+    {
+      text: { type: 'string', label: 'Text', default: 'Link' },
+      href: { type: 'string', label: 'Href', default: '#' },
+      target: {
+        type: 'select',
+        label: 'Target',
+        default: '_self',
+        options: ['_self', '_blank'],
+      },
+      ...commonProps,
+    },
+    false
+  ),
+  ul: node('ul', 'Links & Lists', 'Unordered list', { className: 'list-disc pl-6' }),
+  ol: node('ol', 'Links & Lists', 'Ordered list', { className: 'list-decimal pl-6' }),
+  li: textNode('li', 'Links & Lists', 'List item', 'List item'),
+  dl: node('dl', 'Links & Lists', 'Description list', { className: 'space-y-2' }),
+  dt: textNode('dt', 'Links & Lists', 'Description term', 'Term', 'font-semibold'),
+  dd: textNode('dd', 'Links & Lists', 'Description details', 'Description', 'ml-4'),
+  menu: node('menu', 'Links & Lists', 'Menu list', { className: 'flex gap-2' }),
+
+  img: node(
+    'img',
+    'Media',
+    'Image element',
+    { src: '', alt: '', className: 'max-w-full' },
+    {
+      src: { type: 'string', label: 'Source', default: '' },
+      alt: { type: 'string', label: 'Alt text', default: '' },
+      ...commonProps,
+    },
+    false
+  ),
+  picture: node('picture', 'Media', 'Responsive image wrapper'),
+  source: node(
+    'source',
+    'Media',
+    'Media source',
+    { src: '', type: '' },
+    {
+      src: { type: 'string', label: 'Source', default: '' },
+      type: { type: 'string', label: 'MIME type', default: '' },
+      ...commonProps,
+    },
+    false
+  ),
+  figure: node('figure', 'Media', 'Figure with optional caption', {
+    className: 'w-full',
+  }),
+  figcaption: textNode('figcaption', 'Media', 'Figure caption', 'Caption', 'text-sm text-gray-500'),
+  video: node(
+    'video',
+    'Media',
+    'Video player',
+    { src: '', controls: true, className: 'w-full' },
+    {
+      src: { type: 'string', label: 'Source', default: '' },
+      controls: { type: 'boolean', label: 'Controls', default: true },
+      ...commonProps,
+    },
+    false
+  ),
+  audio: node(
+    'audio',
+    'Media',
+    'Audio player',
+    { src: '', controls: true },
+    {
+      src: { type: 'string', label: 'Source', default: '' },
+      controls: { type: 'boolean', label: 'Controls', default: true },
+      ...commonProps,
+    },
+    false
+  ),
+  iframe: node(
+    'iframe',
+    'Media',
+    'Embedded frame',
+    { src: '', title: 'Embedded content', className: 'w-full aspect-video' },
+    {
+      src: { type: 'string', label: 'Source', default: '' },
+      title: { type: 'string', label: 'Title', default: 'Embedded content' },
+      ...commonProps,
+    },
+    false
+  ),
+  canvas: node('canvas', 'Media', 'Canvas drawing surface', { className: 'w-full min-h-48' }, commonProps, false),
+  svg: node('svg', 'Media', 'Inline SVG container', { className: 'w-6 h-6' }),
+
+  form: node('form', 'Forms', 'Form container', { className: 'space-y-4' }),
+  label: node(
+    'label',
+    'Forms',
+    'Form label',
+    { text: 'Label', htmlFor: '', className: 'text-sm font-medium' },
+    {
+      text: { type: 'string', label: 'Text', default: 'Label' },
+      htmlFor: { type: 'string', label: 'For', default: '' },
+      ...commonProps,
+    },
+    false
+  ),
+  input: node(
+    'input',
+    'Forms',
+    'Text input',
+    { type: 'text', name: '', placeholder: 'Enter text', className: 'w-full border border-gray-300 px-3 py-2' },
+    {
+      type: { type: 'string', label: 'Type', default: 'text' },
+      name: { type: 'string', label: 'Name', default: '' },
+      placeholder: { type: 'string', label: 'Placeholder', default: 'Enter text' },
+      ...commonProps,
+    },
+    false
+  ),
+  textarea: node(
+    'textarea',
+    'Forms',
+    'Multiline text input',
+    { text: '', name: '', placeholder: 'Enter text', className: 'w-full min-h-24 border border-gray-300 px-3 py-2' },
+    {
+      text: { ...textAreaProp, default: '' },
+      name: { type: 'string', label: 'Name', default: '' },
+      placeholder: { type: 'string', label: 'Placeholder', default: 'Enter text' },
+      ...commonProps,
+    },
+    false
+  ),
+  button: node(
+    'button',
+    'Forms',
+    'Native button',
+    { text: 'Button', type: 'button', className: 'px-4 py-2 rounded bg-gray-900 text-white text-sm' },
+    {
+      text: { type: 'string', label: 'Text', default: 'Button' },
+      type: {
+        type: 'select',
+        label: 'Type',
+        default: 'button',
+        options: ['button', 'submit', 'reset'],
+      },
+      ...commonProps,
+    },
+    false
+  ),
+  select: node('select', 'Forms', 'Select input', {
+    className: 'w-full border border-gray-300 px-3 py-2',
+  }),
+  option: node(
+    'option',
+    'Forms',
+    'Select option',
+    { text: 'Option', value: '' },
+    {
+      text: { type: 'string', label: 'Text', default: 'Option' },
+      value: { type: 'string', label: 'Value', default: '' },
+      ...commonProps,
+    },
+    false
+  ),
+  optgroup: node(
+    'optgroup',
+    'Forms',
+    'Option group',
+    { label: 'Group' },
+    {
+      label: { type: 'string', label: 'Label', default: 'Group' },
+      ...commonProps,
+    }
+  ),
+  fieldset: node('fieldset', 'Forms', 'Grouped form fields', {
+    className: 'border border-gray-300 p-4',
+  }),
+  legend: textNode('legend', 'Forms', 'Fieldset legend', 'Legend', 'px-1 text-sm font-medium'),
+  datalist: node('datalist', 'Forms', 'Autocomplete options'),
+  output: textNode('output', 'Forms', 'Calculation output', 'Output'),
+  progress: node(
+    'progress',
+    'Forms',
+    'Progress indicator',
+    { value: 40, max: 100, className: 'w-full' },
+    {
+      value: { type: 'number', label: 'Value', default: 40 },
+      max: { type: 'number', label: 'Max', default: 100 },
+      ...commonProps,
+    },
+    false
+  ),
+  meter: node(
+    'meter',
+    'Forms',
+    'Scalar measurement',
+    { value: 40, min: 0, max: 100, className: 'w-full' },
+    {
+      value: { type: 'number', label: 'Value', default: 40 },
+      min: { type: 'number', label: 'Min', default: 0 },
+      max: { type: 'number', label: 'Max', default: 100 },
+      ...commonProps,
+    },
+    false
+  ),
+
+  table: node('table', 'Tables', 'Table', { className: 'w-full border-collapse' }),
+  caption: textNode('caption', 'Tables', 'Table caption', 'Caption', 'caption-top text-sm'),
+  thead: node('thead', 'Tables', 'Table header group'),
+  tbody: node('tbody', 'Tables', 'Table body group'),
+  tfoot: node('tfoot', 'Tables', 'Table footer group'),
+  tr: node('tr', 'Tables', 'Table row'),
+  th: textNode('th', 'Tables', 'Header cell', 'Header', 'border px-3 py-2 text-left font-semibold'),
+  td: textNode('td', 'Tables', 'Table cell', 'Cell', 'border px-3 py-2'),
+  colgroup: node('colgroup', 'Tables', 'Column group'),
+  col: node('col', 'Tables', 'Table column', {}, commonProps, false),
+
+  details: node('details', 'Interactive', 'Disclosure container', {
+    className: 'w-full',
+  }),
+  summary: textNode('summary', 'Interactive', 'Disclosure summary', 'Summary', 'cursor-pointer'),
+  dialog: node('dialog', 'Interactive', 'Dialog element', {
+    className: 'rounded border border-gray-200 p-4',
+  }),
+}
+
+export const primitives = Object.values(primitiveRegistry)

package/visual-app-builder/src/index.css

@@ -0,0 +1,111 @@
+@import "tailwindcss" source(none);
+@source ".";
+@source "../.visualbuild-runtime-classes.html";
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#root {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+body {
+  font-family: "Inter", system-ui, sans-serif;
+  -webkit-font-smoothing: antialiased;
+}
+
+[data-vb-editor-node="true"] {
+  cursor: pointer;
+}
+
+[data-vb-editor-node="true"]:hover,
+[data-vb-hovered="true"] {
+  outline: 2px solid rgb(96 165 250 / 0.95) !important;
+  outline-offset: -2px;
+  box-shadow: 0 0 0 1px rgb(96 165 250 / 0.25);
+}
+
+[data-vb-selected="true"] {
+  outline: 2px solid rgb(37 99 235) !important;
+  outline-offset: -2px;
+  box-shadow: 0 0 0 1px rgb(37 99 235 / 0.25);
+}
+
+[data-vb-drop-target="true"] {
+  outline: 2px solid rgb(59 130 246) !important;
+  outline-offset: -2px;
+}
+
+[data-vb-dragging="true"] {
+  cursor: grabbing;
+}
+
+.vb-empty-node-placeholder {
+  pointer-events: none;
+  display: flex;
+  min-height: 2rem;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  border: 1px dashed rgb(147 197 253 / 0.85);
+  border-radius: 6px;
+  background: rgb(239 246 255 / 0.72);
+  color: rgb(37 99 235);
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 1;
+}
+
+.vb-canvas-editor-frame {
+  outline: 1px solid rgb(229 231 235);
+  outline-offset: -1px;
+}
+
+.vb-canvas-editor-frame[data-vb-canvas-over="true"] {
+  outline: 2px solid rgb(59 130 246);
+  outline-offset: -2px;
+  box-shadow: inset 0 0 0 2px rgb(147 197 253 / 0.45);
+}
+
+select option {
+  color: #111827;
+  background: #ffffff;
+}
+
+/* Scrollbars */
+
+::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #2d3139;
+  border-radius: 999px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #3d4249;
+}
+
+
+@theme {
+  --color-canvas: #f8f9fa;
+  --color-sidebar: #1a1d23;
+  --color-panel: #1a1d23;
+  --color-topbar: #13151a;
+
+  --color-accent: #4f6ef7;
+  --color-accent-hover: #3d5ce0;
+}

package/visual-app-builder/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)