create-murasaki 0.4.0 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-murasaki",
-  "version": "0.4.0",
+  "version": "0.7.0",
   "description": "Scaffolder for Murasaki apps. Run with `npm create murasaki@latest`.",
   "keywords": [
     "murasaki",

package/templates/default/package.json

@@ -7,7 +7,7 @@
     "dev": "murasaki dev"
   },
   "dependencies": {
-    "murasaki": "^0.4.0"
+    "murasaki": "^0.7.0"
   },
   "devDependencies": {
     "typescript": "^5.7.0"

package/templates/default/src/app/page.tsx

@@ -1,11 +1,17 @@
 // src/app/page.tsx — the "/" route.
 //
-// Demonstrates client-side hooks (useState) and the native bridge
-// (useNotification / useClipboard / useShell) from murasaki/jsx/dom.
+// Demonstrates hooks from murasaki/jsx/dom:
+//   useState         — re-render on state change
+//   useNotification  — OS notification banner
+//   useClipboard     — read/write system clipboard
+//   useShell         — open URL in default browser
+//   useDialog + useFs — file picker + read
 
 import { Link } from 'murasaki'
 import {
   useClipboard,
+  useDialog,
+  useFs,
   useNotification,
   useShell,
   useState,
@@ -13,9 +19,21 @@ import {
 
 export default function HomePage() {
   const [count, setCount] = useState(0)
+  const [filePath, setFilePath] = useState('')
+
   const notify = useNotification()
   const clipboard = useClipboard()
   const shell = useShell()
+  const dialog = useDialog()
+  const fs = useFs()
+
+  async function pickFile() {
+    const paths = await dialog.openFile({ title: 'Pick a file' })
+    if (paths.length === 0) return
+    setFilePath(paths[0])
+    const text = await fs.readFile(paths[0])
+    notify({ title: 'File loaded', body: `${text.length} chars from ${paths[0]}` })
+  }
 
   return (
     <main>
@@ -38,15 +56,18 @@ export default function HomePage() {
         <button onClick={() => notify({ title: 'Hello', body: `Count: ${count}` })}>
           🔔 Notify
         </button>
-        <button onClick={() => clipboard.write(`Count: ${count}`)}>
-          📋 Copy to clipboard
-        </button>
+        <button onClick={() => clipboard.write(`Count: ${count}`)}>📋 Copy</button>
+        <button onClick={pickFile}>📂 Pick file</button>
         <button onClick={() => shell.openExternal('https://github.com/murasakijs/murasaki')}>
-          🔗 Open repo
+          🔗 Repo
         </button>
       </div>
 
-      <p className="hint">Edit this file — the window reloads instantly.</p>
+      {filePath && (
+        <p className="hint">
+          Last picked: <code>{filePath}</code>
+        </p>
+      )}
 
       <nav className="links">
         <Link href="/about">About →</Link>