create-lupine 1.0.17 → 1.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-lupine",
-  "version": "1.0.17",
+  "version": "1.0.19",
   "description": "Scaffolding tool for Lupine.js projects",
   "bin": {
     "create-lupine": "index.js"

package/templates/common/AI_CONTEXT.md

@@ -563,3 +563,31 @@ For interactive lists, `createDragUtil()` from `lupine.components` handles compl
    - `ActionSheetMultiSelectPromise`: For multiple checkbox selections.
    - `ActionSheetTimePicker`: For selecting a time.
    - `ActionSheetDatePicker`: For selecting a date.
+
+### F. Hardware Back Button Handling (`data-back-action`)
+
+When building mobile interfaces, users expect the physical hardware "Back" button (or swipe-from-edge gesture) to gracefully dismiss overlays, dialogs, sliders, or menus—similar to pressing the `ESC` key on a desktop.
+
+**The Rule**: Whenever you implement a cancel button, a close icon (`X`), or a back chevron (`<`) in a mobile overlay or frame, you **MUST** attach the `data-back-action` attribute using the `backActionHelper`.
+
+```typescript
+import { backActionHelper } from 'lupine.components';
+
+export const MyCloseButton = ({ onClose }) => {
+  return (
+    <i 
+      class="ifc-icon ma-close"
+      // Generate a unique ID for the back stack
+      data-back-action={backActionHelper.genBackActionId()} 
+      onClick={onClose}
+    ></i>
+  );
+};
+```
+
+**How it works**:
+- When the hardware back button is pressed, the underlying system automatically queries the DOM for all elements with `[data-back-action^="bb-"]`.
+- It finds the most recently created component (the top-most overlay) and automatically triggers a `.click()` event on it.
+- **Dynamic Mounting vs Static**: 
+  - For components that are injected and removed dynamically (like `<ActionSheet />` or `<FloatWindow />`), simply attaching the property to the React/JSX node is sufficient.
+  - For static components that always remain in the DOM but toggle visibility (like an off-canvas sidebar), you must dynamically add/remove the attribute in Javascript (`el.setAttribute` / `el.removeAttribute`) to prevent the back button from intercepting events when the menu is actually closed.

package/templates/common/dev/dev-watch.js

@@ -289,8 +289,8 @@ const start = async () => {
   const isMobile = process.argv.find((i) => i === '--mobile=1'); // when this changed, need to rebuild index.html
   const isObfuscate = !isDev && process.argv.find((i) => i === '--obfuscate=1');
   // this is for esbuild conditional compile
-  ifPluginVars.DEV = isDev ? '1' : '0';
-  ifPluginVars.MOBILE = isMobile ? '1' : '0';
+  ifPluginVars.DEV = isDev ? '1' : '';
+  ifPluginVars.MOBILE = isMobile ? '1' : '';
 
   // All apps should be defined in .env file like this:
   // APPS=domain1.com,domain2.com

package/templates/lupine-template-responsive-starter/web/src/frames/app-responsive-frame.tsx

@@ -9,12 +9,18 @@ const getSiteFooter = async () => '© 2026 My Note App';
 // 'sidemenu' | 'tabs', this will be replaced by create-lupine
 const DEFAULT_LAYOUT = 'tabs';
 export const AppResponsiveFrame = async (placeholderClassname: string, vnode: VNode<any>) => {
+  // special login for github pages
+  let subDir = '';
+  if (typeof window !== 'undefined' && window.location.hostname === 'uuware.github.io') {
+    // first section is subDir
+    subDir = '/' + window.location.pathname.split('/')[1];
+  }
   const mobileBottomMenu = [
-    { icon: 'ma-home-outline', url: '/', text: 'Notes' },
-    { icon: 'icon-finance', url: '/finance', text: 'Finance' },
-    { icon: 'ma-book-outline', url: '/about', text: 'About', topout: true },
-    { icon: 'ma-tools', url: '/tools', text: 'Tools' },
-    { icon: 'ma-account-cog-outline', url: '/mine', text: 'Mine' },
+    { icon: 'ma-home-outline', url: subDir + '/', text: 'Notes' },
+    { icon: 'icon-finance', url: subDir + '/finance', text: 'Finance' },
+    { icon: 'ma-book-outline', url: subDir + '/about', text: 'About', topout: true },
+    { icon: 'ma-tools', url: subDir + '/tools', text: 'Tools' },
+    { icon: 'ma-account-cog-outline', url: subDir + '/mine', text: 'Mine' },
   ];
 
   const layout: 'sidemenu' | 'tabs' = (localStorage.getItem('app-layout') as any) || DEFAULT_LAYOUT;

package/templates/lupine-template-responsive-starter/web/src/index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <title><!--META-TITLE--></title>
-    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=, user-scalable=no" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover, user-scalable=no" />
     <!--META-ENV-START-->
     <!--META-ENV-END-->
     <link rel="shortcut icon" href="{SUBDIR}/assets/favicon.ico?t={hash}" type="image/x-icon" />