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

package/components/BlockFieldRenderer.ts

@@ -26,7 +26,7 @@ export default (props: {
 
   if (!data) return html`<p>No block</p>`
 
-  const entries = Object.entries(structure.children)
+  const entries = Object.entries(structure.blocks)
 
   const rows = query.blocks({ parent_id: data.id })
 

package/components/FieldRenderer.ts

@@ -1,6 +1,7 @@
 import { Field } from './fields/index.ts'
 import type { BlocksFieldDefStructure, FieldDefStructure } from '../types.ts'
 import BlockFieldRenderer from './BlockFieldRenderer.ts'
+import { BlockFieldInstance } from '../utils/define.ts'
 
 export default (props: {
   entryId: number
@@ -11,6 +12,10 @@ export default (props: {
 }) => {
   const { entryId, parentId, structure, name, id } = props
 
+  if (structure.instanceOf === BlockFieldInstance) {
+    return BlockFieldRenderer({ entryId, parentId, name, structure, id })
+  }
+
   switch (structure.type) {
     case 'text': {
       return Field.Text({ entryId, parentId, name, id, structure })
@@ -28,8 +33,8 @@ export default (props: {
       return Field.Text({ entryId, parentId, name, structure, id })
     }
 
-    case 'blocks': {
-      return BlockFieldRenderer({ entryId, parentId, name, structure, id })
+    case 'reference': {
+      return Field.Reference({ entryId, parentId, name, structure, id })
     }
   }
 }

package/components/Render.ts

@@ -41,6 +41,11 @@ export default (props: {
       }
     }
   } catch (error) {
-    return html`<p>Error rendering "${name}"</p>`
+    console.log(error)
+    
+    return html`
+      <p>Error rendering "${name}"</p>
+      <pre><code>${JSON.stringify(error, null, 2)}</code></pre>
+    `
   }
 }

package/components/fields/Reference.ts

@@ -0,0 +1,67 @@
+import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
+import { html } from '../../utils/html.ts'
+import type { FieldDefStructure, ReferenceFieldStructure } from '../../types.ts'
+import { query } from '../../queries/index.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  id?: number
+  structure: ReferenceFieldStructure
+  sortOrder?: number
+}) => {
+  const { entryId, parentId, name, structure, sortOrder = 0, id } = props
+
+  const data = getOrCreateRow({
+    parentId,
+    name,
+    field: structure,
+    sortOrder,
+    id,
+  })
+
+  if (!data) return html`<p>No block</p>`
+
+  const entries = query.roots({ type: structure.to }, { depth: 1 })
+
+  return html`
+    <form
+      data-on-input="@patch('/studio/api/block', {
+        contentType: 'form',
+        headers: {
+          render: ''
+        }
+      })"
+    >
+      <hgroup>
+        <label for="block-${data.id}">${structure.label}</label>
+        ${structure.description &&
+        html`
+          <p><small>${structure.description}</small></p>
+        `}
+      </hgroup>
+
+      <input
+        list="entries-${data.id}"
+        id="block-${data.id}"
+        name="value"
+        value="${data.value}"
+      />
+      <datalist id="entries-${data.id}">
+        ${entries.map((entry) => {
+          return html`<option value="${entry.fields.slug.value}">
+              ${entry.fields.title.value}
+            </option>`
+        })}
+      </datalist>
+
+      <input type="hidden" name="id" value="${data.id}" />
+      
+      <!-- <input type="hidden" name="type" value="{structure.type}" />
+      <input type="hidden" name="entryId" value="{entryId}" />
+      <input type="hidden" name="parentId" value="{parentId}" />
+      <input type="hidden" name="name" value="{name}" /> -->
+    </form>
+`
+}

package/components/fields/index.ts

@@ -1,7 +1,8 @@
 import Text from './Text.ts'
 import Markdown from './Markdown.ts'
 import Slug, { routes as slugRoutes } from './Slug.ts'
+import Reference from './Reference.ts'
 
-export const Field = { Text, Markdown, Slug }
+export const Field = { Text, Markdown, Slug, Reference }
 
 export const fieldRoutes = [slugRoutes]

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alstar/studio",
-  "version": "0.0.0-beta.15",
+  "version": "0.0.0-beta.16",
   "type": "module",
   "main": "index.ts",
   "bin": {
@@ -13,9 +13,9 @@
     "@hono/node-server": "^1.18.1",
     "@starfederation/datastar-sdk": "1.0.0-RC.1",
     "hono": "^4.8.12",
-    "@alstar/ui": "0.0.0-beta.2",
+    "@alstar/db": "0.0.0-beta.1",
     "@alstar/refresher": "0.0.0-beta.3",
-    "@alstar/db": "0.0.0-beta.1"
+    "@alstar/ui": "0.0.0-beta.3"
   },
   "devDependencies": {
     "@types/node": "^24.1.0",

package/public/studio/main.css

@@ -1,4 +1,5 @@
 @import 'https://esm.sh/@alstar/ui/red.css';
+/* @import '../node_modules/@alstar/ui/slate.css'; */
 @import './css/admin-panel.css';
 @import './css/blocks-field.css';
 @import './css/settings.css';

package/queries/block-2.ts

@@ -7,7 +7,7 @@ function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
   const roots: DBBlockResult[] = []
 
   for (const block of blocks) {
-    block.children = []
+    block.blocks = []
     map.set(block.id, block)
   }
 
@@ -16,14 +16,14 @@ function buildForest(blocks: DBBlockResult[]): DBBlockResult[] {
       roots.push(block)
     } else {
       const parent = map.get(block.parent_id)
-      if (parent) parent.children!.push(block)
+      if (parent) parent.blocks!.push(block)
     }
   }
 
-  // Sort children by sort_order recursively
+  // Sort blocks by sort_order recursively
   const sortChildren = (node: DBBlockResult) => {
-    node.children!.sort((a, b) => a.sort_order - b.sort_order)
-    node.children!.forEach(sortChildren)
+    node.blocks!.sort((a, b) => a.sort_order - b.sort_order)
+    node.blocks!.forEach(sortChildren)
   }
   roots.forEach(sortChildren)
 
@@ -35,7 +35,7 @@ function buildTree(blocks: DBBlockResult[]): DBBlockResult {
   const roots: DBBlockResult[] = []
 
   for (const block of blocks) {
-    block.children = []
+    block.blocks = []
     map.set(block.id, block)
   }
 
@@ -44,14 +44,14 @@ function buildTree(blocks: DBBlockResult[]): DBBlockResult {
       roots.push(block)
     } else {
       const parent = map.get(block.parent_id)
-      if (parent) parent.children!.push(block)
+      if (parent) parent.blocks!.push(block)
     }
   }
 
-  // Sort children by sort_order recursively
+  // Sort blocks by sort_order recursively
   const sortChildren = (node: DBBlockResult) => {
-    node.children!.sort((a, b) => a.sort_order - b.sort_order)
-    node.children!.forEach(sortChildren)
+    node.blocks!.sort((a, b) => a.sort_order - b.sort_order)
+    node.blocks!.forEach(sortChildren)
   }
   roots.forEach(sortChildren)
 
@@ -65,7 +65,7 @@ function transformBlocksTree(
   const fields: Record<string, DBBlockResult> = {}
   let hasFields = false
 
-  for (const child of block.children ?? []) {
+  for (const child of block.blocks ?? []) {
     const transformedChild = transformBlocksTree(
       child,
       child.type === 'blocks',
@@ -82,7 +82,7 @@ function transformBlocksTree(
   }
   
   if (!isBlocksChild) {
-    delete block.children
+    delete block.blocks
   } else {
     delete block.fields
   }
@@ -265,7 +265,7 @@ function buildTree2(items: DBRow[]): TODO | null {
 
   let root: TODO | null = null;
 
-  // Second pass: assign children to parents
+  // Second pass: assign blocks to parents
   for (const item of map.values()) {
     if (item.parent_id === null) {
       root = item; // Root node
@@ -273,8 +273,8 @@ function buildTree2(items: DBRow[]): TODO | null {
       const parent = map.get(item.parent_id);
       if (parent) {
         if(parent.type === 'blocks') {
-          if (!parent.children) parent.children = [];
-          parent.children.push(item);
+          if (!parent.blocks) parent.blocks = [];
+          parent.blocks.push(item);
         } else {
           if (!parent.fields) parent.fields = {};
           parent.fields[item.name] = item;

package/schemas.ts

@@ -16,7 +16,7 @@ export const blocksTable = {
   columns: sql`
     name TEXT not null,
     label TEXT not null,
-    type TEXT not null,
+    type TEXT,
     value TEXT,
     options JSON,
     status TEXT default 'enabled',

package/types.ts

@@ -21,14 +21,13 @@ export type DeepReadonly<T> =
 export type PrimitiveField = {
   name: string
   label: string
-  type: 'text' | 'slug' | 'markdown' | 'image'
+  type: 'text' | 'slug' | 'markdown' | 'image' | 'reference'
 }
 
 export type BlockField = {
   name: string
   label: string
-  type: 'blocks'
-  children: Record<string, Field | Block>
+  blocks: Record<string, Field | Block>
 }
 
 export type Field = PrimitiveField | BlockField
@@ -44,7 +43,7 @@ export type Structure = Record<string, BlockDefStructure>
 // export type Structure = Record<string, BlockDefStructure>
 
 // --- Field & block definitions ---
-type FieldType = 'text' | 'slug' | 'markdown' | 'image'
+type FieldType = 'text' | 'slug' | 'markdown' | 'image' | 'reference'
 
 interface BaseField {
   label: string
@@ -68,19 +67,27 @@ interface ImageFieldStructure extends ImageField {
   instanceOf: typeof FieldInstance
 }
 
+interface ReferenceField extends BaseField {
+  type: 'reference'
+  to: string | string[]
+}
+
+export interface ReferenceFieldStructure extends ReferenceField {
+  instanceOf: typeof FieldInstance
+}
+
 export interface BlocksFieldDef {
   label: string
-  type: 'blocks'
   description?: string
-  children: Record<string, BlockDefStructure | FieldDefStructure>
+  blocks: Record<string, BlockDefStructure | FieldDefStructure>
 }
 
 export interface BlocksFieldDefStructure extends BlocksFieldDef {
   instanceOf: typeof BlockFieldInstance
 }
 
-export type FieldDef = TextField | ImageField
-export type FieldDefStructure = TextFieldStructure | ImageFieldStructure
+export type FieldDef = TextField | ImageField | ReferenceField
+export type FieldDefStructure = TextFieldStructure | ImageFieldStructure | ReferenceFieldStructure
 
 export interface BlockDef {
   label: string
@@ -127,8 +134,7 @@ export type DBPrimitiveFieldResult = BaseDBResult & {
 }
 
 export type DBBlockFieldResult = BaseDBResult & {
-  type: 'blocks'
-  children: DBBlockResult[]
+  blocks: DBBlockResult[]
 }
 
 export type DBBlockResult = BaseDBResult & {

package/utils/get-or-create-row.ts

@@ -5,6 +5,7 @@ import type {
   BlocksFieldDefStructure,
   FieldDefStructure,
 } from '../types.ts'
+import { BlockFieldInstance } from './define.ts'
 
 export function getOrCreateRow(props: {
   parentId: string | number | null
@@ -32,7 +33,7 @@ export function getOrCreateRow(props: {
   const change = db.insertInto('blocks', {
     name: name?.toString(),
     label: field.label?.toString(),
-    type: field.type?.toString(),
+    type: field.instanceOf === BlockFieldInstance ? 'blocks' : field.type?.toString(),
     sort_order: sortOrder,
     parent_id: parentId,
   })