@alstar/studio 0.0.0-beta.1 → 0.0.0-beta.10

package/components/Entry.ts

@@ -1,34 +1,26 @@
 import { html } from 'hono/html'
 import { query } from '../queries/index.ts'
-import { rootdir } from '../index.ts'
-import { type Structure } from '../types.ts'
-import Fields from './Fields.ts'
-import { buildStructurePath } from '../utils/build-structure-path.ts'
+import { studioStructure } from '../index.ts'
+import Render from './Render.ts'
 
-export default (props: { entryId: number | string; structure: Structure }) => {
+export default (props: { entryId: number }) => {
   const data = query.block({ id: props.entryId?.toString() })
 
   if (!data) return html`<p>No entry with id: "${props.entryId}"</p>`
 
-  const blockStructure = props.structure.find(
-    (block) => block.name === data.name,
-  )
+  const structure = studioStructure[data.name]
 
-  const structurePath = buildStructurePath(blockStructure)
+  if (!structure) return html`<p>No structure of type: ${data.name}</p>`
 
   return html`
-    <div id="entry">
-      <link rel="stylesheet" href="${rootdir}/components/Entry.css" />
-
-      <div class="entry">
-        ${blockStructure &&
-        Fields({
-          entryId: props.entryId,
-          parentId: props.entryId,
-          blockStructure,
-          structurePath,
-        })}
-      </div>
+    <div id="entry" class="entry">
+      ${Render({
+        entryId: props.entryId,
+        parentId: props.entryId,
+        structure: structure,
+        name: data.name,
+      })}
     </div>
+    
   `
 }

package/components/FieldRenderer.ts

@@ -0,0 +1,35 @@
+import { Field } from './fields/index.ts'
+import type { BlocksFieldDefStructure, FieldDefStructure } from '../types.ts'
+import BlockFieldRenderer from './BlockFieldRenderer.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  structure: FieldDefStructure | BlocksFieldDefStructure
+  id?: number
+  name: string
+}) => {
+  const { entryId, parentId, structure, name, id } = props
+
+  switch (structure.type) {
+    case 'text': {
+      return Field.Text({ entryId, parentId, name, id, structure })
+    }
+
+    case 'slug': {
+      return Field.Text({ entryId, parentId, name, id, structure })
+    }
+
+    case 'markdown': {
+      return Field.Markdown({ entryId, parentId, name, id, structure })
+    }
+
+    case 'image': {
+      return Field.Text({ entryId, parentId, name, structure, id })
+    }
+
+    case 'blocks': {
+      return BlockFieldRenderer({ entryId, parentId, name, structure, id })
+    }
+  }
+}

package/components/Render.ts

@@ -0,0 +1,46 @@
+import { html } from 'hono/html'
+import type { HtmlEscapedString } from 'hono/utils/html'
+import FieldRenderer from './FieldRenderer.ts'
+import BlockFieldRenderer from './BlockFieldRenderer.ts'
+import BlockRenderer from './BlockRenderer.ts'
+import {
+  BlockFieldInstance,
+  BlockInstance,
+  FieldInstance,
+} from '../utils/define.ts'
+import type {
+  BlockDefStructure,
+  BlocksFieldDefStructure,
+  FieldDefStructure,
+} from '../types.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  structure: BlockDefStructure | FieldDefStructure | BlocksFieldDefStructure
+  id?: number
+  name: string
+  sortOrder?: number
+}): HtmlEscapedString | Promise<HtmlEscapedString> => {
+  const { entryId, parentId, structure, name, id } = props
+
+  if (!structure) return html`<p>No block</p>`
+
+  try {
+    switch (structure.instanceOf) {
+      case FieldInstance: {
+        return FieldRenderer({ entryId, parentId, id, structure, name })
+      }
+
+      case BlockFieldInstance: {
+        return BlockFieldRenderer({ entryId, parentId, id, structure, name })
+      }
+
+      case BlockInstance: {
+        return BlockRenderer({ entryId, parentId, structure, id })
+      }
+    }
+  } catch (error) {
+    return html`<p>Error rendering "${name}"</p>`
+  }
+}

package/components/Settings.ts

