create-lupine 1.0.13 → 1.0.15

package/templates/hello-world/web/src/styles/global.css

@@ -785,6 +785,66 @@ body {
   font-weight: var(--font-weight-base);
 }
 
+.safe-area-pt {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+}
+
+.safe-area-pb {
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+}
+
+.safe-area-pl {
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+}
+
+.safe-area-pr {
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+.safe-area-pall {
+  padding-top: constant(safe-area-inset-top);
+  padding-top: env(safe-area-inset-top);
+  padding-bottom: constant(safe-area-inset-bottom);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: constant(safe-area-inset-left);
+  padding-left: env(safe-area-inset-left);
+  padding-right: constant(safe-area-inset-right);
+  padding-right: env(safe-area-inset-right);
+}
+
+.safe-area-mt {
+  margin-top: constant(safe-area-inset-top);
+  margin-top: env(safe-area-inset-top);
+}
+
+.safe-area-mb {
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+}
+
+.safe-area-ml {
+  margin-left: constant(safe-area-inset-left);
+  margin-left: env(safe-area-inset-left);
+}
+
+.safe-area-mr {
+  margin-right: constant(safe-area-inset-right);
+  margin-right: env(safe-area-inset-right);
+}
+.safe-area-mall {
+  margin-top: constant(safe-area-inset-top);
+  margin-top: env(safe-area-inset-top);
+  margin-bottom: constant(safe-area-inset-bottom);
+  margin-bottom: env(safe-area-inset-bottom);
+  margin-left: constant(safe-area-inset-left);
+  margin-left: env(safe-area-inset-left);
+  margin-right: constant(safe-area-inset-right);
+  margin-right: env(safe-area-inset-right);
+}
+
 input.base-css[type='text'],
 input.base-css[type='password'],
 input.base-css[type='email'],
@@ -888,6 +948,9 @@ input.base-css[type='text'][disabled='true']::placeholder {
 }
 
 .button-base {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   line-height: 1.1;
   height: var(--button-height);
   cursor: pointer;

package/templates/responsive-starter/api/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "responsive-starter-api",
+  "version": "1.0.0",
+  "dependencies": {},
+  "devDependencies": {}
+}

package/templates/responsive-starter/api/resources/config_default.json

@@ -0,0 +1,6 @@
+{
+  "WEB.pageLimit": "15",
+  "WEB.siteTitle": "Sample title",
+  "WEB.siteEmail": "sample@sample.com",
+  "WEB.siteUrl": "https://sample.com"
+}

package/templates/responsive-starter/api/resources/install.sqlite.sql

@@ -0,0 +1,4 @@
+#-- sql queries to create tables
+#-- Never name a table with plural (such as "users")
+#-- Never name a table using a reserved keyword (such as "user")
+#-- Never prefix your table name with "tbl" or some other object type prefix

package/templates/responsive-starter/api/src/index.ts

@@ -0,0 +1,4 @@
+import { ApiModule } from 'lupine.api';
+import { RootApi } from './service/root-api';
+
+export const apiModule = new ApiModule(new RootApi());

package/templates/responsive-starter/api/src/service/root-api.ts

@@ -0,0 +1,18 @@
+import { IApiBase, StaticServer, ApiRouter } from 'lupine.api';
+
+export class RootApi implements IApiBase {
+  protected router = new ApiRouter();
+
+  constructor() {
+    this.mountDashboard();
+  }
+
+  public getRouter(): ApiRouter {
+    return this.router;
+  }
+
+  protected mountDashboard() {
+    const staticServer = new StaticServer();
+    this.router.use('*', staticServer.processRequest.bind(staticServer));
+  }
+}

package/templates/responsive-starter/lupine.json

@@ -0,0 +1,23 @@
+{
+  "name": "responsive-starter",
+  "webEntryPoints": [
+    {
+      "index": "web/src/index.tsx",
+      "html": "web/src/index.html",
+      "outdir": "/"
+    }
+  ],
+  "apiEntryPoint": "api/src/index.ts",
+  "copyFiles": [
+    {
+      "type": "web",
+      "from": "web/assets",
+      "to": "assets"
+    },
+    {
+      "type": "data",
+      "from": "api/resources",
+      "to": "resources"
+    }
+  ]
+}

package/templates/responsive-starter/web/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "responsive-starter-web",
+  "version": "1.0.0",
+  "dependencies": {},
+  "devDependencies": {}
+}

package/templates/responsive-starter/web/src/app-icons.ts

