@blocklet/component-studio-cli 0.4.134

package/templates/init/1-professional/tsconfig.json

@@ -0,0 +1,102 @@
+{
+  "ts-node": {
+    "files": true,
+    "compilerOptions": {
+      "module": "Node16"
+    }
+  },
+  "compilerOptions": {
+    /* Visit https://aka.ms/tsconfig to read more about this file */
+    /* Projects */
+    // "incremental": true,                              /* Save .tsbuildinfo files to allow for incremental compilation of projects. */
+    // "composite": true,                                /* Enable constraints that allow a TypeScript project to be used with project references. */
+    // "tsBuildInfoFile": "./.tsbuildinfo",              /* Specify the path to .tsbuildinfo incremental compilation file. */
+    // "disableSourceOfProjectReferenceRedirect": true,  /* Disable preferring source files instead of declaration files when referencing composite projects. */
+    // "disableSolutionSearching": true,                 /* Opt a project out of multi-project reference checking when editing. */
+    // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
+    /* Language and Environment */
+    "target": "es2016" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
+    // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
+    // "experimentalDecorators": true,                   /* Enable experimental support for TC39 stage 2 draft decorators. */
+    // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
+    // "jsxFactory": "",                                 /* Specify the JSX factory function used when targeting React JSX emit, e.g. 'React.createElement' or 'h'. */
+    // "jsxFragmentFactory": "",                         /* Specify the JSX Fragment reference used for fragments when targeting React JSX emit e.g. 'React.Fragment' or 'Fragment'. */
+    // "jsxImportSource": "",                            /* Specify module specifier used to import the JSX factory functions when using 'jsx: react-jsx*'. */
+    // "reactNamespace": "",                             /* Specify the object invoked for 'createElement'. This only applies when targeting 'react' JSX emit. */
+    // "noLib": true,                                    /* Disable including any library files, including the default lib.d.ts. */
+    // "useDefineForClassFields": true,                  /* Emit ECMAScript-standard-compliant class fields. */
+    // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
+    /* Modules */
+    "module": "commonjs" /* Specify what module code is generated. */,
+    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
+    // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
+    // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
+    // "rootDirs": [],                                   /* Allow multiple folders to be treated as one when resolving modules. */
+    // "typeRoots": [],                                  /* Specify multiple folders that act like './node_modules/@types'. */
+    // "types": [],                                      /* Specify type package names to be included without being referenced in a source file. */
+    // "allowUmdGlobalAccess": true,                     /* Allow accessing UMD globals from modules. */
+    // "moduleSuffixes": [],                             /* List of file name suffixes to search when resolving a module. */
+    // "resolveJsonModule": true,                        /* Enable importing .json files. */
+    // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
+    /* JavaScript Support */
+    // "allowJs": true,                                  /* Allow JavaScript files to be a part of your program. Use the 'checkJS' option to get errors from these files. */
+    // "checkJs": true,                                  /* Enable error reporting in type-checked JavaScript files. */
+    // "maxNodeModuleJsDepth": 1,                        /* Specify the maximum folder depth used for checking JavaScript files from 'node_modules'. Only applicable with 'allowJs'. */
+    /* Emit */
+    // "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */
+    // "declarationMap": true,                           /* Create sourcemaps for d.ts files. */
+    // "emitDeclarationOnly": true,                      /* Only output d.ts files and not JavaScript files. */
+    // "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */
+    // "outFile": "./",                                  /* Specify a file that bundles all outputs into one JavaScript file. If 'declaration' is true, also designates a file that bundles all .d.ts output. */
+    // "outDir": "./",                                   /* Specify an output folder for all emitted files. */
+    // "removeComments": true,                           /* Disable emitting comments. */
+    "noEmit": true /* Disable emitting files from a compilation. */,
+    // "importHelpers": true,                            /* Allow importing helper functions from tslib once per project, instead of including them per-file. */
+    "ignoreDeprecations": "5.0",
+    // "importsNotUsedAsValues": "remove",               /* Specify emit/checking behavior for imports that are only used for types. */
+    // "downlevelIteration": true,                       /* Emit more compliant, but verbose and less performant JavaScript for iteration. */
+    // "sourceRoot": "",                                 /* Specify the root path for debuggers to find the reference source code. */
+    // "mapRoot": "",                                    /* Specify the location where debugger should locate map files instead of generated locations. */
+    // "inlineSourceMap": true,                          /* Include sourcemap files inside the emitted JavaScript. */
+    // "inlineSources": true,                            /* Include source code in the sourcemaps inside the emitted JavaScript. */
+    // "emitBOM": true,                                  /* Emit a UTF-8 Byte Order Mark (BOM) in the beginning of output files. */
+    // "newLine": "crlf",                                /* Set the newline character for emitting files. */
+    // "stripInternal": true,                            /* Disable emitting declarations that have '@internal' in their JSDoc comments. */
+    // "noEmitHelpers": true,                            /* Disable generating custom helper functions like '__extends' in compiled output. */
+    // "noEmitOnError": true,                            /* Disable emitting files if any type checking errors are reported. */
+    // "preserveConstEnums": true,                       /* Disable erasing 'const enum' declarations in generated code. */
+    // "declarationDir": "./",                           /* Specify the output directory for generated declaration files. */
+    // "preserveValueImports": true,                     /* Preserve unused imported values in the JavaScript output that would otherwise be removed. */
+    /* Interop Constraints */
+    "isolatedModules": true /* Ensure that each file can be safely transpiled without relying on other imports. */,
+    // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
+    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
+    /* Type Checking */
+    "strict": true /* Enable all strict type-checking options. */,
+    "noImplicitAny": true /* Enable error reporting for expressions and declarations with an implied 'any' type. */,
+    "strictNullChecks": true /* When type checking, take into account 'null' and 'undefined'. */,
+    "strictFunctionTypes": true /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */,
+    "strictBindCallApply": true /* Check that the arguments for 'bind', 'call', and 'apply' methods match the original function. */,
+    "strictPropertyInitialization": true /* Check for class properties that are declared but not set in the constructor. */,
+    "noImplicitThis": true /* Enable error reporting when 'this' is given the type 'any'. */,
+    "useUnknownInCatchVariables": false /* Default catch clause variables as 'unknown' instead of 'any'. */,
+    "alwaysStrict": true /* Ensure 'use strict' is always emitted. */,
+    "noUnusedLocals": true /* Enable error reporting when local variables aren't read. */,
+    "noUnusedParameters": true /* Raise an error when a function parameter isn't read. */,
+    // "exactOptionalPropertyTypes": false /* Interpret optional property types as written, rather than adding 'undefined'. */,
+    // "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */
+    "noFallthroughCasesInSwitch": true /* Enable error reporting for fallthrough cases in switch statements. */,
+    "noUncheckedIndexedAccess": true /* Add 'undefined' to a type when accessed using an index. */,
+    "noImplicitOverride": true /* Ensure overriding members in derived classes are marked with an override modifier. */,
+    // "noPropertyAccessFromIndexSignature": true /* Enforces using indexed accessors for keys declared using an indexed type. */,
+    // "allowUnusedLabels": true,                        /* Disable error reporting for unused labels. */
+    // "allowUnreachableCode": true,                     /* Disable error reporting for unreachable code. */
+    /* Completeness */
+    // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
+  }
+}