@@ -0,0 +1,101 @@
+import { db } from '@alstar/db'
+import { html } from 'hono/html'
+import { sql } from '../utils/sql.ts'
+import * as icons from './icons.ts'
+import Backup from './Backup.ts'
+
+export default () => {
+  const apiKeys = db.database
+    .prepare(sql`
+      select
+        *
+      from
+        api_keys
+    `)
+    .all()
+
+  return html`
+  <div id="settings" data-signals="{ apiKey: '', copied: false }">
+      <!-- <h1>Settings</h1> -->
+      <article>
+        <header>API Keys</header>
+
+        <ul>
+          ${apiKeys.map((apiKey) => {
+            return html`<li>
+                <p>${apiKey.name}</p>
+                <input type="text" disabled value="${apiKey.hint}" />
+                <form
+                  data-on-submit="@delete('/admin/api/api-key', { contentType: 'form' })"
+                >
+                  <button
+                    data-tooltip="Delete API key"
+                    data-placement="left"
+                    type="submit"
+                    class="ghost"
+                  >
+                    ${icons.trash}
+                  </button>
+
+                  <input type="hidden" name="value" value="${apiKey.value}" />
+                </form>
+              </li>`
+          })}
+        </ul>
+
+        <form
+          data-on-submit="@post('/admin/api/api-key', { contentType: 'form' })"
+        >
+          <label for="api_key_name">Generate API Key</label>
+
+          <input
+            data-bind="name"
+            type="text"
+            name="name"
+            id="api_key_name"
+            placeholder="Name"
+          />
+
+          <button type="submit" class="ghost">Generate key</button>
+        </form>
+
+        <dialog data-attr="{ open: $apiKey !== '' }">
+          <article>
+            <header>
+              <p>API Key</p>
+            </header>
+            <p>Be sure to save this key, as it wont be shown again.</p>
+
+            <div style="display: flex; gap: 1rem; align-items: center;">
+              <h3 style="margin: 0;">
+                <code data-text="$apiKey"></code>
+              </h3>
+
+              <button
+                style="display: flex; align-items: center;"
+                data-attr="{ id: $apiKey }"
+                data-on-click="navigator.clipboard.writeText($apiKey); $copied = true"
+                class="ghost"
+                aria-label="Copy key to clipboard"
+              >
+                ${icons.clipboard}
+                <span style="display: none; margin-left: 0.5rem; color: green;" data-style="{ display: $copied && 'block' }">Copied</span>
+              </button>
+            </div>
+
+            <footer>
+              <button
+                class="ghost"
+                data-on-click="$apiKey = ''; $copied = false; evt.target.closest('dialog')?.close()"
+              >
+                Close
+              </button>
+            </footer>
+          </article>
+        </dialog>
+      </article>
+
+      <!-- {Backup()} -->
+    </div>
+  `
+}

package/components/{layout.ts → SiteLayout.ts}

@@ -1,8 +1,7 @@
-import adminPanel from './AdminPanel/AdminPanel.ts'
+import adminPanel from './AdminPanel.ts'
 import { html } from 'hono/html'
 import { type HtmlEscapedString } from 'hono/utils/html'
