@alstar/studio 0.0.0-beta.6 → 0.0.0-beta.7

package/index.ts

@@ -4,11 +4,6 @@ import { serve } from '@hono/node-server'
 import { serveStatic } from '@hono/node-server/serve-static'
 import { createRefresher } from '@alstar/refresher'
 
-import Layout from './components/layout.ts'
-import IndexPage from './components/index.ts'
-import SettingsPage from './components/Settings.ts'
-import Entry from './components/Entry.ts'
-
 import * as types from './types.ts'
 import { createStudioTables } from './utils/create-studio-tables.ts'
 import { fileBasedRouter } from './utils/file-based-router.ts'
@@ -16,18 +11,18 @@ import { getConfig } from './utils/get-config.ts'
 import startupLog from './utils/startup-log.ts'
 import { api } from './api/index.ts'
 import mcp from './api/mcp.ts'
+import path from 'path'
 
-export let structure: types.Structure
-export let rootdir = '/node_modules/@alstar/studio'
+export let rootdir = './node_modules/@alstar/studio'
 
+export let studioStructure: types.Structure = {}
 export let studioConfig: types.StudioConfig = {
   siteName: '',
-  structure: {}
+  port: 3000,
+  structure: {},
 }
 
 const createStudio = async (config: types.StudioConfig) => {
-  startupLog()
-
   createRefresher({ rootdir: '.' })
 
   loadDb('./studio.db')
@@ -36,37 +31,43 @@ const createStudio = async (config: types.StudioConfig) => {
   // const configFile = await getConfig<types.StudioConfig>()
 
   if (config.structure) {
-    structure = config.structure
+    studioStructure = config.structure
   }
 
   studioConfig = { ...studioConfig, ...config }
 
   const app = new Hono(studioConfig.honoConfig)
 
-  app.use('*', serveStatic({ root: './' }))
+  /**
+   * Static folders
+   */
+  app.use('*', serveStatic({ root: path.join(rootdir, 'public') }))
   app.use('*', serveStatic({ root: './public' }))
 
-  app.get('/admin', (c) => c.html(Layout({ structure, content: IndexPage() })))
-  app.get('/admin/settings', (c) => c.html(Layout({ structure, content: SettingsPage() })))
-  app.get('/admin/entry/:id', (c) => {
-    return c.html(
-      Layout({
-        structure,
-        content: Entry({ entryId: parseInt(c.req.param('id')) }),
-      }),
-    )
-  })
-
-  app.route('/admin/api', api(structure))
+  /**
+   * Studio API routes
+   */
+  app.route('/admin/api', api(studioStructure))
   app.route('/admin/mcp', mcp())
 
+  /**
+   * Studio pages
+   */
+  const adminPages = await fileBasedRouter(path.join(rootdir, 'pages'))
+
+  if (adminPages) app.route('/admin', adminPages)
+
+  /**
+   * User pages
+   */
   const pages = await fileBasedRouter('./pages')
 
-  if (pages) {
-    app.route('/', pages)
-  }
+  if (pages) app.route('/', pages)
 
-  const server = serve(app)
+  const server = serve({
+    fetch: app.fetch,
+    port: studioConfig.port,
+  })
 
   // graceful shutdown
   process.on('SIGINT', () => {
@@ -83,6 +84,8 @@ const createStudio = async (config: types.StudioConfig) => {
     })
   })
 
+  startupLog({ port: studioConfig.port || 3000 })
+
   return app
 }
 

package/package.json

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

package/pages/entry/[id].ts

@@ -0,0 +1,17 @@
+import { html } from 'hono/html'
+import { defineEntry } from '../../utils/define.ts'
+
+import SiteLayout from '../../components/SiteLayout.ts'
+import Entry from '../../components/Entry.ts'
+
+export default defineEntry((c) => {
+  const id = c.req.param('id')
+
+  if (!id) {
+    return html`<p>Entry page url needs an ID param: "${id}"</p>`
+  }
+
+  return SiteLayout({
+    content: Entry({ entryId: parseInt(id) }),
+  })
+})

package/{components → pages}/index.ts

@@ -1,5 +1,8 @@
 import { html } from 'hono/html'
-import { structure } from '../index.ts'
+import { defineEntry } from '../utils/define.ts'
+
+import SiteLayout from '../components/SiteLayout.ts'
+import { studioStructure } from '../index.ts'
 
 const codeBlock = html`<code><span style="color: #c678dd;">await</span> <span style="color: #61aeee;">createStudio</span>([
   {
@@ -16,7 +19,7 @@ const codeBlock = html`<code><span style="color: #c678dd;">await</span> <span st
   }
 ])</code>`
 
-export default () => {
+export default defineEntry(() => {
   const Discamer = html`
     <div class="disclamer">
       <article>
