@alstar/studio 0.0.0-beta.16 → 0.0.0-beta.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.16",
+  "version": "0.0.0-beta.18",
   "type": "module",
   "main": "index.ts",
   "bin": {
@@ -10,12 +10,11 @@
     "node": ">=23.8"
   },
   "dependencies": {
-    "@hono/node-server": "^1.18.1",
+    "@hono/node-server": "1.18.1",
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
-    "hono": "^4.8.12",
+    "hono": "4.8.12",
     "@alstar/db": "0.0.0-beta.1",
-    "@alstar/refresher": "0.0.0-beta.3",
-    "@alstar/ui": "0.0.0-beta.3"
+    "@alstar/ui": "0.0.0-beta.4"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/pages/entry/[id].ts

@@ -3,6 +3,7 @@ import { defineEntry } from '../../utils/define.ts'
 
 import SiteLayout from '../../components/SiteLayout.ts'
 import Entry from '../../components/Entry.ts'
+import LivePreview from '../../components/LivePreview.ts'
 
 export default defineEntry((c) => {
   const id = c.req.param('id')
@@ -11,5 +12,10 @@ export default defineEntry((c) => {
     return html`<p>Entry page url needs an ID param: "${id}"</p>`
   }
 
-  return SiteLayout(Entry({ entryId: parseInt(id) }))
+  return SiteLayout(
+    html`<div class="entry-page">
+      ${Entry({ entryId: id })}
+      ${LivePreview({ entryId: id })}</div>
+    `
+  )
 })

package/pages/error.ts

@@ -3,12 +3,13 @@ import SiteLayout from "../components/SiteLayout.ts";
 import type { HTTPResponseError } from "hono/types";
 
 export default ((err?: Error | HTTPResponseError) => {
-
   return SiteLayout(html`
-    <article>
-      <header>Something went wrong</header>
-      <p>Try again</p>
-      <p>${err?.message || '404 - Not found'}</p>
-    </article>
+    <div class="container">
+      <article style="margin: 100px">
+        <header>Something went wrong</header>
+        <p>Try again</p>
+        <p>${err?.message || '404 - Not found'}</p>
+      </article>
+    </div>
   `, false)
 })

package/pages/login.ts

@@ -7,7 +7,7 @@ export default defineEntry(c => {
   <div class="login-form">
     <article>
       <header>Login</header>
-      <form data-on-submit="@post('/studio/api/auth/login', { contentType: 'form' })">
+      <form data-on:submit="@post('/studio/api/auth/login', { contentType: 'form' })">
         <label for="email">Email</label>  
         <input id="email" name="email" type="text" placeholder="Email">
         <label for="password">Password</label>  

package/pages/register.ts

@@ -10,8 +10,8 @@ export default defineEntry((c) => {
           <header>Register user</header>
           <form
             data-signals="{ status: 0 }"
-            data-on-submit="@post('/studio/api/auth/register', { contentType: 'form' })"
-            data-on-signal-patch="patch.status === 200 && window.location.reload()"
+            data-on:submit="@post('/studio/api/auth/register', { contentType: 'form' })"
+            data-on:signal-patch="patch.status === 200 && window.location.reload()"
           >
             <label for="email">Email</label>
             <input id="email" name="email" type="text" placeholder="Email" style="width: 100%" />

package/public/studio/css/admin-panel.css

@@ -1,28 +1,46 @@
 .admin-panel {
-  /* background: hsla(0, 0%, 0%, 0.1); */
   padding: 40px;
   margin-bottom: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
 
+  position: relative;
   height: 100%;
   min-height: inherit;
-
   min-width: 250px;
 
-  > h1 {
-    padding-bottom: 1rem;
+  border-right: 1px solid var(--pico-muted-border-color);
 
-    a {
-      display: flex;
-    }
+  /* .toggle-button {
+    position: absolute;
+    top: 0;
+    right: 0;
+    margin: 0.5rem;
+    padding: 0.2rem;
+  } */
 
-    svg {
-      height: 1.6rem;
+  header {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding-bottom: 1rem;
+    
+    .title {
+      margin: 0;
+  
+      a {
+        display: flex;
+      }
+  
+      svg {
+        height: 1.6rem;
+        width: auto;
+      }
     }
   }
 
+
   form {
     padding-bottom: 1rem;
 

package/public/studio/css/blocks-field.css

@@ -1,9 +1,22 @@
 .blocks-field {
   > header {
+    position: relative;
     display: flex;
     justify-content: space-between;
     align-items: center;
 
+    position: sticky;
+    top: 0;
+    z-index: 3;
+    background: var(--pico-background-color);
+    border-bottom: 1px solid var(--pico-muted-border-color);
+
+    padding: 1rem;
+
+    p {
+      margin: 0;
+    }
+
     > form fieldset {
       button {
         padding-inline: 1rem;
@@ -11,6 +24,8 @@
     }
 
     details {
+      margin: 0;
+
       form {
         display: flex;
       }
@@ -28,6 +43,16 @@
     }
   }
 
+  > header:after {
+    content: '';
+    position: absolute;
+    background-color: var(--pico-background-color);
+    height: 100%;
+    width: 200%;
+    left: -50%;
+    z-index: -1;
+  }
+
   article {
     > header {
       display: flex;

package/public/studio/css/entry-page.css

@@ -0,0 +1,4 @@
+.entry-page:has(#live_preview) {
+  display: grid;
+  grid-template-columns: 500px 1fr;
+}

package/public/studio/css/entry.css

@@ -0,0 +1,35 @@
+.entry{
+  height: 100vh;
+  display: grid;
+  grid-template-rows: auto 1fr;
+
+  > header {
+    background-color: var(--pico-background-color);
+    border-bottom: 1px solid var(--pico-muted-border-color);
+    padding: 1rem;
+
+    h1 {
+      font-size: 1rem;
+      font-weight: normal;
+      margin: 0;
+      font-family: var(--pico-font-family-monospace);
+    }
+  }
+
+  .content {
+    overflow: auto;
+  }
+
+  > .fields > .block {
+    padding: var(--pico-spacing);
+  
+    > header {
+      margin-block: var(--pico-block-spacing-vertical);
+    }
+  }
+
+  .field {
+    padding-top: 1rem;
+    padding-inline: 1rem;
+  }
+}

package/public/studio/css/field.css

@@ -0,0 +1,14 @@
+.field {
+  .field-text {
+    output {
+      display: grid;
+      max-height: 300px;
+      margin-bottom: 1rem;
+      
+      svg {
+        height: 100%;
+        width: 100%;
+      }
+    }
+  }
+}

package/public/studio/css/live-preview.css

@@ -0,0 +1,25 @@
+.live-preview {
+  width: 100%;
+  height: 100%;
+  border-left: 1px solid var(--pico-muted-border-color);
+  
+  display: grid;
+  grid-template-rows: auto 1fr;
+  
+  header {
+    border-bottom: 1px solid var(--pico-muted-border-color);
+    padding: 1rem;
+
+    h1 {
+      font-size: 1rem;
+      font-weight: normal;
+      margin: 0;
+      font-family: var(--pico-font-family-monospace);
+    }
+  }
+
+  iframe {
+    width: 100%;
+    height: 100%;
+  }
+}

package/public/studio/css/settings.css

@@ -1,4 +1,8 @@
 #settings {
+  padding: 1rem;
+  overflow: auto;
+  height: 100vh;
+
   tr {
     input {
       width: 100%;

package/public/studio/js/live-preview.js

@@ -0,0 +1,26 @@
+class LivePreview extends HTMLElement {
+  abortController = new AbortController()
+  mutationObserver
+  iframe
+
+  reload() {
+    this.iframe.contentWindow.location.reload()
+  }
+
+  connectedCallback() {
+    this.mutationObserver = new MutationObserver(this.reload.bind(this))
+    this.mutationObserver.observe(this, { attributes: true })
+
+    this.iframe = this.querySelector('iframe')
+
+    window.addEventListener('markdown-editor:update', this.reload.bind(this), { signal: this.abortController.signal })
+    window.addEventListener('sortable-list:update', this.reload.bind(this), { signal: this.abortController.signal })
+  }
+
+  disconnectedCallback() {
+    this.abortController?.abort()
+    this.mutationObserver?.disconnect()
+  }
+}
+
+customElements.define('live-preview', LivePreview)

package/public/studio/js/markdown-editor.js

@@ -11,11 +11,17 @@ class MarkdownEditor extends HTMLElement {
         afterUpdate: async (e) => {
           await fetch('/studio/api/value', {
             method: 'PATCH',
+            headers: {
+              render: 'LivePreview',
+              props: this.dataset.entryId
+            },
             body: JSON.stringify({
               value: e,
               id: this.dataset.id,
             }),
           })
+
+          window.dispatchEvent(new CustomEvent('markdown-editor:update'))
         },
       },
       interface: {

package/public/studio/js/sortable-list.js

@@ -13,23 +13,25 @@ class SortableList extends HTMLElement {
     this.instance = Sortable.create(this, {
       animation: 250,
       handle: `[data-handle-for="${id}"]`,
-      onEnd: (e) => {
+      onEnd: async (e) => {
         const items = [...e.target.children]
 
-        items.forEach(async (child, idx) => {
+        await Promise.all(items.map(async (child, idx) => {
           const searchParams = new URLSearchParams()
 
           searchParams.set('id', child.dataset.id)
           searchParams.set('sort-order', idx)
 
-          await fetch(`/studio/api/sort-order?${searchParams.toString()}`, {
+          return fetch(`/studio/api/sort-order?${searchParams.toString()}`, {
             method: 'post',
           })
-        })
+        }))
 
         this.querySelectorAll('[name="sort_order"]').forEach((input, idx) => {
           input.value = idx.toString()
         })
+
+        window.dispatchEvent(new CustomEvent('sortable-list:update'))
       },
     })
   }

package/public/studio/main.css

@@ -1,8 +1,16 @@
 @import 'https://esm.sh/@alstar/ui/red.css';
-/* @import '../node_modules/@alstar/ui/slate.css'; */
+/* @import '../node_modules/@alstar/ui/red.css'; */
 @import './css/admin-panel.css';
 @import './css/blocks-field.css';
 @import './css/settings.css';
+@import './css/live-preview.css';
+@import './css/entry-page.css';
+@import './css/entry.css';
+@import './css/field.css';
+
+:root {
+  --pico-font-size: 80%;
+}
 
 body {
   padding: 0;
@@ -13,13 +21,11 @@ body {
   align-content: baseline;
 
   > main {
-    padding: 40px;
-    height: 100vh;
-    overflow: auto;
     width: 100%;
+    height: 100vh;
+    padding: 0;
 
     section {
-      max-width: 900px;
       margin: 0 auto;
     }
   }
@@ -29,14 +35,6 @@ button svg, a svg {
   pointer-events: none;
 }
 
-.entry > .fields > .block {
-  padding-block: var(--pico-spacing);
-
-  > header {
-    margin-block: var(--pico-block-spacing-vertical);
-  }
-}
-
 .block {
   > header {
     margin-bottom: var(--pico-spacing);

package/public/studio/main.js

@@ -2,6 +2,7 @@ import barba from '@barba/core'
 
 import './js/markdown-editor.js'
 import './js/sortable-list.js'
+import './js/live-preview.js'
 
 barba.init({
   debug: true,

package/queries/block.ts

@@ -2,97 +2,69 @@ import { db } from '@alstar/db'
 import { sql } from '../utils/sql.ts'
 import { type DBBlockResult } from '../types.ts'
 
-function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
-  const map = new Map<number, DBBlockResult>()
-  const roots: DBBlockResult[] = []
-
-  for (const block of blocks) {
-    block.children = []
-    map.set(block.id, block)
-  }
-
-  for (const block of blocks) {
-    if (block.parent_id === null) {
-      roots.push(block)
-    } else {
-      const parent = map.get(block.parent_id)
-      if (parent) parent.children!.push(block)
-    }
-  }
-
-  // Sort children by sort_order recursively
-  const sortChildren = (node: DBBlockResult) => {
-    node.children!.sort((a, b) => a.sort_order - b.sort_order)
-    node.children!.forEach(sortChildren)
-  }
-  roots.forEach(sortChildren)
-
-  return roots
-}
-
-function buildTree(blocks: DBBlockResult[]): DBBlockResult {
-  const map = new Map<number, DBBlockResult>()
-  const roots: DBBlockResult[] = []
-
-  for (const block of blocks) {
-    block.children = []
-    map.set(block.id, block)
-  }
-
-  for (const block of blocks) {
-    if (block.parent_id === null) {
-      roots.push(block)
-    } else {
-      const parent = map.get(block.parent_id)
-      if (parent) parent.children!.push(block)
-    }
-  }
-
-  // Sort children by sort_order recursively
-  const sortChildren = (node: DBBlockResult) => {
-    node.children!.sort((a, b) => a.sort_order - b.sort_order)
-    node.children!.forEach(sortChildren)
-  }
-  roots.forEach(sortChildren)
-
-  return roots[0]
-}
-
-function transformBlocksTree(
-  block: DBBlockResult,
-  isBlocksChild?: boolean,
-): DBBlockResult {
-  const fields: Record<string, DBBlockResult> = {}
-  let hasFields = false
-
-  for (const child of block.children ?? []) {
-    const transformedChild = transformBlocksTree(
-      child,
-      child.type === 'blocks',
-    )
-
-    if (!isBlocksChild) {
-      hasFields = true
-      fields[transformedChild.name] = transformedChild
-    }
-  }
-
-  if(hasFields) {
-    block.fields = fields
-  }
+// function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
+//   const map = new Map<number, DBBlockResult>()
+//   const roots: DBBlockResult[] = []
+
+//   for (const block of blocks) {
+//     block.blocks = []
+//     map.set(block.id, block)
+//   }
+
+//   for (const block of blocks) {
+//     if (block.parent_id === null) {
+//       roots.push(block)
+//     } else {
+//       const parent = map.get(block.parent_id)
+//       if (parent) parent.blocks!.push(block)
+//     }
+//   }
+
+//   // Sort blocks by sort_order recursively
+//   const sortChildren = (node: DBBlockResult) => {
+//     node.blocks!.sort((a, b) => a.sort_order - b.sort_order)
+//     node.blocks!.forEach(sortChildren)
+//   }
+//   roots.forEach(sortChildren)
+
+//   return roots
+// }
+
+// function transformBlocksTree(
+//   block: DBBlockResult,
+//   isBlocksChild?: boolean,
+// ): DBBlockResult {
+//   const fields: Record<string, DBBlockResult> = {}
+//   let hasFields = false
+
+//   for (const child of block.blocks ?? []) {
+//     const transformedChild = transformBlocksTree(
+//       child,
+//       child.type === 'blocks',
+//     )
+
+//     if (!isBlocksChild) {
+//       hasFields = true
+//       fields[transformedChild.name] = transformedChild
+//     }
+//   }
+
+//   if(hasFields) {
+//     block.fields = fields
+//   }
   
-  if (!isBlocksChild) {
-    delete block.children
-  } else {
-    delete block.fields
-  }
+//   if (!isBlocksChild) {
+//     delete block.blocks
+//   } else {
+//     delete block.fields
+//   }
 
-  return block
-}
+//   return block
+// }
 
-function transformForest(blocks: DBBlockResult[]): DBBlockResult[] {
-  return blocks.map((block) => transformBlocksTree(block))
-}
+// function transformForest(blocks: DBBlockResult[]): DBBlockResult[] {
+//   return blocks.map((block) => transformBlocksTree(block))
+// }
 
 function rootQuery(filterSql: string, depthLimit?: number) {
   const depthLimitClause =
@@ -218,24 +190,72 @@ function buildFilterSql(params: Record<string, any>) {
   return { filterSql, sqlParams }
 }
 
-export function roots(
-  params: Record<string, any>,
-  options?: {
-    depth?: number
-  },
-): DBBlockResult[] | [] {
-  const { filterSql, sqlParams } = buildFilterSql(params)
+// export function roots(
+//   params: Record<string, any>,
+//   options?: {
+//     depth?: number
+//   },
+// ): DBBlockResult[] | [] {
+//   const { filterSql, sqlParams } = buildFilterSql(params)
+
+//   const query = rootQuery(filterSql, options?.depth)
+//   const rows = db.database
+//     .prepare(query)
+//     .all(sqlParams) as unknown as DBBlockResult[]
+
+//   if (!rows.length) return []
+
+//   const forest = buildForest(rows)
+
+//   return transformForest(forest)
+// }
+
+type DBRow = {
+  id: number
+  created_at: string
+  updated_at: string
+  name: string
+  label: string
+  type: string
+  sort_order: number
+  value: string | null
+  options: string | null
+  status: 'enabled' | 'disabled'
+  parent_id: number | null
+  depth: number
+}
 
-  const query = rootQuery(filterSql, options?.depth)
-  const rows = db.database
-    .prepare(query)
-    .all(sqlParams) as unknown as DBBlockResult[]
+type TODO = any
+
+function buildTree2(items: DBRow[]): TODO | null {
+  const map = new Map<number, TODO>();
 
-  if (!rows.length) return []
+  // First pass: clone items into map
+  for (const item of items) {
+    map.set(item.id, { ...item });
+  }
 
-  const forest = buildForest(rows)
+  let root: TODO | null = null;
 
-  return transformForest(forest)
+  // Second pass: assign blocks to parents
+  for (const item of map.values()) {
+    if (item.parent_id === null) {
+      root = item; // Root node
+    } else {
+      const parent = map.get(item.parent_id);
+      if (parent) {
+        if(parent.type === 'blocks') {
+          if (!parent.blocks) parent.blocks = [];
+          parent.blocks.push(item);
+        } else {
+          if (!parent.fields) parent.fields = {};
+          parent.fields[item.name] = item;
+        }
+      }
+    }
+  }
+
+  return root;
 }
 
 export function root(
@@ -247,13 +267,15 @@ export function root(
   const query = rootQuery(filterSql, options?.depth)
   const rows = db.database
     .prepare(query)
-    .all(sqlParams) as unknown as DBBlockResult[]
+    .all(sqlParams) as unknown as DBRow[]
 
   if (!rows.length) return null
 
-  const tree = buildTree(rows)
+  // const tree = buildTree(rows)
+
+  const tree = buildTree2(rows)
 
-  return transformBlocksTree(tree)
+  return tree // transformBlocksTree(tree)
 }
 
 export function block(params: Record<string, any>) {