2026-02-20T00-04-11_auto_memory/memories.db-shm, memory/memories.db-shm
This commit is contained in:
parent
0bdd34bdfc
commit
d1caa1c58c
@ -0,0 +1,14 @@
|
||||
Vector search failed: SQLiteError: no such table: vec_embeddings
|
||||
errno: 1,
|
||||
byteOffset: -1,
|
||||
|
||||
at prepare (bun:sqlite:331:37)
|
||||
at vectorSearch (/home/nicholai/signet/signetai/packages/core/dist/index.js:8153:21)
|
||||
at <anonymous> (/home/nicholai/signet/signetai/packages/daemon/src/daemon.ts:1527:25)
|
||||
at <anonymous> (/home/nicholai/signet/signetai/packages/daemon/src/daemon.ts:1488:35)
|
||||
at dispatch (/home/nicholai/signet/signetai/node_modules/.bun/hono@4.11.9/node_modules/hono/dist/compose.js:22:23)
|
||||
at dispatch (/home/nicholai/signet/signetai/node_modules/.bun/hono@4.11.9/node_modules/hono/dist/compose.js:6:32)
|
||||
at <anonymous> (/home/nicholai/signet/signetai/packages/daemon/src/daemon.ts:644:8)
|
||||
at <anonymous> (/home/nicholai/signet/signetai/packages/daemon/src/daemon.ts:642:21)
|
||||
at dispatch (/home/nicholai/signet/signetai/node_modules/.bun/hono@4.11.9/node_modules/hono/dist/compose.js:22:23)
|
||||
|
||||
@ -7505,3 +7505,118 @@ hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
[2m23:25:43[0m [36mINFO [0m [watcher] File changed [2m{"path":"/home/nicholai/.agents/memory/memories.db-shm"}[0m
|
||||
[2m23:25:48[0m [36mINFO [0m [git] Auto-committed [2m{"message":"2026-02-19T23-25-48_auto_memory/memories.db-shm, memory/memories.db-wal, me","filesChanged":7}[0m
|
||||
[2m23:27:20[0m [36mINFO [0m [watcher] File changed [2m{"path":"/home/nicholai/.agents/memory/memories.db-shm"}[0m
|
||||
[2m23:27:25[0m [36mINFO [0m [git] Auto-committed [2m{"message":"2026-02-19T23-27-25_auto_memory/memories.db-shm","filesChanged":1}[0m
|
||||
[2m23:30:36[0m [33mWARN [0m [git] Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:30:36[0m [33mWARN [0m [git] Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:35:37[0m [33mWARN [0m [git] Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:35:37[0m [33mWARN [0m [git] Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:40:36[0m [33mWARN [0m [git] Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:40:36[0m [33mWARN [0m [git] Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:45:36[0m [33mWARN [0m [git] Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:45:36[0m [33mWARN [0m [git] Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:50:36[0m [33mWARN [0m [git] Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:50:36[0m [33mWARN [0m [git] Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:55:36[0m [33mWARN [0m [git] Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m23:55:36[0m [33mWARN [0m [git] Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m00:00:36[0m [33mWARN [0m [git] Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m00:00:36[0m [33mWARN [0m [git] Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git
|
||||
! [rejected] HEAD -> main (non-fast-forward)
|
||||
error: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'
|
||||
hint: Updates were rejected because the tip of your current branch is behind
|
||||
hint: its remote counterpart. If you want to integrate the remote changes,
|
||||
hint: use 'git pull' before pushing again.
|
||||
hint: See the 'Note about fast-forwards' in 'git push --help' for details.
|
||||
|
||||
[2m00:04:02[0m [36mINFO [0m [watcher] File changed [2m{"path":"/home/nicholai/.agents/memory/memories.db-shm"}[0m
|
||||
[2m00:04:06[0m [36mINFO [0m [watcher] File changed [2m{"path":"/home/nicholai/.agents/memory/memories.db-shm"}[0m
|
||||
|
||||
@ -2682,3 +2682,16 @@
|
||||
{"timestamp":"2026-02-19T23:25:43.752Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
|
||||
{"timestamp":"2026-02-19T23:25:48.775Z","level":"info","category":"git","message":"Auto-committed","data":{"message":"2026-02-19T23-25-48_auto_memory/memories.db-shm, memory/memories.db-wal, me","filesChanged":7}}
|
||||
{"timestamp":"2026-02-19T23:27:20.851Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
|
||||
{"timestamp":"2026-02-19T23:27:25.873Z","level":"info","category":"git","message":"Auto-committed","data":{"message":"2026-02-19T23-27-25_auto_memory/memories.db-shm","filesChanged":1}}
|
||||
{"timestamp":"2026-02-19T23:30:36.699Z","level":"warn","category":"git","message":"Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:30:36.699Z","level":"warn","category":"git","message":"Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:35:37.344Z","level":"warn","category":"git","message":"Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:35:37.345Z","level":"warn","category":"git","message":"Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:40:36.700Z","level":"warn","category":"git","message":"Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:40:36.700Z","level":"warn","category":"git","message":"Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:45:36.700Z","level":"warn","category":"git","message":"Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:45:36.700Z","level":"warn","category":"git","message":"Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:50:36.709Z","level":"warn","category":"git","message":"Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:50:36.709Z","level":"warn","category":"git","message":"Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:55:36.707Z","level":"warn","category":"git","message":"Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-19T23:55:36.708Z","level":"warn","category":"git","message":"Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
|
||||
4
.daemon/logs/signet-2026-02-20.log
Normal file
4
.daemon/logs/signet-2026-02-20.log
Normal file
@ -0,0 +1,4 @@
|
||||
{"timestamp":"2026-02-20T00:00:36.691Z","level":"warn","category":"git","message":"Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-20T00:00:36.691Z","level":"warn","category":"git","message":"Periodic sync failed: Push failed: To https://github.com/Signet-AI/signetai.git\n ! [rejected] HEAD -> main (non-fast-forward)\nerror: failed to push some refs to 'https://github.com/Signet-AI/signetai.git'\nhint: Updates were rejected because the tip of your current branch is behind\nhint: its remote counterpart. If you want to integrate the remote changes,\nhint: use 'git pull' before pushing again.\nhint: See the 'Note about fast-forwards' in 'git push --help' for details.\n"}
|
||||
{"timestamp":"2026-02-20T00:04:02.498Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
|
||||
{"timestamp":"2026-02-20T00:04:06.313Z","level":"info","category":"watcher","message":"File changed","data":{"path":"/home/nicholai/.agents/memory/memories.db-shm"}}
|
||||
@ -186,15 +186,46 @@ Content sections wrap in `.section-panel` — `--color-surface` bg,
|
||||
via `::before`/`::after`. Elevates content above the background
|
||||
layers.
|
||||
|
||||
### HUD / Reticle Blocks
|
||||
For hero sections or high-emphasis areas, use technical HUD styling:
|
||||
- Expand padding (`--space-2xl`) to give text breathing room
|
||||
- `border-left` and `border-bottom` only (creates an open bracket feel)
|
||||
- `::before`/`::after` pseudo-elements to create 5x1px crosshair ticks at the bottom-right and top-left corners
|
||||
- Add a top-right 5x1px tick (`.hero-content-tick`) to complete the bounding box
|
||||
- Subtle `135deg` linear gradients (e.g., `rgba(255, 255, 255, 0.02)` to `transparent 50%`) instead of solid fills to let dithered backgrounds show through
|
||||
|
||||
### Terminal Subtitles
|
||||
For subtitles under hero text or major headings:
|
||||
- Use `var(--font-mono)`, uppercase, and underscore naming (`CORE_UI_PRIMITIVES`)
|
||||
- Prefix with a command-line prompt (`> `) via a `::before` pseudo-element
|
||||
- Use `var(--color-accent)` for the text and `var(--color-text-muted)` for the prompt prefix
|
||||
|
||||
### Metadata Grids (Spec Sheets)
|
||||
For displaying key/value pairs or metadata blocks:
|
||||
- Use strict CSS Grid (`grid-template-columns: repeat(4, 1fr)`) instead of loose flex layouts
|
||||
- Apply a solid border around the entire grid container
|
||||
- Use `border-right` on items to create a rigid, technical "spec sheet" data table look
|
||||
- Set the background to solid `var(--color-surface)` so text pops against complex dithered backgrounds
|
||||
|
||||
### Swatches (Color Chips)
|
||||
For displaying color palettes:
|
||||
- Design swatches to look like physical color chips from a technical manual
|
||||
- Wrap the color block and text in a bordered container with padding and a dark background (`var(--color-bg)`)
|
||||
- Use a `4:3` aspect ratio for the color block instead of a perfect square
|
||||
- Hover effects should be structural (`transform: translateY(-2px)`) with a border highlight, rather than bouncy scales
|
||||
|
||||
### Decorative Elements
|
||||
- Crosshair marks (`.crosshair`) — 10px, muted color
|
||||
- 4-pointed star (`.star-4`) — clip-path polygon
|
||||
- Schematic circles — stroked circles with centered crosshairs,
|
||||
`opacity: 0.8`, `node-pulse` animation
|
||||
- Corner star markers (`****`) — mono text, positioned absolute
|
||||
- Vertical sidebar text (`writing-mode: vertical-rl`)
|
||||
- Vertical sidebar text (`writing-mode: vertical-rl`, `transform: rotate(180deg)`)
|
||||
- Numbered index grids (00–23 in 8-column grid)
|
||||
- Inverted labels (`.label-inv`) — bright bg, dark text, no radius
|
||||
- **CSS Barcodes** — `.barcode` using `repeating-linear-gradient` with muted text colors for industrial artifacts
|
||||
- **Hex Dump Streams** — `.hex-stream` displaying memory addresses (`0x0000`), hex data, and ASCII translations to reinforce the agent memory theme
|
||||
- **SVG Noise Grain** — `.page::before` or `body::before` with `feTurbulence` (fractalNoise) at very low opacity (0.04) to create a CRT/industrial texture overlay
|
||||
|
||||
## Embedding Graph Overlay
|
||||
|
||||
@ -240,11 +271,12 @@ Single control point offset 12% perpendicular from the midpoint.
|
||||
This produces exactly one gentle arc per line — never S-curves.
|
||||
|
||||
Connector styles:
|
||||
- `conn-dashed` — `stroke-dasharray: 6 4`, animated `dash-flow` 12s
|
||||
- `conn-dashed` — `stroke-dasharray: 4 6`, animated `dash-flow` 15s
|
||||
- `conn-dashed-rev` — same dash, reverse direction 15s
|
||||
- `conn-dot` — 2px filled circles at each endpoint
|
||||
- `conn-dot` — 2.5px radius circles at each endpoint, filled with surface color and stroked with text color (hollow port look)
|
||||
- `conn-packet` — small (1.5px) circles animated along the path using `<animateMotion>` with randomized durations and delays to simulate live data flow. Packets should be filled with `--color-text-muted` and have no drop shadow by default so they act as subtle ambient blips rather than bright tracer rounds.
|
||||
- `conn-label` — 7px mono text near midpoint (`d=0.12`, `cos=0.74`)
|
||||
- All connectors render at `opacity: 0.8` base
|
||||
- Base connector lines render at `opacity: 0.3` so data packets pop slightly
|
||||
|
||||
### Node Hover Interaction
|
||||
Crosshair nodes have `pointer-events: auto` (rest of the field is
|
||||
@ -253,14 +285,18 @@ Crosshair nodes have `pointer-events: auto` (rest of the field is
|
||||
1. **Crosshair expansion** — `::before`/`::after` pseudo-elements
|
||||
scale 1.8x on their respective axes, color brightens to
|
||||
`--color-text`
|
||||
2. **SLOT label** — `SLOT_XX` micro-tooltip appears above node.
|
||||
6px mono text, bordered container with `--color-bg` background
|
||||
3. **Ring pulse** — circular ring (`.ch-ring`) scales from 0.6 to
|
||||
1.0 and fades in at 50% opacity around the node
|
||||
2. **Rich HUD Tooltip (`.ch-label`)** — mini-panel appears above node.
|
||||
- Styled with padding, `--color-surface` background, strong border, and a drop shadow
|
||||
- Includes a 1x4px stem line (`::before`) connecting the panel to the node
|
||||
- Content is dynamically injected HTML: slot name in brackets, `STS: ACTIVE`, and a randomized hex memory address (`MEM: 0x4F2A`)
|
||||
3. **Mechanical Lock-On Ring (`.ch-ring`)** — dashed ring snaps into place.
|
||||
- Starts at `-45deg` rotation and `0.5` scale
|
||||
- On hover, uses a snappy cubic-bezier (`cubic-bezier(0.16, 1, 0.3, 1)`) to animate to `0deg` and `1.0` scale
|
||||
- Once locked, begins a slow, continuous 10s rotation to indicate an active lock
|
||||
4. **Connected edge highlight** — JS builds adjacency map from
|
||||
edge list. On hover, all SVG elements belonging to connected
|
||||
edges get `.conn-highlight` class: stroke brightens to
|
||||
`--color-text`, width increases to 1.5px, dots/labels brighten
|
||||
edges (grouped via `<g>`) get `.conn-highlight` class: stroke brightens to
|
||||
`--color-text`, width increases to 1.5px, hollow ports fill in, and data packets enlarge, turn bright (`--color-text-bright`), and gain a drop shadow.
|
||||
5. **On mouseleave** — all `.conn-highlight` classes removed
|
||||
|
||||
## Generative Art
|
||||
@ -284,19 +320,21 @@ Multiple overlapping layers create spatial depth, inspired by
|
||||
flight terminal / CRT interface aesthetics:
|
||||
|
||||
1. **SVG noise grain** — `body::before`, fixed, z-index 9999
|
||||
(0.04/0.06 opacity)
|
||||
2. **Bleed typography** — massive text (12–20rem) bleeding off
|
||||
(0.04 opacity), using `feTurbulence` filter for CRT texture
|
||||
2. **Blueprint Grid** — fixed background layer with a 32x32px CSS linear-gradient grid (`.bg-grid`). Apply a `radial-gradient` mask to fade it out toward the edges.
|
||||
3. **Bleed typography** — massive text (12–20rem) bleeding off
|
||||
viewport edges, 2.5% opacity, `--font-display`
|
||||
3. **Floating panels** — 4–6 translucent rectangles at 15–50%
|
||||
opacity, drifting ±3–4px over 40–65s cycles
|
||||
4. **Metadata fragments** — scattered timestamps, coordinates,
|
||||
version codes in 7px mono text at 35% opacity
|
||||
5. **Embedding graph** — crosshair nodes + quadratic bezier
|
||||
4. **Targeting Zones (Floating panels)** — translucent rectangles drifting ±3–4px over 40–65s cycles. Use nearly transparent gradients (`rgba(255, 255, 255, 0.01)`) and corner tick marks instead of solid fills to act as HUD brackets.
|
||||
5. **Metadata fragments** — scattered timestamps, coordinates,
|
||||
version codes in 7px mono text. Use brackets `[ ]`, plus signs `+`, and command prompts `>` to reinforce the terminal aesthetic.
|
||||
6. **Embedding graph** — crosshair nodes + quadratic bezier
|
||||
connectors at 80% opacity (see section above)
|
||||
6. **Schematic overlay** — circles with crosshairs, star markers
|
||||
7. **Right edge dither** — 240px canvas strip, organic noise
|
||||
8. **Section panels** — content wrapped in `--color-surface`
|
||||
7. **Schematic overlay** — circles with crosshairs, star markers. Hub circles should include a dashed inner ring (`.sc-inner`) with a slow (20-30s) linear infinite rotation.
|
||||
8. **Right edge dither** — 240px canvas strip, organic noise
|
||||
9. **Section panels** — content wrapped in `--color-surface`
|
||||
panels with corner registration marks
|
||||
10. **Hex Dump Streams** — raw memory representations overlaid as
|
||||
structural blocks (`.hex-stream`)
|
||||
|
||||
## Animation & Interaction
|
||||
|
||||
@ -338,6 +376,12 @@ dashboard.
|
||||
- Durations always > 5s for ambient, 0.2–0.6s for interactive
|
||||
- Never `animation-iteration-count: 1` for ambient effects
|
||||
|
||||
### Ambient Data Streams
|
||||
For elements representing live data or memory (like Hex Dumps):
|
||||
- Use slow, linear, infinite vertical translation (`transform: translateY(-50%)` over 20-30s)
|
||||
- Duplicate content within an inner wrapper to create a seamless loop
|
||||
- Apply a linear gradient mask (`::after` pseudo-element) that fades to the background color at both the top and bottom to create a smooth entry/exit point for the streaming data
|
||||
|
||||
## Layout Principles
|
||||
|
||||
- Max content width: ~820px, centered
|
||||
|
||||
@ -9,6 +9,32 @@
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
/* === SVG noise grain === */
|
||||
body::before {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 9999;
|
||||
pointer-events: none;
|
||||
opacity: 0.04;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* === Background Grid === */
|
||||
.bg-grid {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(to right, var(--color-border) 1px, transparent 1px),
|
||||
linear-gradient(to bottom, var(--color-border) 1px, transparent 1px);
|
||||
background-size: 32px 32px;
|
||||
mask-image: radial-gradient(circle at 50% 30%, black 20%, transparent 80%);
|
||||
-webkit-mask-image: radial-gradient(circle at 50% 30%, black 20%, transparent 80%);
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.page {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
@ -81,12 +107,35 @@
|
||||
}
|
||||
.fp {
|
||||
position: absolute;
|
||||
background: var(--color-surface);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.01) 0%, transparent 100%);
|
||||
border: 1px solid var(--color-border);
|
||||
animation: fp-drift 60s ease-in-out infinite alternate;
|
||||
}
|
||||
.fp::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -1px; left: -1px;
|
||||
width: 6px; height: 6px;
|
||||
border-top: 1px solid var(--color-text-muted);
|
||||
border-left: 1px solid var(--color-text-muted);
|
||||
}
|
||||
.fp::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -1px; right: -1px;
|
||||
width: 6px; height: 6px;
|
||||
border-bottom: 1px solid var(--color-text-muted);
|
||||
border-right: 1px solid var(--color-text-muted);
|
||||
}
|
||||
.fp--raised {
|
||||
background: var(--color-surface-raised);
|
||||
background: repeating-linear-gradient(
|
||||
-45deg,
|
||||
transparent,
|
||||
transparent 4px,
|
||||
var(--color-border) 4px,
|
||||
var(--color-border) 5px
|
||||
);
|
||||
border-color: var(--color-border-strong);
|
||||
}
|
||||
@keyframes fp-drift {
|
||||
0% { transform: translate(0, 0); }
|
||||
@ -203,7 +252,37 @@
|
||||
.hero-content {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-bottom: var(--space-lg);
|
||||
padding: var(--space-2xl) var(--space-xl);
|
||||
border-left: 1px solid var(--color-border-strong);
|
||||
border-bottom: 1px solid var(--color-border-strong);
|
||||
background: linear-gradient(135deg, rgba(255, 255, 255, 0.02) 0%, transparent 50%);
|
||||
}
|
||||
.hero-content::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -3px;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
.hero-content::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -3px;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 5px;
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
/* Top-right tick to complete the open bracket */
|
||||
.hero-content-tick {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 5px;
|
||||
height: 1px;
|
||||
background: var(--color-text-muted);
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
@ -217,23 +296,34 @@
|
||||
}
|
||||
|
||||
.hero-sub {
|
||||
font-size: 0.75rem;
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.625rem;
|
||||
color: var(--color-accent);
|
||||
margin-top: var(--space-md);
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.hero-sub::before {
|
||||
content: '> ';
|
||||
color: var(--color-text-muted);
|
||||
margin-top: var(--space-sm);
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
|
||||
.hero-meta {
|
||||
display: flex;
|
||||
gap: var(--space-xl);
|
||||
margin-top: var(--space-lg);
|
||||
padding-top: var(--space-md);
|
||||
border-top: 1px solid var(--color-border);
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
margin-top: var(--space-2xl);
|
||||
border: 1px solid var(--color-border-strong);
|
||||
background: var(--color-surface);
|
||||
}
|
||||
.hero-meta-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
gap: 6px;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
border-right: 1px solid var(--color-border-strong);
|
||||
}
|
||||
.hero-meta-item:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.hero-meta-label {
|
||||
font-family: var(--font-mono);
|
||||
@ -284,6 +374,20 @@
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.sc-inner {
|
||||
position: absolute;
|
||||
inset: 4px;
|
||||
border: 1px dashed var(--color-border-strong);
|
||||
border-radius: 50%;
|
||||
animation: spin 20s linear infinite;
|
||||
}
|
||||
.schematic-circle:nth-child(even) .sc-inner {
|
||||
animation-direction: reverse;
|
||||
animation-duration: 30s;
|
||||
}
|
||||
@keyframes spin {
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* === SVG connector overlay === */
|
||||
.connector-svg {
|
||||
@ -295,20 +399,23 @@
|
||||
z-index: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.connector-svg g {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
.connector-svg line,
|
||||
.connector-svg path {
|
||||
stroke: var(--color-border-strong);
|
||||
stroke-width: 1;
|
||||
fill: none;
|
||||
opacity: 0.8;
|
||||
opacity: 0.3;
|
||||
transition: opacity 0.3s ease, stroke 0.3s ease, stroke-width 0.3s ease;
|
||||
}
|
||||
.connector-svg .conn-dashed {
|
||||
stroke-dasharray: 6 4;
|
||||
animation: dash-flow 12s linear infinite;
|
||||
stroke-dasharray: 4 6;
|
||||
animation: dash-flow 15s linear infinite;
|
||||
}
|
||||
.connector-svg .conn-dashed-rev {
|
||||
stroke-dasharray: 6 4;
|
||||
stroke-dasharray: 4 6;
|
||||
animation: dash-flow-rev 15s linear infinite;
|
||||
}
|
||||
@keyframes dash-flow {
|
||||
@ -318,19 +425,17 @@
|
||||
to { stroke-dashoffset: 100; }
|
||||
}
|
||||
.connector-svg .conn-dot {
|
||||
fill: var(--color-text-muted);
|
||||
r: 2;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s ease, fill 0.3s ease;
|
||||
}
|
||||
.connector-svg .conn-dot--bright {
|
||||
fill: var(--color-text);
|
||||
fill: var(--color-surface);
|
||||
stroke: var(--color-text-muted);
|
||||
stroke-width: 1px;
|
||||
r: 2.5;
|
||||
animation: dot-pulse 4s ease-in-out infinite;
|
||||
opacity: 0.8;
|
||||
transition: opacity 0.3s ease, fill 0.3s ease, stroke 0.3s ease;
|
||||
}
|
||||
@keyframes dot-pulse {
|
||||
0%, 100% { opacity: 1; }
|
||||
50% { opacity: 0.3; }
|
||||
.connector-svg .conn-packet {
|
||||
fill: var(--color-text-muted);
|
||||
opacity: 0;
|
||||
transition: r 0.3s ease, fill 0.3s ease, filter 0.3s ease;
|
||||
}
|
||||
.connector-svg .conn-label {
|
||||
font-family: var(--font-mono);
|
||||
@ -342,19 +447,25 @@
|
||||
transition: opacity 0.3s ease, fill 0.3s ease;
|
||||
}
|
||||
/* Highlight state for edges connected to hovered node */
|
||||
.connector-svg path.conn-highlight {
|
||||
.connector-svg g.conn-highlight path {
|
||||
stroke: var(--color-text);
|
||||
stroke-width: 1.5;
|
||||
opacity: 1;
|
||||
}
|
||||
.connector-svg .conn-dot.conn-highlight {
|
||||
fill: var(--color-text-bright);
|
||||
opacity: 1;
|
||||
}
|
||||
.connector-svg .conn-label.conn-highlight {
|
||||
fill: var(--color-text);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.connector-svg g.conn-highlight .conn-dot {
|
||||
fill: var(--color-text-bright);
|
||||
stroke: var(--color-text-bright);
|
||||
opacity: 1;
|
||||
}
|
||||
.connector-svg g.conn-highlight .conn-label {
|
||||
fill: var(--color-text);
|
||||
opacity: 0.9;
|
||||
}
|
||||
.connector-svg g.conn-highlight .conn-packet {
|
||||
r: 2.5;
|
||||
fill: var(--color-text-bright);
|
||||
filter: drop-shadow(0 0 3px var(--color-text-bright));
|
||||
}
|
||||
|
||||
/* Vertical sidebar */
|
||||
.sidebar-vert {
|
||||
@ -364,6 +475,15 @@
|
||||
transform: translateY(-50%);
|
||||
z-index: 2;
|
||||
}
|
||||
.vertical-text {
|
||||
writing-mode: vertical-rl;
|
||||
transform: rotate(180deg);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.5625rem;
|
||||
letter-spacing: 0.18em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text-muted);
|
||||
}
|
||||
|
||||
/* Right edge dither */
|
||||
#dither-edge {
|
||||
@ -451,23 +571,26 @@
|
||||
/* === Swatches === */
|
||||
.swatch-row {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
|
||||
grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
|
||||
gap: var(--space-md);
|
||||
}
|
||||
.swatch-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
gap: 8px;
|
||||
padding: 6px;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-bg);
|
||||
transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
|
||||
}
|
||||
.swatch-cell:hover {
|
||||
border-color: var(--color-border-strong);
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.swatch {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
aspect-ratio: 4/3;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
|
||||
}
|
||||
.swatch:hover {
|
||||
transform: scale(1.08);
|
||||
box-shadow: 0 0 0 1px var(--color-text-muted);
|
||||
}
|
||||
.swatch-label {
|
||||
font-family: var(--font-mono);
|
||||
@ -475,6 +598,7 @@
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
padding-left: 2px;
|
||||
}
|
||||
.swatch-hex {
|
||||
font-family: var(--font-mono);
|
||||
@ -482,6 +606,7 @@
|
||||
color: var(--color-text-muted);
|
||||
opacity: 0.5;
|
||||
letter-spacing: 0.04em;
|
||||
padding-left: 2px;
|
||||
}
|
||||
|
||||
/* Type specimen */
|
||||
@ -696,39 +821,57 @@
|
||||
/* Node label — hidden until hover */
|
||||
.crosshair-field .ch-label {
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
bottom: calc(100% + 12px);
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
transform: translateX(-50%) translateY(4px);
|
||||
font-family: var(--font-mono);
|
||||
font-size: 6px;
|
||||
letter-spacing: 0.1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--color-text);
|
||||
white-space: nowrap;
|
||||
white-space: pre;
|
||||
opacity: 0;
|
||||
transition: opacity 0.25s ease;
|
||||
transition: opacity 0.2s ease, transform 0.2s ease;
|
||||
pointer-events: none;
|
||||
background: var(--color-bg);
|
||||
padding: 1px 4px;
|
||||
background: var(--color-surface);
|
||||
padding: 4px;
|
||||
border: 1px solid var(--color-border-strong);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
box-shadow: 0 4px 12px rgba(0,0,0,0.5);
|
||||
text-align: left;
|
||||
}
|
||||
.crosshair-field .ch-label::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: -5px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1px;
|
||||
height: 4px;
|
||||
background: var(--color-border-strong);
|
||||
}
|
||||
.crosshair-field .ch:hover .ch-label {
|
||||
opacity: 1;
|
||||
transform: translateX(-50%) translateY(0);
|
||||
}
|
||||
/* Ring pulse on hover */
|
||||
.crosshair-field .ch-ring {
|
||||
position: absolute;
|
||||
inset: -6px;
|
||||
border: 1px solid var(--color-text-muted);
|
||||
inset: -10px;
|
||||
border: 1px dashed var(--color-text-muted);
|
||||
border-radius: 50%;
|
||||
opacity: 0;
|
||||
transform: scale(0.6);
|
||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||
transform: scale(0.5) rotate(-45deg);
|
||||
transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
.crosshair-field .ch:hover .ch-ring {
|
||||
opacity: 0.5;
|
||||
transform: scale(1);
|
||||
opacity: 0.8;
|
||||
transform: scale(1) rotate(0deg);
|
||||
border-color: var(--color-text);
|
||||
animation: spin 10s linear infinite 0.4s;
|
||||
}
|
||||
|
||||
/* === Schematic overlay === */
|
||||
@ -793,6 +936,66 @@
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
/* === Hex Dump Stream === */
|
||||
.hex-stream {
|
||||
font-family: var(--font-mono);
|
||||
font-size: 0.4375rem;
|
||||
line-height: 1.8;
|
||||
color: var(--color-text-muted);
|
||||
letter-spacing: 0.15em;
|
||||
background: var(--color-surface);
|
||||
padding: var(--space-md);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
height: 130px;
|
||||
}
|
||||
.hex-stream::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: linear-gradient(to bottom, var(--color-surface) 0%, transparent 15%, transparent 70%, var(--color-surface) 100%);
|
||||
pointer-events: none;
|
||||
}
|
||||
.hex-stream-inner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
animation: hex-scroll 25s linear infinite;
|
||||
}
|
||||
@keyframes hex-scroll {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-50%); }
|
||||
}
|
||||
.hex-row {
|
||||
display: flex;
|
||||
gap: var(--space-lg);
|
||||
}
|
||||
.hex-addr { color: var(--color-accent); opacity: 0.6; width: 40px; }
|
||||
.hex-data { flex: 1; word-spacing: 0.3em; }
|
||||
.hex-ascii { color: var(--color-text); opacity: 0.4; white-space: pre; width: 100px; }
|
||||
.hex-hl { color: var(--color-bg); background: var(--color-text); padding: 0 2px; }
|
||||
|
||||
/* === Barcode Decorative === */
|
||||
.barcode {
|
||||
height: 24px;
|
||||
width: 120px;
|
||||
background: repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--color-text-muted) 0,
|
||||
var(--color-text-muted) 1px,
|
||||
transparent 1px,
|
||||
transparent 3px,
|
||||
var(--color-text-muted) 3px,
|
||||
var(--color-text-muted) 5px,
|
||||
transparent 5px,
|
||||
transparent 8px,
|
||||
var(--color-text-muted) 8px,
|
||||
var(--color-text-muted) 9px,
|
||||
transparent 9px,
|
||||
transparent 12px
|
||||
);
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
/* === Input focus glow === */
|
||||
.input {
|
||||
transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
|
||||
@ -833,28 +1036,36 @@
|
||||
|
||||
<!-- Scattered metadata fragments -->
|
||||
<div class="meta-fragments" aria-hidden="true">
|
||||
<span class="mf" style="top: 4%; left: 12%;">12:45pm</span>
|
||||
<span class="mf" style="top: 4%; right: 28%;">Feb 2026</span>
|
||||
<span class="mf" style="top: 18%; right: 6%;">Ref//HJ0291</span>
|
||||
<span class="mf mf--bright" style="top: 32%; left: 5%;">001</span>
|
||||
<span class="mf" style="top: 42%; right: 10%;">v0.2.1-draft</span>
|
||||
<span class="mf" style="top: 55%; left: 8%;">48.8566°N</span>
|
||||
<span class="mf" style="top: 55%; left: 18%;">2.3522°E</span>
|
||||
<span class="mf mf--bright" style="top: 68%; right: 5%;">002</span>
|
||||
<span class="mf" style="top: 75%; left: 4%;">Sys_Component_Library</span>
|
||||
<span class="mf" style="top: 88%; right: 12%;">ERC-8128</span>
|
||||
<span class="mf" style="bottom: 5%; left: 15%;">Node_Status//Active</span>
|
||||
<span class="mf" style="top: 4%; left: 12%;">[ 12:45:00 ]</span>
|
||||
<span class="mf" style="top: 4%; right: 28%;">+ TS_FEB_2026</span>
|
||||
<span class="mf" style="top: 18%; right: 6%;">REF // HJ0291</span>
|
||||
<span class="mf mf--bright" style="top: 32%; left: 5%;">> 001</span>
|
||||
<span class="mf" style="top: 42%; right: 10%;">[ v0.2.1-draft ]</span>
|
||||
<span class="mf" style="top: 55%; left: 8%;">LAT 48.8566°N</span>
|
||||
<span class="mf" style="top: 55%; left: 18%;">LON 2.3522°E</span>
|
||||
<span class="mf mf--bright" style="top: 68%; right: 5%;">> 002</span>
|
||||
<span class="mf" style="top: 75%; left: 4%;">SYS_COMP_LIB</span>
|
||||
<span class="mf" style="top: 88%; right: 12%;">+ ERC-8128</span>
|
||||
<span class="mf" style="bottom: 5%; left: 15%;">STATUS // ACTIVE</span>
|
||||
</div>
|
||||
|
||||
<!-- SVG connector overlay — drawn by JS to connect schematic elements -->
|
||||
<svg class="connector-svg" id="connector-svg" aria-hidden="true"></svg>
|
||||
|
||||
<!-- Background layers -->
|
||||
<div class="bg-grid" aria-hidden="true"></div>
|
||||
|
||||
<div class="schematic-overlay">
|
||||
<!-- Primary hub nodes (larger circles = higher degree) -->
|
||||
<div class="schematic-circle" id="sc-1" style="width: 80px; height: 80px; top: 12%; left: 6%;"></div>
|
||||
<div class="schematic-circle" id="sc-2" style="width: 60px; height: 60px; top: 52%; left: 3%;"></div>
|
||||
<div class="schematic-circle" id="sc-3" style="width: 50px; height: 50px; bottom: 18%; right: 8%;"></div>
|
||||
<div class="schematic-circle" id="sc-1" style="width: 80px; height: 80px; top: 12%; left: 6%;">
|
||||
<div class="sc-inner"></div>
|
||||
</div>
|
||||
<div class="schematic-circle" id="sc-2" style="width: 60px; height: 60px; top: 52%; left: 3%;">
|
||||
<div class="sc-inner"></div>
|
||||
</div>
|
||||
<div class="schematic-circle" id="sc-3" style="width: 50px; height: 50px; bottom: 18%; right: 8%;">
|
||||
<div class="sc-inner"></div>
|
||||
</div>
|
||||
|
||||
<span class="star-marker" id="sm-1" style="top: 6%; left: 3%;">****</span>
|
||||
<span class="star-marker" id="sm-2" style="top: 6%; right: 3%;">****</span>
|
||||
@ -900,13 +1111,14 @@
|
||||
<canvas id="dither-canvas"></canvas>
|
||||
</div>
|
||||
<div class="hero-content">
|
||||
<div class="hero-content-tick"></div>
|
||||
<div class="flex items-center gap-sm" style="margin-bottom: var(--space-md);">
|
||||
<span class="label-inv">SYS</span>
|
||||
<span class="star-4"></span>
|
||||
<span class="label">Design_Brief</span>
|
||||
</div>
|
||||
<div class="hero-title">Component<br>Library</div>
|
||||
<p class="hero-sub">Core UI primitives and tokens.</p>
|
||||
<p class="hero-sub">Core_UI_Primitives_and_Tokens</p>
|
||||
<div class="hero-meta">
|
||||
<div class="hero-meta-item">
|
||||
<span class="hero-meta-label">Version</span>
|
||||
@ -938,7 +1150,7 @@
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Palette</span>
|
||||
<span class="section-index">01/07</span>
|
||||
<span class="section-index">01/08</span>
|
||||
</div>
|
||||
<div class="section-panel">
|
||||
<div class="swatch-row">
|
||||
@ -1001,7 +1213,7 @@
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Type</span>
|
||||
<span class="section-index">02/07</span>
|
||||
<span class="section-index">02/08</span>
|
||||
</div>
|
||||
<div class="dither-block dither-block--section">
|
||||
<canvas data-dither="band"></canvas>
|
||||
@ -1054,7 +1266,7 @@
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Icons</span>
|
||||
<span class="section-index">03/07</span>
|
||||
<span class="section-index">03/08</span>
|
||||
</div>
|
||||
<div class="section-panel">
|
||||
<div class="icon-grid">
|
||||
@ -1156,7 +1368,7 @@
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Buttons</span>
|
||||
<span class="section-index">04/07</span>
|
||||
<span class="section-index">04/08</span>
|
||||
</div>
|
||||
<div class="section-panel">
|
||||
<div class="flex flex-col gap-lg">
|
||||
@ -1195,7 +1407,7 @@
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Badges</span>
|
||||
<span class="section-index">05/07</span>
|
||||
<span class="section-index">05/08</span>
|
||||
</div>
|
||||
<div class="flex gap-sm wrap items-center section-content">
|
||||
<span class="badge">Default</span>
|
||||
@ -1217,7 +1429,7 @@
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Form</span>
|
||||
<span class="section-index">06/07</span>
|
||||
<span class="section-index">06/08</span>
|
||||
</div>
|
||||
<div class="flex flex-col gap-md section-content offset-right" style="max-width: 340px;">
|
||||
<input class="input" type="text" placeholder="Text input...">
|
||||
@ -1234,7 +1446,7 @@
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Card</span>
|
||||
<span class="section-index">07/07</span>
|
||||
<span class="section-index">07/08</span>
|
||||
</div>
|
||||
<div class="dither-block dither-block--section">
|
||||
<canvas data-dither="cloud"></canvas>
|
||||
@ -1287,11 +1499,42 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Memory Stream -->
|
||||
<div class="section reveal">
|
||||
<div class="section-header">
|
||||
<div class="crosshair"></div>
|
||||
<span class="label">Sys_Memory</span>
|
||||
<span class="section-index">08/08</span>
|
||||
</div>
|
||||
<div class="section-panel" style="padding: 0;">
|
||||
<div class="hex-stream">
|
||||
<div class="hex-stream-inner">
|
||||
<div class="hex-row"><span class="hex-addr">0x0000</span><span class="hex-data">53 49 47 4E 45 54 5F 41 <span class="hex-hl">47 45 4E 54</span> 5F 4D 45 4D</span><span class="hex-ascii">SIGNET_AGENT_MEM</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0010</span><span class="hex-data">4F 52 59 5F 42 4C 4F 43 4B 5F 30 30 31 5F 49 4E</span><span class="hex-ascii">ORY_BLOCK_001_IN</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0020</span><span class="hex-data">49 54 49 41 4C 49 5A 45 44 2E 2E 2E 00 00 00 00</span><span class="hex-ascii">ITIALIZED.......</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0030</span><span class="hex-data">E2 80 94 45 52 43 2D 38 31 32 38 5F 41 55 54 48</span><span class="hex-ascii">—ERC-8128_AUTH</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0040</span><span class="hex-data">5F 53 55 43 43 45 53 53 00 00 00 00 00 00 00 00</span><span class="hex-ascii">_SUCCESS........</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0050</span><span class="hex-data">41 57 41 49 54 49 4E 47 5F 43 4F 4D 4D 41 4E 44</span><span class="hex-ascii">AWAITING_COMMAND</span></div>
|
||||
<!-- Duplicate for seamless scroll -->
|
||||
<div class="hex-row"><span class="hex-addr">0x0060</span><span class="hex-data">53 49 47 4E 45 54 5F 41 <span class="hex-hl">47 45 4E 54</span> 5F 4D 45 4D</span><span class="hex-ascii">SIGNET_AGENT_MEM</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0070</span><span class="hex-data">4F 52 59 5F 42 4C 4F 43 4B 5F 30 30 31 5F 49 4E</span><span class="hex-ascii">ORY_BLOCK_001_IN</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0080</span><span class="hex-data">49 54 49 41 4C 49 5A 45 44 2E 2E 2E 00 00 00 00</span><span class="hex-ascii">ITIALIZED.......</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x0090</span><span class="hex-data">E2 80 94 45 52 43 2D 38 31 32 38 5F 41 55 54 48</span><span class="hex-ascii">—ERC-8128_AUTH</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x00A0</span><span class="hex-data">5F 53 55 43 43 45 53 53 00 00 00 00 00 00 00 00</span><span class="hex-ascii">_SUCCESS........</span></div>
|
||||
<div class="hex-row"><span class="hex-addr">0x00B0</span><span class="hex-data">41 57 41 49 54 49 4E 47 5F 43 4F 4D 4D 41 4E 44</span><span class="hex-ascii">AWAITING_COMMAND</span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div class="footer-bar reveal">
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="star-4"></span>
|
||||
<span class="label">Sys_Index</span>
|
||||
<div class="flex flex-col gap-md">
|
||||
<div class="flex items-center gap-sm">
|
||||
<span class="star-4"></span>
|
||||
<span class="label">Sys_Index</span>
|
||||
</div>
|
||||
<div class="barcode"></div>
|
||||
</div>
|
||||
<div class="num-index">
|
||||
<span>00</span><span>01</span><span>02</span><span>03</span>
|
||||
@ -1610,7 +1853,8 @@
|
||||
const h = window.innerHeight;
|
||||
connSvg.setAttribute('viewBox', `0 0 ${w} ${h}`);
|
||||
|
||||
for (const [fromId, toId, style, lbl] of edges) {
|
||||
for (let i = 0; i < edges.length; i++) {
|
||||
const [fromId, toId, style, lbl] = edges[i];
|
||||
const fromEl = document.getElementById(fromId);
|
||||
const toEl = document.getElementById(toId);
|
||||
if (!fromEl || !toEl) continue;
|
||||
@ -1623,33 +1867,67 @@
|
||||
const dy = b.y - a.y;
|
||||
const mx = (a.x + b.x) / 2 + dy * 0.12;
|
||||
const my = (a.y + b.y) / 2 - dx * 0.12;
|
||||
const pathD = `M ${a.x},${a.y} Q ${mx},${my} ${b.x},${b.y}`;
|
||||
|
||||
const g = document.createElementNS(svgNS, 'g');
|
||||
g.dataset.edgeIdx = i;
|
||||
|
||||
const path = document.createElementNS(svgNS, 'path');
|
||||
path.setAttribute('d', `M ${a.x},${a.y} Q ${mx},${my} ${b.x},${b.y}`);
|
||||
path.setAttribute('d', pathD);
|
||||
path.classList.add(style === 'dashed-rev' ? 'conn-dashed-rev' : 'conn-dashed');
|
||||
connSvg.appendChild(path);
|
||||
g.appendChild(path);
|
||||
|
||||
// Data packet pulse
|
||||
const packet = document.createElementNS(svgNS, 'circle');
|
||||
packet.setAttribute('r', '1.5');
|
||||
packet.classList.add('conn-packet');
|
||||
|
||||
const dur = (Math.random() * 4 + 3).toFixed(1) + 's';
|
||||
const delay = (Math.random() * 5).toFixed(1) + 's';
|
||||
|
||||
const motion = document.createElementNS(svgNS, 'animateMotion');
|
||||
motion.setAttribute('dur', dur);
|
||||
motion.setAttribute('begin', delay);
|
||||
motion.setAttribute('repeatCount', 'indefinite');
|
||||
motion.setAttribute('path', pathD);
|
||||
if (style === 'dashed-rev') {
|
||||
motion.setAttribute('keyPoints', '1;0');
|
||||
motion.setAttribute('keyTimes', '0;1');
|
||||
motion.setAttribute('calcMode', 'linear');
|
||||
}
|
||||
|
||||
const fade = document.createElementNS(svgNS, 'animate');
|
||||
fade.setAttribute('attributeName', 'opacity');
|
||||
fade.setAttribute('values', '0;1;1;0');
|
||||
fade.setAttribute('keyTimes', '0;0.1;0.9;1');
|
||||
fade.setAttribute('dur', dur);
|
||||
fade.setAttribute('begin', delay);
|
||||
fade.setAttribute('repeatCount', 'indefinite');
|
||||
|
||||
packet.appendChild(motion);
|
||||
packet.appendChild(fade);
|
||||
g.appendChild(packet);
|
||||
|
||||
// Endpoint dots
|
||||
for (const pt of [a, b]) {
|
||||
const dot = document.createElementNS(svgNS, 'circle');
|
||||
dot.setAttribute('cx', pt.x);
|
||||
dot.setAttribute('cy', pt.y);
|
||||
dot.setAttribute('r', '2');
|
||||
dot.classList.add('conn-dot');
|
||||
connSvg.appendChild(dot);
|
||||
g.appendChild(dot);
|
||||
}
|
||||
|
||||
// Label near midpoint
|
||||
if (lbl) {
|
||||
const mx = (a.x + b.x) / 2 + 6;
|
||||
const my = (a.y + b.y) / 2 - 6;
|
||||
const text = document.createElementNS(svgNS, 'text');
|
||||
text.setAttribute('x', mx);
|
||||
text.setAttribute('y', my);
|
||||
text.setAttribute('x', (a.x + b.x) / 2 + 6);
|
||||
text.setAttribute('y', (a.y + b.y) / 2 - 6);
|
||||
text.classList.add('conn-label');
|
||||
text.textContent = lbl;
|
||||
connSvg.appendChild(text);
|
||||
g.appendChild(text);
|
||||
}
|
||||
|
||||
connSvg.appendChild(g);
|
||||
}
|
||||
}
|
||||
|
||||
@ -1665,35 +1943,30 @@
|
||||
nodeEdges[toId].push(i);
|
||||
});
|
||||
|
||||
// Each edge produces: 1 path + 2 dots + optional label = 3 or 4 SVG children
|
||||
// We track which SVG children belong to which edge index
|
||||
function getEdgeElements(edgeIdx) {
|
||||
let childIdx = 0;
|
||||
for (let i = 0; i < edges.length; i++) {
|
||||
const pathEl = connSvg.children[childIdx++]; // path
|
||||
const dot1 = connSvg.children[childIdx++]; // dot
|
||||
const dot2 = connSvg.children[childIdx++]; // dot
|
||||
let labelEl = null;
|
||||
if (edges[i][3]) {
|
||||
labelEl = connSvg.children[childIdx++]; // label
|
||||
}
|
||||
if (i === edgeIdx) return [pathEl, dot1, dot2, labelEl].filter(Boolean);
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
document.querySelectorAll('.crosshair-field .ch').forEach(ch => {
|
||||
// Upgrade label to a rich HUD
|
||||
const labelEl = ch.querySelector('.ch-label');
|
||||
if (labelEl) {
|
||||
const slotName = labelEl.textContent;
|
||||
const hex = Math.floor(Math.random() * 0xFFFF).toString(16).toUpperCase().padStart(4, '0');
|
||||
labelEl.innerHTML = `
|
||||
<div style="color: var(--color-text-bright); border-bottom: 1px solid var(--color-border); padding-bottom: 2px; margin-bottom: 2px;">[ ${slotName} ]</div>
|
||||
<div style="color: var(--color-text-muted);">STS: ACTIVE</div>
|
||||
<div style="color: var(--color-text-muted);">MEM: 0x${hex}</div>
|
||||
`;
|
||||
}
|
||||
|
||||
ch.addEventListener('mouseenter', () => {
|
||||
const id = ch.id;
|
||||
const indices = nodeEdges[id] || [];
|
||||
for (const idx of indices) {
|
||||
const els = getEdgeElements(idx);
|
||||
els.forEach(el => el.classList.add('conn-highlight'));
|
||||
const g = connSvg.querySelector(`g[data-edge-idx="${idx}"]`);
|
||||
if (g) g.classList.add('conn-highlight');
|
||||
}
|
||||
});
|
||||
ch.addEventListener('mouseleave', () => {
|
||||
connSvg.querySelectorAll('.conn-highlight').forEach(el => {
|
||||
el.classList.remove('conn-highlight');
|
||||
connSvg.querySelectorAll('.conn-highlight').forEach(g => {
|
||||
g.classList.remove('conn-highlight');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user