-import { rootdir } from '../index.ts'
-import { type Structure } from '../types.ts'
+import { studioConfig } from '../index.ts'
 
 export default (props: {
   content:
@@ -10,7 +9,6 @@ export default (props: {
     | Promise<string>
     | HtmlEscapedString
     | Promise<HtmlEscapedString>
-  structure: Structure
 }) => {
   return html`
     <!DOCTYPE html>
@@ -18,35 +16,42 @@ export default (props: {
       <head>
         <meta charset="UTF-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>Alster CMS</title>
+        <title>
+          ${studioConfig.siteName ? studioConfig.siteName + ' | ' : ''}Alstar
+          Studio
+        </title>
 
-        <link
-          rel="icon"
-          type="image/svg"
-          href="${rootdir}/public/favicon.svg"
-        />
+        <link rel="icon" type="image/svg" href="/studio/favicon.svg" />
 
         <meta name="color-scheme" content="light dark" />
 
-        <link rel="stylesheet" href="${rootdir}/public/main.css" />
-
         <script
           type="module"
           src="https://cdn.jsdelivr.net/gh/starfederation/datastar@main/bundles/datastar.js"
         ></script>
-        <script src="https://unpkg.com/@barba/core@2.10.3/dist/barba.umd.js"></script>
+
+        <script type="importmap">
+          {
+            "imports": {
+              "@barba/core": "https://esm.sh/@barba/core@2.10.3/dist/barba.mjs",
+              "sortablejs": "https://esm.sh/sortablejs@1.15.6/modular/sortable.core.esm.js",
+              "ink-mde": "https://esm.sh/ink-mde@0.34.0"
+            }
+          }
+        </script>
+
+        <script src="/studio/main.js" type="module"></script>
+        <link href="/studio/main.css" rel="stylesheet" />
       </head>
 
       <body data-barba="wrapper">
-        <section>${adminPanel(props.structure)}</section>
+        <section style="margin-bottom: 0;">${adminPanel()}</section>
 
-        <main style="height: 100vh; overflow: auto">
+        <main>
           <section data-barba="container" data-barba-namespace="default">
             ${props.content}
           </section>
         </main>
-
-        <script src="${rootdir}/public/main.js" type="module"></script>
       </body>
     </html>
   `

package/components/fields/Markdown.ts

@@ -0,0 +1,44 @@
+import type { FieldDefStructure } from '../../types.ts'
+import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
+import { html } from '../../utils/html.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  id?: number
+  structure: FieldDefStructure
+}) => {
+  const { entryId, parentId, name, structure, id } = props
+
+  const data = getOrCreateRow({ parentId, name, field: structure, id })
+
+  if (!data) return html`<p>No block</p>`
+
+  return html`
+  <form
+      data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+    >
+      <hgroup>
+        <label for="block-${data.id}">${structure.label}</label>
+        <p><small>${structure.description}</small></p>
+      </hgroup>
+
+      <markdown-editor
+        data-content="${data.value?.trim()}"
+        data-id="${data.id}"
+      >
+        <!-- <textarea id="block-{data.id}" name="value" class="markdown">
+          {data.value}
+        </textarea
+        > -->
+      </markdown-editor>
+
+      <input type="hidden" name="type" value="${structure.type}" />
+      <input type="hidden" name="id" value="${data.id}" />
+      <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/Text.ts

@@ -0,0 +1,42 @@
+import { getOrCreateRow } from '../../utils/get-or-create-row.ts'
+import { html } from '../../utils/html.ts'
+import type { FieldDefStructure } from '../../types.ts'
+
+export default (props: {
+  entryId: number
+  parentId: number
+  name: string
+  id?: number
+  structure: FieldDefStructure
+  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>`
+
+  return html`
+  <form
+      data-on-input="@patch('/admin/api/block', { contentType: 'form' })"
+    >
+      <hgroup>
+        <label for="block-${data.id}">${structure.label}</label>
+        <p><small>${structure.description}</small></p>
+      </hgroup>
+
+      <input
+        id="block-${data.id}"
+        name="value"
+        type="text"
+        value="${data.value}"
+      />
+
+      <input type="hidden" name="type" value="${structure.type}" />
+      <input type="hidden" name="id" value="${data.id}" />
+      <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

@@ -0,0 +1,4 @@
+import Text from './Text.ts'
+import Markdown from './Markdown.ts'
+
+export const Field = { Text, Markdown }

package/components/icons.ts

@@ -1,14 +1,10 @@
 import { html } from 'hono/html'
 
 export const logo = html`
-  <svg
-    viewBox="0 0 1289 342"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
+  <svg viewBox="0 0 1332 342" fill="none">
     <path
-      d="M7.152 342C2.88533 342 0.752001 339.867 0.752001 335.6V98.288C0.752001 95.5573 1.60533 92.9973 3.312 90.608L63.728 4.59198C65.6053 2.03198 68.336 0.751984 71.92 0.751984H163.568C167.323 0.751984 170.053 2.03198 171.76 4.59198L232.688 90.608C234.395 92.9973 235.248 95.5573 235.248 98.288V335.6C235.248 339.867 233.115 342 228.848 342H135.152C130.885 342 128.752 339.867 128.752 335.6V239.6H107.248V335.6C107.248 339.867 105.115 342 100.848 342H7.152ZM118 150.768C125.339 150.768 131.312 148.464 135.92 143.856C140.528 139.248 142.832 133.36 142.832 126.192C142.832 118.853 140.528 112.88 135.92 108.272C131.312 103.664 125.339 101.36 118 101.36C110.661 101.36 104.688 103.664 100.08 108.272C95.472 112.88 93.168 118.853 93.168 126.192C93.168 133.36 95.472 139.248 100.08 143.856C104.688 148.464 110.661 150.768 118 150.768ZM263.152 342C258.885 342 256.752 339.867 256.752 335.6V7.15198C256.752 2.88531 258.885 0.751984 263.152 0.751984H356.848C361.115 0.751984 363.248 2.88531 363.248 7.15198V239.6H406.512C410.779 239.6 412.912 241.733 412.912 246V335.6C412.912 339.867 410.779 342 406.512 342H263.152ZM440.652 342C436.385 342 434.252 339.867 434.252 335.6V263.408C434.252 261.36 434.337 259.739 434.508 258.544C434.849 257.179 435.873 255.984 437.58 254.96L491.852 223.728V210.928L438.348 182.768C435.617 181.232 434.252 178.672 434.252 175.088V59.888C434.252 57.1573 434.423 55.1947 434.764 54C435.105 52.6347 436.3 51.184 438.348 49.648L505.932 4.07999C507.297 3.05598 508.748 2.28797 510.284 1.77597C511.82 1.09331 513.783 0.751984 516.172 0.751984H606.54C610.807 0.751984 612.94 2.88531 612.94 7.15198V82.928C612.94 86.6826 611.66 89.2427 609.1 90.608L542.028 120.048V133.36L609.1 171.76C611.66 172.955 612.94 175.685 612.94 179.952V291.312C612.94 292.677 612.684 294.128 612.172 295.664C611.831 297.029 610.977 298.139 609.612 298.992L529.228 338.928C528.204 339.611 526.924 340.293 525.388 340.976C524.023 341.659 522.657 342 521.292 342H440.652ZM676.748 342C672.481 342 670.348 339.867 670.348 335.6V103.152H640.652C636.385 103.152 634.252 101.019 634.252 96.752V7.15198C634.252 2.88531 636.385 0.751984 640.652 0.751984H807.052C811.319 0.751984 813.452 2.88531 813.452 7.15198V96.752C813.452 101.019 811.319 103.152 807.052 103.152H777.1V335.6C777.1 339.867 774.967 342 770.7 342H676.748ZM841.152 342C836.885 342 834.752 339.867 834.752 335.6V7.15198C834.752 2.88531 836.885 0.751984 841.152 0.751984H1019.33C1023.59 0.751984 1025.73 2.88531 1025.73 7.15198V96.752C1025.73 101.019 1023.59 103.152 1019.33 103.152H941.248V124.4H1019.33C1023.59 124.4 1025.73 126.533 1025.73 130.8V211.952C1025.73 216.219 1023.59 218.352 1019.33 218.352H941.248V239.6H1019.33C1023.59 239.6 1025.73 241.733 1025.73 246V335.6C1025.73 339.867 1023.59 342 1019.33 342H841.152ZM1053.65 342C1049.39 342 1047.25 339.867 1047.25 335.6V7.15198C1047.25 2.88531 1049.39 0.751984 1053.65 0.751984H1210.07C1214.51 0.751984 1217.92 1.86132 1220.31 4.07999L1279.19 62.448C1281.07 64.1547 1282.26 65.6053 1282.77 66.8C1283.28 67.9946 1283.54 69.9573 1283.54 72.688V142.832C1283.54 145.051 1282.09 147.611 1279.19 150.512L1243.86 185.84L1238.23 190.96L1254.1 214.768L1286.1 276.208C1286.95 277.744 1287.47 279.28 1287.64 280.816C1287.98 282.181 1288.15 283.973 1288.15 286.192V335.6C1288.15 339.867 1286.01 342 1281.75 342H1200.85C1197.1 342 1194.54 340.293 1193.17 336.88L1158.1 246.768H1153.75V335.6C1153.75 339.867 1151.61 342 1147.35 342H1053.65ZM1165.27 139.76C1172.27 139.76 1177.9 137.541 1182.16 133.104C1186.6 128.667 1188.82 123.035 1188.82 116.208C1188.82 109.381 1186.6 103.835 1182.16 99.568C1177.9 95.1307 1172.27 92.912 1165.27 92.912C1158.44 92.912 1152.81 95.1307 1148.37 99.568C1144.11 103.835 1141.97 109.381 1141.97 116.208C1141.97 123.035 1144.11 128.667 1148.37 133.104C1152.81 137.541 1158.44 139.76 1165.27 139.76Z"
-      fill="currentColor"
+      d="M7.152 342C2.88533 342 0.752001 339.867 0.752001 335.6V98.288C0.752001 95.5573 1.60533 92.9973 3.312 90.608L63.728 4.59198C65.6053 2.03198 68.336 0.751984 71.92 0.751984H163.568C167.323 0.751984 170.053 2.03198 171.76 4.59198L232.688 90.608C234.395 92.9973 235.248 95.5573 235.248 98.288V335.6C235.248 339.867 233.115 342 228.848 342H135.152C130.885 342 128.752 339.867 128.752 335.6V239.6H107.248V335.6C107.248 339.867 105.115 342 100.848 342H7.152ZM118 150.768C125.339 150.768 131.312 148.464 135.92 143.856C140.528 139.248 142.832 133.36 142.832 126.192C142.832 118.853 140.528 112.88 135.92 108.272C131.312 103.664 125.339 101.36 118 101.36C110.661 101.36 104.688 103.664 100.08 108.272C95.472 112.88 93.168 118.853 93.168 126.192C93.168 133.36 95.472 139.248 100.08 143.856C104.688 148.464 110.661 150.768 118 150.768ZM263.152 342C258.885 342 256.752 339.867 256.752 335.6V7.15198C256.752 2.88531 258.885 0.751984 263.152 0.751984H356.848C361.115 0.751984 363.248 2.88531 363.248 7.15198V239.6H406.512C410.779 239.6 412.912 241.733 412.912 246V335.6C412.912 339.867 410.779 342 406.512 342H263.152ZM440.652 342C436.385 342 434.252 339.867 434.252 335.6V263.408C434.252 261.36 434.337 259.739 434.508 258.544C434.849 257.179 435.873 255.984 437.58 254.96L491.852 223.728V210.928L438.348 182.768C435.617 181.232 434.252 178.672 434.252 175.088V59.888C434.252 57.1573 434.423 55.1947 434.764 54C435.105 52.6347 436.3 51.184 438.348 49.648L505.932 4.07999C507.297 3.05598 508.748 2.28797 510.284 1.77597C511.82 1.09331 513.783 0.751984 516.172 0.751984H606.54C610.807 0.751984 612.94 2.88531 612.94 7.15198V82.928C612.94 86.6826 611.66 89.2427 609.1 90.608L542.028 120.048V133.36L609.1 171.76C611.66 172.955 612.94 175.685 612.94 179.952V291.312C612.94 292.677 612.684 294.128 612.172 295.664C611.831 297.029 610.977 298.139 609.612 298.992L529.228 338.928C528.204 339.611 526.924 340.293 525.388 340.976C524.023 341.659 522.657 342 521.292 342H440.652ZM676.748 342C672.481 342 670.348 339.867 670.348 335.6V103.152H640.652C636.385 103.152 634.252 101.019 634.252 96.752V7.15198C634.252 2.88531 636.385 0.751984 640.652 0.751984H807.052C811.319 0.751984 813.452 2.88531 813.452 7.15198V96.752C813.452 101.019 811.319 103.152 807.052 103.152H777.1V335.6C777.1 339.867 774.967 342 770.7 342H676.748ZM841.152 342C836.885 342 834.752 339.867 834.752 335.6V98.288C834.752 95.5573 835.605 92.9973 837.312 90.608L897.728 4.59198C899.605 2.03198 902.336 0.751984 905.92 0.751984H997.568C1001.32 0.751984 1004.05 2.03198 1005.76 4.59198L1066.69 90.608C1068.39 92.9973 1069.25 95.5573 1069.25 98.288V335.6C1069.25 339.867 1067.11 342 1062.85 342H969.152C964.885 342 962.752 339.867 962.752 335.6V239.6H941.248V335.6C941.248 339.867 939.115 342 934.848 342H841.152ZM952 150.768C959.339 150.768 965.312 148.464 969.92 143.856C974.528 139.248 976.832 133.36 976.832 126.192C976.832 118.853 974.528 112.88 969.92 108.272C965.312 103.664 959.339 101.36 952 101.36C944.661 101.36 938.688 103.664 934.08 108.272C929.472 112.88 927.168 118.853 927.168 126.192C927.168 133.36 929.472 139.248 934.08 143.856C938.688 148.464 944.661 150.768 952 150.768ZM1097.15 342C1092.89 342 1090.75 339.867 1090.75 335.6V7.15198C1090.75 2.88531 1092.89 0.751984 1097.15 0.751984H1253.57C1258.01 0.751984 1261.42 1.86132 1263.81 4.07999L1322.69 62.448C1324.57 64.1547 1325.76 65.6053 1326.27 66.8C1326.78 67.9946 1327.04 69.9573 1327.04 72.688V142.832C1327.04 145.051 1325.59 147.611 1322.69 150.512L1287.36 185.84L1281.73 190.96L1297.6 214.768L1329.6 276.208C1330.45 277.744 1330.97 279.28 1331.14 280.816C1331.48 282.181 1331.65 283.973 1331.65 286.192V335.6C1331.65 339.867 1329.51 342 1325.25 342H1244.35C1240.6 342 1238.04 340.293 1236.67 336.88L1201.6 246.768H1197.25V335.6C1197.25 339.867 1195.11 342 1190.85 342H1097.15ZM1208.77 139.76C1215.77 139.76 1221.4 137.541 1225.66 133.104C1230.1 128.667 1232.32 123.035 1232.32 116.208C1232.32 109.381 1230.1 103.835 1225.66 99.568C1221.4 95.1307 1215.77 92.912 1208.77 92.912C1201.94 92.912 1196.31 95.1307 1191.87 99.568C1187.61 103.835 1185.47 109.381 1185.47 116.208C1185.47 123.035 1187.61 128.667 1191.87 133.104C1196.31 137.541 1201.94 139.76 1208.77 139.76Z"
+      fill="currentcolor"
     />
   </svg>
 `
@@ -101,3 +97,100 @@ export const newDocument = html`
     />
   </svg>
 `
+
+export const dots = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M6.75 12a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m6 0a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0m6 0a.75.75 0 1 1-1.5 0a.75.75 0 0 1 1.5 0"
+    />
+  </svg>
+`
+
+export const trash = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="m14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21q.512.078 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 0 1-2.244 2.077H8.084a2.25 2.25 0 0 1-2.244-2.077L4.772 5.79m14.456 0a48 48 0 0 0-3.478-.397m-12 .562q.51-.088 1.022-.165m0 0a48 48 0 0 1 3.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a52 52 0 0 0-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a49 49 0 0 0-7.5 0"
+    />
+  </svg>
+`
+
+export const x = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="26"
+    height="26"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M6 18L18 6M6 6l12 12"
+    />
+  </svg>
+`
+
+export const cog = html`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+    >
+      <path
+        d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93c.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 0 1 1.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204s.505.71.93.78l.893.15c.543.09.94.559.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.894.149c-.424.07-.764.383-.929.78c-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 0 1-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107c-.398.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93c-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 0 1-.12-1.45l.527-.737c.25-.35.272-.806.108-1.204s-.506-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78c.165-.398.143-.854-.108-1.204l-.526-.738a1.125 1.125 0 0 1 .12-1.45l.773-.773a1.125 1.125 0 0 1 1.45-.12l.737.527c.35.25.807.272 1.204.107s.71-.505.78-.929z"
+      />
+      <path d="M15 12a3 3 0 1 1-6 0a3 3 0 0 1 6 0" />
+    </g>
+  </svg>`
+
+export const clipboard = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1.5"
+      d="M15.666 3.888A2.25 2.25 0 0 0 13.5 2.25h-3c-1.03 0-1.9.693-2.166 1.638m7.332 0q.083.292.084.612v0a.75.75 0 0 1-.75.75H9a.75.75 0 0 1-.75-.75v0q.002-.32.084-.612m7.332 0q.969.073 1.927.184c1.1.128 1.907 1.077 1.907 2.185V19.5a2.25 2.25 0 0 1-2.25 2.25H6.75A2.25 2.25 0 0 1 4.5 19.5V6.257c0-1.108.806-2.057 1.907-2.185a48 48 0 0 1 1.927-.184"
+    />
+  </svg>
+`

package/index.ts

@@ -1,51 +1,73 @@
 import { Hono } from 'hono'
 import { loadDb } from '@alstar/db'
-import { query } from './queries/index.ts'
-import { sectionRoutes } from './api/index.ts'
-import { getConfig } from './utils/get-config.ts'
-import * as types from './types.ts'
-
-import Layout from './components/layout.ts'
-import IndexPage from './components/index.ts'
-import Entry from './components/Entry.ts'
-
 import { serve } from '@hono/node-server'
 import { serveStatic } from '@hono/node-server/serve-static'
+import { createRefresher } from '@alstar/refresher'
+
+import * as types from './types.ts'
 import { createStudioTables } from './utils/create-studio-tables.ts'
 import { fileBasedRouter } from './utils/file-based-router.ts'
+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 rootdir = './node_modules/@alstar/studio'
+
+export let studioStructure: types.Structure = {}
+export let studioConfig: types.StudioConfig = {
+  siteName: '',
+  port: 3000,
+  structure: {},
+}
 
-export let structure: types.Structure
-export let rootdir = '/node_modules/@alstar/studio'
+const createStudio = async (config: types.StudioConfig) => {
+  const refresher = await createRefresher({ rootdir: '.' })
 
-const createStudio = async (studioStructure?: types.Structure) => {
-  const config = await getConfig<types.StudioConfig>()
+  loadDb('./studio.db')
+  createStudioTables()
 
-  structure = studioStructure || []
+  // const configFile = await getConfig<types.StudioConfig>()
 
-  loadDb('./cms.db')
+  if (config.structure) {
+    studioStructure = config.structure
+  }
 
-  createStudioTables()
+  studioConfig = { ...studioConfig, ...config }
 
-  const app = new Hono(config.honoConfig)
+  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.route('/', await fileBasedRouter('./pages'))
+  /**
+   * Studio API routes
+   */
+  app.route('/admin/api', api(studioStructure))
+  app.route('/admin/mcp', mcp())
 
-  app.route('/admin/api', sectionRoutes(structure))
+  /**
+   * Studio pages
+   */
+  const adminPages = await fileBasedRouter(path.join(rootdir, 'pages'))
 
-  app.get('/admin', (c) => c.html(Layout({ structure, content: IndexPage() })))
-  app.get('/admin/entry/:id', (c) => {
-    return c.html(
-      Layout({
-        structure,
-        content: Entry({ structure, entryId: c.req.param('id') }),
-      }),
-    )
-  })
+  if (adminPages) app.route('/admin', adminPages)
+
+  /**
+   * User pages
+   */
+  const pages = await fileBasedRouter('./pages')
 
-  const server = serve(app)
+  if (pages) app.route('/', pages)
+
+  const server = serve({
+    fetch: app.fetch,
+    port: studioConfig.port,
+  })
 
   // graceful shutdown
   process.on('SIGINT', () => {
@@ -62,10 +84,20 @@ const createStudio = async (studioStructure?: types.Structure) => {
     })
   })
 
+  startupLog({ port: studioConfig.port || 3000, refresherPort: refresher.port })
+
   return app
 }
 
-export const defineConfig = (config: types.StudioConfig) => config
-export const defineStructure = (structure: types.Structure) => structure
-
-export { createStudio, query }
+export {
+  defineConfig,
+  defineEntry,
+  defineStructure,
+  defineBlock,
+  defineField,
+  defineBlockField,
+} from './utils/define.ts'
+export { type RequestContext } from './types.ts'
+export { createStudio }
+export { html, type HtmlEscapedString } from './utils/html.ts'
+export { query } from './queries/index.ts'