package/templates/init/1-professional/version

@@ -0,0 +1 @@
+0.1.0

package/templates/init/2-blank/@template.json

@@ -0,0 +1,4 @@
+{
+  "name": "Blank Project",
+  "description": "A minimal component studio project structure, no preset components"
+}

package/templates/init/2-blank/README.md

@@ -0,0 +1,27 @@
+# Blank Component Studio Project
+
+This is a minimal component studio project created with Component Studio.
+
+## Project Structure
+
+```
+{your-project-name}/
+  ├── src/
+  │   └── {your-component-name} # Your component name
+  |     └── index.tsx           # Main entry point
+  ├──  package.json              # Project dependencies and scripts
+  ├──  .gitignore                # Git ignore
+  └──  README.md                 # README
+```
+
+## Getting Started
+
+Start development server:
+
+```bash
+pnpm run dev
+```
+
+## License
+
+MIT

package/templates/init/2-blank/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "blank-component-studio-project",
+  "version": "0.1.0",
+  "description": "A minimal component studio project",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "start": "component-studio dev",
+    "dev": "component-studio dev",
+    "update:deps": "npx -y taze -r -n '/arcblock|ocap|abtnode|blocklet|did-connect|did-comment|nedb/' -w -f && pnpm install && pnpm run deduplicate",
+    "deduplicate": "pnpm dedupe"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "^5.0.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+  },
+  "license": "MIT"
+}

package/templates/workspace/.component-studio-runtime/_theme.tsx

