hakoniwa-term 0.0.1

package/README.md

@@ -0,0 +1,10 @@
+# hakoniwa-term (箱庭-term)
+
+A programmable, retro hacker-style terminal UI component for React applications with complete style isolation.
+
+## what is hakoniwa(箱庭)?
+>In Japanese, 「箱庭（はこにわ / hakoniwa）」literally means “box garden.”
+Originally it refers to a small, self‑contained miniature garden or landscape arranged inside a box or tray—like tiny rocks, plants, and buildings forming a little world you can look into from the outside.
+
+## screenshot
+![screenshot](resources/screenshot_hakoniwa_term.png)

package/dist/index.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));let c=require("react");c=s(c);let l=require("lucide-react"),u=require("react/jsx-runtime");var d={terminalRoot:`_terminalRoot_16n8k_1`,titleBar:`_titleBar_16n8k_33`,titleLeft:`_titleLeft_16n8k_53`,titleText:`_titleText_16n8k_65`,titleRight:`_titleRight_16n8k_79`,closeButton:`_closeButton_16n8k_91`,contentBox:`_contentBox_16n8k_123`,logRow:`_logRow_16n8k_151`,logInput:`_logInput_16n8k_163`,logError:`_logError_16n8k_165`,logSuccess:`_logSuccess_16n8k_167`,logOutput:`_logOutput_16n8k_169`,progressBarContainer:`_progressBarContainer_16n8k_173`,progressHeader:`_progressHeader_16n8k_181`,progressTrack:`_progressTrack_16n8k_199`,progressBar:`_progressBar_16n8k_173`,inputForm:`_inputForm_16n8k_229`,prompt:`_prompt_16n8k_247`,inputField:`_inputField_16n8k_257`,submitButton:`_submitButton_16n8k_287`};function f({promptString:e=`user@terminal:~$`,placeholder:t=`Type a command...`,systemLockedText:n=`System locked during execution...`,commandNotFoundFormatter:r=e=>`Command not found: "${e}".`,initialHistory:i=[],commands:a,title:o=`terminal`,showCloseButton:s=!0,onClose:f,headerRightActions:p}){let[m,h]=(0,c.useState)(``),[g,_]=(0,c.useState)(i),[v,y]=(0,c.useState)(!1),[b,x]=(0,c.useState)(null),[S,C]=(0,c.useState)(``),w=(0,c.useRef)(null),T=(0,c.useRef)(null);(0,c.useEffect)(()=>{w.current&&(w.current.scrollTop=w.current.scrollHeight)},[g,b,S,v]);let E=()=>{T.current&&T.current.focus()},D=async t=>{t.preventDefault();let n=m.trim();if(!n||v)return;_(t=>[...t,{type:`input`,text:`${e} ${n}`}]),h(``);let i=n.split(` `),o=i[0].toLowerCase();if(o===`clear`){_([]);return}if(a&&a[o]){y(!0);try{let e=a[o](i);for await(let t of e)t.type===`log`?_(e=>[...e,t.log]):t.type===`progress`&&(x(t.percent),t.text&&C(t.text))}catch(e){_(t=>[...t,{type:`error`,text:`Execution error: ${e instanceof Error?e.message:String(e)}`}])}finally{y(!1),x(null),C(``)}}else _(e=>[...e,{type:`error`,text:r(o)}])},O=e=>e===`input`?d.logInput:e===`error`?d.logError:e===`success`?d.logSuccess:d.logOutput;return(0,u.jsxs)(`div`,{className:d.terminalRoot,onClick:E,children:[(0,u.jsxs)(`div`,{className:d.titleBar,children:[(0,u.jsxs)(`div`,{className:d.titleLeft,children:[(0,u.jsx)(l.Terminal,{className:`w-4 h-4`,style:{color:`#10b981`}}),(0,u.jsx)(`span`,{className:d.titleText,children:o})]}),(0,u.jsxs)(`div`,{className:d.titleRight,children:[p,s&&f&&(0,u.jsx)(`button`,{onClick:e=>{e.stopPropagation(),f()},className:d.closeButton,children:(0,u.jsx)(l.X,{className:`w-4 h-4`})})]})]}),(0,u.jsxs)(`div`,{ref:w,className:d.contentBox,children:[g.map((e,t)=>(0,u.jsx)(`div`,{className:`${d.logRow} ${O(e.type)}`,children:e.text},t)),b!==null&&(0,u.jsxs)(`div`,{className:d.progressBarContainer,children:[(0,u.jsxs)(`div`,{className:d.progressHeader,children:[(0,u.jsx)(`span`,{children:S}),(0,u.jsxs)(`span`,{children:[b,`%`]})]}),(0,u.jsx)(`div`,{className:d.progressTrack,children:(0,u.jsx)(`div`,{className:d.progressBar,style:{width:`${b}%`}})})]}),(0,u.jsxs)(`form`,{onSubmit:D,className:d.inputForm,children:[(0,u.jsx)(`span`,{className:d.prompt,children:e}),(0,u.jsx)(`input`,{ref:T,type:`text`,value:m,onChange:e=>h(e.target.value),disabled:v,placeholder:v?n:t,className:d.inputField,autoComplete:`off`,autoCorrect:`off`,autoCapitalize:`off`,spellCheck:`false`}),(0,u.jsx)(`button`,{type:`submit`,className:d.submitButton,children:(0,u.jsx)(l.CornerDownLeft,{className:`w-4 h-4`})})]})]})]})}exports.Terminal=f;

