diff --git a/blog/2026-10-07-Release-5.5/capture-notes.txt b/blog/2026-10-07-Release-5.5/capture-notes.txt new file mode 100644 index 00000000..e1da506c --- /dev/null +++ b/blog/2026-10-07-Release-5.5/capture-notes.txt @@ -0,0 +1,59 @@ +Phoenix Code 5.5 — local demo captures +Captured 2026-10-11 in the connected native Linux app. + +All visible project content belongs to the isolated, fictional Field Studio sample. +The user's default project and its files are excluded. No assets have been uploaded. +The sample page is in samples/field-studio/. + +LIVE PREVIEW — TRY THE OPTIONS ON YOUR PAGE +Recommended still: screenshots/live-preview-color-story.png (Lilac selected) +Alternatives: screenshots/live-preview-forest.png, screenshots/live-preview-apricot.png +Animation: screenshots/live-preview-color-story.gif +Suggested caption: Try a color direction on your page before making it part of your code. +Suggested alt text: Phoenix AI's custom palette picker beside a studio website, with +miniature Forest, Apricot and Lilac designs and the selected palette applied to Live Preview. + +The custom picker was generated by Opus 5.5. Each captured choice was clicked through +the real question UI. Its CSS changed the live page; the page's source files stayed +byte-for-byte unchanged. Three parameter aliases in the generated preview template +were aligned before capture. The normalized picker specification is saved in +samples/live-preview-picker.json. The question was moved into the open sidebar area +so its controls and the whole page could be seen together. + +Prompt: +Help me explore the color direction for this studio site. Design a beautiful interactive +palette picker titled “Find your color story”: Forest, Apricot, and Lilac. Show three +miniature page designs and their color strips side by side, with a short mood label each. +Let me try the palettes on the actual page in Live Preview before changing any code. +Make the picker about 540px wide. + +CHAT — INTERACTIVE REPLIES +Recommended still: screenshots/interactive-chat-playground.png (full app) +Alternative: screenshots/interactive-chat-poster.png +Detail: screenshots/interactive-chat-detail.png +Animation: screenshots/interactive-chat-playground.gif +Suggested caption: Explore layouts, colors and typography in an interactive AI reply. +Suggested alt text: An interactive hero playground in Phoenix AI chat, with layout tabs, +palette swatches and a headline-size slider changing a creative studio mockup. + +The playground was generated by Opus 5.5 and exercised through its real controls: +Editorial / Clay / 36px, Split / Midnight / 42px, and Poster / Bloom / 48px. +The generated sample's heading, available width and control-label spacing were refined +for capture. No application code changed. A restorable rich-content snapshot, including +the generated HTML, CSS, script and selected state, is in samples/chat-playground.json. +The full-app stills show chat alongside the unchanged page. The GIF focuses on the +interactive reply so its controls remain readable at a small file size. + +Prompt: +Show me an interactive hero-design playground in this chat. I want to switch between +Editorial, Split, and Poster layouts, try a few color palettes, and adjust the headline +size. Use a beautiful creative-studio mockup so I can see every change. Keep it compact +and let me play with the design without changing my page. + +Full-app PNG files retain the 1920 × 1044 capture; the chat detail is 664 × 613. +The Live Preview GIF is 1152 × 626, 149,642 bytes (149.6 KB). +The chat GIF is 664 × 613, 51,912 bytes (51.9 KB). +The Live Preview GIF alternates between Forest and Lilac, pausing 2.6 seconds on each. +The chat GIF loops through three states, pausing 2.1 seconds on each. Both are below 150 KB. +GIF timing is edited; every visual state is captured from the running app. +No graphical callouts or generated imagery were composited over the screenshots. diff --git a/blog/2026-10-07-Release-5.5/index.md b/blog/2026-10-07-Release-5.5/index.md index 3ec71819..4bb2d338 100644 --- a/blog/2026-10-07-Release-5.5/index.md +++ b/blog/2026-10-07-Release-5.5/index.md @@ -1,133 +1,124 @@ --- slug: release-5.5 -title: "Phoenix Code 5.5: Layers Panel, AI Panel & More" -description: "Phoenix Code 5.5 adds the Layers Panel, a new AI panel, Claude Code CLI and Codex CLI inside the editor, Ask AI from the Live Preview and the editor, and upgrades to the terminal, Git, and code intelligence." -authors: [arun, charly, devvaannsh, electrofist, ansu, phoenixBot] -tags: [Layers Panel, AI, Claude Code, Codex, Live Preview Edit, Styles Bar, Terminal, Git, Code Intelligence, Phoenix Pro, Windows, Linux, Mac, Release] +title: "Phoenix Code 5.5.6: Layers, Visual AI & ChatGPT Codex" +description: "See and edit your page’s HTML structure, try design ideas with Phoenix AI, and bring ChatGPT Codex and Claude Code CLI into a visual workflow. Plus simpler AI setup, demos, usage graphs, and photo search." +authors: [arun, devvaannsh] +tags: [Live Preview Edit, AI, Claude Code, Git, Phoenix Pro, Windows, Linux, Mac, Release] --- -import React from 'react'; -import VideoPlayer from '@site/src/components/Video/player'; +Phoenix Code 5.5.6 is now available at [phcode.dev](https://phcode.dev). -Phoenix Code 5.5 is now available at [phcode.dev](https://phcode.dev). +See and edit your HTML with the new [Layers panel](#explore-your-page-with-layers), [try AI design ideas on your page](#try-the-options-on-your-page), [explore interactive replies in chat](#interactive-replies-in-chat), and [bring your existing CLI agents into Phoenix Code](#bring-your-existing-cli-agents-into-phoenix-code). There’s also [simpler AI setup](#simpler-ai-setup), [AI demos](#ai-demos), [usage graphs](#ai-usage-graphs), [thinking effort](#choose-how-much-ai-thinks), and [photo search](#find-the-right-photo-with-ai). -This release brings the [Layers Panel](#layers-panel), a [new AI panel](#a-new-ai-panel), [more ways to use AI](#more-ways-to-use-ai), and upgrades to [Live Preview Edit](#live-preview-edit-improvements), the [terminal](#terminal-improvements), [Git](#git-see-what-is-pushed), and [code intelligence](#editor-improvements). +## Explore your page with Layers -## Layers Panel +See and edit your page’s HTML structure in the new **Layers** sidebar, with changes synced to your code and Live Preview. Select an element in the panel to find it on the page, or select it on the page to see its place in the HTML structure. -The new **Layers** tab shows your page as a tree. Click a row to select the element, then edit its tag, classes, attributes, and styles right in the sidebar. Drag rows to move things around, and insert, duplicate, or delete elements without touching the code. +Rearrange elements by dragging, insert something new, duplicate a section, or cut and paste it elsewhere. Edit tags, IDs, classes, and attributes in the Properties section, with code hints as you type. Your edits go straight back to the source. -The Styles section lists every rule that applies to the element, shows which values are overridden and by what, and lets you edit them in place. [Read More...](https://docs.phcode.dev/app-links/layers-panel) +The Styles section shows the CSS rules behind the selected element. Change a value, add a declaration, pick a color, or drag a number to adjust it while watching the page. You can copy and paste CSS properties, open a rule in the editor, or send it to the Styles Bar for visual editing. - +If a style isn’t showing up, you can see why and find the style being used instead. Hidden elements report why they are hidden. The tree can also show elements created by JavaScript; these are marked so you can distinguish them from elements in your HTML source. -## A new AI panel +Search the tree, navigate with the keyboard, and resize or collapse each section to fit the way you work. Layers also works with Live Preview opened in a separate browser window. -Claude Code now comes built in. Sign in and start chatting, with nothing to install. +> The Layers panel is included with Phoenix Pro. -The new chat shows you what the AI is doing as it works, and every change it makes can be undone with one click. You decide how much it can do on its own. New to AI? Click **Surprise Me** on the start screen to watch a demo first. +## Point to it and Ask AI -Free accounts get a daily and monthly chat limit. Phoenix Pro removes the limits. [Read More...](https://docs.phcode.dev/app-links/ai-chat) +Select an element in Live Preview and click **Ask AI**. The question carries a screenshot and an element reference, so a request like “give this card more breathing room” has the context it needs. - +You can also select code in the editor or text in the Markdown preview and ask about that selection. Keep the conversation beside your work in a movable composer, add more context, or attach an image from the clipboard. -## More ways to use AI +Send the question to Visual AI, or transfer the draft and its attachments to a connected ChatGPT Codex or Claude Code CLI session. In a CLI session, you review the transferred draft and press Enter to submit it. -### Claude Code CLI and Codex CLI inside the editor +## Try the options on your page -Already use **Claude Code** or **Codex**? Run them inside the AI panel. They see the file you are editing, your unsaved changes, and the Live Preview, and they can take screenshots and open files. [Read More...](https://docs.phcode.dev/app-links/ai-cli) +Phoenix AI can create interactive questions around the design you are exploring, with choices and controls you can try on your page. Compare layouts, colors, and styles in Live Preview before choosing what goes into your code. The AI can shape the question and its controls to suit the idea you are working on. - +Hover over an option for a temporary preview. Click it to keep that preview and put the choice in the reply box. You can continue comparing options or write your own answer; **Send** confirms your choice for the AI to apply to the source. -> Running the CLIs inside the panel is a Phoenix Pro feature. +## Interactive replies in chat -### Ask AI in the Live Preview +Phoenix AI can create interactive mockups, comparisons, and explanations in the chat. Click through options and adjust controls to explore an idea, instead of piecing it together from a text description. You can use these visuals even without a page open in Live Preview. -Select an element and click **Ask AI**. A screenshot of the element and its place in the code go with your question. The AI can ask you back the same way, with a card inside the Live Preview and options you can preview on the page. [Read More...](https://docs.phcode.dev/app-links/ai-ask) +Explore the result and use **See code** to inspect or copy the code behind it. Connected CLI sessions can present interactive questions in their own pane too. - +## Bring your existing CLI agents into Phoenix Code -### Ask AI in the editor +Bring your existing agents into Phoenix Code and give them a visual way to work with you. **ChatGPT Codex** and **Claude Code CLI** gain tools to prototype designs in Live Preview, show interactive choices, and ask questions on your page—so you can see, try, and refine ideas instead of just reading descriptions. -Select some code and click **Ask AI** on the small toolbar that appears. The AI reads exactly those lines, unsaved changes included. The same button appears on selected text in the Markdown preview. [Read More...](https://docs.phcode.dev/app-links/ai-ask) +Connected agents can work with the file you are editing, your unsaved text, Live Preview, and the Problems panel. They can take screenshots, open files, and help you find the right photos for your design. - +Keep multiple named sessions running, switch between them, and stop or restart each one independently. The start screen shows your running sessions so you can return to the work you need. -### Find photos +> Embedded CLI sessions are a Phoenix Pro feature in the desktop apps. -Ask the AI for a picture and it searches Unsplash. Pick one and it goes on your page. [Read More...](https://docs.phcode.dev/app-links/ai-images) +## AI usage graphs - +See your AI usage across Phoenix AI, ChatGPT Codex, and Claude Code CLI sessions in Phoenix. Track tokens, estimated costs, and model breakdowns, with daily activity graphs and monthly history. -## Live Preview Edit improvements +Check the usage meter for the current chat, or open the usage card to explore your activity over time. You can also delete usage history for a chosen period while keeping your conversations. -- **Script-generated elements** now get a Control Box. Select them and edit their CSS rules in the Styles Bar. -- **Hidden elements**: Select something you cannot see and Phoenix Code tells you why. -- **Styles Bar toggle**: Turn the bar on and off with the **palette** button in the Control Box. -- **More colors**: `oklch()`, `lab()`, and `color()` values open in the color picker. +Cost figures are estimates at API list prices. Your subscription or provider bill may differ; these figures are not an additional charge from Phoenix Pro. -[Read More...](https://docs.phcode.dev/app-links/live-preview-edit) +## Simpler AI setup -![Control Box on a script-generated element](./script-element-control-box.png) +Get from signing in to creating with AI more easily, with guided setup in Phoenix Code. The start screen brings Phoenix AI, ChatGPT Codex, and Claude Code CLI together and helps you get started with the way you want to work. -## Terminal improvements +Conversations are easier to follow too: completed tool calls fold into compact groups that list the files read or changed. A single **+** menu brings together files, folders, and screenshots, while chat history shows session titles and prompts to help you find earlier work. -Give your terminal tabs names. Hover a tab, click the pencil, and type. Named tabs come back the next time the panel opens. +## AI demos -When you switch projects, the banner now has a one-click **Restart All Terminals**. Links in the output open in your browser. [Read More...](https://docs.phcode.dev/app-links/terminal) +See what you can create with Phoenix AI before signing in or using any AI credits. Watch a page take shape, explore the result, and reveal the prompt behind it. Click **Surprise Me** to try it. -![Renaming a terminal tab](./terminal-rename.png) +After the demo, you can explore another example or start creating something of your own. -## Git: see what is pushed +## Choose how much AI thinks -The history view now marks the last pushed commit with the remote branch name. Everything above it is not pushed yet. [Read More...](https://docs.phcode.dev/app-links/git) +The new **Thinking effort** control lets you choose how much reasoning Visual AI uses on models that support it. Pick a lower effort for a quick task or a higher effort for a harder problem, or leave it at Default. Phoenix shows the choices supported by the selected model. -![Pushed and unpushed commits in the history](./history-push-state.png) +> Visual AI, Ask AI, interactive AI content, and AI usage tools are available in the desktop apps. -## Editor improvements +## Find the right photo with AI -**Go to Definition** now shows a picker when a symbol has more than one definition, with a preview of each one. [Read More...](https://docs.phcode.dev/app-links/code-intelligence) +Find the right photos for your page together with AI. Browse and compare options in an interactive gallery, refine the search, and choose what fits your design. Open a photo for a closer look or select several to use together. -![Choosing between several definitions](./definition-picker.png) +Use the photos on your page or download them into your project. Downloads appear in the file tree, ready for your next edit. -Type the first letters of `function` or `arrow` in JavaScript and TypeScript, `function` in PHP, or `def` in Python to get a ready-made snippet. Your own snippets can now have default text in a placeholder, like `${1:name}`. [Read More...](https://docs.phcode.dev/app-links/custom-snippets) +## A closer look at Markdown images and larger media -## Notable changes and fixes +Images in Markdown now open in a larger lightbox. In reader mode, click an unlinked image; while editing, use its expand button or double-click. Press Escape to return to the document. -- The browser app now lives at [web.phcode.dev](https://web.phcode.dev). Your projects, settings, and extensions from phcode.dev are copied over on first open. ([#3125](https://github.com/phcode-dev/phoenix/pull/3125), [#3139](https://github.com/phcode-dev/phoenix/pull/3139)) -- Files with a UTF-16 byte order mark, and HTML, PHP, and XML files that declare a charset, now open in the right encoding. ([#3108](https://github.com/phcode-dev/phoenix/pull/3108)) -- Video and audio files of any size play in the desktop app. ([#3235](https://github.com/phcode-dev/phoenix/pull/3235)) -- Admins can point the desktop app at their own update server. See [Managing App Updates](https://docs.phcode.dev/docs/managed-updates). ([#3181](https://github.com/phcode-dev/phoenix/pull/3181)) -- A Claude Code installed anywhere on your machine is found on its own, or pick a specific copy in AI Settings. ([#3190](https://github.com/phcode-dev/phoenix/pull/3190)) -- Beautify on save no longer shows an error for file types without a formatter. ([#3109](https://github.com/phcode-dev/phoenix/pull/3109)) -- Fixed the sidebar resizer showing up in the editor area. ([#3133](https://github.com/phcode-dev/phoenix/pull/3133)) -- Fixed submenus hidden behind the central control bar. ([#3134](https://github.com/phcode-dev/phoenix/pull/3134)) -- Terminal scrollbars now match the rest of the editor. ([#3203](https://github.com/phcode-dev/phoenix/pull/3203)) +Desktop video and audio previews now stream files instead of loading the whole file into the editor. This removes the previous 16 MB preview limit on desktop and lets you seek through larger recordings without keeping a full copy in the page's memory. -## Performance & Stability +## Terminal and Git improvements -- Live Preview highlighting is faster on large pages. ([#3188](https://github.com/phcode-dev/phoenix/pull/3188)) -- Live Preview reconnects on its own after a dropped connection. ([#3255](https://github.com/phcode-dev/phoenix/pull/3255)) -- Command-line tools launch more reliably in the terminal. ([#3199](https://github.com/phcode-dev/phoenix/pull/3199)) +- **Name your terminals.** Rename terminal tabs so you can tell your development server, build, and shell apart. +- **Keep your bearings after a project switch.** A notice lets you keep existing terminals running or restart them in the new project's folder, with confirmation when active processes would be stopped. +- **Open terminal links.** Applications that print clickable terminal hyperlinks can now open them in your default browser. +- **See what has been pushed.** Git history marks the last pushed commit and identifies the local commits above it. Branches that have not been pushed get a clear indication too. +- **Open projects without Git interruptions.** Projects without a repository no longer trigger a “getting remotes” error dialog. -## Platform Notes +## Notable fixes and performance improvements -### Windows +- Fixed a race where a delayed file reload could overwrite text typed or saved while the reload was in progress. ([Change](https://github.com/phcode-dev/phoenix/commit/e00a5a588)) +- Fixed stale Markdown preview updates reverting newer edits made in the code editor. ([Change](https://github.com/phcode-dev/phoenix/commit/f2f2382fb)) +- Live Preview reconnects after a dropped connection, and incomplete HTML is handled more reliably while you type. ([Reconnect](https://github.com/phcode-dev/phoenix/commit/44e914f2c), [HTML editing](https://github.com/phcode-dev/phoenix/commit/9b57186ae)) +- Reduced repeated CSS parsing, page measurements, and tree rebuilding during selection and editing in Live Preview and Layers. +- Fixed JavaScript hints getting stuck while indexing HTML or PHP, and older project preferences arriving after a project switch. ([Hints](https://github.com/phcode-dev/phoenix/commit/1198f7f3a), [Preferences](https://github.com/phcode-dev/phoenix/commit/b24ad37a0)) +- Python and PHP language-server setup now limits automatic retries and keeps error details and a manual retry available in the task list. Python tooling also updates to Pyrefly 1.2.0 and Ruff 0.16.5. ([Setup](https://github.com/phcode-dev/phoenix/commit/9325978d4), [Tooling](https://github.com/phcode-dev/phoenix/commit/391fd391b)) +- Fixed the sidebar resize handle being left over the editor after the sidebar was collapsed. ([Change](https://github.com/phcode-dev/phoenix/commit/e0107ea35)) +- Dropping several files now leaves the last file in the drop order active, regardless of which one loads fastest. ([Change](https://github.com/phcode-dev/phoenix/commit/9d896d2c7)) +- Notifications stay open while you hover over them, giving you time to read or use their actions. ([Change](https://github.com/phcode-dev/phoenix/commit/a40ab64e9)) +- AI plan review now handles approval, revision, cancellation, and stopping more consistently. Chat also resumes following new messages after you have scrolled back to read older replies. -- Fixed auto-update failing after the update to Node 24. ([#3087](https://github.com/phcode-dev/phoenix/pull/3087)) +## Platform and account notes -### macOS +- **Windows:** Fixed AI multiline edits being rejected when the file and the AI used different line endings. Language-server quick fixes also handle drive-letter capitalization correctly. +- **macOS:** Improved semibold and bold text rendering in the interface. +- **Managed desktop installations:** Administrators can point the updater at a custom update manifest, including a custom Linux installer URL. +- **Phoenix Pro trials:** The introductory trial for new installations is now 8 days, down from 15 days. +- **Accounts:** Desktop sign-in refreshes Pro access immediately, and existing subscribers no longer receive prompts to buy Pro again. -- Fixed semibold and bold text looking smeared. +Get the update at [phcode.dev](https://phcode.dev), and let us know what you build in [GitHub Discussions](https://github.com/phcode-dev/phoenix/discussions). diff --git a/blog/2026-10-07-Release-5.5/samples/chat-playground.json b/blog/2026-10-07-Release-5.5/samples/chat-playground.json new file mode 100644 index 00000000..bda82c42 --- /dev/null +++ b/blog/2026-10-07-Release-5.5/samples/chat-playground.json @@ -0,0 +1,26 @@ +[ + { + "version": 1, + "spec": { + "html": "\n\n
\n
\n
\n Layout\n
\n \n \n \n
\n
\n
\n Palette\n
\n \n \n \n \n
\n
\n
\n Headline\n \n 36px\n
\n
\n\n
\n
Field®WorkStudioContact
\n
\n
\n
Creative studio · est. 2014
\n

We shape brands that feel alive.

\n

Identity, motion and digital for people building things worth noticing.

\n
See the work →Showreel 2026
\n
\n
\n
\n
BrandingMotionWeb
\n
\n
\n\n", + "css": "", + "script": "\n let s = ui.getState() || {};\n s.layout = s.layout || 'editorial';\n s.palette = s.palette || 'clay';\n s.size = s.size || 36;\n\n function render() {\n ui.attr('#pg', 'data-layout', s.layout);\n ui.attr('#pg', 'data-palette', s.palette);\n ui.attr('#pg', 'style', '--hs:' + s.size + 'px');\n ui.text('#sz', s.size + 'px');\n ui.value('#size', s.size);\n }\n\n ['editorial', 'split', 'poster'].forEach(function (id) {\n ui.on('#l-' + id, 'click', function () { s.layout = id; render(); ui.setState(s); });\n });\n ['clay', 'midnight', 'moss', 'bloom'].forEach(function (id) {\n ui.on('#p-' + id, 'click', function () { s.palette = id; render(); ui.setState(s); });\n });\n ui.on('#size', 'input', function (e) {\n s.size = parseInt(e.value, 10) || 36;\n render();\n ui.setState(s);\n });\n\n render();\n\n", + "params": {} + }, + "state": { + "layout": "split", + "palette": "midnight", + "size": 42 + }, + "html": "\n\n
EXPLORE AN IDEAHero playground
\n
\n
\n Layout\n
\n \n \n \n
\n
\n
\n Palette\n
\n \n \n \n \n
\n
\n
\n Headline\n \n 42px\n
\n
\n\n
\n
Field®WorkStudioContact
\n
\n
\n
Creative studio · est. 2014
\n

We shape brands that feel alive.

\n

Identity, motion and digital for people building things worth noticing.

\n
See the work →Showreel 2026
\n
\n
\n
\n
BrandingMotionWeb
\n
\n
\n\n", + "forms": [ + { + "id": "size", + "index": 0, + "value": "42", + "checked": false + } + ], + "result": null + } +] \ No newline at end of file diff --git a/blog/2026-10-07-Release-5.5/samples/field-studio/index.html b/blog/2026-10-07-Release-5.5/samples/field-studio/index.html new file mode 100644 index 00000000..9c510ff4 --- /dev/null +++ b/blog/2026-10-07-Release-5.5/samples/field-studio/index.html @@ -0,0 +1,35 @@ + + + + + + Field Studio — Make room for a new idea. + + + +
+ field® + +
+
+
+
+

INDEPENDENT DESIGN STUDIO

+

Good ideas.
A little
unexpected.

+

We build brands and digital experiences that make people stop, feel, and look again.

+ Explore our work ↗ +
+ +
+
+
SELECTED WORK2025 — 2026
+
01

A different kind of everyday.

Brand strategy · Digital design↗
+
02

Small details. Lasting impressions.

Art direction · Web experience↗
+
+
+ + diff --git a/blog/2026-10-07-Release-5.5/samples/field-studio/styles.css b/blog/2026-10-07-Release-5.5/samples/field-studio/styles.css new file mode 100644 index 00000000..c986d6e8 --- /dev/null +++ b/blog/2026-10-07-Release-5.5/samples/field-studio/styles.css @@ -0,0 +1,54 @@ +:root { + --paper: #f5f3e9; + --ink: #233a2f; + --accent: #ddf56b; + --canvas: #dfe6da; + --muted: #627064; +} +* { box-sizing: border-box; } +body { margin: 0; background: var(--paper); color: var(--ink); font-family: Arial, Helvetica, sans-serif; } +a { color: inherit; text-decoration: none; } +.site-header { display: flex; align-items: center; justify-content: space-between; padding: 28px 42px; border-bottom: 1px solid #233a2f25; } +.brand { font-size: 38px; letter-spacing: -3px; font-weight: 800; } +.brand span { display: inline-block; margin-left: 6px; font-size: 14px; vertical-align: top; padding-top: 7px; } +nav { display: flex; align-items: center; gap: 28px; font-size: 12px; } +.contact { padding: 12px 17px; border: 1px solid #233a2f50; border-radius: 24px; } +.contact span { margin-left: 16px; } +.hero { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; padding: 48px 42px 44px; } +.hero-copy { padding-top: 7px; } +.eyebrow { font-size: 9px; letter-spacing: 1.8px; font-weight: 700; display: flex; align-items: center; gap: 7px; } +.eyebrow span { display: inline-block; width: 7px; height: 7px; background: var(--ink); border-radius: 50%; } +h1 { margin: 31px 0 22px; font-size: clamp(38px, 6vw, 76px); line-height: .99; letter-spacing: -3px; font-weight: 500; } +h1 em { font-family: Georgia, serif; font-weight: 400; } +.intro { max-width: 310px; font-size: 13px; line-height: 1.7; color: var(--muted); } +.cta { display: inline-flex; align-items: center; justify-content: space-between; gap: 44px; margin-top: 20px; padding: 16px 21px; background: var(--ink); color: var(--paper); border-radius: 28px; font-size: 12px; } +.cta span { font-size: 18px; } +.artwork { min-height: 425px; overflow: hidden; position: relative; background: var(--canvas); border-radius: 160px 160px 4px 4px; isolation: isolate; } +.art-label { position: absolute; top: 61px; width: 100%; text-align: center; font-size: 8px; letter-spacing: 1.5px; z-index: 3; } +.art-grid { position: absolute; inset: 0; background-image: linear-gradient(#fff4 1px, transparent 1px), linear-gradient(90deg, #fff4 1px, transparent 1px); background-size: 38px 38px; transform: perspective(160px) rotateX(15deg) scale(1.3); } +.arch { position: absolute; width: 62%; height: 70%; left: 19%; bottom: -5%; background: var(--ink); border-radius: 48% 48% 0 0; box-shadow: 18px 18px 30px #233a2f35; } +.arch::after { content: ""; position: absolute; inset: 26% 27% -5%; background: var(--canvas); border-radius: 50% 50% 0 0; } +.sphere { width: 51%; aspect-ratio: 1; position: absolute; top: 26%; left: 13%; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #f5ffcb, var(--accent) 35%, #91aa3055 100%); box-shadow: 25px 28px 26px #19291f40; } +.disc { width: 57%; height: 15%; position: absolute; background: var(--paper); bottom: 8%; right: -8%; transform: rotate(-26deg); border-radius: 50%; box-shadow: 3px 10px 0 #c7c8b9, 5px 20px 16px #233a2f30; } +.art-caption { position: absolute; bottom: 18px; left: 22px; right: 22px; display: flex; justify-content: space-between; align-items: center; font-size: 10px; z-index: 4; } +.art-caption span:last-child { font-size: 35px; } +.work { padding: 0 42px 38px; } +.section-heading { display: flex; justify-content: space-between; font-size: 9px; letter-spacing: 1.4px; border-bottom: 1px solid #233a2f40; padding: 10px 0 18px; } +.project-row { display: flex; align-items: center; gap: 20px; border-bottom: 1px solid #233a2f25; padding: 21px 0; } +.project-number { color: var(--muted); font-size: 10px; } +.project-row h2 { font-size: 16px; font-weight: 400; flex: 1; margin: 0; letter-spacing: -.3px; } +.project-row > span:nth-last-child(2) { color: var(--muted); font-size: 9px; } +.project-arrow { font-size: 20px; } +@media (max-width: 600px) { + .site-header { padding: 22px; } + nav { gap: 14px; } + nav > a:nth-child(2) { display: none; } + .hero { padding: 28px 22px; gap: 17px; } + .eyebrow { font-size: 7px; letter-spacing: .8px; } + h1 { letter-spacing: -2px; } + .artwork { min-height: 350px; } + .intro { font-size: 11px; } + .cta { gap: 16px; padding: 13px; font-size: 10px; } + .work { padding: 0 22px 24px; } + .project-row > span:nth-last-child(2) { display: none; } +} diff --git a/blog/2026-10-07-Release-5.5/samples/live-preview-picker.json b/blog/2026-10-07-Release-5.5/samples/live-preview-picker.json new file mode 100644 index 00000000..2b6bdd54 --- /dev/null +++ b/blog/2026-10-07-Release-5.5/samples/live-preview-picker.json @@ -0,0 +1,95 @@ +{ + "html": "\n
\n

COLOR DIRECTION

\n

Find your color story

\n

Hover a palette to try it on the page. Click to keep it on while you decide.

\n
\n \n \n \n
\n

Nothing is saved to your files until you confirm.

\n
\n", + "script": "", + "params": {}, + "placement": "bottom-right", + "anchor": null, + "highlight": false, + "width": 540, + "height": null, + "theme": { + "background": "#faf8f1", + "titleBackground": "#26302a", + "titleColor": "#faf8f1", + "textColor": "#26302a", + "accent": "#26302a" + }, + "summary": "Find your color story \u2014 try Forest, Apricot or Lilac on the page", + "choices": [ + { + "id": "forest", + "label": "Forest", + "description": "Grounded, quiet, quietly confident", + "color": "#163b2a", + "preview": { + "css": ":root {\n --paper: {{paper}};\n --ink: {{ink}};\n --accent: {{accent}};\n --canvas: {{canvas}};\n --muted: {{muted}};\n}\nbody { background: {{paper}}; color: {{ink}}; }\n.site-header, .section-heading, .project-row { border-color: {{ink}}40; }\n.site-header { border-bottom-color: {{ink}}25; }\n.project-row { border-bottom-color: {{ink}}25; }\n.contact { border-color: {{ink}}50; }\n.arch { box-shadow: 18px 18px 30px {{ink}}35; }\n.sphere { background: radial-gradient(circle at 32% 28%, {{highlight}}, {{accent}} 35%, {{accentDeep}}55 100%); box-shadow: 25px 28px 26px {{ink}}40; }\n.disc { box-shadow: 3px 10px 0 {{disc}}, 5px 20px 16px {{ink}}30; }\n", + "script": "", + "params": { + "paper": "#f2f1e3", + "ink": "#163b2a", + "accent": "#b9e04e", + "canvas": "#d3e0cc", + "muted": "#5a6f60", + "glow": "#f1ffc4", + "shade": "#7f9a2c", + "edge": "#c5c7b3", + "highlight": "#f1ffc4", + "accentDeep": "#7f9a2c", + "disc": "#c5c7b3" + }, + "reloadOnCleanup": false, + "selector": null + } + }, + { + "id": "apricot", + "label": "Apricot", + "description": "Warm, sunlit, generous", + "color": "#ff9d5c", + "preview": { + "css": ":root {\n --paper: {{paper}};\n --ink: {{ink}};\n --accent: {{accent}};\n --canvas: {{canvas}};\n --muted: {{muted}};\n}\nbody { background: {{paper}}; color: {{ink}}; }\n.site-header, .section-heading, .project-row { border-color: {{ink}}40; }\n.site-header { border-bottom-color: {{ink}}25; }\n.project-row { border-bottom-color: {{ink}}25; }\n.contact { border-color: {{ink}}50; }\n.arch { box-shadow: 18px 18px 30px {{ink}}35; }\n.sphere { background: radial-gradient(circle at 32% 28%, {{highlight}}, {{accent}} 35%, {{accentDeep}}55 100%); box-shadow: 25px 28px 26px {{ink}}40; }\n.disc { box-shadow: 3px 10px 0 {{disc}}, 5px 20px 16px {{ink}}30; }\n", + "script": "", + "params": { + "paper": "#fff4e8", + "ink": "#4a2414", + "accent": "#ff9d5c", + "canvas": "#ffdcc0", + "muted": "#8a6350", + "glow": "#ffe3c9", + "shade": "#c9622a", + "edge": "#e6cdb6", + "highlight": "#ffe3c9", + "accentDeep": "#c9622a", + "disc": "#e6cdb6" + }, + "reloadOnCleanup": false, + "selector": null + } + }, + { + "id": "lilac", + "label": "Lilac", + "description": "Dreamy, soft, a little unexpected", + "color": "#b99cf5", + "preview": { + "css": ":root {\n --paper: {{paper}};\n --ink: {{ink}};\n --accent: {{accent}};\n --canvas: {{canvas}};\n --muted: {{muted}};\n}\nbody { background: {{paper}}; color: {{ink}}; }\n.site-header, .section-heading, .project-row { border-color: {{ink}}40; }\n.site-header { border-bottom-color: {{ink}}25; }\n.project-row { border-bottom-color: {{ink}}25; }\n.contact { border-color: {{ink}}50; }\n.arch { box-shadow: 18px 18px 30px {{ink}}35; }\n.sphere { background: radial-gradient(circle at 32% 28%, {{highlight}}, {{accent}} 35%, {{accentDeep}}55 100%); box-shadow: 25px 28px 26px {{ink}}40; }\n.disc { box-shadow: 3px 10px 0 {{disc}}, 5px 20px 16px {{ink}}30; }\n", + "script": "", + "params": { + "paper": "#f6f1fb", + "ink": "#2f2350", + "accent": "#b99cf5", + "canvas": "#e2d7f5", + "muted": "#6f6590", + "glow": "#efe6ff", + "shade": "#7a5fc0", + "edge": "#d3c8e6", + "highlight": "#efe6ff", + "accentDeep": "#7a5fc0", + "disc": "#d3c8e6" + }, + "reloadOnCleanup": false, + "selector": null + } + } + ] +} diff --git a/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-detail.png b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-detail.png new file mode 100644 index 00000000..93c562df Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-detail.png differ diff --git a/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-playground.gif b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-playground.gif new file mode 100644 index 00000000..3e6761c7 Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-playground.gif differ diff --git a/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-playground.png b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-playground.png new file mode 100644 index 00000000..a45a4269 Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-playground.png differ diff --git a/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-poster.png b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-poster.png new file mode 100644 index 00000000..4c3d90e6 Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/interactive-chat-poster.png differ diff --git a/blog/2026-10-07-Release-5.5/screenshots/live-preview-apricot.png b/blog/2026-10-07-Release-5.5/screenshots/live-preview-apricot.png new file mode 100644 index 00000000..94b194d2 Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/live-preview-apricot.png differ diff --git a/blog/2026-10-07-Release-5.5/screenshots/live-preview-color-story.gif b/blog/2026-10-07-Release-5.5/screenshots/live-preview-color-story.gif new file mode 100644 index 00000000..d28bd04d Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/live-preview-color-story.gif differ diff --git a/blog/2026-10-07-Release-5.5/screenshots/live-preview-color-story.png b/blog/2026-10-07-Release-5.5/screenshots/live-preview-color-story.png new file mode 100644 index 00000000..e3b40916 Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/live-preview-color-story.png differ diff --git a/blog/2026-10-07-Release-5.5/screenshots/live-preview-forest.png b/blog/2026-10-07-Release-5.5/screenshots/live-preview-forest.png new file mode 100644 index 00000000..bbf95545 Binary files /dev/null and b/blog/2026-10-07-Release-5.5/screenshots/live-preview-forest.png differ