@@ -26,5 +29,5 @@ export default () => {
       </article>
     </div>`
 
-  return html`${!structure ? Discamer : ''}`
-}
+  return SiteLayout({ content: !Object.values(studioStructure).length ? Discamer : '' })
+})

package/pages/settings.ts

@@ -0,0 +1,10 @@
+import { defineEntry } from '../utils/define.ts'
+
+import SiteLayout from '../components/SiteLayout.ts'
+import Settings from '../components/Settings.ts'
+
+export default defineEntry(() => {
+  return SiteLayout({
+    content: Settings(),
+  })
+})

package/public/{admin-panel.css → studio/admin-panel.css}

@@ -29,11 +29,23 @@
     button {
       margin: 10px 0px 20px;
     }
+
+    p {
+      margin: 0;
+
+      small {
+        text-transform: uppercase;
+        letter-spacing: 0.4px;
+        font-weight: 600;
+        opacity: 0.6;
+      }
+    }
   }
 
   #entries {
     width: 100%;
-    
+    user-select: none;
+
     ul {
       padding: 0;
       margin-inline: -1rem;
@@ -54,6 +66,7 @@
         justify-content: space-between;
         align-items: stretch;
         list-style: none;
+        padding: 0;
 
         a {
           text-decoration: none;

package/public/studio/main.css

@@ -0,0 +1,162 @@
+/* @import './../node_modules/@alstar/ui/red.css'; */
+@import 'https://esm.sh/@alstar/ui/red.css';
+@import './admin-panel.css';
+@import './entry.css';
+@import './blocks.css';
+@import './settings.css';
+
+body {
+  padding: 0;
+  min-height: 100vh;
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-content: baseline;
+
+  > main {
+    padding: 40px;
+    height: 100vh;
+    overflow: auto;
+
+    section {
+      max-width: 900px;
+      margin: 0 auto;
+    }
+  }
+}
+
+.entry > .fields > .block {
+  padding-block: var(--pico-spacing);
+
+  > header {
+    margin-block: var(--pico-block-spacing-vertical);
+  }
+}
+
+.block {
+  > header {
+    margin-bottom: var(--pico-spacing);
+  }
+
+  header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    background-color: inherit;
+
+    h6,
+    h5,
+    fieldset {
+      margin-bottom: 0;
+    }
+
+    button {
+      padding: 0;
+      background-color: white;
+
+      svg {
+        padding: 8px;
+      }
+    }
+  }
+}
+
+[data-sortable] {
+  > article {
+    transition: opacity 200ms;
+  }
+
+  .sortable-ghost {
+    opacity: 0.3;
+  }
+}
+
+div.ink-mde {
+  border: var(--pico-border-width) solid #2a3140;
+  border-radius: var(--pico-border-radius);
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+}
+
+.ͼ1 .cm-content.ink-mde-editor-content {
+  min-height: 10lh;
+}
+
+div.ink-mde {
+  --pico-border-color: var(--pico-form-element-border-color);
+
+  border: var(--pico-border-width) solid var(--pico-border-color);
+  border-radius: var(--pico-border-radius);
+
+  padding: var(--pico-form-element-spacing-vertical)
+    var(--pico-form-element-spacing-horizontal);
+  margin-bottom: var(--pico-spacing);
+
+  --pico-background-color: var(--pico-form-element-background-color);
+
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition:
+    background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+.ink-mde-textarea {
+}
+
+div.ink-mde:has(.cm-focused) {
+  --pico-outline-width: 0.1rem;
+  --pico-box-shadow: 0 0 0 var(--pico-outline-width)
+    var(--pico-form-element-focus-color);
+
+  box-shadow: var(--pico-box-shadow);
+}
+
+.ͼ1.cm-focused {
+  outline: none;
+}
+
+.ink-mde-textarea {
+  width: 100%;
+
+  --pico-background-color: var(--pico-form-element-background-color);
+
+  --pico-color: var(--pico-form-element-color);
+  --pico-box-shadow: none;
+
+  outline: 0;
+  background-color: var(--pico-background-color);
+  box-shadow: var(--pico-box-shadow);
+  color: var(--pico-color);
+  font-weight: var(--pico-font-weight);
+  transition:
+    background-color var(--pico-transition),
+    border-color var(--pico-transition),
+    color var(--pico-transition),
+    box-shadow var(--pico-transition);
+}
+
+.disclamer {
+  display: flex;
+  justify-content: center;
+}
+
+.text-secondary {
+  color: var(--pico-secondary);
+}
+
+.markdown {
+  width: 100%;
+  height: 10lh;
+}

package/public/studio/main.js

@@ -0,0 +1,10 @@
+import barba from '@barba/core'
+
+barba.init({
+  cacheIgnore: true,
+  views: [
+    {
+      namespace: 'default',
+    },
+  ],
+})

package/public/studio/markdown-editor.js

@@ -0,0 +1,34 @@
+import { ink } from 'ink-mde'
+
+class MarkdownEditor extends HTMLElement {
+  instance = null
+
+  connectedCallback() {
+    this.style.width = '100%'
+
+    this.instance = ink(this, {
+      hooks: {
+        afterUpdate: async (e) => {
+          await fetch('/admin/api/value', {
+            method: 'PATCH',
+            body: JSON.stringify({
+              value: e,
+              id: this.dataset.id,
+            }),
+          })
+        },
+      },
+      interface: {
+        attribution: false,
+      },
+    })
+
+    this.instance.update(this.dataset.content)
+  }
+
+  disconnectedCallback() {
+    // this.instance.destroy()
+  }
+}
+
+customElements.define('markdown-editor', MarkdownEditor)

package/public/studio/sortable-list.js

@@ -0,0 +1,40 @@
+import Sortable from 'sortablejs'
+
+class SortableList extends HTMLElement {
+  instance = null
+
+  connectedCallback() {
+    if (!this.children.length) return
+
+    const { id } = this.dataset
+
+    this.instance = Sortable.create(this, {
+      animation: 250,
+      handle: `[data-handle-for="${id}"]`,
+      onEnd: (e) => {
+        const items = [...e.target.children]
+
+        items.forEach(async (child, idx) => {
+          const searchParams = new URLSearchParams()
+
+          searchParams.set('id', child.dataset.id)
+          searchParams.set('sort-order', idx)
+
+          await fetch(`/admin/api/sort-order?${searchParams.toString()}`, {
+            method: 'post',
+          })
+        })
+
+        this.querySelectorAll('[name="sort_order"]').forEach((input, idx) => {
+          input.value = idx.toString()
+        })
+      },
+    })
+  }
+
+  disconnectedCallback() {
+    this.instance?.destroy()
+  }
+}
+
+customElements.define('sortable-list', SortableList)

package/queries/block.ts

@@ -281,6 +281,8 @@ export function blocks(params: Record<string, any>) {
       blocks
     where
       ${filterSql}
+    order by
+     sort_order
   `
 
   return db.database.prepare(query).all(sqlParams) as unknown as DBBlockResult[]

package/types.ts

@@ -2,6 +2,11 @@ import { type HttpBindings } from '@hono/node-server'
 import { type Context } from 'hono'
 import { type HonoOptions } from 'hono/hono-base'
 import { type BlankInput, type BlankEnv } from 'hono/types'
+import {
+  BlockFieldInstance,
+  BlockInstance,
+  FieldInstance,
+} from './utils/define.ts'
 
 export type PrimitiveField = {
   name: string
@@ -25,71 +30,103 @@ export type Block = {
   fields: Record<string, Field | Block>
 }
 
-export type Structure = Record<string, BlockDef>
+export type Structure = Record<string, BlockDefStructure>
 
 // --- Field & block definitions ---
-type FieldType = 'text' | 'slug' | 'markdown' | 'blocks' | 'image';
+type FieldType = 'text' | 'slug' | 'markdown' | 'image'
 
 interface BaseField {
-  label: string;
-  type: FieldType;
+  label: string
+  type: FieldType
   description?: string
 }
 
 interface TextField extends BaseField {
-  type: 'text' | 'slug' | 'markdown';
+  type: 'text' | 'slug' | 'markdown'
+}
+
+interface TextFieldStructure extends TextField {
+  instanceOf: typeof FieldInstance
 }
 
 interface ImageField extends BaseField {
-  type: 'image';
+  type: 'image'
+}
+
+interface ImageFieldStructure extends ImageField {
+  instanceOf: typeof FieldInstance
+}
+
+export interface BlocksFieldDef {
+  label: string
+  type: 'blocks'
+  description?: string
+  children: Record<string, BlockDefStructure | FieldDefStructure>
 }
 
-export interface BlocksField extends BaseField {
-  type: 'blocks';
-  children: Record<string, BlockDef | FieldDef>;
+export interface BlocksFieldDefStructure extends BlocksFieldDef {
+  instanceOf: typeof BlockFieldInstance
 }
 
-export type FieldDef = TextField | ImageField | BlocksField;
+export type FieldDef = TextField | ImageField
+export type FieldDefStructure = TextFieldStructure | ImageFieldStructure
 
 export interface BlockDef {
-  label: string;
-  type: string;
-  fields: Record<string, FieldDef>;
+  label: string
+  type: string
+  fields: Record<string, FieldDefStructure | BlocksFieldDefStructure>
   description?: string
 }
 
-type DBDefaults = {
-  id: number
-  created_at: string
-  updated_at: string
-  name: string
-  label: string
-  // type: string
-  sort_order: number
-  value: string
-  options: string | null
-  status: 'enabled' | 'disabled'
-  parent_id: number | null
-  depth: number
+export interface BlockDefStructure extends BlockDef {
+  instanceOf: typeof BlockInstance
 }
 
-export type DBBlockResult = {
+// type DBDefaults = {
+//   id: number
+//   created_at: string
+//   updated_at: string
+//   name: string
+//   label: string
+//   // type: string
+//   sort_order: number
+//   value: string
+//   options: string | null
+//   status: 'enabled' | 'disabled'
+//   parent_id: number | null
+//   depth: number
+// }
+
+type BaseDBResult = {
   id: number
   created_at: string
   updated_at: string
   name: string
   label: string
-  type: string
   sort_order: number
   value: string | null
   options: any
-  status: string
+  status: 'enabled' | 'disabled'
   parent_id: number | null
   depth: number
-  children?: DBBlockResult[]
-  fields?: Record<string, DBBlockResult>
 }
 
+export type DBPrimitiveFieldResult = BaseDBResult & {
+  type: FieldDef
+}
+
+export type DBBlockFieldResult = BaseDBResult & {
+  type: 'blocks'
+  children: DBBlockResult[]
+}
+
+export type DBBlockResult = BaseDBResult & {
+  type: string
+  fields: Record<string, DBFieldResult>
+}
+
+export type DBFieldResult = DBPrimitiveFieldResult & DBBlockFieldResult
+
 export type DBBlock = Block & {
   id: number
   created_at: string
@@ -103,8 +140,9 @@ export type DBBlock = Block & {
 export type BlockStatus = 'enabled' | 'disabled'
 
 export type StudioConfig = {
-  siteName: string
+  siteName?: string
   honoConfig?: HonoOptions<BlankEnv>
+  port?: number
   structure: Structure
 }
 

package/utils/define.ts

@@ -3,27 +3,39 @@ import { type HtmlEscapedString } from './html.ts'
 
 export const defineConfig = (config: types.StudioConfig) => config
 
-// export const defineStructure = (structure: types.Block[]) => structure
-// export const defineField = (field: types.Field) => field
-// export const defineBlock = (block: types.Block) => block
-
 export const defineEntry = (
   fn: (
     c: types.RequestContext,
   ) => HtmlEscapedString | Promise<HtmlEscapedString>,
 ) => fn
 
+export const FieldInstance = Symbol('field')
+export const BlockFieldInstance = Symbol('blockfield')
+export const BlockInstance = Symbol('block')
+
 // --- Identity helpers (preserve literal types) ---
-export function defineField(field: types.FieldDef) {
-  return field
+export function defineField(field: types.FieldDef): types.FieldDefStructure {
+  return {
+    ...field,
+    instanceOf: FieldInstance,
+  }
+}
+
+export function defineBlockField(
+  field: types.BlocksFieldDef,
+): types.BlocksFieldDefStructure {
+  return {
+    ...field,
+    instanceOf: BlockFieldInstance,
+  }
 }
 
-export function defineBlock(block: types.BlockDef) {
-  return block
+export function defineBlock(block: types.BlockDef): types.BlockDefStructure {
+  return { ...block, instanceOf: BlockInstance }
 }
 
 export function defineStructure(
-  structure: Record<string, types.BlockDef>,
+  structure: Record<string, types.BlockDefStructure>,
 ) {
   return structure
 }

package/utils/file-based-router.ts

@@ -15,6 +15,7 @@ export const fileBasedRouter = async (rootdir: string) => {
   try {
     dirs = await fs.readdir(root, { recursive: true })
   } catch (error) {
+    console.log('No files in:', root)
     return
   }