package/dist/index.css

@@ -0,0 +1,2 @@
+._terminalRoot_16n8k_1{color:#34d399e6;z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background-color:#090a0ff2;border:1px solid #10b9814d;border-radius:.5rem;width:100%;max-width:56rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-size:.875rem;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}._titleBar_16n8k_33{-webkit-user-select:none;user-select:none;background-color:#0e1017;border-bottom:1px solid #10b98133;justify-content:space-between;align-items:center;padding:.625rem 1rem;display:flex}._titleLeft_16n8k_53{align-items:center;gap:.5rem;display:flex}._titleText_16n8k_65{letter-spacing:.05em;color:#9ca3af;font-size:.75rem;font-weight:600}._titleRight_16n8k_79{align-items:center;gap:.5rem;display:flex}._closeButton_16n8k_91{cursor:pointer;color:#ef4444;background:0 0;border:none;border-radius:.25rem;align-items:center;padding:.125rem;transition:background-color .2s;display:flex}._closeButton_16n8k_91:hover{background-color:#ef444433}._contentBox_16n8k_123{height:24rem;padding:1.25rem;overflow-y:auto}._contentBox_16n8k_123::-webkit-scrollbar{width:6px}._contentBox_16n8k_123::-webkit-scrollbar-thumb{background-color:#10b9811a;border-radius:3px}._logRow_16n8k_151{white-space:pre-wrap;margin-bottom:.625rem;line-height:1.625}._logInput_16n8k_163{color:#f3f4f6;font-weight:600}._logError_16n8k_165{color:#f87171}._logSuccess_16n8k_167{color:#6ee7b7;font-weight:700}._logOutput_16n8k_169{color:#34d399cc}._progressBarContainer_16n8k_173{padding:.5rem 0}._progressHeader_16n8k_181{color:#9ca3af;justify-content:space-between;align-items:center;margin-bottom:.25rem;font-size:.75rem;display:flex}._progressTrack_16n8k_199{background-color:#064e3b66;border:1px solid #10b98133;border-radius:.25rem;width:100%;height:.5rem;overflow:hidden}._progressBar_16n8k_173{background-color:#10b981;height:100%;transition:width .3s}._inputForm_16n8k_229{border-top:1px solid #10b9811a;align-items:center;gap:.5rem;margin-top:.5rem;padding-top:.5rem;display:flex}._prompt_16n8k_247{color:#10b981;font-weight:700}._inputField_16n8k_257{color:#f3f4f6;background:0 0;border:none;outline:none;flex:1;padding:0;font-family:inherit;font-size:.875rem}._inputField_16n8k_257::placeholder{color:#9ca3af80}._submitButton_16n8k_287{color:#10b98180;cursor:pointer;background:0 0;border:none;align-items:center;transition:color .2s;display:flex}._submitButton_16n8k_287:hover{color:#34d399}
+/*$vite$:1*/

package/dist/index.d.ts

@@ -0,0 +1,34 @@
+import { default as default_2 } from 'react';
+
+export declare type CommandAction = (args: string[]) => AsyncGenerator<YieldChunk, void, unknown>;
+
+export declare interface CommandLog {
+    type: 'input' | 'output' | 'error' | 'success';
+    text: string;
+}
+
+export declare function Terminal({ promptString, placeholder, systemLockedText, commandNotFoundFormatter, initialHistory, commands, title, showCloseButton, onClose, headerRightActions, }: TerminalProps): default_2.JSX.Element;
+
+export declare interface TerminalProps {
+    promptString?: string;
+    placeholder?: string;
+    systemLockedText?: string;
+    commandNotFoundFormatter?: (cmd: string) => string;
+    initialHistory?: CommandLog[];
+    commands: Record<string, CommandAction>;
+    title?: default_2.ReactNode;
+    showCloseButton?: boolean;
+    onClose?: () => void;
+    headerRightActions?: default_2.ReactNode;
+}
+
+export declare type YieldChunk = {
+    type: 'log';
+    log: CommandLog;
+} | {
+    type: 'progress';
+    percent: number;
+    text?: string;
+};
+
+export { }

package/dist/index.js

@@ -0,0 +1,149 @@
+import { useEffect as e, useRef as t, useState as n } from "react";
+import { CornerDownLeft as r, Terminal as i, X as a } from "lucide-react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+var c = {
+	terminalRoot: "_terminalRoot_16n8k_1",
+	titleBar: "_titleBar_16n8k_33",
+	titleLeft: "_titleLeft_16n8k_53",
+	titleText: "_titleText_16n8k_65",
+	titleRight: "_titleRight_16n8k_79",
+	closeButton: "_closeButton_16n8k_91",
+	contentBox: "_contentBox_16n8k_123",
+	logRow: "_logRow_16n8k_151",
+	logInput: "_logInput_16n8k_163",
+	logError: "_logError_16n8k_165",
+	logSuccess: "_logSuccess_16n8k_167",
+	logOutput: "_logOutput_16n8k_169",
+	progressBarContainer: "_progressBarContainer_16n8k_173",
+	progressHeader: "_progressHeader_16n8k_181",
+	progressTrack: "_progressTrack_16n8k_199",
+	progressBar: "_progressBar_16n8k_173",
+	inputForm: "_inputForm_16n8k_229",
+	prompt: "_prompt_16n8k_247",
+	inputField: "_inputField_16n8k_257",
+	submitButton: "_submitButton_16n8k_287"
+};
+//#endregion
+//#region src/Terminal.tsx
+function l({ promptString: l = "user@terminal:~$", placeholder: u = "Type a command...", systemLockedText: d = "System locked during execution...", commandNotFoundFormatter: f = (e) => `Command not found: "${e}".`, initialHistory: p = [], commands: m, title: h = "terminal", showCloseButton: g = !0, onClose: _, headerRightActions: v }) {
+	let [y, b] = n(""), [x, S] = n(p), [C, w] = n(!1), [T, E] = n(null), [D, O] = n(""), k = t(null), A = t(null);
+	e(() => {
+		k.current && (k.current.scrollTop = k.current.scrollHeight);
+	}, [
+		x,
+		T,
+		D,
+		C
+	]);
+	let j = () => {
+		A.current && A.current.focus();
+	}, M = async (e) => {
+		e.preventDefault();
+		let t = y.trim();
+		if (!t || C) return;
+		S((e) => [...e, {
+			type: "input",
+			text: `${l} ${t}`
+		}]), b("");
+		let n = t.split(" "), r = n[0].toLowerCase();
+		if (r === "clear") {
+			S([]);
+			return;
+		}
+		if (m && m[r]) {
+			w(!0);
+			try {
+				let e = m[r](n);
+				for await (let t of e) t.type === "log" ? S((e) => [...e, t.log]) : t.type === "progress" && (E(t.percent), t.text && O(t.text));
+			} catch (e) {
+				S((t) => [...t, {
+					type: "error",
+					text: `Execution error: ${e instanceof Error ? e.message : String(e)}`
+				}]);
+			} finally {
+				w(!1), E(null), O("");
+			}
+		} else S((e) => [...e, {
+			type: "error",
+			text: f(r)
+		}]);
+	}, N = (e) => e === "input" ? c.logInput : e === "error" ? c.logError : e === "success" ? c.logSuccess : c.logOutput;
+	return /* @__PURE__ */ s("div", {
+		className: c.terminalRoot,
+		onClick: j,
+		children: [/* @__PURE__ */ s("div", {
+			className: c.titleBar,
+			children: [/* @__PURE__ */ s("div", {
+				className: c.titleLeft,
+				children: [/* @__PURE__ */ o(i, {
+					className: "w-4 h-4",
+					style: { color: "#10b981" }
+				}), /* @__PURE__ */ o("span", {
+					className: c.titleText,
+					children: h
+				})]
+			}), /* @__PURE__ */ s("div", {
+				className: c.titleRight,
+				children: [v, g && _ && /* @__PURE__ */ o("button", {
+					onClick: (e) => {
+						e.stopPropagation(), _();
+					},
+					className: c.closeButton,
+					children: /* @__PURE__ */ o(a, { className: "w-4 h-4" })
+				})]
+			})]
+		}), /* @__PURE__ */ s("div", {
+			ref: k,
+			className: c.contentBox,
+			children: [
+				x.map((e, t) => /* @__PURE__ */ o("div", {
+					className: `${c.logRow} ${N(e.type)}`,
+					children: e.text
+				}, t)),
+				T !== null && /* @__PURE__ */ s("div", {
+					className: c.progressBarContainer,
+					children: [/* @__PURE__ */ s("div", {
+						className: c.progressHeader,
+						children: [/* @__PURE__ */ o("span", { children: D }), /* @__PURE__ */ s("span", { children: [T, "%"] })]
+					}), /* @__PURE__ */ o("div", {
+						className: c.progressTrack,
+						children: /* @__PURE__ */ o("div", {
+							className: c.progressBar,
+							style: { width: `${T}%` }
+						})
+					})]
+				}),
+				/* @__PURE__ */ s("form", {
+					onSubmit: M,
+					className: c.inputForm,
+					children: [
+						/* @__PURE__ */ o("span", {
+							className: c.prompt,
+							children: l
+						}),
+						/* @__PURE__ */ o("input", {
+							ref: A,
+							type: "text",
+							value: y,
+							onChange: (e) => b(e.target.value),
+							disabled: C,
+							placeholder: C ? d : u,
+							className: c.inputField,
+							autoComplete: "off",
+							autoCorrect: "off",
+							autoCapitalize: "off",
+							spellCheck: "false"
+						}),
+						/* @__PURE__ */ o("button", {
+							type: "submit",
+							className: c.submitButton,
+							children: /* @__PURE__ */ o(r, { className: "w-4 h-4" })
+						})
+					]
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { l as Terminal };

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "hakoniwa-term",
+  "version": "0.0.1",
+  "description": "A robust, pluggable retro terminal engine for React, powered by CSS Modules and Async Generators.",
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "require": "./dist/index.cjs",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "lucide-react": "^0.470.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@vitejs/plugin-react": "^4.3.0",
+    "typescript": "^5.9.3",
+    "vite": "8.1.3",
+    "vite-plugin-dts": "^4.4.0"
+  },
+  "keywords": [
+    "react",
+    "terminal",
+    "cli-ui",
+    "css-modules",
+    "async-generator"
+  ],
+  "author": "koji",
+  "license": "MIT"
+}