@@ -0,0 +1,72 @@
+import { CssProps } from 'lupine.web';
+
+export const appIcons = {
+  // 记事 (Notes)
+  'ma-home-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 22V12h6v10'/%3E%3C/svg%3E`,
+  // 财务 (Finance)
+  'icon-finance': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 2v20M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6'/%3E%3C/svg%3E`,
+  'icon-date': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zM16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E`,
+  'icon-time': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 6v6l4 2'/%3E%3C/svg%3E`,
+  'icon-color': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 21a9 9 0 1 1 0-18c1.5 0 2.5 1 2.5 2.5a2 2 0 0 1-1.5 2 2 2 0 0 0-1.5 2c0 1 1 2 2 2h2c2.5 0 4.5 2 4.5 4.5A5.5 5.5 0 0 1 12 21z'/%3E%3Ccircle cx='7.5' cy='10.5' r='1.5' fill='black'/%3E%3Ccircle cx='10.5' cy='7.5' r='1.5' fill='black'/%3E%3Ccircle cx='14.5' cy='8.5' r='1.5' fill='black'/%3E%3Ccircle cx='16.5' cy='12.5' r='1.5' fill='black'/%3E%3C/svg%3E`,
+  // 记账 (Ledger/List)
+  'bs-list': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E`,
+  // 日记 (Diary/Calendar)
+  'ma-pencil-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E`,
+  'ma-book-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 3H7C5.895 3 5 3.895 5 5v14c0 1.105.895 2 2 2h12c1.105 0 2-.895 2-2V5c0-1.105-.895-2-2-2zM5 7h16M7 3v18'/%3E%3C/svg%3E`,
+  // 工具 (Tools)
+  'ma-tools': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z'/%3E%3C/svg%3E`,
+  'ma-calendar-star': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zM16 2v4M8 2v4M3 10h18M12 11.5l1.2 2.5 2.8.4-2 2 .5 2.8-2.5-1.3-2.5 1.3.5-2.8-2-2 2.8-.4L12 11.5z'/%3E%3C/svg%3E`,
+  'ma-calendar-check': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19 4H5a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2V6a2 2 0 00-2-2zM16 2v4M8 2v4M3 10h18M9 16l2 2 4-4'/%3E%3C/svg%3E`,
+  'ma-format-list-checks': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M10 6h10M10 12h10M10 18h10M4 6l1 1 2-2M4 12l1 1 2-2M4 18l1 1 2-2'/%3E%3C/svg%3E`,
+  'ma-timer-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 2v4M10 2h4M12 6a8 8 0 100 16 8 8 0 000-16zM12 10v4l2 2'/%3E%3C/svg%3E`,
+  'ma-pause': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M14 19h4V5h-4M6 19h4V5H6v14Z'/%3E%3C/svg%3E`,
+  'ma-play': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M8 5v14l11-7z'/%3E%3C/svg%3E`,
+  'ma-refresh': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z'/%3E%3C/svg%3E`,
+  'ma-check-circle-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z'/%3E%3C/svg%3E`,
+  'ma-checkbox-blank-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'/%3E%3C/svg%3E`,
+  'ma-checkbox-marked': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='currentColor' d='M19 3H5c-1.11 0-2 .89-2 2v14c0 1.11.89 2 2 2h14c1.11 0 2-.89 2-2V5c0-1.11-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E`,
+
+  // 我的 (Mine)
+  'ma-account-cog-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E`,
+  // 搜索相关 (Search & UI Controls)
+  'bs-search': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'/%3E%3C/svg%3E`,
+  'ma-close': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='24' height='24'%3E%3Cpath fill='currentColor' d='M810.7 750.5L750.5 810.7L512 572.2L273.5 810.7L213.3 750.5L451.8 512L213.3 273.5L273.5 213.3L512 451.8L750.5 213.3L810.7 273.5L572.2 512L810.7 750.5z'/%3E%3C/svg%3E`,
+  'ma-delete-off-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14ZM10 11v6M14 11v6'/%3E%3C/svg%3E`,
+  'ma-cog-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 15a3 3 0 1 0 0-6 3 3 0 0 0 0 6Z'/%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1Z'/%3E%3C/svg%3E`,
+  'mg-arrow_back_ios_new_outlined': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='24' height='24'%3E%3Cpath fill='currentColor' d='M698.7 85.3L272 512L698.7 938.7L758.4 877.9L392.5 512L758.4 146.1z'/%3E%3C/svg%3E`,
+  'mg-arrow_forward_ios_outlined': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1024 1024' width='24' height='24'%3E%3Cpath fill='currentColor' d='M325.3 85.3L752 512L325.3 938.7L265.6 877.9L631.5 512L265.6 146.1z'/%3E%3C/svg%3E`,
+  'ma-add': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 5v14M5 12h14'/%3E%3C/svg%3E`,
+
+  // Dashboard & Mine Additional Icons
+  'ma-account': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E`,
+  'ma-text-box-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M5 4h14a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zM9 9h6M9 13h6M9 17h4'/%3E%3C/svg%3E`,
+  'ma-star': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E`,
+
+  // Settings Utility Icons
+  'ma-download': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M7 10l5 5 5-5M12 15V3'/%3E%3C/svg%3E`,
+  'ma-upload': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12'/%3E%3C/svg%3E`,
+  'ma-chevron-right': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M9 18l6-6-6-6'/%3E%3C/svg%3E`,
+  'ma-chevron-left': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M15 18l-6-6 6-6'/%3E%3C/svg%3E`,
+  'ma-delete-outline': `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath fill='none' stroke='black' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M3 6h18M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6h14M10 11v6M14 11v6'/%3E%3C/svg%3E`,
+};
+
+export const appIconsCss: CssProps = {
+  '.ifc-icon': {
+    display: 'inline-block',
+    width: '24px',
+    height: '24px',
+    maskRepeat: 'no-repeat',
+    maskPosition: 'center',
+    maskSize: 'contain',
+    WebkitMaskRepeat: 'no-repeat',
+    WebkitMaskPosition: 'center',
+    WebkitMaskSize: 'contain',
+    backgroundColor: 'currentColor',
+  },
+  ...Object.entries(appIcons).reduce((acc: any, [key, svg]) => {
+    acc['.ifc-icon.' + key] = {
+      maskImage: 'url("' + svg + '")',
+    };
+    return acc;
+  }, {} as any),
+};

