v1.2.1

Patch Changes

• #481 5ee8ccb Thanks @michaeltaranto! - Editor: Ensure interactivity after toggling visibility via menu

  Fixes an issue where the editor would remain inert when hidden via the "Hide Code" button and then shown via the menu.

v1.2.0

Minor Changes

• #479 6cc66fd Thanks @michaeltaranto! - frameSettings: Add support to custom frame props

  Add frameSettings config option to enable per-frame toggleable settings.
  Allows playroom owners to define boolean controls (e.g., RTL layout, debugging touch targets, etc) that users can independently toggle for each frame, with values passed to the custom FrameComponent for conditional rendering.

  Example Usage

  // playroom.config.js
  export default {
    ...,
    frameSettings: [
      { id: 'rtl', label: 'RTL Layout', defaultValue: false }
    ],
  };
  
  // FrameComponent.tsx
  export default ({ frameSettings, children }) => (
    <ThemeProvider rtl={frameSettings?.rtl}>{children}</ThemeProvider>
  );

Patch Changes

• #479 6cc66fd Thanks @michaeltaranto! - types: Update PlayroomConfig and make available to consumers

  Enable type-safe configuration files by exporting PlayroomConfig type.

  // playroom.config.ts
  import type { PlayroomConfig } from 'playroom';
  
  export default {
    ...
  } satisfies PlayroomConfig;

v1.1.0

Minor Changes

• #477 f2b799f Thanks @michaeltaranto! - Snippets: Update group treatment and add description support

  Improve affordance of snippet group by nesting snippets under sticky group headers.
  Snippets also now support an optional description property to help users differentiate similar snippets.

  Migration

  While not a breaking change, this update does change the way snippets are rendered and how groups are treated, so some migration may be desired.

  Previously snippets rendered the group and name on the same line.
  For example:

  [
    {
      "group": "Button",
      "name": "Small",
      "code": "..."
    },
    {
      "group": "Button",
      "name": "Large",
      "code": "..."
    }
  ]

  resulted in:

  ---------------
  Button Small
  Button Large
  ---------------
  

  Groups are now elevated to sticky headers, with snippets nested underneath:

  ---------------
  Button
  ---------------
  Small
  Large
  ---------------
  

  To avoid grouping migrate to use name and description properties instead, and omit group:

   [
     {
  -    group: 'Button',
  +    name: 'Button',
  -    name: 'Small',
  +    description: 'Small',
       code: '...',
     },
     {
  -    group: 'Button',
  +    name: 'Button',
  -    name: 'Large',
  +    description: 'Large',
       code: '...',
     },
   ]

  which results in the same UX as previously.

v1.0.7

Patch Changes

• #474 7cf78e1 Thanks @mihkeleidast! - Swap @base-ui-components/react for @base-ui/react and update cmdk-base

• #472 f8d7aae Thanks @Marcosld! - Fallback for randomUUID when not available in development (i.e. non secure context)

v1.0.5

Patch Changes

• #467 fad3b7f Thanks @askoufis! - Remove unused code, remove unused deps, update sucrase to latest version

v1.0.4

Patch Changes

• #465 63a512b Thanks @michaeltaranto! - Only show available themes and widths

  Ensure that themes or widths selected via the URL or from storage are valid options.

v1.0.3

Patch Changes

• #461 67c2517 Thanks @michaeltaranto! - Design polish, refinements and fixes to internal system components.

• #464 12dc5ba Thanks @michaeltaranto! - Ensure ref and inert usage is React 18 compatible

• #461 67c2517 Thanks @michaeltaranto! - Introduce scroll afforance for frames area

  Add subtle gradient to edges of frames container to indicate scrollability when the number of frames exceeds the window width

• #461 67c2517 Thanks @michaeltaranto! - Allow selection of frame error

  Enables a user to select and copy the text from a frame error message.

• #462 65f7793 Thanks @michaeltaranto! - Only hide share actions from header without code

  The header actions in the top right are now available on page load.
  This enables the selection of frames and/or themes before any code is added to the editor.

  The share and preview actions are still hidden and revealed when code is entered into the editor.

v1.0.2

Patch Changes

• #459 76b5304 Thanks @michaeltaranto! - Ensure Playroom processes only its own styles

  Fixes an issue where consuming projects using Vanilla Extract may suffer from double processing of generated styles.

v1.0.1

Patch Changes

• #457 1deb5f5 Thanks @askoufis! - Fix compilation errors caused by internal styles

v1.0.0

Major Changes

• #453 abc492f Thanks @michaeltaranto! - This release features a major design overhaul, modernising the interface and introducing some exciting new features.
  Virtual file management now enables switching between multiple designs locally in the browser, while still supporting collaboration via shareable links.

  Highlights of the new interface include:

  • Designs autosave locally in the browser, using the title as a name
  • Return visits no longer restore the last code, instead listing locally saved designs as an option (or just start fresh)
  • Add "Open Playroom" option (with thumbnail previews) to make switching between designs easier
  • Add "New Playroom" option to quickly start fresh
  • Add "Duplicate" option to start a design variation
  • Improved affordance of editor actions, i.e. snippets, format, as well as cursor and selection actions.
  • Add "Show/Hide UI" option (with keyboard shortcut) to make focusing on design frames easier
  • Replace splash screen on Preview mode with dismissable header
  • Add "Edit" link to Preview mode header to make returning code easier
  • Add footer to Preview mode when embedding links
  • Improve affordance of syntax errors, including jump to line feature