create-murasaki 0.3.0 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-murasaki",
-  "version": "0.3.0",
+  "version": "0.6.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.3.0"
+    "murasaki": "^0.6.0"
   },
   "devDependencies": {
     "typescript": "^5.7.0"

package/templates/default/src/app/globals.css

@@ -95,3 +95,30 @@ code {
 
 .counter button:hover { background: rgba(168, 85, 247, 0.15); }
 .counter button:active { transform: scale(0.94); }
+
+.actions {
+  margin-top: 24px;
+  display: flex;
+  gap: 12px;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+
+.actions button {
+  padding: 10px 18px;
+  border-radius: 10px;
+  border: 1px solid rgba(168, 85, 247, 0.25);
+  background: rgba(168, 85, 247, 0.05);
+  color: #5B21B6;
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+  transition: background 0.12s, transform 0.06s;
+}
+
+@media (prefers-color-scheme: dark) {
+  .actions button { color: #d8b4fe; }
+}
+
+.actions button:hover { background: rgba(168, 85, 247, 0.15); }
+.actions button:active { transform: scale(0.97); }

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

@@ -1,13 +1,40 @@
 // src/app/page.tsx — the "/" route.
 //
-// useState comes from murasaki/jsx/dom and runs inside the WebView
-// after the client bundle hydrates the SSR shell.
+// 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 { useState } from 'murasaki/jsx/dom'
+import {
+  useClipboard,
+  useDialog,
+  useFs,
+  useNotification,
+  useShell,
+  useState,
+} from 'murasaki/jsx/dom'
 
 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>
       <h1>Hello, Murasaki 🦋</h1>
@@ -25,9 +52,22 @@ export default function HomePage() {
         </button>
       </div>
 
-      <p className="hint">
-        Edit the file — the window reloads instantly.
-      </p>
+      <div className="actions">
+        <button onClick={() => notify({ title: 'Hello', body: `Count: ${count}` })}>
+          🔔 Notify
+        </button>
+        <button onClick={() => clipboard.write(`Count: ${count}`)}>📋 Copy</button>
+        <button onClick={pickFile}>📂 Pick file</button>
+        <button onClick={() => shell.openExternal('https://github.com/murasakijs/murasaki')}>
+          🔗 Repo
+        </button>
+      </div>
+
+      {filePath && (
+        <p className="hint">
+          Last picked: <code>{filePath}</code>
+        </p>
+      )}
 
       <nav className="links">
         <Link href="/about">About →</Link>