package/templates/responsive-starter/web/src/components/input-history-component.tsx

@@ -0,0 +1,93 @@
+import { bindGlobalStyle, CssProps } from 'lupine.components';
+
+export const getHistoryList = (key: string): string[] => {
+  try {
+    const hist = localStorage.getItem(`search_history_${key}`);
+    return hist ? JSON.parse(hist) : [];
+  } catch (e) {
+    return [];
+  }
+};
+
+export const addHistoryItem = (key: string, item: string) => {
+  const current = getHistoryList(key);
+  const filtered = current.filter((x) => x !== item);
+  filtered.unshift(item);
+  // keep max 20
+  if (filtered.length > 20) {
+    filtered.pop();
+  }
+  localStorage.setItem(`search_history_${key}`, JSON.stringify(filtered));
+};
+
+export const clearHistoryList = (key: string) => {
+  localStorage.removeItem(`search_history_${key}`);
+};
+
+export const InputHistoryComponent = (props: {
+  label?: string;
+  historyKey: string;
+  onClearHistory: () => void;
+  onItemClick: (item: string) => void;
+}) => {
+  const list = getHistoryList(props.historyKey);
+  const css: CssProps = {
+    padding: '4px 0',
+    '.history-c-header': {
+      display: 'flex',
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      padding: '4px 0',
+    },
+    '.history-c-h-title': {
+      fontSize: '12px',
+    },
+    '.history-c-h-icon': {
+      fontSize: '16px',
+      cursor: 'pointer',
+    },
+    '.history-c-body': {
+      display: 'flex',
+      flexWrap: 'wrap',
+      gap: '8px',
+      marginTop: '8px',
+    },
+    '.history-c-item': {
+      padding: '4px 12px',
+      borderRadius: '6px',
+      border: '1px solid var(--secondary-border-color)',
+      backgroundColor: 'var(--secondary-bg-color)',
+      color: 'var(--primary-color)',
+      fontSize: '13px',
+      width: 'fit-content',
+      cursor: 'pointer',
+    },
+    '.history-c-item:hover': {
+      backgroundColor: 'var(--activatable-bg-color-hover, rgba(0,0,0,0.04))',
+    },
+  };
+  bindGlobalStyle('history-c-box', css);
+
+  if (list.length === 0) {
+    return <></>;
+  }
+
+  return (
+    <div css={css} class='history-c-box'>
+      <div class='history-c-header'>
+        <div class='history-c-h-title'>{props.label || 'History Search List'}</div>
+        <div class='history-c-h-icon'>
+          <i class='ifc-icon ma-delete-off-outline' onClick={props.onClearHistory}></i>
+        </div>
+      </div>
+      <div class='history-c-body'>
+        {list.map((item) => (
+          <div class='history-c-item' onClick={() => props.onItemClick(item)}>
+            {item}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};

package/templates/responsive-starter/web/src/components/mine-about-page.tsx

@@ -0,0 +1,86 @@
+import { CssProps, HeaderWithBackFrame, SliderFrameHookProps } from 'lupine.components';
+
+export const MineAboutContent = () => {
+  const css: CssProps = {
+    flex: 1,
+    overflowY: 'auto',
+    padding: '32px 24px',
+    backgroundColor: 'var(--primary-bg-color)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+
+    '.about-logo': {
+      width: '80px',
+      height: '80px',
+      borderRadius: '20px',
+      backgroundColor: 'var(--primary-accent-color)',
+      color: 'white',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '48px',
+      marginBottom: '16px',
+      boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)',
+    },
+    '.about-title': {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+      marginBottom: '8px',
+    },
+    '.about-version': {
+      fontSize: '14px',
+      color: 'var(--secondary-color)',
+      marginBottom: '32px',
+    },
+    '.about-content': {
+      fontSize: '16px',
+      color: 'var(--primary-color)',
+      lineHeight: '1.8',
+      textAlign: 'center',
+      marginBottom: '32px',
+      maxWidth: '500px',
+      whiteSpace: 'pre-wrap',
+    },
+    '.about-link': {
+      color: 'var(--primary-accent-color)',
+      textDecoration: 'none',
+      fontWeight: 'bold',
+      padding: '12px 24px',
+      border: '1px solid var(--primary-accent-color)',
+      borderRadius: '24px',
+      transition: 'all 0.2s',
+      '&:active': {
+        backgroundColor: 'rgba(24, 144, 255, 0.1)',
+      },
+    },
+  };
+
+  const textContent = `This is a demo application built for the full-stack framework Lupine.js.
+Using this template alongside AI, you can rapidly build and deploy cross-platform applications.`;
+
+  return (
+    <div css={css} class='about-page-wrapper no-scrollbar-container flex-col h-100'>
+      <div class='about-logo'>
+        <i class='ifc-icon ma-text-box-outline'></i>
+      </div>
+      <div class='about-title'>Lupine Note Starter</div>
+      <div class='about-version'>Version 1.0.0</div>
+
+      <div class='about-content'>{textContent}</div>
+
+      <a class='about-link' href='https://github.com/uuware/lupine.js' target='_blank'>
+        Learn More
+      </a>
+    </div>
+  );
+};
+
+export const MineAboutPage = (props: { sliderFrameHook?: SliderFrameHookProps }) => {
+  return (
+    <HeaderWithBackFrame title='About' onBack={(e: Event) => props.sliderFrameHook?.close!(e)}>
+      <MineAboutContent />
+    </HeaderWithBackFrame>
+  );
+};

package/templates/responsive-starter/web/src/components/mine-premium-page.tsx

@@ -0,0 +1,80 @@
+import { CssProps, HeaderWithBackFrame, SliderFrameHookProps } from 'lupine.components';
+
+export const MinePremiumPage = (props: { sliderFrameHook: SliderFrameHookProps }) => {
+  const css: CssProps = {
+    flex: 1,
+    overflowY: 'auto',
+    padding: '32px 24px',
+    backgroundColor: 'var(--primary-bg-color)',
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+
+    '.premium-logo': {
+      width: '80px',
+      height: '80px',
+      borderRadius: '20px',
+      background: 'linear-gradient(135deg, #FF9A9E 0%, #FECFEF 100%)',
+      color: '#FFD700',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      fontSize: '48px',
+      marginBottom: '16px',
+      boxShadow: '0 4px 12px rgba(255, 154, 158, 0.3)',
+    },
+    '.premium-title': {
+      fontSize: '24px',
+      fontWeight: 'bold',
+      color: 'var(--primary-color)',
+      marginBottom: '8px',
+    },
+    '.premium-version': {
+      fontSize: '14px',
+      color: 'var(--secondary-color)',
+      marginBottom: '32px',
+    },
+    '.premium-content': {
+      fontSize: '16px',
+      color: 'var(--primary-color)',
+      lineHeight: '1.8',
+      textAlign: 'center',
+      marginBottom: '32px',
+      maxWidth: '500px',
+      whiteSpace: 'pre-wrap',
+    },
+    '.premium-link': {
+      color: 'var(--primary-accent-color)',
+      textDecoration: 'none',
+      fontWeight: 'bold',
+      padding: '12px 24px',
+      border: '1px solid var(--primary-accent-color)',
+      borderRadius: '24px',
+      transition: 'all 0.2s',
+      '&:active': {
+        backgroundColor: 'rgba(24, 144, 255, 0.1)',
+      },
+    },
+  };
+
+  const textContent = `This is a demo application built for the full-stack framework Lupine.js.
+If you need customized special functions or premium features, please click the button below to open the github open source link and raise an issue.`;
+
+  return (
+    <HeaderWithBackFrame title='Premium Demo' onBack={(e: Event) => props.sliderFrameHook.close!(e)}>
+      <div css={css} class='premium-page-wrapper no-scrollbar-container flex-col h-100'>
+        <div class='premium-logo'>
+          <i class='ifc-icon ma-star'></i>
+        </div>
+        <div class='premium-title'>Premium Features</div>
+        <div class='premium-version'>Unlock the Full Potential</div>
+
+        <div class='premium-content'>{textContent}</div>
+
+        <a class='premium-link' href='https://github.com/uuware/lupine.js/issues/new' target='_blank'>
+          Request Custom Features
+        </a>
+      </div>
+    </HeaderWithBackFrame>
+  );
+};