@alstar/studio 0.0.0-beta.1

package/components/icons.ts

@@ -0,0 +1,103 @@
+import { html } from 'hono/html'
+
+export const logo = html`
+  <svg
+    viewBox="0 0 1289 342"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <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"
+    />
+  </svg>
+`
+
+export const plus = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="26"
+    height="26"
+    viewBox="0 0 20 20"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="currentColor"
+      d="M10.75 6.75a.75.75 0 0 0-1.5 0v2.5h-2.5a.75.75 0 0 0 0 1.5h2.5v2.5a.75.75 0 0 0 1.5 0v-2.5h2.5a.75.75 0 0 0 0-1.5h-2.5z"
+    />
+  </svg>
+`
+
+export const pen = html`
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 16 16"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <g fill="currentColor">
+      <path
+        d="M13.488 2.513a1.75 1.75 0 0 0-2.475 0L6.75 6.774a2.8 2.8 0 0 0-.596.892l-.848 2.047a.75.75 0 0 0 .98.98l2.047-.848a2.8 2.8 0 0 0 .892-.596l4.262-4.262a1.75 1.75 0 0 0 0-2.474"
+      />
+      <path
+        d="M4.75 3.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h6.5c.69 0 1.25-.56 1.25-1.25V9A.75.75 0 0 1 14 9v2.25A2.75 2.75 0 0 1 11.25 14h-6.5A2.75 2.75 0 0 1 2 11.25v-6.5A2.75 2.75 0 0 1 4.75 2H7a.75.75 0 0 1 0 1.5z"
+      />
+    </g>
+  </svg>
+`
+
+export const bars = 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="M3.75 9h16.5m-16.5 6.75h16.5"
+    />
+  </svg>
+`
+
+export const chevron = html`
+<svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="26"
+    height="26"
+    viewBox="0 0 16 16"
+  >
+    <!-- Icon from HeroIcons by Refactoring UI Inc - https://github.com/tailwindlabs/heroicons/blob/master/LICENSE -->
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06"
+      clip-rule="evenodd"
+    />
+  </svg>
+`
+
+export const newDocument = 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="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m3.75 9v6m3-3H9m1.5-12H5.625c-.621 0-1.125.504-1.125 1.125v17.25c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9"
+    />
+  </svg>
+`

package/components/index.ts

@@ -0,0 +1,30 @@
+import { html } from 'hono/html'
+import { structure } from '../index.ts'
+
+const codeBlock = html`<code><span style="color: #c678dd;">await</span> <span style="color: #61aeee;">createStudio</span>([
+  {
+    <span style="color: #d19a66;">name</span>: <span style="color: #98c379;">'entry'</span>,
+    <span style="color: #d19a66;">label</span>: <span style="color: #98c379;">'Entry'</span>,
+    <span style="color: #d19a66;">type</span>: <span style="color: #98c379;">'entry'</span>,
+    <span style="color: #d19a66;">fields</span>: [
+      {
+        <span style="color: #d19a66;">name</span>: <span style="color: #98c379;">'title'</span>,
+        <span style="color: #d19a66;">label</span>: <span style="color: #98c379;">'Title'</span>,
+        <span style="color: #d19a66;">type</span>: <span style="color: #98c379;">'text'</span>,
+      }
+    ]
+  }
+])</code>`
+
+export default () => {
+  const Discamer = html`
+    <div class="disclamer">
+      <article>
+        <header>No structure found</header>
+        <p>The Studio needs to be initialized with a structure:</p>
+        <pre>${codeBlock}</pre>
+      </article>
+    </div>`
+
+  return html`${!structure.length ? Discamer : ''}`
+}

package/components/layout.ts

@@ -0,0 +1,53 @@
+import adminPanel from './AdminPanel/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'
+
+export default (props: {
+  content:
+    | string
+    | Promise<string>
+    | HtmlEscapedString
+    | Promise<HtmlEscapedString>
+  structure: Structure
+}) => {
+  return html`
+    <!DOCTYPE html>
+    <html lang="en">
+      <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Alster CMS</title>
+
+        <link
+          rel="icon"
+          type="image/svg"
+          href="${rootdir}/public/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>
+      </head>
+
+      <body data-barba="wrapper">
+        <section>${adminPanel(props.structure)}</section>
+
+        <main style="height: 100vh; overflow: auto">
+          <section data-barba="container" data-barba-namespace="default">
+            ${props.content}
+          </section>
+        </main>
+
+        <script src="${rootdir}/public/main.js" type="module"></script>
+      </body>
+    </html>
+  `
+}

package/index.ts

@@ -0,0 +1,71 @@
+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 { createStudioTables } from './utils/create-studio-tables.ts'
+import { fileBasedRouter } from './utils/file-based-router.ts'
+
+export let structure: types.Structure
+export let rootdir = '/node_modules/@alstar/studio'
+
+const createStudio = async (studioStructure?: types.Structure) => {
+  const config = await getConfig<types.StudioConfig>()
+
+  structure = studioStructure || []
+
+  loadDb('./cms.db')
+
+  createStudioTables()
+
+  const app = new Hono(config.honoConfig)
+
+  app.use('*', serveStatic({ root: './' }))
+  app.use('*', serveStatic({ root: './public' }))
+
+  app.route('/', await fileBasedRouter('./pages'))
+
+  app.route('/admin/api', sectionRoutes(structure))
+
+  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') }),
+      }),
+    )
+  })
+
+  const server = serve(app)
+
+  // graceful shutdown
+  process.on('SIGINT', () => {
+    server.close()
+    process.exit(0)
+  })
+  process.on('SIGTERM', () => {
+    server.close((err) => {
+      if (err) {
+        console.error(err)
+        process.exit(1)
+      }
+      process.exit(0)
+    })
+  })
+
+  return app
+}
+
+export const defineConfig = (config: types.StudioConfig) => config
+export const defineStructure = (structure: types.Structure) => structure
+
+export { createStudio, query }

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@alstar/studio",
+  "version": "0.0.0-beta.1",
+  "type": "module",
+  "main": "index.ts",
+  "scripts": {
+    "dev": "node --watch index.ts"
+  },
+  "dependencies": {
+    "@alstar/db": "workspace:*",
+    "@alstar/ui": "workspace:*",
+    "@hono/node-server": "^1.18.1",
+    "@starfederation/datastar-sdk": "1.0.0-RC.1",
+    "hono": "^4.8.12",
+    "sortablejs": "^1.15.6"
+  },
+  "devDependencies": {
+    "@types/node": "^24.1.0",
+    "prettier": "^3.6.2",
+    "prettier-plugin-embed": "^0.5.0",
+    "prettier-plugin-sql": "^0.19.2"
+  },
+  "prettier": {
+    "semi": false,
+    "singleQuote": true,
+    "plugins": [
+      "prettier-plugin-embed",
+      "prettier-plugin-sql"
+    ],
+    "embeddedSqlTags": [
+      "sql"
+    ],
+    "language": "sqlite",
+    "keywordCase": "lower"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/public/favicon.svg

@@ -0,0 +1,6 @@
+<svg width="512" height="512" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M89.728 512C83.328 512 80.128 508.8 80.128 502.4V146.432C80.128 142.336 81.408 138.496 83.968 134.912L174.592 5.88797C177.408 2.04797 181.504 0.127975 186.88 0.127975H324.352C329.984 0.127975 334.08 2.04797 336.64 5.88797L428.032 134.912C430.592 138.496 431.872 142.336 431.872 146.432V502.4C431.872 508.8 428.672 512 422.272 512H281.728C275.328 512 272.128 508.8 272.128 502.4V358.4H239.872V502.4C239.872 508.8 236.672 512 230.272 512H89.728ZM256 225.152C267.008 225.152 275.968 221.696 282.88 214.784C289.792 207.872 293.248 199.04 293.248 188.288C293.248 177.28 289.792 168.32 282.88 161.408C275.968 154.496 267.008 151.04 256 151.04C244.992 151.04 236.032 154.496 229.12 161.408C222.208 168.32 218.752 177.28 218.752 188.288C218.752 199.04 222.208 207.872 229.12 214.784C236.032 221.696 244.992 225.152 256 225.152Z"
+    fill="#FC2C2C" />
+</svg>
+  

package/public/main.css

@@ -0,0 +1,92 @@
+@import './../node_modules/@alstar/ui/red.css';
+
+body {
+  min-height: 100vh;
+}
+
+body {
+  padding: 0;
+  min-height: inherit;
+
+  display: grid;
+  grid-template-columns: auto 1fr;
+  align-content: baseline;
+
+  > main {
+    padding: 40px;
+
+    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;
+  }
+
+  /* .sortable-chosen {
+    filter: brightness(0.9)
+  } */
+}
+
+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);
+}
+
+.ink-mde-textarea {
+  width: 100%;
+}
+
+.disclamer {
+  display: flex;
+  justify-content: center;
+}

package/public/main.js

@@ -0,0 +1,43 @@
+import Sortable from '../node_modules/sortablejs/modular/sortable.core.esm.js'
+import { ink, wrap } from 'https://esm.sh/ink-mde@0.34.0'
+
+barba.init({
+  views: [
+    {
+      namespace: 'default',
+      afterEnter() {
+        init()
+      },
+    },
+  ],
+})
+
+function init() {
+  // sortable
+  {
+    const els = document.querySelectorAll('[data-sortable]')
+
+    els.forEach((el) => {
+      var sortable = Sortable.create(el, {
+        delay: 0,
+        animation: 250,
+        dragClass: 'sortable-drag',
+        easing: 'ease-in-out',
+      })
+    })
+  }
+
+  // ink-mde
+  {
+    const el = document.querySelector('textarea')
+
+    if (el) {
+      wrap(el, {
+        interface: {
+          // appearance: InkValues.Appearance.Auto,
+          attribution: false,
+        },
+      })
+    }
+  }
+}

package/queries/index.ts

@@ -0,0 +1,98 @@
+import { db } from '@alstar/db'
+import { sql } from '../utils/sql.ts'
+import { type DBBlock } from '../types.ts'
+import { buildBlockTree } from '../utils/buildBlocksTree.ts'
+
+export const blocks = (options: {
+  parent: string | number | null
+}): DBBlock[] | null => {
+  const q =
+    options.parent === null
+      ? sql`
+          select
+            *
+          from
+            blocks
+          where
+            parent_block_id is null;
+        `
+      : sql`
+          select
+            *
+          from
+            blocks
+          where
+            parent_block_id = ?;
+        `
+
+  const transaction = db.database.prepare(q)
+
+  if (options.parent === null) {
+    return transaction.all() as unknown as DBBlock[]
+  } else {
+    return transaction.all(options.parent) as unknown as DBBlock[]
+  }
+}
+
+export const block = (
+  query: Record<string, string | null>,
+  options?: { recursive: boolean },
+): DBBlock | null => {
+  const str = Object.keys(query)
+    .map((key) => `${key.replace('parent', 'parent_block_id')} = ?`)
+    .join(' AND ')
+
+  const q = options?.recursive
+    ? sql`
+        with recursive
+          block_hierarchy as (
+            -- Anchor member: the root block, depth = 0
+            select
+              b.*,
+              0 as depth
+            from
+              blocks b
+            where
+              b.id = ? -- Replace 5 with your root block ID
+            union all
+            -- Recursive member: find children and increment depth
+            select
+              b.*,
+              bh.depth + 1 as depth
+            from
+              blocks b
+              inner join block_hierarchy bh on b.parent_block_id = bh.id
+          )
+        select
+          *
+        from
+          block_hierarchy
+        order by
+          sort_order;
+      `
+    : sql`
+        select
+          *
+        from
+          blocks
+        where
+          ${str};
+      `
+
+  const transaction = db.database.prepare(q)
+
+  try {
+    if (options?.recursive) {
+      const res = transaction.all(query.id) as unknown as any[]
+      return (buildBlockTree(res) as any) || null
+    }
+    return (
+      (transaction.get(...Object.values(query)) as unknown as DBBlock) || null
+    )
+  } catch (error) {
+    console.log('error')
+    return null
+  }
+}
+
+export const query = { blocks, block }

package/schemas.ts

@@ -0,0 +1,67 @@
+import { sql } from './utils/sql.ts'
+
+// export const entriesTable = {
+//   tableName: 'entries',
+//   columns: sql`
+//     title TEXT not null, -- Title of the page
+//     slug TEXT not null unique, -- URL slug for the page
+//     meta_description TEXT -- Optional meta description for SEO
+//   `,
+// }
+
+// export const fieldTable = {
+//   tableName: 'fields',
+//   columns: sql`
+//     name TEXT not null, -- Name of the field (e.g., "content", "header", "image")
+//     type TEXT not null, -- Field type (e.g., "text", "image", "video")
+//     label TEXT not null, -- Field label (e.g., "Text", "Image", "Video")
+//     options TEXT -- Additional options or settings (can be a JSON string if needed)
+//   `,
+// }
+
+// export const entriesFieldsTable = {
+//   tableName: 'entry_fields',
+//   columns: sql`
+//     entry_id INTEGER not null, -- Foreign key to pages
+//     field_id INTEGER not null, -- Foreign key to fields
+//     position INTEGER, -- Optional: order of the field on the page
+//     content TEXT, -- Content of the field (e.g., text, image URL, etc.)
+//     foreign key (entry_id) references entries (id),
+//     foreign key (field_id) references fields (id)
+//   `,
+// }
+
+// export const entryTypeTable = {
+//   tableName: 'entry_types',
+//   columns: sql`
+//     name TEXT not null, -- Name of the field (e.g., "content", "header", "image")
+//     type TEXT not null, -- Field type (e.g., "text", "image", "video")
+//     label TEXT not null, -- Field label (e.g., "Text", "Image", "Video")
+//     options TEXT -- Additional options or settings (can be a JSON string if needed)
+//   `,
+// }
+
+// export const entryEntryTypeTable = {
+//   tableName: 'entry_entry_types',
+//   columns: sql`
+//     entry_id INTEGER not null, -- Foreign key to pages
+//     entry_type_id INTEGER not null, -- Foreign key to fields
+//     foreign key (entry_id) references entries (id),
+//     foreign key (entry_type_id) references entry_types (id)
+//   `,
+// }
+
+// -- Blocks
+export const blocksTable = {
+  tableName: 'blocks',
+  columns: sql`
+    name TEXT not null,
+    label TEXT not null,
+    type TEXT not null,
+    sort_order INTEGER not null default 0,
+    value TEXT,
+    options JSON,
+    parent_block_id INTEGER,
+    foreign key (parent_block_id) references blocks (id)
+  `,
+}

