glyphsmith 0.1.0 → 0.1.1

package/README.ja.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="docs/images/app-icon.svg" alt="GlyphSmith" width="72" height="72" />
+  <img src="https://raw.githubusercontent.com/KobayashiRui/GlyphSmith/main/docs/images/app-icon.svg" alt="GlyphSmith" width="72" height="72" />
 </p>
 
 <h1 align="center">GlyphSmith</h1>
@@ -9,14 +9,14 @@
 </p>
 
 <p align="center">
-  <a href="README.md">English</a> | 日本語
+  <a href="https://github.com/KobayashiRui/GlyphSmith/blob/main/README.md">English</a> | 日本語
 </p>
 
 GlyphSmith は、手作業での編集と AI エージェントによる編集の両方を前提にした SVG エディタです。
 エージェントに SVG 文字列全体を書き換えさせるのではなく、SVG を Geometry AST に import し、
 対象を絞った patch operation を適用し、境界部分でだけ SVG として export します。
 
-![GlyphSmith editor](docs/images/editor.png)
+![GlyphSmith editor](https://raw.githubusercontent.com/KobayashiRui/GlyphSmith/main/docs/images/editor.png)
 
 ```txt
 SVG
@@ -34,80 +34,26 @@ GlyphSmith は開発初期段階です。現在のリリースは CLI-first で
 
 ## Quick Start
 
-依存関係をインストールします。
+GlyphSmith をインストールします。
 
 ```sh
-pnpm install
+npm install -g glyphsmith
 ```
 
 新規プロジェクトを開始します。
 
 ```sh
-npx glyphsmith my-logo
+glyphsmith my-logo
 ```
 
 これは `./my-logo.gs.json` を開きます。ファイルが存在しない場合、GlyphSmith が自動で作成します。
 
-このリポジトリから実行する場合:
-
-```sh
-pnpm run build:cli
-node apps/cli/dist/index.js my-logo
-```
-
-デフォルトの開発用プロジェクトを起動します。
+global install せずに実行することもできます。
 
 ```sh
-pnpm run dev
-```
-
-開発時のデフォルト:
-
-```txt
-Project: examples/playground.gs.json
-UI:      http://localhost:6201
-Host:    ws://localhost:6202/ws
-MCP:     http://localhost:6202/mcp
-```
-
-公式 GlyphSmith icon project を起動します。
-
-```sh
-pnpm run dev:icons
-```
-
-## Export Icons
-
-icon project を web app の static directory に export します。
-
-```sh
-pnpm run export:icons
-```
-
-生成された SVG ファイルはここに出力されます。
-
-```txt
-apps/web/static/icons
-```
-
-同じコマンドを再実行すると、生成済みの icon output は上書きされます。
-
-## Package
-
-公開用の CLI package を build します。
-
-```sh
-pnpm run build:cli
-```
-
-確認用の npm tarball を作成します。
-
-```sh
-pnpm run pack:cli
+npx glyphsmith my-logo
 ```
 
-package は `artifacts/npm` に出力され、bundle 済み CLI、build 済み web UI、GlyphSmith skills を含みます。
-
 ## Agent Workflow
 
 GlyphSmith では Geometry AST が source of truth です。AI エージェントは SVG ファイル全体を再生成するのではなく、patch operation または MCP tool を通じて project を変更します。
@@ -178,3 +124,71 @@ README 用の画像は `docs/images` に置きます。アプリ実行時の ass
 docs/images/app-icon.svg
 docs/images/editor.png
 ```
+
+## Developer Workflow
+
+依存関係をインストールします。
+
+```sh
+pnpm install
+```
+
+このリポジトリから GlyphSmith を実行します。
+
+```sh
+pnpm run build:cli
+node apps/cli/dist/index.js my-logo
+```
+
+デフォルトの開発用プロジェクトを起動します。
+
+```sh
+pnpm run dev
+```
+
+開発時のデフォルト:
+
+```txt
+Project: examples/playground.gs.json
+UI:      http://localhost:6201
+Host:    ws://localhost:6202/ws
+MCP:     http://localhost:6202/mcp
+```
+
+公式 GlyphSmith icon project を起動します。
+
+```sh
+pnpm run dev:icons
+```
+
+### Export Icons
+
+icon project を web app の static directory に export します。
+
+```sh
+pnpm run export:icons
+```
+
+生成された SVG ファイルはここに出力されます。
+
+```txt
+apps/web/static/icons
+```
+
+同じコマンドを再実行すると、生成済みの icon output は上書きされます。
+
+### Package
+
+公開用の CLI package を build します。
+
+```sh
+pnpm run build:cli
+```
+
+確認用の npm tarball を作成します。
+
+```sh
+pnpm run pack:cli
+```
+
+package は `artifacts/npm` に出力され、bundle 済み CLI、build 済み web UI、GlyphSmith skills を含みます。

package/README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <img src="docs/images/app-icon.svg" alt="GlyphSmith" width="72" height="72" />
+  <img src="https://raw.githubusercontent.com/KobayashiRui/GlyphSmith/main/docs/images/app-icon.svg" alt="GlyphSmith" width="72" height="72" />
 </p>
 
 <h1 align="center">GlyphSmith</h1>
@@ -9,14 +9,14 @@
 </p>
 
 <p align="center">
-  English | <a href="README.ja.md">日本語</a>
+  English | <a href="https://github.com/KobayashiRui/GlyphSmith/blob/main/README.ja.md">日本語</a>
 </p>
 
 GlyphSmith is an SVG editor designed for both manual editing and AI-assisted editing.
 Instead of asking agents to rewrite whole SVG strings, GlyphSmith imports SVG into a Geometry AST,
 applies targeted patch operations, and exports SVG only at the boundary.
 
-![GlyphSmith editor](docs/images/editor.png)
+![GlyphSmith editor](https://raw.githubusercontent.com/KobayashiRui/GlyphSmith/main/docs/images/editor.png)
 
 ```txt
 SVG
@@ -34,80 +34,26 @@ GlyphSmith is in early development. The current release is CLI-first and focuses
 
 ## Quick Start
 
-Install dependencies:
+Install GlyphSmith:
 
 ```sh
-pnpm install
+npm install -g glyphsmith
 ```
 
 Start a new project:
 
 ```sh
-npx glyphsmith my-logo
+glyphsmith my-logo
 ```
 
 This opens `./my-logo.gs.json`. If the file does not exist, GlyphSmith creates it automatically.
 
-When running from this repository:
-
-```sh
-pnpm run build:cli
-node apps/cli/dist/index.js my-logo
-```
-
-Run the default development project:
+You can also run it without a global install:
 
 ```sh
-pnpm run dev
-```
-
-Development defaults:
-
-```txt
-Project: examples/playground.gs.json
-UI:      http://localhost:6201
-Host:    ws://localhost:6202/ws
-MCP:     http://localhost:6202/mcp
-```
-
-Run the official GlyphSmith icon project:
-
-```sh
-pnpm run dev:icons
-```
-
-## Export Icons
-
-Export the icon project into the web app static directory:
-
-```sh
-pnpm run export:icons
-```
-
-The generated SVG files are written to:
-
-```txt
-apps/web/static/icons
-```
-
-Running the command again overwrites the generated icon output.
-
-## Package
-
-Build the publishable CLI package:
-
-```sh
-pnpm run build:cli
-```
-
-Create a local npm tarball for inspection:
-
-```sh
-pnpm run pack:cli
+npx glyphsmith my-logo
 ```
 
-The package is written to `artifacts/npm` and contains the bundled CLI, built web UI, and GlyphSmith skills.
-
 ## Agent Workflow
 
 GlyphSmith keeps the Geometry AST as the source of truth. AI agents should modify projects through patch operations or MCP tools instead of regenerating SVG files.
@@ -178,3 +124,71 @@ Current README assets:
 docs/images/app-icon.svg
 docs/images/editor.png
 ```
+
+## Developer Workflow
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+Run GlyphSmith from this repository:
+
+```sh
+pnpm run build:cli
+node apps/cli/dist/index.js my-logo
+```
+
+Run the default development project:
+
+```sh
+pnpm run dev
+```
+
+Development defaults:
+
+```txt
+Project: examples/playground.gs.json
+UI:      http://localhost:6201
+Host:    ws://localhost:6202/ws
+MCP:     http://localhost:6202/mcp
+```
+
+Run the official GlyphSmith icon project:
+
+```sh
+pnpm run dev:icons
+```
+
+### Export Icons
+
+Export the icon project into the web app static directory:
+
+```sh
+pnpm run export:icons
+```
+
+The generated SVG files are written to:
+
+```txt
+apps/web/static/icons
+```
+
+Running the command again overwrites the generated icon output.
+
+### Package
+
+Build the publishable CLI package:
+
+```sh
+pnpm run build:cli
+```
+
+Create a local npm tarball for inspection:
+
+```sh
+pnpm run pack:cli
+```
+
+The package is written to `artifacts/npm` and contains the bundled CLI, built web UI, and GlyphSmith skills.

package/dist/index.js

@@ -4036,6 +4036,7 @@ async function writeFetchResponse(response, fetchResponse) {
 var DEFAULT_PORT = "6201";
 var DEFAULT_HOST_PORT = "6202";
 var DEFAULT_HOST = "127.0.0.1";
+var DEFAULT_PUBLIC_HOST = "localhost";
 var DEV_BIND_HOST = "0.0.0.0";
 var DEV_PUBLIC_HOST = "localhost";
 var cliDirectory = fileURLToPath(new URL(".", import.meta.url));
@@ -4112,7 +4113,8 @@ async function main() {
   if (hostPort !== requestedHostPort) {
     console.log(`\u2713 Host port ${requestedHostPort} is unavailable, using ${hostPort}`);
   }
-  console.log(`\u2713 UI running on http://${DEFAULT_HOST}:${port}`);
+  const uiUrl = `http://${DEFAULT_PUBLIC_HOST}:${port}/`;
+  console.log(`\u2713 UI running on ${terminalLink(uiUrl)}`);
   console.log(`\u2713 Host running on ws://${DEFAULT_HOST}:${hostPort}/ws`);
   console.log(`\u2713 MCP running on ${mcpUrl}`);
   if (packagedWeb) {
@@ -4145,6 +4147,12 @@ async function main() {
 function packagedWebDirectoryExists() {
   return existsSync3(resolve2(packagedWebDirectory, "index.html"));
 }
+function terminalLink(url, label = url) {
+  if (!process.stdout.isTTY || process.env.CI) {
+    return label;
+  }
+  return `\x1B]8;;${url}\x07${label}\x1B]8;;\x07`;
+}
 async function findAvailablePort(startPort, reservedPorts = /* @__PURE__ */ new Set(), host = DEFAULT_HOST) {
   let port = Number(startPort);
   while (port <= 65535) {