@@ -0,0 +1,4 @@
+// NOTICE: This file is very important, please do not change it!
+import BlockStudio from '@blocklet/pages-kit-block-studio/frontend';
+
+export default BlockStudio;

package/templates/workspace/.editorconfig

@@ -0,0 +1,23 @@
+# For more information about the properties used in
+# this file, please see the EditorConfig documentation:
+# http://editorconfig.org/
+#
+# Sensible EditorConfig defaults
+# https://gist.github.com/matijs/662bf45dd4ec37b3a068
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+# Make sure package.json always uses 2 spaces to indent
+[{package.json}]
+indent_size = 2
+indent_style = space
+
+[{makefile, Makefile}]
+indent_style = tab

package/templates/workspace/.env

@@ -0,0 +1 @@
+BLOCK_ENTRY_FILES_PATTERN="projects/user-project/src/**/index.{ts,tsx,js,jsx}"

package/templates/workspace/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2018-2024 ArcBlock
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/templates/workspace/README.md

@@ -0,0 +1,127 @@
+# Getting Started with Create Blocklet
+
+This project was bootstrapped with [Create Blocklet](https://github.com/blocklet/create-blocklet).
+
+Component Studio is a development tool for creating Pages Kit visual blocks. With this tool, developers can:
+
+- Create and manage reusable frontend block components
+- Provide a visual editing interface for easy block configuration and preview
+- Support development of various visualization component types (charts, forms, animations, etc.)
+- Seamlessly integrate into the ArcBlock Blocklet ecosystem
+
+## File Structure
+
+```
+your-component-studio/
+├── api/              # Backend API code
+│   ├── dev.ts        # Development server entry
+│   ├── src/          # API source code directory
+│   └── third.d.ts    # Third-party library type declarations
+├── scripts/          # Build and version management scripts
+│   ├── build-clean.mjs  # Build cleanup script
+│   └── bump-version.mjs # Version upgrade script
+├── src/              # Frontend source code
+│   ├── HelloWorld/   # Example HelloWorld block
+│   │   └── index.tsx   # Block entry
+│   │   └── @metadata.json # Block metadata
+│   │   └── @preview-images/ # Block preview images directory
+│   └── <your-component-name>/ # Your block directory
+│   |   └── index.tsx   # Block entry
+│   |   └── @metadata.json # Block metadata
+│   |   └── @preview-images/ # Block preview images directory
+│   └── components/ # Components directory
+│   └── utils/ # Utility functions directory
+│   └── types/ # Type declarations directory
+├── package.json      # Project configuration and dependencies
+├── vite.config.mts   # Vite client configuration
+└── vite-server.config.ts # Vite server configuration
+```
+
+## Development
+
+1. Make sure you have [@blocklet/cli](https://www.npmjs.com/package/@blocklet/cli) installed
+
+   Blocklet needs blocklet server as a dependency. So you need to install it first.
+   `npm install -g @blocklet/cli`
+   See details in [ https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server]( https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server)
+
+2. Init blocklet server & start blocklet server
+
+   Before starting an blocklet server, you need to init blocklet server.
+   `blocklet server init`
+   `blocklet server start`
+   See details in [https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server](https://www.arcblock.io/docs/blocklet-developer/install-blocklet-cli#start-blocklet-server)
+   
+3. Go to the project directory `cd [name]`
+4. Install dependencies: `npm install` or `yarn`
+5. Start development server: `blocklet dev`
+
+## Bundle
+
+After developing a blocklet, you may need to bundle it. Use `npm run bundle` command.
+
+## Deploy
+
+- If you want to deploy this blocklet to local blocklet server, you can use `blocklet deploy .blocklet/bundle --app-id {appId}` command(Make sure the blocklet is bundled before deployment).
+  - appId is the id of the container you want to run on your server, you can see it in your server's dashboard
+- If you want to deploy this blocklet to remote blocklet server, you can use the command below.
+
+  ```shell
+  blocklet deploy .blocklet/bundle --endpoint {your blocklet server url} --access-key {blocklet server access key} --access-secret {blocklet server access secret}
+  ```
+
+## Upload to blocklet store
+
+- If you want to upload the blocklet to any store for other users to download and use, you can following the following instructions.
+
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Connect to a store, You may need some testnet tokens to deploy your blocklet, you can get some from https://faucet.abtnetwork.io/
+
+  ```shell
+  blocklet connect https://test.store.blocklet.dev/
+  ```
+
+  Upload a new version to a store.
+
+  > Make sure the blocklet is bundled before upload.
+
+  ```shell
+  blocklet upload
+  ```
+
+  Or you can simply use `npm run upload` command.
+
+- You also can upload a new version to a store by Github CI.
+  Bump version at first.
+
+  ```shell
+  npm run bump-version
+  ```
+
+  Push your code to Github main/master branch, or make a pull request to the main/master branch.
+  The CI workflow will automatically upload a new version to a store.
+
+## Q & A
+
+1. Q: How to change a blocklet's logo?
+
+   Change the `logo.png` file root folder.
+
+   Or you can change the `logo` field in the `blocklet.yml` file.
+
+   > Make sure you have added the logo path to the `blocklet.yml` file `files` field.
+
+## Learn More
+
+- Full specification of `blocklet.yml`: [https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md](https://github.com/blocklet/blocklet-specification/blob/main/docs/meta.md)
+- Full document of Blocklet Server & blocklet development: [https://www.arcblock.io/docs/blocklet-developer](https://www.arcblock.io/docs/blocklet-developer)
+
+## License
+
+The code is licensed under the Apache 2.0 license found in the
+[LICENSE](LICENSE) file.

package/templates/workspace/api/dev.ts

@@ -0,0 +1,21 @@
+import { readFileSync } from 'fs';
+import path from 'path';
+import { setupClient } from 'vite-plugin-blocklet';
+
+import { app, server } from './src';
+
+(async () => {
+  const viteDevServer = await setupClient(app, {
+    appType: 'custom',
+    server,
+    importMetaHot: import.meta.hot,
+  });
+
+  const html = readFileSync(path.join(__dirname, '../index.html'), 'utf-8');
+  const transformedHtml = await viteDevServer.transformIndexHtml('/', html);
+
+  // Add route to serve the transformed HTML
+  app.get('*', (req, res) => {
+    res.send(transformedHtml);
+  });
+})();

package/templates/workspace/api/src/index.ts

@@ -0,0 +1,50 @@
+import 'express-async-errors';
+
+import path from 'path';
+
+import cookieParser from 'cookie-parser';
+import cors from 'cors';
+import dotenv from 'dotenv-flow';
+import express, { ErrorRequestHandler } from 'express';
+import fallback from '@blocklet/sdk/lib/middlewares/fallback';
+
+import logger from './libs/logger';
+import routes from './routes';
+
+dotenv.config();
+
+const { name, version } = require('../../package.json');
+
+export const app = express();
+
+app.set('trust proxy', true);
+app.use(cookieParser());
+app.use(express.json({ limit: '1 mb' }));
+app.use(express.urlencoded({ extended: true, limit: '1 mb' }));
+app.use(cors());
+
+const router = express.Router();
+router.use(routes);
+
+app.use(router);
+
+const isProduction = process.env.NODE_ENV === 'production' || process.env.ABT_NODE_SERVICE_ENV === 'production';
+
+if (isProduction) {
+  const staticDir = path.resolve(process.env.BLOCKLET_APP_DIR!, 'dist');
+  app.use(express.static(staticDir, { maxAge: '30d', index: false }));
+  app.use(fallback('index.html', { root: staticDir }));
+
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  app.use(<ErrorRequestHandler>((err, _req, res, _next) => {
+    logger.error(err.stack);
+    res.status(500).send('Something broke!');
+  }));
+}
+
+const port = parseInt(process.env.BLOCKLET_PORT!, 10);
+
+export const server = app.listen(port, (err?: any) => {
+  if (err) throw err;
+  logger.info(`> ${name} v${version} ready on ${port}`);
+});

package/templates/workspace/api/src/libs/auth.ts

@@ -0,0 +1,17 @@
+import path from 'path';
+
+import AuthStorage from '@arcblock/did-auth-storage-nedb';
+import getWallet from '@blocklet/sdk/lib/wallet';
+import WalletAuthenticator from '@blocklet/sdk/lib/wallet-authenticator';
+import WalletHandler from '@blocklet/sdk/lib/wallet-handler';
+
+import env from './env';
+
+export const wallet = getWallet();
+export const authenticator = new WalletAuthenticator();
+export const handlers = new WalletHandler({
+  authenticator,
+  tokenStorage: new AuthStorage({
+    dbPath: path.join(env.dataDir, 'auth.db'),
+  }),
+});

package/templates/workspace/api/src/libs/env.ts

@@ -0,0 +1,6 @@
+import env from '@blocklet/sdk/lib/env';
+
+export default {
+  ...env,
+  chainHost: process.env.CHAIN_HOST || '',
+};

package/templates/workspace/api/src/libs/logger.ts

@@ -0,0 +1,3 @@
+const logger = console;
+
+export default logger;

package/templates/workspace/api/src/routes/index.ts

@@ -0,0 +1,12 @@
+import { initBlockStudioRouter } from '@blocklet/pages-kit-block-studio/init-block-studio-router';
+import { initResourceRouter } from '@blocklet/pages-kit-block-studio/init-resource-router';
+import { initUploaderRouter } from '@blocklet/pages-kit-block-studio/init-uploader-router';
+import { Router } from 'express';
+
+const router = Router();
+
+router.use('/api/resources', initResourceRouter);
+router.use('/api/blocks', initBlockStudioRouter);
+router.use(initUploaderRouter);
+
+export default router;

package/templates/workspace/api/third.d.ts

@@ -0,0 +1,17 @@
+declare module 'vite-plugin-blocklet';
+
+declare module 'express-history-api-fallback';
+
+declare module 'express-async-errors';
+
+declare namespace Express {
+  interface Request {
+    user?: {
+      did: string;
+      role: string;
+      fullName: string;
+      provider: string;
+      walletOS: string;
+    };
+  }
+}

package/templates/workspace/biome.json

@@ -0,0 +1,36 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.5.3/schema.json",
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "correctness": {
+        "noUnusedVariables": "error"
+      },
+      "suspicious": {
+        "noExplicitAny": "warn"
+      },
+      "style": {
+        "noNonNullAssertion": "off",
+        "useShorthandArrayType": "error"
+      },
+      "a11y": {
+        "noNoninteractiveElementToInteractiveRole": "off",
+        "useKeyWithClickEvents": "off",
+        "useValidAnchor": "off",
+        "noSvgWithoutTitle": "off",
+        "useKeyWithMouseEvents": "off"
+      }
+    },
+    "ignore": ["**/node_modules/**", "*.md"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 100
+  }
+}

package/templates/workspace/blocklet.md

@@ -0,0 +1,8 @@
+# Component Studio
+
+Component Studio is a development tool for creating Pages Kit visual blocks. With this tool, developers can:
+
+- Create and manage reusable frontend block components
+- Provide a visual editing interface for easy block configuration and preview
+- Support development of various visualization component types (charts, forms, animations, etc.)
+- Seamlessly integrate into the ArcBlock Blocklet ecosystem

package/templates/workspace/blocklet.yml

@@ -0,0 +1,58 @@
+title: component-studio
+description: A Blocklet to help you develop components for Pages Kit
+keywords:
+  - blocklet
+  - react
+group: dapp
+did: z2qa7BQdkEb3TwYyEYC1psK6uvmGnHSUHt5RM
+main: api/dist/index.js
+author:
+  name: Arcblock
+  email: blocklet@arcblock.io
+repository:
+  type: git
+  url: git+https://github.com/blocklet/create-blocklet.git
+specVersion: 1.2.8
+version: 0.1.0
+logo: logo.png
+files:
+  - dist
+  - logo.png
+  - screenshots
+interfaces:
+  - type: web
+    name: publicUrl
+    path: /
+    prefix: '*'
+    port: BLOCKLET_PORT
+    protocol: http
+community: ''
+documentation: ''
+homepage: ''
+license: ''
+payment:
+  price: []
+  share: []
+timeout:
+  start: 60
+requirements:
+  server: '>=1.16.28'
+  os: '*'
+  cpu: '*'
+scripts:
+  dev: npm run start
+environments: []
+capabilities: {}
+screenshots: []
+components:
+  - name: image-bin
+    required: true
+    mountPoint: /image-bin
+    source:
+      name: image-bin
+      version: latest
+resource:
+  exportApi: /api/resources
+  types:
+    - type: page
+      description: Used by Pages Kit to import one or multiple components

package/templates/workspace/index.html

@@ -0,0 +1,15 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/favicon.ico?imageFilter=convert&f=png&w=32" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#4F6AF5" />
+  </head>
+
+  <body>
+    <noscript> You need to enable JavaScript to run this app. </noscript>
+    <div id="root"></div>
+    <script type="module" src="/@pages-infra/main.js"></script>
+  </body>
+</html>