{{ item.summary }}
-
- Implementation notes
-
-{{ item.detail }}
-Keep the main action close to its publishing choices.
-{{ message }}
-Build something worth sharing.
-{{ summary }}
-Inbox preview
{{ message }}
-Destination: {{ href }} · Target: {{ target }} · Rel: {{ effectiveRel }}
{{ feedback }}
-Add up to {{ limit }} items. Remove one or start over.
-{{ summary }}
-{{ message }}
-Try every supported tone. Info and success last 5 seconds, warning lasts 10; all others stay until dismissed.
-LIVE PREVIEW · WEEKLY BALANCE
-Blank bounds use the data range. The scale always includes zero and every value. On narrow screens, scroll the preview horizontally to keep its labels readable.
-LIVE PREVIEW · PARTS OF A WHOLE
-Enable a positive segment or choose another distribution.
-Only finite, positive values contribute. Hide a segment to recalculate the total and shares; its color stays attached when restored.
-Thickness and gap use the 100-unit SVG canvas and are clamped to the ranges above. Gaps shrink around tiny slices. Size fits the available preview width.
-Largest share is calculated from the visible values. Custom copy changes only the text. Font sizes scale with the SVG; thick rings and long labels need smaller type. This demo clears center copy when the total is zero.
-LIVE PREVIEW · SERIES COMPARISON
-Blank bounds use the data range. Bounds always expand to include zero and all visible points. Scroll the preview horizontally on narrow screens.
-{{ item.summary }}
-{{ item.detail }}
-LIVE PREVIEW · ACTIVITY FEED
-Mounted rows
- {{ mountedRows }} -Positions
- {{ rowRange }} -Row heights
- {{ measuredRange }} -Scroll height
- {{ scrollExtent }} px -- Expand a row or narrow the feed. The row height is measured from its - content; it is not fixed to the initial estimate. -
-- The counters inspect mounted rows. Scroll height includes estimates for - unseen rows and can change as you browse. Search, dataset, width and - estimate changes restart measurement from the top; expanded state stays on - each record. -
-{{ item.body }}
-{{ item.summary }}
-{{ item.detail }}
-LIVE PREVIEW · REVIEW TABLE
-Mounted rows
- {{ mountedRows }} -Positions
- {{ rowRange }} -Row heights
- {{ measuredRange }} -Scroll height
- {{ scrollExtent }} px -- Expand a review or change the summary width. Each row is measured after - its text wraps. The header and footer stay visible; wide columns scroll - inside this region. -
-- The counters inspect mounted rows. Scroll height includes estimates for - unseen rows and can change as you browse. Search, sort, dataset, width and - estimate changes restart measurement from the top; expanded state stays on - each record. -
-{{ item.detail }}
-LIVE PREVIEW · RELEASE QUEUE
-Rows mounted
{{ mountedRows }}Mounted positions
{{ mountedRange }}Scroll offset
{{ scrollOffset }} pxFocus the list and use Arrow keys or Page Up / Page Down to scroll. Counters show real mounted rows, including the overscan buffer.
-Increasing the viewport or overscan mounts more rows. Changing the row height also changes the scroll distance. Each row fills its fixed-height wrapper, so the geometry stays aligned.
-Check a task, jump to the last row, then return to the first. Your selection survives the row being removed and mounted again.
-LIVE PREVIEW · RELEASE TABLE
-Data rows mounted
- {{ mountedRows }} -Positions
- {{ rowRange }} -Scroll offset
- {{ scrollOffset }} px -- The header and footer stay visible while data rows scroll. Focus the - region for keyboard scrolling; wide content scrolls horizontally inside - it. -
-- Fixed layout uses the viewport width and the column group. Auto layout - follows content width. Cell content stays on one line so each data row fits - its configured height. -
-onSearch: {{ searchActivity || '(empty query)' }}
-{{ activity }}
-Build with typed components, a shared theme and a little less ceremony.
Hi Alex,
Thanks for trying the preview. Your feedback helped us improve keyboard navigation and the new component guides.
Can we use the same theme across the whole app?
Yes. Components inherit the active skin, so your interface stays consistent.
Best,
The PureStack team
A draft, two live outputs
-Model inspector
-{{ messageText || 'The draft is empty.' }}
- {{ messageHtml || 'The draft is empty.' }}These values update as you type. The HTML source button in the editor lets you edit the markup itself.
-Draft workspace
-Open the editor, make a change, then save or restore the draft.
-Saved plain-text copy
-{{ savedText }}
-The snapshot stays in this example's memory. Reloading the page resets it.
-The preview is ready for review.
Next: test the keyboard flow and share your notes.
', - ) - const messageHtml = ref(initial) - const messageText = ref('') - const savedHtml = ref(initial) - const savedText = ref( - 'The preview is ready for review.\nNext: test the keyboard flow and share your notes.', - ) - const editing = ref(false) - const status = ref( - 'Open the editor to continue. Focus moves to the start of the draft.', - ) - return { - messageHtml, - messageText, - savedHtml, - savedText, - editing, - status, - dirty: computed(() => messageHtml() !== savedHtml()), - open: () => { - editing(true) - status('Editing. Save captures both HTML and plain text.') - }, - save: () => { - if (!messageText().trim()) return - savedHtml(messageHtml()) - savedText(messageText()) - status('Snapshot saved. You can keep editing or close the editor.') - }, - restore: () => { - messageHtml(savedHtml()) - status('Restored the saved snapshot.') - }, - } -} - -const composerDraftWorkflow = defineComponentInline image lab
-Add an image to see its file and content ID.
-cid:{{ attachment.contentId }}
- {{ messageHtml }}You can also paste or drop image files into the editor. This example appends them to the message. PNG, JPEG, WebP and GIF files up to 5 MB each are accepted.
-A little more than words.
Add a product image, screenshot or the demo logo below.
', - ), - ) - const previewUrls = srefChoose a suggestion to give it a success tone. New tags use lowercase values and a feature tone. Paste tags separated by commas, semicolons, pipes, or newlines.
-One component, three styling surfaces
-PureStack Studio
Release overview
Content, components and a shared theme, ready to publish together.
-Ready to publish
Light and dark
Content checks
Build pipeline
Project access
Designers review the preview. Developers own the components. Editors keep the content current.
-Selected: {{ selected }}
Current settings
-{{ configuration }}Local release draft
Your draft stays mounted when you switch panes. Changes are stored in this demo until the page reloads.
-Ready for review
Channel: {{ channel }}
-No saved drafts yet. Name a release, review it, then save it here.
-Shared selection: {{ selected }}
{{ topic.eyebrow }}
{{ topic.description }}
-{{ selected }}On a desktop viewport, narrow the container and use More tabs. At 640px viewport width or below, the native selector replaces the row. Billing remains disabled in either control.
-Components, theme styles and content live together in the project.
-This pane overrides its tone, surface and control treatment. Its inner tabs have their own selection.
-Share the preview with your team before publishing.
The approved release is available to everyone.
Resource: {{ resource }} · Environment: {{ environment }}
INDEPENDENT BROWSER APP
{{ note || 'No review note yet.' }}
-Original Studio identity
-The original container, letter spacing, icon and responsive sizes. Switch the site theme to compare both skins.
-Palette: 0 = subtle text, 1 = normal text, 2 = accent, 3 = white. Each digit colors one non-space character; the final digit repeats.
-siteConfig.json · logo
-{{ source }}- Links stay in the playground: choose one to make it the current page. -
-A table of contents points to real section IDs.
-Keep headings descriptive and ordered.
-- Open the account menu. These custom destinations are documentation links; this - preview does not sign you in. -
` - -async function createSignInPreviewDocument(site: SiteConfig): PromiseYour brand, your presentation
-Switch the site theme to see the same logo in light and dark.
-Live configuration
-{{ configSource }}Navigation
-A quiet horizontal signature.
-Brand badge
-A contained identity for cards and embeds.
-Centered signature
-Wordmark
-Typography with a theme-aware accent.
-Compact marks
-Full accessible names, even without a wordmark.
-Custom artwork
-- A complete header in its own document. The logo links home and the theme control - changes this preview. -
` - -async function createTopBarPreviewDocument(site: SiteConfig): PromiseLink pages and sections relative to your file, and let every build check them.
Show code in a page, or import it from a file so it always matches the source.
+Write a passage once and show it on every page it belongs to.
+Find component source, complete props and frontmatter, and format markup on save.
diff --git a/frontend/purestack.studio/guides/purestack-cli.mdx b/frontend/purestack.studio/guides/purestack-cli.mdx index 4ac80839..eddf582b 100644 --- a/frontend/purestack.studio/guides/purestack-cli.mdx +++ b/frontend/purestack.studio/guides/purestack-cli.mdx @@ -84,7 +84,7 @@ Routes follow filenames and folders: `guide/index.md` and `guide/guide.mdx` are alternative names for the same route; do not keep both. The build reports duplicate routes as an error. Page frontmatter supplies a page's title, description, template, navigation order, and layout choices. If a page omits `template`, PureStack uses the documentation template. -Files such as `assets/logo.png` are copied into the output folder with their relative paths intact. The root `siteConfig.json` and navigation files are inputs to the build, not public assets. You can place `_nav.json` in a folder for custom or hybrid navigation, and `header.mdx` or `footer.mdx` for shared page sections. The [Site configuration guide](/guides/site-config/) shows how to enable and order navigation. +Files such as `assets/logo.png` are copied into the output folder with their relative paths intact. The root `siteConfig.json` and navigation files are inputs to the build, not public assets. You can place `_nav.json` in a folder for custom or hybrid navigation, and `header.mdx` or `footer.mdx` for shared page sections. The [Site configuration guide](/guides/site-config/) shows how to enable and order navigation. A Markdown or MDX file whose name, or a folder above it, starts with `_` is never a page; pages show it with [`