docs(guide): onboarding guide overhaul — visuals, layout, and copy (#110)
* docs(guide): refine overview, mental-model diagram, cards, and recipes - Sidebar overview: replace screenshot with post-#108 redesign, re-tune marker percentages and grid layout, bring markers flush to image edge, rewrite Nodes/Workflows action-bar callouts. - Snapshot mental-model SVG: drop the U-shaped return arrow, restyle boxes with ForgeFlow accent strips, show actual on-disk file paths (Client_Shot010.json + Client_Shot010_autosave/periodic.json), rename Project library to Custom Folder, replace dramatic caption with a single-line equation-style summary of manual vs auto-save behaviour. - Function cards: convert chip spans to bullet lists, replace "Safety / setup" with "Smart organization" (folders/drag-drop/move), tighten Search description, "Group" -> "Smart view" on Nodes chip. - Recipes: hide focus-dot overlays, restore wrapper panel with darker #111111 fill, strip all styling from images, scale screenshots to 70%, right-align callouts to screenshot edge, split callout text into separate paragraphs, pin figcaption to bottom. - Crop save-snapshot.png and load-snapshot.png to remove backdrop padding. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(guide): refreshed screenshots, recipe layout overhaul, marker re-tuning Sidebar overview - Replace sidebar-overview.png with the taller 666x1202 redesign so the screenshot fills more of the column height alongside the callouts. - Re-measure section dividers (y=76/152/262/342/418/1202) and re-tune the six marker percentages to match the new image with ~0.4% inset inside each row band. Recipes - Replace all-icons-new.png, search-B.png, search-C.png with the redesigned screenshots showing post-#108 letter-glyph buttons. - Recipe layout: outer wrapper restored with #111111 fill (darker than the screenshots' edge color), screenshots scaled to 70% with no inner border or shadow, callout right-aligned to the screenshot's right edge (margin-right: 15%), figcaption pinned to bottom via flex margin-top: auto, screenshot+callout pair vertically centered above the figcaption. - Add folder-actions.png as a new "Smart organization" recipe with callout text covering create/delete/drag-drop. - Add right-click-functions.png replacing the workflow-search recipe; callout describes the right-click action menu on saved workflows. - Drop the autosave-recovery.svg in favor of the all-icons recipe; the recovery topic is already covered upstream in the Snapshot file box. - Workflow save-selection callout rewritten with two paragraphs (Save / Save selection) and explains the 'Module' tag. - Load snapshot callout split into two paragraphs and shortened. - Search-C callout broadened to "Search narrows displayed items so useful nodes and workflows are easier to find." - Re-enable .focus-module overlay as a translucent yellow rectangle anchored bottom-right of the all-icons screenshot, highlighting the two workflow action buttons. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(guide): remove orphan image assets - web/guide/img/autosave-recovery.svg — replaced upstream by the folder-actions recipe; the SVG is no longer referenced from index.html. - web/guide/img/screenshots/search-B.png — replaced upstream by right-click-functions.png in the workflow-actions recipe. Tree now contains only the 9 image assets actually used by the guide (2 SVGs + 7 PNG screenshots). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> * docs(guide): add Two-layer save band, dedupe Snapshot band header - New band "Two-layer save" sits between the snapshot mental-model band and the simple-workflow section. Explains in prose: named save vs background autosave, the <snapshot>_autosave/ recovery copy, the YES/NO load-prompt when autosave is newer, and pre-load recovery files for reversible Loads. - Style the new band with .band-text + scoped <code> styling for inline path fragments (subtle tinted bg, monospace). - Snapshot mental-model band: replace h2 ("Snapshot = your project kit") with the SVG's previous inner header ("Snapshot saves the whole project kit.") since the two were redundant. Drop the inner header from the SVG and shift boxes/arrows/caption up to absorb the freed space (SVG height 460 -> 320). - Drop max-width: 760px on .band > p so the band's intro paragraph spans full panel width. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
malkuthro
co-authored by
Claude Opus 4.7
Claude Opus 4.7
parent
ea4ee071e7
commit
972accfd22
+127
-81
@@ -133,8 +133,12 @@ figcaption {
|
||||
|
||||
.overview-map {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(240px, 0.78fr) minmax(220px, 0.72fr);
|
||||
gap: 48px;
|
||||
/* Slightly wider screenshot column + tighter gap so the sidebar shot's
|
||||
natural portrait height grows to roughly match the callouts column
|
||||
height (image aspect 728:1206 → ~1.656x width). Markers scale with the
|
||||
image since they use percentage positioning. */
|
||||
grid-template-columns: minmax(240px, 0.84fr) minmax(220px, 0.66fr);
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
padding: 22px 28px 22px 22px;
|
||||
border: 1px solid var(--line);
|
||||
@@ -156,7 +160,7 @@ figcaption {
|
||||
|
||||
.overview-box {
|
||||
position: absolute;
|
||||
right: -18px;
|
||||
right: -4px;
|
||||
width: 4px;
|
||||
border: 0;
|
||||
border-radius: 999px;
|
||||
@@ -169,39 +173,44 @@ figcaption {
|
||||
content: none;
|
||||
}
|
||||
|
||||
/* Marker percentages tuned to the redesigned 666×1202 sidebar-overview.png.
|
||||
Section dividers measured at y = 76 / 152 / 262 / 342 / 418 / 1202
|
||||
(= 6.32% / 12.65% / 21.80% / 28.45% / 34.78% / 100%). Each bar is inset
|
||||
~0.4% from its dividers so the marker sits cleanly inside the row band
|
||||
instead of straddling the divider line. */
|
||||
.overview-snapshot {
|
||||
top: 1.8%;
|
||||
height: 6.8%;
|
||||
top: 0.5%;
|
||||
height: 5.3%;
|
||||
color: #4a8058;
|
||||
}
|
||||
|
||||
.overview-tools {
|
||||
top: 9.7%;
|
||||
height: 6.4%;
|
||||
top: 6.8%;
|
||||
height: 5.3%;
|
||||
color: #4268ba;
|
||||
}
|
||||
|
||||
.overview-search {
|
||||
top: 17.8%;
|
||||
height: 5.6%;
|
||||
top: 13.2%;
|
||||
height: 8.2%;
|
||||
color: #d59b3d;
|
||||
}
|
||||
|
||||
.overview-nodes {
|
||||
top: 26.2%;
|
||||
height: 8.2%;
|
||||
top: 22.3%;
|
||||
height: 5.7%;
|
||||
color: #b64747;
|
||||
}
|
||||
|
||||
.overview-workflows {
|
||||
top: 34.9%;
|
||||
height: 8%;
|
||||
top: 28.9%;
|
||||
height: 5.4%;
|
||||
color: #452e83;
|
||||
}
|
||||
|
||||
.overview-saved {
|
||||
top: 43.5%;
|
||||
height: 51.8%;
|
||||
top: 35.3%;
|
||||
height: 63.7%;
|
||||
color: #4a8058;
|
||||
}
|
||||
|
||||
@@ -298,11 +307,30 @@ figcaption {
|
||||
}
|
||||
|
||||
.band > p {
|
||||
max-width: 760px;
|
||||
padding: 18px 22px 0;
|
||||
font-size: 17px;
|
||||
}
|
||||
|
||||
/* Text-only band (no figure to provide bottom padding) — its trailing
|
||||
paragraph needs explicit bottom space so the body text doesn't sit
|
||||
flush against the panel's bottom edge. */
|
||||
.band-text > p:last-child {
|
||||
padding-bottom: 22px;
|
||||
}
|
||||
|
||||
/* Inline code spans — used for filename / path fragments inside body
|
||||
prose like <snapshot>_autosave/. Slight tinted bg + monospace stack
|
||||
so they read as code without dominating the line. */
|
||||
.band p code,
|
||||
.band-text p code {
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
background: rgb(255 255 255 / 6%);
|
||||
color: var(--text);
|
||||
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.full {
|
||||
margin: 18px 22px 22px;
|
||||
}
|
||||
@@ -364,112 +392,130 @@ figcaption {
|
||||
}
|
||||
|
||||
.function-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
margin-top: 14px;
|
||||
margin: 14px 0 0;
|
||||
padding-left: 18px;
|
||||
list-style: disc;
|
||||
}
|
||||
|
||||
.function-list span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 28px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid #3d3d3d;
|
||||
border-radius: 4px;
|
||||
background: #1a1a1f;
|
||||
.function-list li {
|
||||
color: var(--text);
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.recipes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 18px;
|
||||
gap: 40px 32px;
|
||||
padding: 34px 0 64px;
|
||||
}
|
||||
|
||||
/* Each recipe is wrapped in its own panel so the row of recipes reads as a
|
||||
set of self-contained "case studies" — same outer container shape, same
|
||||
inner layout (screenshot above, callout below, caption at bottom).
|
||||
Wrapper is a flex column so the figcaption uses `margin-top: auto` and
|
||||
sits flush at the bottom of every panel, aligned across the row even when
|
||||
the callouts above vary in height. Wrapper bg is intentionally darker
|
||||
than --panel so the screenshots inside read as the lighter focal subject. */
|
||||
.recipe-real {
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 22px 22px 22px;
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 8px;
|
||||
background: var(--panel);
|
||||
/* Darker than the screenshot's own edge color (#171718) so the screenshot
|
||||
reads as the lighter focal subject inside a darker frame. */
|
||||
background: #111111;
|
||||
}
|
||||
|
||||
.recipe-real img {
|
||||
border-color: #454545;
|
||||
background: #101010;
|
||||
.recipe-real figcaption {
|
||||
margin-top: auto;
|
||||
padding-top: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.recipe-shot {
|
||||
position: relative;
|
||||
max-width: 70%;
|
||||
/* `margin-top: auto` + figcaption's existing `margin-top: auto` distribute
|
||||
the leftover vertical space equally — top space above the shot equals
|
||||
space between callout and figcaption, so the shot+callout pair is
|
||||
vertically centered in the panel above the bottom-pinned figcaption. */
|
||||
margin: auto auto 0;
|
||||
}
|
||||
|
||||
.recipes .recipe-shot img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Focus-dot overlays were visually noisy and frequently misaligned over the
|
||||
underlying screenshots; hidden by default until they can be redrawn
|
||||
against the new sidebar imagery. Aria-hidden already, so nothing changes
|
||||
for AT users. Specific overlays (e.g. .focus-module) re-enable themselves
|
||||
below with positioning tuned to the new screenshots. */
|
||||
.focus-dot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Workflow save-selection recipe — translucent yellow overlay highlighting
|
||||
the two action buttons (floppy + grid-2x2) at the bottom-right of the
|
||||
Workflows row in all-icons-new.png. Anchored to the bottom-right corner
|
||||
of the screenshot since that's where the buttons sit in the PNG. */
|
||||
.recipes .focus-module {
|
||||
display: block;
|
||||
position: absolute;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
border-radius: 999px;
|
||||
background: rgb(66 104 186 / 30%);
|
||||
box-shadow: 0 0 0 2px rgb(66 104 186 / 88%);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.focus-save {
|
||||
right: 3%;
|
||||
bottom: 7%;
|
||||
}
|
||||
|
||||
.focus-load {
|
||||
left: 7%;
|
||||
top: 39%;
|
||||
}
|
||||
|
||||
.focus-module {
|
||||
right: 0.5%;
|
||||
bottom: 0.5%;
|
||||
background: rgb(201 148 75 / 30%);
|
||||
box-shadow: 0 0 0 2px rgb(201 148 75 / 88%);
|
||||
}
|
||||
|
||||
.focus-node-search {
|
||||
left: 12%;
|
||||
top: 19%;
|
||||
background: rgb(74 128 88 / 30%);
|
||||
box-shadow: 0 0 0 2px rgb(74 128 88 / 88%);
|
||||
}
|
||||
|
||||
.focus-workflow-search {
|
||||
left: 10%;
|
||||
top: 16%;
|
||||
background: rgb(69 46 131 / 30%);
|
||||
box-shadow: 0 0 0 2px rgb(69 46 131 / 88%);
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 22%;
|
||||
height: 15.6%;
|
||||
background: rgb(255 210 74 / 30%);
|
||||
border-radius: 6px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.recipe-callout {
|
||||
width: fit-content;
|
||||
max-width: min(520px, calc(100% - 44px));
|
||||
margin: 18px auto 0;
|
||||
padding: 14px 18px 14px 22px;
|
||||
border-left: 5px solid var(--blue);
|
||||
border-radius: 8px;
|
||||
/* About two-thirds the width of the recipe screenshot, so the callout
|
||||
reads as a sub-element rather than a full-width banner. Right-aligned
|
||||
to the SCREENSHOT'S right edge: the screenshot is `max-width: 70%`
|
||||
centered, so its right edge sits at the 85% mark of the wrapper, which
|
||||
is 15% from the wrapper's right side. `margin-right: 15%` reproduces
|
||||
that offset, `margin-left: auto` pushes the callout right against it. */
|
||||
max-width: min(240px, calc(100% - 24px));
|
||||
margin: 22px 15% 0 auto;
|
||||
padding: 14px 18px 14px 20px;
|
||||
border-left: 4px solid var(--blue);
|
||||
border-radius: 6px;
|
||||
background: #111111;
|
||||
box-shadow: 0 14px 30px rgb(0 0 0 / 26%);
|
||||
box-shadow: 0 10px 22px rgb(0 0 0 / 22%);
|
||||
}
|
||||
|
||||
.recipe-callout p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
font-size: 17px;
|
||||
font-size: 14px;
|
||||
line-height: 1.55;
|
||||
}
|
||||
|
||||
/* Paragraph chapters inside a callout — when a recipe explains two distinct
|
||||
actions (e.g. Save vs. Save as new), each gets its own paragraph and they
|
||||
are separated by a small gap so they read as visually distinct topics. */
|
||||
.recipe-callout p + p {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.recipe-callout strong {
|
||||
color: var(--text);
|
||||
font-size: 18px;
|
||||
font-weight: 800;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.recipe-callout.amber {
|
||||
|
||||
@@ -1,26 +0,0 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="900" height="600" viewBox="0 0 900 600" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Autosave recovery recipe</title>
|
||||
<desc id="desc">Annotated mock screenshot for recovering from autosaves.</desc>
|
||||
<rect width="900" height="600" fill="#131315"/>
|
||||
<g font-family="Arial, sans-serif">
|
||||
<rect x="82" y="92" width="300" height="396" rx="18" fill="#151515" stroke="#302f2f"/>
|
||||
<text x="112" y="136" fill="#f9fafb" font-size="24" font-weight="700">Load Snapshot</text>
|
||||
<rect x="112" y="176" width="240" height="52" rx="9" fill="#0e0e0e" stroke="#302f2f"/>
|
||||
<text x="136" y="209" fill="#f9fafb" font-size="16">Client_Shot010</text>
|
||||
<rect x="112" y="246" width="240" height="52" rx="9" fill="#0e0e0e" stroke="#302f2f"/>
|
||||
<text x="136" y="279" fill="#f9fafb" font-size="16">Lookdev_HDR</text>
|
||||
<text x="112" y="348" fill="#4268ba" font-size="15" font-weight="700">AUTOSAVES</text>
|
||||
<rect x="112" y="368" width="240" height="52" rx="9" fill="#162556" stroke="#4268ba"/>
|
||||
<text x="136" y="401" fill="#f9fafb" font-size="15">_autosave_periodic_01</text>
|
||||
<path d="M352 394 H548" stroke="#4268ba" stroke-width="4"/>
|
||||
<path d="M548 394 l-18 -12 v24 z" fill="#4268ba"/>
|
||||
<rect x="574" y="296" width="250" height="172" rx="16" fill="#1a1a1f" stroke="#4268ba"/>
|
||||
<text x="602" y="342" fill="#f9fafb" font-size="25" font-weight="700">Recover safely</text>
|
||||
<text x="602" y="384" fill="#707982" font-size="17">Autosaves are kept in the</text>
|
||||
<text x="602" y="410" fill="#707982" font-size="17">same Snapshot library.</text>
|
||||
<text x="602" y="436" fill="#707982" font-size="17">Load one if state was lost.</text>
|
||||
<rect x="574" y="114" width="250" height="122" rx="16" fill="#1a1a1f" stroke="#c9944b"/>
|
||||
<text x="602" y="160" fill="#f9fafb" font-size="25" font-weight="700">Library folder</text>
|
||||
<text x="602" y="202" fill="#707982" font-size="17">Set it per project or facility.</text>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 35 KiB After Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 52 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 61 KiB After Width: | Height: | Size: 58 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 61 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB After Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 68 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 73 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 80 KiB After Width: | Height: | Size: 100 KiB |
@@ -1,37 +1,59 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520" role="img" aria-labelledby="title desc">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="320" viewBox="0 0 1200 320" role="img" aria-labelledby="title desc">
|
||||
<title id="title">Snapshot mental model</title>
|
||||
<desc id="desc">Sidebar state becomes a snapshot file in a library, then can be loaded later.</desc>
|
||||
<rect width="1200" height="520" fill="#131315"/>
|
||||
<g font-family="Arial, sans-serif">
|
||||
<text x="60" y="72" fill="#4268ba" font-size="17" font-weight="700" letter-spacing="2">MENTAL MODEL</text>
|
||||
<text x="60" y="116" fill="#f9fafb" font-size="34" font-weight="700">Snapshot saves the whole project kit.</text>
|
||||
<g transform="translate(72 178)">
|
||||
<rect width="210" height="190" rx="16" fill="#1a1a1f" stroke="#302f2f"/>
|
||||
<desc id="desc">Sidebar state becomes a snapshot file in a library, then can be loaded later. The named file updates only on Save; the autosave refreshes continuously in the background.</desc>
|
||||
<rect width="1200" height="320" fill="#131315"/>
|
||||
<g font-family="Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif">
|
||||
<!-- Header text removed — the outer band's h2 now carries the title. -->
|
||||
|
||||
<!-- Sidebar state (source) — green accent strip, panel bg -->
|
||||
<g transform="translate(72 38)">
|
||||
<rect width="210" height="190" rx="8" fill="#151515" stroke="#302f2f"/>
|
||||
<line x1="2" y1="8" x2="2" y2="182" stroke="#4a8058" stroke-width="4" stroke-linecap="round"/>
|
||||
<text x="24" y="42" fill="#f9fafb" font-size="22" font-weight="700">Sidebar state</text>
|
||||
<text x="24" y="82" fill="#707982" font-size="16">favorite nodes</text>
|
||||
<text x="24" y="112" fill="#707982" font-size="16">workflows / modules</text>
|
||||
<text x="24" y="142" fill="#707982" font-size="16">tags</text>
|
||||
<text x="24" y="142" fill="#707982" font-size="16">custom folders</text>
|
||||
<text x="24" y="172" fill="#707982" font-size="16">user-defined tags</text>
|
||||
</g>
|
||||
<path d="M306 273 H430" stroke="#4268ba" stroke-width="4"/>
|
||||
<path d="M430 273 l-18 -12 v24 z" fill="#4268ba"/>
|
||||
<g transform="translate(456 178)">
|
||||
<rect width="210" height="190" rx="16" fill="#162556" stroke="#4268ba"/>
|
||||
<text x="24" y="42" fill="#f9fafb" font-size="22" font-weight="700">Snapshot file</text>
|
||||
<text x="24" y="82" fill="#707982" font-size="16">Client_Shot010</text>
|
||||
<text x="24" y="112" fill="#707982" font-size="16">portable JSON</text>
|
||||
<text x="24" y="142" fill="#707982" font-size="16">saved on disk</text>
|
||||
|
||||
<!-- Arrow 1 (sidebar -> snapshot): blue, shortened to make room for the
|
||||
wider middle box. -->
|
||||
<path d="M295 133 H375" stroke="#4268ba" stroke-width="4"/>
|
||||
<path d="M375 133 l-18 -12 v24 z" fill="#4268ba"/>
|
||||
|
||||
<!-- Snapshot files (the highlighted middle box) — blue accent + tinted bg.
|
||||
Widened from 210 to 295 to fit the longer autosave path text. Shows
|
||||
actual on-disk naming for both the manual save and the rolling
|
||||
autosave file. -->
|
||||
<g transform="translate(388 38)">
|
||||
<rect width="295" height="190" rx="8" fill="#162556" stroke="#4268ba"/>
|
||||
<line x1="2" y1="8" x2="2" y2="182" stroke="#4268ba" stroke-width="4" stroke-linecap="round"/>
|
||||
<text x="24" y="42" fill="#f9fafb" font-size="22" font-weight="700">Snapshot files</text>
|
||||
<text x="24" y="82" fill="#b8bdc3" font-size="14" font-family="ui-monospace, SFMono-Regular, Consolas, monospace">• Client_Shot010.json</text>
|
||||
<text x="24" y="118" fill="#b8bdc3" font-size="14" font-family="ui-monospace, SFMono-Regular, Consolas, monospace">• Client_Shot010_autosave/</text>
|
||||
<text x="36" y="142" fill="#b8bdc3" font-size="14" font-family="ui-monospace, SFMono-Regular, Consolas, monospace">└ periodic.json</text>
|
||||
</g>
|
||||
<path d="M690 273 H814" stroke="#4a8058" stroke-width="4"/>
|
||||
<path d="M814 273 l-18 -12 v24 z" fill="#4a8058"/>
|
||||
<g transform="translate(840 178)">
|
||||
<rect width="260" height="190" rx="16" fill="#1a1a1f" stroke="#302f2f"/>
|
||||
<text x="24" y="42" fill="#f9fafb" font-size="22" font-weight="700">Project library</text>
|
||||
<text x="24" y="82" fill="#707982" font-size="16">one folder for a show</text>
|
||||
<text x="24" y="112" fill="#707982" font-size="16">or one per client</text>
|
||||
<text x="24" y="142" fill="#707982" font-size="16">load it later</text>
|
||||
|
||||
<!-- Arrow 2 (snapshot -> library): green, shortened to mirror arrow 1. -->
|
||||
<path d="M696 133 H776" stroke="#4a8058" stroke-width="4"/>
|
||||
<path d="M776 133 l-18 -12 v24 z" fill="#4a8058"/>
|
||||
|
||||
<!-- Project library (destination) — green accent strip, panel bg.
|
||||
Shifted left to balance the wider middle box. -->
|
||||
<g transform="translate(789 38)">
|
||||
<rect width="260" height="190" rx="8" fill="#151515" stroke="#302f2f"/>
|
||||
<line x1="2" y1="8" x2="2" y2="182" stroke="#4a8058" stroke-width="4" stroke-linecap="round"/>
|
||||
<text x="24" y="42" fill="#f9fafb" font-size="22" font-weight="700">Custom Folder</text>
|
||||
<text x="24" y="82" fill="#707982" font-size="16">holds multiple snapshots</text>
|
||||
<text x="24" y="112" fill="#707982" font-size="16">quick access with 'Load'</text>
|
||||
<text x="24" y="142" fill="#707982" font-size="16">'Browse' or create 'New folder'</text>
|
||||
</g>
|
||||
<path d="M970 388 V432 H177 V392" fill="none" stroke="#c9944b" stroke-width="4"/>
|
||||
<path d="M177 392 l-12 18 h24 z" fill="#c9944b"/>
|
||||
<text x="418" y="462" fill="#c9944b" font-size="19" font-weight="700">Return to the project without rebuilding your setup</text>
|
||||
|
||||
<!-- Single-line caption — equation-style summary of manual-vs-auto save
|
||||
behaviour. Only "Quick Save / Save" and "Autosave" are amber + bold;
|
||||
the explanatory predicates are muted gray + normal weight so the
|
||||
caption reads as labels rather than a heavy banner. Interval mirrors
|
||||
snapshot.js (`startPeriodicAutosave` intervalMs default = 5 min). -->
|
||||
<text x="600" y="280" font-size="15" text-anchor="middle"><tspan fill="#c9944b" font-weight="700">Quick Save / Save</tspan><tspan fill="#a0a4ab" font-weight="400"> = updates the main snapshot file. </tspan><tspan fill="#c9944b" font-weight="700">Autosave</tspan><tspan fill="#a0a4ab" font-weight="400"> = saves the current state every 5 minutes.</tspan></text>
|
||||
</g>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 4.2 KiB |
+66
-49
@@ -50,11 +50,11 @@ SPDX-License-Identifier: GPL-3.0-only
|
||||
</article>
|
||||
<article class="overview-callout nodes">
|
||||
<h3>Nodes action bar</h3>
|
||||
<p>Switch tree or list view, then add a favorite node.</p>
|
||||
<p>Arrange nodes by Git repo name or theme, and add favorite nodes to the side panel.</p>
|
||||
</article>
|
||||
<article class="overview-callout workflows">
|
||||
<h3>Workflows action bar</h3>
|
||||
<p>Save the canvas or selected nodes, then browse saved workflows.</p>
|
||||
<p>Save the entire canvas or selected nodes.</p>
|
||||
</article>
|
||||
<article class="overview-callout saved">
|
||||
<h3>Saved lists</h3>
|
||||
@@ -69,14 +69,22 @@ SPDX-License-Identifier: GPL-3.0-only
|
||||
<section class="band">
|
||||
<div>
|
||||
<p class="eyebrow">Most important idea</p>
|
||||
<h2>Snapshot = your project kit</h2>
|
||||
<h2>Snapshot saves the whole project kit.</h2>
|
||||
</div>
|
||||
<p>A Snapshot saves Kforge Labs state: favorite nodes, saved workflows, modules, tags, archive, and the current sidebar organization. Use one named snapshot per project, shot, client, or experiment.</p>
|
||||
<p>A snapshot saves your favorite nodes, workflows, modules, tags, and the current sidebar organization. Use one named snapshot per project, shot, client, or experiment.</p>
|
||||
<figure class="visual full">
|
||||
<img src="./img/snapshot-flow.svg" alt="Snapshot flow from sidebar state to saved file to project library and later reload">
|
||||
</figure>
|
||||
</section>
|
||||
|
||||
<section class="band band-text">
|
||||
<div>
|
||||
<p class="eyebrow">Two-layer save</p>
|
||||
<h2>Save when you mean it. Auto-save catches the rest.</h2>
|
||||
</div>
|
||||
<p>Your named snapshot only changes when you click <strong>Save</strong> or <strong>Quick Save</strong>. Auto-save runs every 5 minutes in the background — but only when something has actually changed — and writes a separate recovery copy under <code><snapshot>_autosave/</code>. If you load a snapshot whose auto-save is newer than the saved version, Kforge Labs asks YES (load auto-save) or NO (load saved version). Every Load also writes a pre-load recovery file first, so destructive Loads are reversible from the Recovery section.</p>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<div class="section-copy">
|
||||
<p class="eyebrow">Project rhythm</p>
|
||||
@@ -100,52 +108,52 @@ SPDX-License-Identifier: GPL-3.0-only
|
||||
<article>
|
||||
<h3>Snapshots</h3>
|
||||
<p>Save and reload the whole project kit.</p>
|
||||
<div class="function-list" aria-label="Snapshot functions">
|
||||
<span>Load</span>
|
||||
<span>Quick Save</span>
|
||||
<span>Save</span>
|
||||
<span>Settings</span>
|
||||
</div>
|
||||
<ul class="function-list" aria-label="Snapshot functions">
|
||||
<li>Load</li>
|
||||
<li>Quick Save</li>
|
||||
<li>Save</li>
|
||||
<li>Settings</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Nodes</h3>
|
||||
<p>Keep favorite nodes organized and easy to update.</p>
|
||||
<div class="function-list" aria-label="Node functions">
|
||||
<span>Search</span>
|
||||
<span>Add</span>
|
||||
<span>Remove</span>
|
||||
<span>Group</span>
|
||||
</div>
|
||||
<ul class="function-list" aria-label="Node functions">
|
||||
<li>Search</li>
|
||||
<li>Add</li>
|
||||
<li>Remove</li>
|
||||
<li>Smart view</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Search</h3>
|
||||
<p>Find saved work from one field. Tags keep exact capitalization.</p>
|
||||
<div class="function-list" aria-label="Search functions">
|
||||
<span>Nodes</span>
|
||||
<span>Workflows</span>
|
||||
<span>Folders</span>
|
||||
<span>Tags</span>
|
||||
</div>
|
||||
<p>Find by name, repo, or tag — partial matches OK.</p>
|
||||
<ul class="function-list" aria-label="Search functions">
|
||||
<li>Nodes</li>
|
||||
<li>Workflows</li>
|
||||
<li>Folders</li>
|
||||
<li>Tags</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Workflows</h3>
|
||||
<p>Save full scripts or reusable node selections.</p>
|
||||
<div class="function-list" aria-label="Workflow functions">
|
||||
<span>Save script</span>
|
||||
<span>Save selection</span>
|
||||
<span>Load</span>
|
||||
<span>Insert module</span>
|
||||
</div>
|
||||
<ul class="function-list" aria-label="Workflow functions">
|
||||
<li>Save script</li>
|
||||
<li>Save selection</li>
|
||||
<li>Load</li>
|
||||
<li>Insert module</li>
|
||||
</ul>
|
||||
</article>
|
||||
<article>
|
||||
<h3>Safety / setup</h3>
|
||||
<p>Quiet helpers protect projects and make saved kits portable.</p>
|
||||
<div class="function-list" aria-label="Safety and setup functions">
|
||||
<span>Autosaves</span>
|
||||
<span>Missing packs</span>
|
||||
<span>Starter preset</span>
|
||||
<span>Library folder</span>
|
||||
</div>
|
||||
<h3>Smart organization</h3>
|
||||
<p>Reshape your saved work folders, drag-drop, and move.</p>
|
||||
<ul class="function-list" aria-label="Organization functions">
|
||||
<li>Create folders</li>
|
||||
<li>Drag and drop</li>
|
||||
<li>Move setups</li>
|
||||
<li>Rename or archive</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
@@ -160,7 +168,8 @@ SPDX-License-Identifier: GPL-3.0-only
|
||||
<span class="focus-dot focus-save" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="recipe-callout blue" aria-label="Save snapshot notes">
|
||||
<p><strong>Save</strong> updates the current project kit. <strong>Save as new</strong> creates another named snapshot.</p>
|
||||
<p><strong>Save</strong> updates the current project kit.</p>
|
||||
<p><strong>Save as new</strong> creates another named snapshot.</p>
|
||||
</div>
|
||||
<figcaption>Save the current sidebar state as a named project snapshot.</figcaption>
|
||||
</figure>
|
||||
@@ -170,7 +179,8 @@ SPDX-License-Identifier: GPL-3.0-only
|
||||
<span class="focus-dot focus-load" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="recipe-callout blue" aria-label="Load snapshot notes">
|
||||
<p><strong>Snapshot row</strong> restores that saved project kit. <strong>Recovery auto-saves</strong> are available below saved snapshots.</p>
|
||||
<p><strong>Load snapshot</strong> row restores that saved project kit.</p>
|
||||
<p><strong>Recovery auto-saves</strong> are available below.</p>
|
||||
</div>
|
||||
<figcaption>Load a snapshot when you switch projects or return to a shot.</figcaption>
|
||||
</figure>
|
||||
@@ -180,7 +190,8 @@ SPDX-License-Identifier: GPL-3.0-only
|
||||
<span class="focus-dot focus-module" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="recipe-callout amber" aria-label="Save selected nodes as module notes">
|
||||
<p><strong>Workflow save-selection</strong> is the bottom-right workflow action. Use it after selecting nodes on the canvas.</p>
|
||||
<p><strong>Save</strong> saves the entire canvas under the workflows tree.</p>
|
||||
<p><strong>Save selection</strong> stores only the selected canvas nodes. Tag it with 'Module' to insert it back into another canvas later.</p>
|
||||
</div>
|
||||
<figcaption>Save selected nodes as a module, then insert that module into another canvas.</figcaption>
|
||||
</figure>
|
||||
@@ -190,23 +201,29 @@ SPDX-License-Identifier: GPL-3.0-only
|
||||
<span class="focus-dot focus-node-search" aria-hidden="true"></span>
|
||||
</div>
|
||||
<div class="recipe-callout green" aria-label="Node search notes">
|
||||
<p><strong>Node search</strong> narrows favorites so useful nodes are easier to scan and add.</p>
|
||||
<p><strong>Search</strong> narrows displayed items so useful nodes and workflows are easier to find.</p>
|
||||
</div>
|
||||
<figcaption>Search narrows the Nodes list so useful favorites are easier to scan and add.</figcaption>
|
||||
</figure>
|
||||
<figure class="visual recipe-real">
|
||||
<div class="recipe-shot">
|
||||
<img src="./img/screenshots/search-B.png" alt="Search results showing matching nodes and workflows">
|
||||
<span class="focus-dot focus-workflow-search" aria-hidden="true"></span>
|
||||
<img src="./img/screenshots/right-click-functions.png" alt="Right-click context menu on a saved workflow showing available actions">
|
||||
</div>
|
||||
<div class="recipe-callout purple" aria-label="Workflow search notes">
|
||||
<p><strong>One search field</strong> finds nodes and workflows, including saved workflows found through tags.</p>
|
||||
<div class="recipe-callout purple" aria-label="Right-click actions notes">
|
||||
<p><strong>Right-click</strong> any saved workflow or module for a full action menu.</p>
|
||||
<p><strong>Load</strong>, rename, retag, move between folders, or archive — all without leaving the sidebar.</p>
|
||||
</div>
|
||||
<figcaption>Search finds both nodes and workflows from the same field, including saved workflows found through tags.</figcaption>
|
||||
<figcaption>Manage saved workflows and modules directly from the right-click menu.</figcaption>
|
||||
</figure>
|
||||
<figure class="visual">
|
||||
<img src="./img/autosave-recovery.svg" alt="Annotated mockup showing autosave recovery">
|
||||
<figcaption>If something goes sideways, load an autosave from the Snapshot Load dialog.</figcaption>
|
||||
<figure class="visual recipe-real">
|
||||
<div class="recipe-shot">
|
||||
<img src="./img/screenshots/folder-actions.png" alt="Sidebar showing folder actions — create, rename, delete, drag-and-drop">
|
||||
</div>
|
||||
<div class="recipe-callout green" aria-label="Folder actions notes">
|
||||
<p><strong>Create</strong> or <strong>delete</strong> folders to shape your library.</p>
|
||||
<p><strong>Drag and drop</strong> to rearrange items between folders.</p>
|
||||
</div>
|
||||
<figcaption>Organize your saved kit with folders — group, rename, or rearrange anytime.</figcaption>
|
||||
</figure>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user