chore: vendor @joan/procedural-glyph-engine for portable builds
Move @joan/procedural-glyph-engine from absolute path dep (/private/tmp/orby-pkg) to vendored local dep (web/vendor/) so the SPA builds in Docker and on other machines without the temp dir. - Vendor Orby v5.0.0 into web/vendor/ - Switch package.json dep to file:../vendor - Update Dockerfile to COPY vendor into build context - Use npm install instead of npm ci (file: deps need install) - Fix missing trailing newline in Dockerfile
This commit is contained in:
18
web/vendor/examples/README.md
vendored
Normal file
18
web/vendor/examples/README.md
vendored
Normal file
@@ -0,0 +1,18 @@
|
||||
# Orby runnable examples
|
||||
|
||||
Serve the extracted download folder over HTTP, then open one of these files:
|
||||
|
||||
- `canvas.html` mounts the native canvas engine and invokes semantic states.
|
||||
- `web-component.html` uses the browser-native `<joan-glyph>` element.
|
||||
- `state-sequence.html` runs, pauses, resumes, and restarts a timed sequence.
|
||||
|
||||
For example:
|
||||
|
||||
```sh
|
||||
python3 -m http.server 4173
|
||||
```
|
||||
|
||||
Then visit `http://127.0.0.1:4173/examples/canvas.html`.
|
||||
|
||||
Every import is relative to the files included in the kit. No package registry,
|
||||
bundler, framework, or third-party dependency is required.
|
||||
50
web/vendor/examples/canvas.html
vendored
Normal file
50
web/vendor/examples/canvas.html
vendored
Normal file
@@ -0,0 +1,50 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Orby · Canvas example</title>
|
||||
<link rel="stylesheet" href="./example.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Native canvas</h1>
|
||||
<p>
|
||||
One long-lived engine instance moves between semantic states while
|
||||
preserving its seeded visual identity.
|
||||
</p>
|
||||
<div class="glyph-stage">
|
||||
<canvas id="aiGlyph" width="440" height="440" aria-label="Animated AI state"></canvas>
|
||||
</div>
|
||||
<div class="actions" role="group" aria-label="Choose a semantic state">
|
||||
<button type="button" data-sprite="ai.idle">Ready</button>
|
||||
<button type="button" data-sprite="ai.thinking">Thinking</button>
|
||||
<button type="button" data-sprite="ai.progress">Progress</button>
|
||||
<button type="button" data-sprite="status.success">Done</button>
|
||||
</div>
|
||||
<p id="stateStatus" role="status">Current state: ai.idle</p>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
import { createGlyph } from "../src/joan-engine.js";
|
||||
|
||||
const glyph = createGlyph("#aiGlyph", {
|
||||
sprite: "ai.idle",
|
||||
seed: "self-service-example",
|
||||
gridSize: 68,
|
||||
});
|
||||
const status = document.querySelector("#stateStatus");
|
||||
|
||||
document.querySelectorAll("[data-sprite]").forEach((button) => {
|
||||
button.addEventListener("click", async () => {
|
||||
const sprite = button.dataset.sprite;
|
||||
status.textContent = `Transitioning to ${sprite}…`;
|
||||
await glyph.transitionTo(sprite);
|
||||
status.textContent = `Current state: ${sprite}`;
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener("pagehide", () => glyph.destroy(), { once: true });
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
90
web/vendor/examples/example.css
vendored
Normal file
90
web/vendor/examples/example.css
vendored
Normal file
@@ -0,0 +1,90 @@
|
||||
:root {
|
||||
color-scheme: dark;
|
||||
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
|
||||
background: #050505;
|
||||
color: #f2f1ee;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
||||
linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px),
|
||||
#050505;
|
||||
background-size: 24px 24px;
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(680px, calc(100% - 32px));
|
||||
padding: 32px;
|
||||
border: 1px solid #2b2b2d;
|
||||
border-radius: 14px;
|
||||
background: #0b0b0c;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-size: clamp(2rem, 7vw, 4rem);
|
||||
font-weight: 300;
|
||||
letter-spacing: -0.055em;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 52ch;
|
||||
color: #9b9b9f;
|
||||
line-height: 1.65;
|
||||
}
|
||||
|
||||
.glyph-stage {
|
||||
min-height: 320px;
|
||||
margin-top: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border: 1px solid #232426;
|
||||
border-radius: 10px;
|
||||
background: #070708;
|
||||
}
|
||||
|
||||
canvas,
|
||||
joan-glyph {
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.actions {
|
||||
margin-top: 16px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
button {
|
||||
min-height: 42px;
|
||||
padding: 0 14px;
|
||||
border: 1px solid #35373a;
|
||||
border-radius: 7px;
|
||||
background: #0f1011;
|
||||
color: #e8e8e4;
|
||||
font: 600 0.72rem ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:focus-visible {
|
||||
border-color: #f2f1ee;
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
[role="status"] {
|
||||
min-height: 1.4em;
|
||||
font: 0.78rem ui-monospace, SFMono-Regular, Menlo, monospace;
|
||||
}
|
||||
84
web/vendor/examples/state-sequence.html
vendored
Normal file
84
web/vendor/examples/state-sequence.html
vendored
Normal file
@@ -0,0 +1,84 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Orby · State sequence example</title>
|
||||
<link rel="stylesheet" href="./example.css" />
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Timed sequence</h1>
|
||||
<p>
|
||||
Define a product-owned timeline, then pause, resume, stop, or replay it
|
||||
through one controller.
|
||||
</p>
|
||||
<div class="glyph-stage">
|
||||
<canvas id="aiGlyph" width="440" height="440" aria-label="Animated AI state sequence"></canvas>
|
||||
</div>
|
||||
<div class="actions" role="group" aria-label="Sequence controls">
|
||||
<button id="replay" type="button">Replay</button>
|
||||
<button id="pause" type="button">Pause</button>
|
||||
<button id="resume" type="button">Resume</button>
|
||||
<button id="stop" type="button">Stop</button>
|
||||
</div>
|
||||
<p id="stateStatus" role="status">Sequence ready</p>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
import { createGlyph } from "../src/joan-engine.js";
|
||||
import { playStateSequence } from "../src/state-sequence.js";
|
||||
|
||||
const glyph = createGlyph("#aiGlyph", {
|
||||
sprite: "ai.idle",
|
||||
seed: "self-service-sequence",
|
||||
gridSize: 68,
|
||||
});
|
||||
const status = document.querySelector("#stateStatus");
|
||||
let playback;
|
||||
|
||||
const play = () => {
|
||||
playback?.stop();
|
||||
const nextPlayback = playStateSequence(glyph, [
|
||||
{ sprite: "ai.idle", holdMs: 1_200 },
|
||||
{ sprite: "ai.thinking", holdMs: 2_000 },
|
||||
{ sprite: "ai.progress", holdMs: 1_200 },
|
||||
{ sprite: "status.success", transition: "path-draw" },
|
||||
]);
|
||||
playback = nextPlayback;
|
||||
status.textContent = "Sequence playing";
|
||||
nextPlayback.finished.then(
|
||||
() => {
|
||||
if (playback === nextPlayback) status.textContent = "Sequence complete";
|
||||
},
|
||||
(error) => {
|
||||
if (playback === nextPlayback) {
|
||||
status.textContent = `Sequence ended: ${error.name}`;
|
||||
}
|
||||
},
|
||||
);
|
||||
};
|
||||
|
||||
document.querySelector("#replay").addEventListener("click", play);
|
||||
document.querySelector("#pause").addEventListener("click", () => {
|
||||
playback?.pause();
|
||||
status.textContent = "Sequence paused";
|
||||
});
|
||||
document.querySelector("#resume").addEventListener("click", () => {
|
||||
playback?.resume();
|
||||
status.textContent = "Sequence playing";
|
||||
});
|
||||
document.querySelector("#stop").addEventListener("click", () => {
|
||||
playback?.stop();
|
||||
status.textContent = "Sequence stopped";
|
||||
});
|
||||
|
||||
window.addEventListener("pagehide", () => {
|
||||
playback?.stop();
|
||||
glyph.destroy();
|
||||
}, { once: true });
|
||||
|
||||
play();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
48
web/vendor/examples/web-component.html
vendored
Normal file
48
web/vendor/examples/web-component.html
vendored
Normal file
@@ -0,0 +1,48 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>Orby · Web component example</title>
|
||||
<link rel="stylesheet" href="./example.css" />
|
||||
<script type="module" src="../src/web-component-register.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<h1>Web component</h1>
|
||||
<p>
|
||||
Drop the dependency-free custom element into a page, then drive its
|
||||
attributes or call the forwarded engine methods.
|
||||
</p>
|
||||
<div class="glyph-stage">
|
||||
<joan-glyph
|
||||
id="glyph"
|
||||
sprite="ai.ambient-thinking"
|
||||
seed="self-service-component"
|
||||
resolution="68"
|
||||
orb-boundary="gestalt"
|
||||
></joan-glyph>
|
||||
</div>
|
||||
<div class="actions" role="group" aria-label="Choose a semantic state">
|
||||
<button type="button" data-sprite="ai.ambient-idle">Ambient ready</button>
|
||||
<button type="button" data-sprite="ai.ambient-thinking">Thinking</button>
|
||||
<button type="button" data-sprite="status.success">Done</button>
|
||||
</div>
|
||||
<p id="stateStatus" role="status">Current state: ai.ambient-thinking</p>
|
||||
</main>
|
||||
|
||||
<script type="module">
|
||||
const glyph = document.querySelector("#glyph");
|
||||
const status = document.querySelector("#stateStatus");
|
||||
|
||||
document.querySelectorAll("[data-sprite]").forEach((button) => {
|
||||
button.addEventListener("click", async () => {
|
||||
const sprite = button.dataset.sprite;
|
||||
status.textContent = `Transitioning to ${sprite}…`;
|
||||
await glyph.transitionTo(sprite);
|
||||
status.textContent = `Current state: ${sprite}`;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user