package/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../../tsconfig.json",
+}

package/types.ts

@@ -0,0 +1,25 @@
+import { type HonoOptions } from "hono/hono-base"
+import { type BlankEnv } from "hono/types"
+
+export type Block = {
+  name: string
+  label: string
+  type: string
+  fields?: Block[]
+}
+
+export type Structure = Block[]
+
+export type DBBlock = Block & {
+  id: number
+  created_at: string
+  updated_at: string
+  value: string | null
+  sort_order: number | null
+  parent_block_id: number | null
+  options: number | null
+}
+
+export type StudioConfig = {
+  honoConfig?: HonoOptions<BlankEnv>
+}

package/utils/build-structure-path.ts

@@ -0,0 +1,43 @@
+import { type Block } from '../types.ts'
+import { structure } from '../index.ts'
+
+export type StructurePath = (string | number)[]
+
+function getTargetPath(
+  target: Block,
+  path: StructurePath,
+): number | string | undefined {
+  if (!path.length) {
+    return structure.findIndex((block) => block.name === target.name)
+  }
+
+  let sub = structure
+
+  path.forEach((key: number | string) => {
+    if (sub) {
+      // @ts-ignore
+      sub = sub[key]
+    }
+  })
+
+  if (Array.isArray(sub)) {
+    return sub.findIndex((block) => block.name === target.name)
+  }
+
+  return
+}
+
+export const buildStructurePath = (
+  target: Block | undefined,
+  path: StructurePath = [],
+) => {
+  if (!target) return path
+
+  const targetPlacement = getTargetPath(target, path)
+
+  if (targetPlacement !== undefined) {
+    path.push(targetPlacement)
+  }
+
+  return path
+}