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..80552ec0 100644 --- a/blog/2026-10-07-Release-5.5/index.md +++ b/blog/2026-10-07-Release-5.5/index.md @@ -1,133 +1,134 @@ --- 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 and Edit Your Page with Layers](https://docs.phcode.dev/app-links/layers-panel) -## Layers Panel +**Edit your web pages visually, without touching code!** The new Layers sidebar lets you explore your page’s HTML structure, add, move, duplicate, or delete elements, and edit their properties. -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. +Change colors, fonts, sizes, and spacing with simple visual controls. Every change is instantly reflected in your code and Live Preview. -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 Layers panel is a Phoenix Pro feature. - +![Image](https://docs-images.phcode.dev/in-app/pro-layersPanel.jpg) -## A new AI panel +## [Ask AI in Live Preview](https://docs.phcode.dev/app-links/ai-ask) -Claude Code now comes built in. Sign in and start chatting, with nothing to install. +**Just point and ask AI, instead of explaining what you want to change!** Select any part of your page in Live Preview and ask AI to make changes. No need to describe where or what you're referring to. -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. +Ask AI to suggest alternative designs, explore color schemes, or try different fonts. -Free accounts get a daily and monthly chat limit. Phoenix Pro removes the limits. [Read More...](https://docs.phcode.dev/app-links/ai-chat) +**Ask AI also works with [custom server previews](https://docs.phcode.dev/docs/Features/Live%20Preview/live-preview-settings)**, including PHP and other server-rendered pages, as well as selected code or Markdown text. - +> Available only in desktop apps. -## More ways to use AI +![](https://user-cdn.phcode.site/images/50f6bd8b-6d22-436f-ad53-8674891c457e.jpeg) -### Claude Code CLI and Codex CLI inside the editor +## [Intelligent UI in AI Chat](https://docs.phcode.dev/app-links/ai-chat) -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) +**See what AI means, instead of just reading about it!** Phoenix AI can now show interactive designs, buttons, cards, layouts, and more directly in chat. - +Explore different styles, click through options, and adjust controls right in the conversation. Instead of just describing an idea, AI can show you how it looks and works—all without opening Live Preview or writing code. -> Running the CLIs inside the panel is a Phoenix Pro feature. +> This feature is available only in desktop apps. -### Ask AI in the Live Preview +![](https://user-cdn.phcode.site/images/6d84fa6b-0a0c-47a7-b0b6-499cc20ec5fb.png) -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) +## [Bring Your Claude Code & Codex CLI to Phoenix Code](https://docs.phcode.dev/app-links/ai-cli) - +**Supercharge your existing CLI agents with rich, interactive visual workflows!** Use your existing Claude Code or Codex subscriptions in Phoenix Code to explore designs in Live Preview, try interactive options, and make changes visually instead of relying on text descriptions. -### Ask AI in the editor +Run multiple CLI sessions, switch between them easily, and send **Ask AI** requests directly to your agents. Track your AI consumption with the built-in **AI Usage Meter** (see below). -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) +> Running CLI agents inside Phoenix Code is a Phoenix Pro feature, available only in desktop apps. - +![](https://user-cdn.phcode.site/images/117a072b-efd1-4623-87d7-5c20746a9b6b.gif) -### Find photos +## [Track Your AI Usage](https://docs.phcode.dev/app-links/ai-chat) -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) +**See how much AI you're using, all in one place!** Track token usage and estimated costs across Phoenix AI, Claude Code, and Codex CLI sessions. - +Explore daily usage graphs, monthly trends, and breakdowns by AI model. You can also clear your usage history without deleting your chats. -## Live Preview Edit improvements +> Costs are estimated using API list prices and may differ from your actual provider charges. Available only in desktop apps. -- **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. +![](https://user-cdn.phcode.site/images/84bdfaf0-31c1-45eb-8a59-3107179f7c04.png) -[Read More...](https://docs.phcode.dev/app-links/live-preview-edit) +## [Easier AI Setup & Quick Access](https://docs.phcode.dev/app-links/ai-chat) -![Control Box on a script-generated element](./script-element-control-box.png) +**Get started with your favorite AI tools more easily!** The new AI start screen brings Phoenix AI, ChatGPT Codex, and Claude Code CLI together in one place. -## Terminal improvements +Quickly set up your AI tools, switch running sessions, and pick up right where you left off. -Give your terminal tabs names. Hover a tab, click the pencil, and type. Named tabs come back the next time the panel opens. +![Image](https://docs-images.phcode.dev/in-app/pro-aiPanel.jpg) -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) +## [AI Demos](https://docs.phcode.dev/app-links/ai-chat) -![Renaming a terminal tab](./terminal-rename.png) +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. -## Git: see what is pushed +> This feature is available only in desktop apps. -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) +## [Adjust AI Thinking Effort](https://docs.phcode.dev/app-links/ai-chat) -![Pushed and unpushed commits in the history](./history-push-state.png) +**Choose how much effort AI puts into solving your problems!** Use lower thinking effort for quick, simple tasks or higher effort for complex problems that need deeper reasoning. -## Editor improvements +Select your preferred **Thinking Effort** for supported AI models, or leave it at **Default** to use the model's standard setting. -**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) +> This feature is available only in desktop apps. -![Choosing between several definitions](./definition-picker.png) +![](https://user-cdn.phcode.site/images/3428ceb1-402d-4410-86ca-552bc02805b9.png) -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) +## [Discover Stock Photos with AI](https://docs.phcode.dev/app-links/ai-images) -## Notable changes and fixes +**Find the perfect photos for your website with the help of AI!** Explore real stock photos, discover new ideas, and let AI help you narrow down your choices to find images that fit your design. -- 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)) +Ask AI to add your favorite photos directly to your page or download them into your project. -## Performance & Stability +> This feature is available only in desktop apps. -- 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)) +![Image](https://docs-images.phcode.dev/in-app/pro-aiImages.jpg) -## Platform Notes +## [Larger Image Previews in Markdown](https://docs.phcode.dev/app-links/markdown-editor) -### Windows +**Take a closer look at images without leaving your Markdown document!** Open images in a larger view to see details more clearly, whether you're reading or editing. -- Fixed auto-update failing after the update to Node 24. ([#3087](https://github.com/phcode-dev/phoenix/pull/3087)) +Simply click an image in reader mode, or double-click it while editing. Press **Escape** to return to your document. -### macOS +## Terminal and Git improvements -- Fixed semibold and bold text looking smeared. +- **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. + +## Notable fixes and performance improvements + +- 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. + +## Platform and account notes + +- **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. + +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