playroom - npm Package Compare versions

Comparing version 0.0.0-comment-command-20240221231704 to 0.0.0-disable-error-overlay-20240901233411

CHANGELOG.md

 # playroom
 
-## 0.0.0-comment-command-20240221231704
+## 0.0.0-disable-error-overlay-20240901233411
 
+### Patch Changes
+
+- 591ca28: start: Disable webpack error overlay
+
+  Prevent the default webpack dev server error overlay from blocking the preview frames in `start` mode.
+  Playroom handles it's own errors, and this would block the preview frames and need to be dismissed manually.
+
+## 0.38.0
+
 ### Minor Changes
 
+- 7df36e3: Improve frame filtering UX.
+
+  - Allow users to select all checkboxes in a frame filter section, rather than automatically unselecting all checkboxes when all are selected.
+  - Rename the "Show all" button to "Clear" to reinforce the filtering pattern.
+
+- 384810e: Use CSS gap and grid for layout spacing in Playroom UI.
+
+### Patch Changes
+
+- a0724d2: Fixes a bug in the side panel exit animation that was causing the contents to vanish abruptly
+- 934a017: Exclude irrelevant files from published package
+- 92a0039: Fix Playroom UI icon centering
+- 422a259: Remove `data-testid` attributes from UI elements
+
+## 0.37.1
+
+### Patch Changes
+
+- 2b6d5c5: Update lz-string to 1.5.0, and removed unnecessary @types/lz-string
+
+## 0.37.0
+
+### Minor Changes
+
+- 94c75f8: Add "Find", "Find and replace", and "Jump to line" functionality.
+
+  Keybindings for these new commands are:
+
+  - `Cmd + F` / `Ctrl + F` - Find
+  - `Cmd + Option + F` / `Ctrl + Alt + F` - Find and replace
+  - `Cmd + G` / `Ctrl + G` - Jump to line
+
+### Patch Changes
+
+- 71f694a: Fix issue with "Toggle comment" command commenting certain code outside JSX tags with incorrect syntax.
+
+## 0.36.0
+
+### Minor Changes
+
 - c3f0373: Drop support for Node versions <18.12.0
-- c41217e: Add keybinding to toggle comment syntax for the current selection.
+- 90edcc8: Add keybinding for copying Playroom link to clipboard with <kbd>⌘</kbd> + <kbd>⇧</kbd> + <kbd>C</kbd> (or, on Windows, <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd>).
+- c99cc30: Add keybinding to toggle comment syntax for the current selection.
 
@@ -15,3 +65,16 @@ Pressing <kbd>Cmd</kbd> + <kbd>/</kbd> (or, on Windows, <kbd>Ctrl</kbd> + <kbd>/</kbd>) will toggle comment syntax for the currently selected text.
 
+- dd95719: Add 'Insert snippet' shortcut to 'Keyboard Shortcuts' list in settings panel for better discoverability.
+- cad1ded: Remove dependency on `current-git-branch` package
+- 0215bb4: Replace `query-string` dependency with `URLSearchParams`
+- 6ad5895: Update shortcut format for Windows users for consistency with standard styling.
+- cb3c427: In the Settings Panel, sort keyboard shortcuts order by most frequently and widely used. Related shortcuts are grouped together.
+- b1766c2: Move Title setting from Settings Panel to Frame Panel to group current playroom settings together and improve discoverability.
+
+  Now, all settings that affect the current playroom tab live in the Frame Panel.
+  Settings affecting all playroom tabs live in the Settings Panel.
+
+- 41e8cfa: Fix an issue where new Playroom tabs without a set title would load a recently used title.
+- 134c5a4: Upgrade `webpack-dev-server` to v5
 - c3f0373: Update dependencies
+- f88a4e6: Fix async import of playroom config on Windows
 
@@ -18,0 +81,0 @@ ## 0.35.0

lib/provideDefaultConfig.js

 const readPackage = require('read-pkg-up');
-const currentGitBranch = require('current-git-branch');
+const { execSync } = require('child_process');
 
+/**
+ * @returns {string | null} The current git branch name, or null if no branch is found
+ */
+const getGitBranch = () => {
+  try {
+    return execSync('git branch --show-current').toString().trim();
+  } catch (e) {
+    return null;
+  }
+};
+
 const generateStorageKey = () => {
   const pkg = readPackage.sync();
   const packageName = (pkg && pkg.packageJson && pkg.packageJson.name) || null;
-  const branchName = currentGitBranch();
+  const branchName = getGitBranch();
 
@@ -9,0 +20,0 @@ const packageLabel = packageName ? `package:${packageName}` : null;

lib/start.js

@@ -33,2 +33,5 @@ const webpack = require('webpack');
       },
+      client: {
+        overlay: false,
+      },
       compress: true,
@@ -35,0 +38,0 @@ static: {

package.json

 {
   "name": "playroom",
-  "version": "0.0.0-comment-command-20240221231704",
+  "version": "0.0.0-disable-error-overlay-20240901233411",
   "description": "Design with code, powered by your own component library",
@@ -10,2 +10,10 @@ "main": "utils/index.js",
   },
+  "files": [
+    "CHANGELOG.md",
+    ".babelrc",
+    "images",
+    "lib",
+    "src",
+    "utils"
+  ],
   "lint-staged": {
@@ -39,3 +47,2 @@ "**/*.{js,ts,tsx}": [
     "@types/lodash": "^4.14.191",
-    "@types/lz-string": "^1.3.34",
     "@types/prettier": "^2.7.1",
@@ -50,2 +57,3 @@ "@types/react": "^18.0.26",
     "classnames": "^2.3.2",
+    "clsx": "^2.1.1",
     "codemirror": "^5.65.10",
@@ -56,3 +64,2 @@ "command-line-args": "^5.2.1",
     "css-loader": "^6.7.2",
-    "current-git-branch": "^1.1.0",
     "dedent": "^1.5.1",
@@ -67,3 +74,3 @@ "fast-glob": "^3.2.12",
     "lodash": "^4.17.21",
-    "lz-string": "^1.4.4",
+    "lz-string": "^1.5.0",
     "memoize-one": "^6.0.0",
@@ -76,6 +83,6 @@ "mini-css-extract-plugin": "^2.7.2",
     "prop-types": "^15.8.1",
-    "query-string": "^7.1.3",
     "re-resizable": "^6.9.9",
     "react-docgen-typescript": "^2.2.2",
     "react-helmet": "^6.1.0",
+    "react-transition-group": "^4.4.5",
     "react-use": "^17.4.0",
@@ -88,3 +95,3 @@ "read-pkg-up": "^7.0.1",
     "webpack": "^5.75.0",
-    "webpack-dev-server": "^4.11.1",
+    "webpack-dev-server": "^5.0.2",
     "webpack-merge": "^5.8.0"
@@ -96,7 +103,9 @@ },
     "@octokit/rest": "^19.0.5",
+    "@testing-library/cypress": "^10.0.1",
     "@types/jest": "^29.2.4",
     "@types/react-helmet": "^6.1.6",
+    "@types/react-transition-group": "^4.4.10",
     "concurrently": "^7.6.0",
-    "cypress": "^12.0.2",
-    "eslint": "^8.44.0",
+    "cypress": "^13.6.6",
+    "eslint": "^8.56.0",
     "eslint-config-seek": "^11.3.1",
@@ -129,3 +138,3 @@ "husky": "^8.0.2",
     "build:basic": "./bin/cli.cjs build --config cypress/projects/basic/playroom.config.js",
-    "serve:basic": "PORT=9000 serve --no-request-logging cypress/projects/basic/dist",
+    "serve:basic": "PORT=9000 serve --config ../serve.json --no-request-logging cypress/projects/basic/dist",
     "start:themed": "./bin/cli.cjs start --config cypress/projects/themed/playroom.config.js",
@@ -136,3 +145,3 @@ "build:themed": "./bin/cli.cjs build --config cypress/projects/themed/playroom.config.js",
     "build:typescript": "./bin/cli.cjs build --config cypress/projects/typescript/playroom.config.js",
-    "serve:typescript": "PORT=9002 serve --no-request-logging cypress/projects/typescript/dist",
+    "serve:typescript": "PORT=9002 serve --config ../serve.json --no-request-logging cypress/projects/typescript/dist",
     "start:all": "concurrently 'npm:start:*(!all)'",
@@ -143,3 +152,3 @@ "build:all": "concurrently 'npm:build:*(!all)'",
     "lint": "concurrently 'npm:lint:*'",
-    "lint:eslint": "eslint --cache .",
+    "lint:eslint": "NODE_OPTIONS=--max_old_space_size=8192 eslint --cache .",
     "lint:prettier": "prettier --list-different '**/*.{js,md,ts,tsx}'",
@@ -146,0 +155,0 @@ "lint:tsc": "tsc --noEmit",

README.md

@@ -211,4 +211,8 @@ <img src="images/logo.png?raw=true#gh-light-mode-only" alt="Playroom" title="Playroom" width="292" height="50" />
 
+## Browser Support
+
+Playroom is built to work on the latest stable versions of all major browsers. Some features may not work as expected in older browsers.
+
 ## License
 
 MIT.

src/Playroom/Button/Button.css.ts

 import { style, createVar } from '@vanilla-extract/css';
 import { calc } from '@vanilla-extract/css-utils';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
@@ -81,3 +82,3 @@ export const reset = style([
 export const iconContainer = style([
-  sprinkles({ position: 'relative', paddingLeft: 'medium' }),
+  sprinkles({ position: 'relative', paddingLeft: 'small' }),
   {
@@ -84,0 +85,0 @@ top: '1px',

src/Playroom/CodeEditor/CodeEditor.css.ts

@@ -1,3 +0,5 @@
-import { style, globalStyle, keyframes } from '@vanilla-extract/css';
-import { vars, colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { style, globalStyle, keyframes, createVar } from '@vanilla-extract/css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
+import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
 
@@ -227,1 +229,98 @@ const minimumLineNumberWidth = '50px';
 });
+
+globalStyle('.CodeMirror-dialog', {
+  paddingLeft: vars.space.xlarge,
+  paddingRight: vars.space.xlarge,
+  minHeight: toolbarItemSize,
+  borderBottom: `1px solid ${colorPaletteVars.border.standard}`,
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const searchOffset = createVar();
+globalStyle('.CodeMirror-scroll', {
+  transform: `translateY(${searchOffset})`,
+  transition: vars.transition.fast,
+});
+
+globalStyle('.dialog-opened .CodeMirror-scroll', {
+  vars: {
+    [searchOffset]: `${toolbarItemSize}px`,
+  },
+});
+
+globalStyle('.dialog-opened .CodeMirror-lines', {
+  paddingBottom: searchOffset,
+});
+
+globalStyle('.CodeMirror-dialog input', {
+  font: vars.font.scale.large,
+  fontFamily: vars.font.family.code,
+  height: vars.touchableSize,
+  flexGrow: 1,
+});
+
+globalStyle('.CodeMirror-search-hint', {
+  display: 'none',
+});
+
+globalStyle('.CodeMirror-search-label', {
+  display: 'flex',
+  alignItems: 'center',
+  minHeight: vars.touchableSize,
+  font: vars.font.scale.large,
+  fontFamily: vars.font.family.code,
+});
+
+globalStyle('.CodeMirror-search-field', {
+  paddingLeft: vars.space.xlarge,
+});
+
+globalStyle('label.CodeMirror-search-label', {
+  flexGrow: 1,
+});
+
+globalStyle('.dialog-opened.cm-s-neo .CodeMirror-selected', {
+  background: colorPaletteVars.background.search,
+});
+
+globalStyle('.cm-overlay.cm-searching', {
+  paddingTop: 2,
+  paddingBottom: 2,
+  background: colorPaletteVars.background.selection,
+});
+
+globalStyle('.CodeMirror-dialog button:first-of-type', {
+  marginLeft: vars.space.xlarge,
+});
+
+globalStyle('.CodeMirror-dialog button', {
+  appearance: 'none',
+  font: vars.font.scale.standard,
+  fontFamily: vars.font.family.standard,
+  marginLeft: vars.space.small,
+  paddingTop: vars.space.small,
+  paddingBottom: vars.space.small,
+  paddingLeft: vars.space.large,
+  paddingRight: vars.space.large,
+  alignSelf: 'center',
+  display: 'block',
+  background: 'none',
+  borderRadius: vars.radii.large,
+  cursor: 'pointer',
+  border: '1px solid currentColor',
+});
+
+globalStyle('.CodeMirror-dialog button:focus', {
+  color: colorPaletteVars.foreground.accent,
+  boxShadow: colorPaletteVars.shadows.focus,
+  outline: 'none',
+});
+
+globalStyle('.CodeMirror-dialog button:focus:hover', {
+  background: colorPaletteVars.background.selection,
+});
+
+globalStyle('.CodeMirror-dialog button:hover', {
+  background: colorPaletteVars.background.transparent,
+});

src/Playroom/CodeEditor/keymaps/comment.ts

@@ -13,2 +13,6 @@ import type CodeMirror from 'codemirror';
 
+const OPENING_AND_CLOSING_BLOCK_COMMENT_SYNTAX = /\{\/\*\s?|\s?\*\/\}/g;
+const OPENING_LINE_COMMENT_SYNTAX_WITH_LEADING_WHITESPACE = /^(\s*)\/\/\s?/gm;
+const LINE_COMMENT_LEADING_WHITESPACE = '$1';
+
 interface IsReverseSelectionOptions {
@@ -167,4 +171,46 @@ anchor: CodeMirror.Position;
 
+function getUpdatedContent(existingContent: string, range: TagRange) {
+  if (range.isAlreadyCommented) {
+    const uncommentType: CommentType = existingContent
+      .trimStart()
+      .startsWith(BLOCK_COMMENT_START)
+      ? 'block'
+      : 'line';
+
+    const existingContentWithoutComment = existingContent.replace(
+      uncommentType === 'block'
+        ? OPENING_AND_CLOSING_BLOCK_COMMENT_SYNTAX
+        : OPENING_LINE_COMMENT_SYNTAX_WITH_LEADING_WHITESPACE,
+      uncommentType === 'block' ? '' : LINE_COMMENT_LEADING_WHITESPACE
+    );
+
+    return existingContentWithoutComment;
+  }
+
+  if (range.commentType === 'block') {
+    return `${BLOCK_COMMENT_START} ${existingContent} ${BLOCK_COMMENT_END}`;
+  }
+
+  if (range.multiLine) {
+    return existingContent.replace(/^(\s*)/gm, `$1${LINE_COMMENT_START} `);
+  }
+
+  return `${LINE_COMMENT_START} ${existingContent}`;
+}
+
 type CommentType = 'line' | 'block';
 
+const isOnlyWhitespace = (input: string) => /^\s+$/.test(input);
+
+const isFullExpressionSlot = (tokens: CodeMirror.Token[]) => {
+  const formattedLineTokens = tokens.filter(
+    (token) => token.type !== 'comment' && !isOnlyWhitespace(token.string)
+  );
+
+  return (
+    formattedLineTokens.at(0)?.string === '{' &&
+    formattedLineTokens.at(-1)?.string === '}'
+  );
+};
+
 interface TagRange {
@@ -191,3 +237,5 @@ from: CodeMirror.Position;
 
-  const isJavaScriptMode = cm.getModeAt(from).name === 'javascript';
+  const isJavaScriptMode =
+    cm.getModeAt(new Pos(from.line, 0)).name === 'javascript';
+
   const isInlineComment = cm
@@ -201,2 +249,6 @@ .getLine(from.line)
 
+  if (!isBlockComment && isFullExpressionSlot(lineTokens)) {
+    return isJavaScriptMode ? 'block' : 'line';
+  }
+
   if (isInlineComment) {
@@ -288,39 +340,7 @@ return 'line';
 
-      if (range.isAlreadyCommented) {
-        const uncommentType: CommentType = existingContent
-          .trimStart()
-          .startsWith(BLOCK_COMMENT_START)
-          ? 'block'
-          : 'line';
-
-        const existingContentWithoutComment = existingContent.replace(
-          uncommentType === 'block'
-            ? /\{\/\*\s?|\s?\*\/\}/g
-            : /^(\s*)\/\/\s?/gm,
-          uncommentType === 'block' ? '' : '$1'
-        );
-        cm.replaceRange(
-          existingContentWithoutComment,
-          newRangeFrom,
-          newRangeTo
-        );
-      } else if (range.commentType === 'block') {
-        cm.replaceRange(
-          `${BLOCK_COMMENT_START} ${existingContent} ${BLOCK_COMMENT_END}`,
-          newRangeFrom,
-          newRangeTo
-        );
-      } else if (range.multiLine) {
-        const updatedContent = existingContent.replace(
-          /^(\s*)/gm,
-          `$1${LINE_COMMENT_START} `
-        );
-        cm.replaceRange(updatedContent, newRangeFrom, newRangeTo);
-      } else {
-        cm.replaceRange(
-          `${LINE_COMMENT_START} ${existingContent}`,
-          newRangeFrom,
-          newRangeTo
-        );
-      }
+      cm.replaceRange(
+        getUpdatedContent(existingContent, range),
+        newRangeFrom,
+        newRangeTo
+      );
     }
@@ -327,0 +347,0 @@

src/Playroom/Frames/Frames.css.ts

 import { style } from '@vanilla-extract/css';
 import { sprinkles } from '../sprinkles.css';
 
-export const root = style([
-  sprinkles({
-    height: 'full',
-    width: 'full',
-    whiteSpace: 'nowrap',
-    display: 'flex',
-    boxSizing: 'border-box',
-    paddingY: 'gutter',
-    paddingLeft: 'gutter',
-    textAlign: 'center',
-  }),
-  {
-    overflowX: 'auto',
-    overflowY: 'hidden',
-    // // Simulate centering when fewer frames than viewport width.
-    '::before': {
-      content: '""',
-      flex: 1,
-    },
-    '::after': {
-      content: '""',
-      flex: 1,
-    },
-  },
-]);
+export const root = sprinkles({
+  height: 'full',
+  boxSizing: 'border-box',
+  display: 'flex',
+  padding: 'gutter',
+  textAlign: 'center',
+  overflow: 'auto',
+});
 
-export const frameContainer = style([
-  sprinkles({
-    position: 'relative',
-    height: 'full',
-    textAlign: 'left',
-    display: 'flex',
-    flexDirection: 'column',
-    paddingRight: 'gutter',
-  }),
-  {},
-]);
+export const frameContainer = sprinkles({
+  position: 'relative',
+  height: 'full',
+  textAlign: 'left',
+  display: 'flex',
+  flexDirection: 'column',
+});
 
-export const frame = style([
-  sprinkles({ position: 'relative', height: 'full', border: 0 }),
-  {
-    flexGrow: 1,
-  },
-]);
+export const frame = sprinkles({
+  position: 'relative',
+  height: 'full',
+  border: 0,
+  flexGrow: 1,
+});
 
@@ -49,0 +28,0 @@ export const frameBorder = style([

src/Playroom/FramesPanel/FramesPanel.css.ts

 import { calc } from '@vanilla-extract/css-utils';
 import { globalStyle, style } from '@vanilla-extract/css';
-import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
-export const title = sprinkles({
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  marginBottom: 'medium',
-});
-
 export const reset = style([
@@ -17,3 +11,3 @@ sprinkles({
     border: 0,
-    padding: 'medium',
+    padding: 'small',
     appearance: 'none',
@@ -26,3 +20,3 @@ }),
     textDecoration: 'underline',
-    margin: calc(vars.space.medium).negate().toString(),
+    margin: calc(vars.space.small).negate().toString(),
     '::before': {
@@ -51,14 +45,5 @@ content: '""',
 
-export const label = style([
-  sprinkles({
-    position: 'relative',
-    display: 'flex',
-    alignItems: 'center',
-    cursor: 'pointer',
-    userSelect: 'none',
-  }),
-  {
-    height: calc(vars.grid).multiply(9).toString(),
-  },
-]);
+export const label = sprinkles({
+  cursor: 'pointer',
+});
 
@@ -73,3 +58,2 @@ const checkboxSize = '20px';
     opacity: 0,
-    pointerEvents: 'none',
   }),
@@ -90,4 +74,4 @@ {
     borderRadius: 'large',
-    marginRight: 'large',
     padding: checkboxPadding,
+    pointerEvents: 'none',
   }),
@@ -152,1 +136,20 @@ {
 });
+
+export const textField = style([
+  sprinkles({
+    font: 'large',
+    width: 'full',
+    paddingX: 'large',
+    boxSizing: 'border-box',
+    borderRadius: 'medium',
+  }),
+  {
+    color: colorPaletteVars.foreground.neutral,
+    height: vars.touchableSize,
+    background: colorPaletteVars.background.surface,
+    '::placeholder': {
+      color: colorPaletteVars.foreground.neutralSoft,
+    },
+    border: `1px solid ${colorPaletteVars.border.standard}`,
+  },
+]);

src/Playroom/Heading/Heading.css.ts

@@ -1,2 +0,3 @@
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style } from '@vanilla-extract/css';
@@ -3,0 +4,0 @@

src/Playroom/icons/ChevronIcon.css.ts

 import { style } from '@vanilla-extract/css';
-import { vars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
@@ -4,0 +4,0 @@ export const root = style({

src/Playroom/Inline/Inline.css.ts

@@ -1,57 +0,30 @@
-import { calc } from '@vanilla-extract/css-utils';
-import { createVar, style } from '@vanilla-extract/css';
-import { sprinkles, vars } from '../sprinkles.css';
+import { style, createVar, styleVariants } from '@vanilla-extract/css';
+import { vars } from '../vars.css';
 
 const size = createVar();
+const horizontalAlignment = createVar();
 
-export const root = style([
-  sprinkles({
-    display: 'flex',
-    flexWrap: 'wrap',
-  }),
-  {
-    marginTop: calc(size).negate().toString(),
-    marginLeft: calc(size).negate().toString(),
-  },
-]);
-
-export const item = style({
-  paddingTop: size,
-  paddingLeft: size,
+export const gap = style({
+  display: 'flex',
+  flexDirection: 'row',
+  flexWrap: 'wrap',
+  gap: size,
+  alignItems: horizontalAlignment,
 });
 
-export const xxsmall = style({
+export const spaceScale = styleVariants(vars.space, (space) => ({
   vars: {
-    [size]: vars.grid,
+    [size]: space,
   },
-});
+}));
 
-export const xsmall = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(2).toString(),
+export const horizontalAlignmentScale = styleVariants(
+  {
+    top: 'flex-start',
+    center: 'center',
+    bottom: 'flex-end',
   },
-});
-
-export const small = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(3).toString(),
-  },
-});
-
-export const medium = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(4).toString(),
-  },
-});
-
-export const large = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(5).toString(),
-  },
-});
-
-export const xlarge = style({
-  vars: {
-    [size]: calc(vars.grid).multiply(6).toString(),
-  },
-});
+  (alignment) => ({
+    alignItems: alignment,
+  })
+);

src/Playroom/palettes.ts

@@ -52,3 +52,4 @@ import { transparentize, mix, darken } from 'polished';
     body: originalPalette.gray1,
-    selection: originalPalette.blue0,
+    selection: transparentize(0.85, originalPalette.blue1),
+    search: darken(0.15, originalPalette.blue0),
   },
@@ -147,3 +148,3 @@ border: {
   background: {
-    transparent: 'rgba(0, 0, 0, .15)',
+    transparent: 'rgba(255, 255, 255, .07)',
     accent: seekPalette.blue[500],
@@ -155,3 +156,4 @@ positive: mix(0.6, seekPalette.grey[900], seekPalette.mint[500]),
     body: darken(0.03, seekPalette.grey[900]),
-    selection: transparentize(0.85, seekPalette.blue[600]),
+    selection: transparentize(0.75, seekPalette.blue[600]),
+    search: transparentize(0.25, seekPalette.blue[600]),
   },
@@ -158,0 +160,0 @@ border: {

src/Playroom/Playroom.css.ts

 import { style, globalStyle } from '@vanilla-extract/css';
-import { sprinkles, vars, colorPaletteVars } from './sprinkles.css';
+import { sprinkles, colorPaletteVars } from './sprinkles.css';
+import { vars } from './vars.css';
 import { toolbarItemSize } from './ToolbarItem/ToolbarItem.css';
@@ -4,0 +5,0 @@

src/Playroom/SettingsPanel/SettingsPanel.css.ts

@@ -1,3 +0,4 @@
-import { colorPaletteVars, sprinkles, vars } from '../sprinkles.css';
-import { globalStyle, style } from '@vanilla-extract/css';
+import { colorPaletteVars, sprinkles } from '../sprinkles.css';
+import { vars } from '../vars.css';
+import { style } from '@vanilla-extract/css';
 
@@ -10,20 +11,12 @@ export const fieldset = sprinkles({
 
-export const radioContainer = sprinkles({
-  display: 'flex',
-  paddingTop: 'medium',
-});
+export const keyboardShortcutKeys = style([
+  {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 1fr)',
+  },
+  sprinkles({
+    gap: 'xsmall',
+  }),
+]);
 
-export const keyboardShortcutRow = style({
-  display: 'flex',
-  alignItems: 'center',
-});
-
-globalStyle(`${keyboardShortcutRow} > *:first-child`, {
-  flex: 1,
-});
-
-globalStyle(`${keyboardShortcutRow} > *:nth-child(2)`, {
-  flex: '0 0 43%',
-});
-
 export const kbd = style([
@@ -57,8 +50,2 @@ sprinkles({
 
-export const labelText = sprinkles({
-  display: 'block',
-  position: 'relative',
-  zIndex: 1,
-});
-
 export const label = style([
@@ -103,20 +90,1 @@ sprinkles({
 ]);
-
-export const textField = style([
-  sprinkles({
-    font: 'large',
-    width: 'full',
-    paddingX: 'large',
-    boxSizing: 'border-box',
-    borderRadius: 'medium',
-  }),
-  {
-    color: colorPaletteVars.foreground.neutral,
-    height: vars.touchableSize,
-    background: colorPaletteVars.background.surface,
-    '::placeholder': {
-      color: colorPaletteVars.foreground.neutralSoft,
-    },
-    border: `1px solid ${colorPaletteVars.border.standard}`,
-  },
-]);

src/Playroom/Snippets/SearchField/SearchField.css.ts

@@ -1,2 +0,3 @@
-import { sprinkles, vars, colorPaletteVars } from '../../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../../sprinkles.css';
+import { vars } from '../../vars.css';
 import { style } from '@vanilla-extract/css';
@@ -3,0 +4,0 @@

src/Playroom/Snippets/Snippets.css.ts

 import { style } from '@vanilla-extract/css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
@@ -19,3 +20,3 @@ export const root = sprinkles({
     alignItems: 'center',
-    paddingX: 'medium',
+    paddingX: 'small',
   }),
@@ -36,3 +37,3 @@ {
     padding: 'none',
-    margin: 'medium',
+    margin: 'small',
   }),
@@ -39,0 +40,0 @@ {

src/Playroom/sprinkles.css.ts

 import { createGlobalTheme, createThemeContract } from '@vanilla-extract/css';
 import { defineProperties, createSprinkles } from '@vanilla-extract/sprinkles';
 import { dark, light } from './palettes';
+import { vars } from './vars.css';
 
-const fontFamily = 'Helvetica, arial, sans-serif';
-export const vars = createGlobalTheme(':root', {
-  font: {
-    family: {
-      standard: fontFamily,
-      code: 'Source Code Pro, Firacode, Hasklig, Menlo, monospace',
-    },
-    scale: {
-      xsmall: `normal 10px ${fontFamily}`,
-      small: `normal 12px ${fontFamily}`,
-      standard: `normal 14px ${fontFamily}`,
-      large: `normal 16px/1.3em ${fontFamily}`,
-    },
-    weight: {
-      weak: '100',
-      strong: '700',
-    },
-  },
-  grid: '4px',
-  radii: {
-    small: '2px',
-    medium: '4px',
-    large: '6px',
-    full: '100%',
-  },
-  codeGutterSize: '70px',
-  touchableSize: '44px',
-  transition: {
-    slow: 'opacity 300ms ease, transform 300ms ease',
-    medium: 'opacity 200ms ease, transform 200ms ease',
-    fast: 'opacity 100ms ease, transform 100ms ease',
-  },
-  space: {
-    none: '0',
-    xxsmall: '2px',
-    xsmall: '4px',
-    medium: '6px',
-    large: '12px',
-    xlarge: '16px',
-    xxlarge: '20px',
-    xxxlarge: '28px',
-    gutter: '40px',
-  },
-});
-
 export const colorPaletteVars = createThemeContract({
@@ -78,2 +34,3 @@ code: {
     selection: null,
+    search: null,
   },
@@ -102,2 +59,3 @@ border: {
     flexWrap: ['wrap'],
+    flexGrow: [0, 1],
     justifyContent: [
@@ -112,2 +70,3 @@ 'stretch',
     alignItems: ['stretch', 'flex-start', 'center', 'flex-end'],
+    gap: vars.space,
     paddingTop: vars.space,
@@ -117,6 +76,6 @@ paddingBottom: vars.space,
     paddingRight: vars.space,
-    marginTop: vars.space,
-    marginBottom: vars.space,
-    marginLeft: vars.space,
-    marginRight: vars.space,
+    marginTop: { ...vars.space, auto: 'auto' },
+    marginBottom: { ...vars.space, auto: 'auto' },
+    marginLeft: { ...vars.space, auto: 'auto' },
+    marginRight: { ...vars.space, auto: 'auto' },
     overflow: ['hidden', 'auto'],
@@ -154,1 +113,3 @@ boxShadow: colorPaletteVars.shadows,
 export const sprinkles = createSprinkles(responsiveProperties);
+
+export type Sprinkles = Parameters<typeof sprinkles>[0];

src/Playroom/Stack/Stack.css.ts

 import { style, createVar, styleVariants } from '@vanilla-extract/css';
-import { vars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 
@@ -7,7 +7,5 @@ const size = createVar();
 export const gap = style({
-  selectors: {
-    ['&:not(:last-child)']: {
-      paddingBottom: size,
-    },
-  },
+  display: 'flex',
+  flexDirection: 'column',
+  gap: size,
 });
@@ -14,0 +12,0 @@

src/Playroom/StatusMessage/StatusMessage.css.ts

 import { calc } from '@vanilla-extract/css-utils';
 import { style } from '@vanilla-extract/css';
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { toolbarItemSize } from '../ToolbarItem/ToolbarItem.css';
@@ -5,0 +6,0 @@

src/Playroom/Toolbar/Toolbar.css.ts

@@ -45,30 +45,2 @@ import { calc } from '@vanilla-extract/css-utils';
 
-export const topButtons = sprinkles({
-  transition: 'medium',
-});
-
-export const positions_isOpen = style({});
-export const positionContainer = style([
-  sprinkles({
-    position: 'absolute',
-    top: 0,
-    width: 'full',
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-    justifyContent: 'flex-end',
-    transition: 'medium',
-  }),
-  {
-    bottom: toolbarItemSize,
-    selectors: {
-      [`&:not(${positions_isOpen})`]: {
-        opacity: 0,
-        pointerEvents: 'none',
-        transform: 'translateY(20px)',
-      },
-    },
-  },
-]);
-
 export const buttons = style([
@@ -94,5 +66,3 @@ sprinkles({
     position: 'relative',
-    display: 'flex',
     overflow: 'auto',
-    transition: 'slow',
     pointerEvents: 'auto',
@@ -104,15 +74,39 @@ }),
     borderLeft: `${toolbarBorderThickness} solid ${colorPaletteVars.border.standard}`,
-    selectors: {
-      [`${root}:not(${isOpen}) &`]: {
-        transform: `translateX(${calc(`${toolbarOpenSize}px`).multiply(0.3)})`,
-        opacity: 0,
-        pointerEvents: 'none',
-      },
-    },
   },
 ]);
 
-export const preference = sprinkles({
-  position: 'absolute',
-  inset: 0,
-});
+export const transitionStyles = {
+  enter: style({
+    opacity: 0,
+    transform: `translateX(30%)`,
+  }),
+  enterActive: style([
+    sprinkles({
+      transition: 'slow',
+    }),
+    {
+      opacity: 1,
+      transform: `translateX(0)`,
+    },
+  ]),
+  enterDone: style({
+    opacity: 1,
+    transform: `translateX(0)`,
+  }),
+  exit: style({
+    opacity: 1,
+  }),
+  exitActive: style([
+    sprinkles({
+      transition: 'slow',
+    }),
+    {
+      opacity: 0,
+      transform: `translateX(30%)`,
+    },
+  ]),
+  exitDone: style({
+    opacity: 0,
+    transform: `translateX(30%)`,
+  }),
+};

src/Playroom/ToolbarItem/ToolbarItem.css.ts

@@ -1,2 +0,3 @@
-import { sprinkles, vars, colorPaletteVars } from '../sprinkles.css';
+import { sprinkles, colorPaletteVars } from '../sprinkles.css';
+import { vars } from '../vars.css';
 import { style, globalStyle } from '@vanilla-extract/css';
@@ -3,0 +4,0 @@

src/utils/params.ts

 import { createBrowserHistory } from 'history';
 import { useState, useEffect } from 'react';
-import queryString, { type ParsedQuery } from 'query-string';
 
@@ -14,6 +13,4 @@ import playroomConfig from '../config';
 
-  const newQuery = queryString.stringify({
-    ...existingQuery,
-    code,
-  });
+  const newQuery = new URLSearchParams(existingQuery);
+  newQuery.set('code', code);
 
@@ -28,3 +25,3 @@ const params =
   try {
-    return queryString.parse(
+    return new URLSearchParams(
       playroomConfig.paramType === 'hash'
@@ -35,3 +32,3 @@ ? location.hash.replace(/^#/, '')
   } catch (err) {
-    return {};
+    return new URLSearchParams();
   }
@@ -41,3 +38,3 @@ }
 export function useParams<ReturnType>(
-  selector: (rawParams: ParsedQuery) => ReturnType
+  selector: (rawParams: URLSearchParams) => ReturnType
 ): ReturnType {
@@ -44,0 +41,0 @@ const [params, setParams] = useState(getParamsFromQuery);

New alerts

Shell access

Supply chain risk

This module accesses the system shell. Accessing the system shell increases the risk of executing arbitrary code.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Improved metrics

Dependency count

56

decreased by-1.75%

Number of lines in readme file

218

increased by1.87%

Number of low supply chain risk alerts

3

decreased by-25%

Worsened metrics

Total package byte prevSize

2105615

decreased by-3.1%

Dev dependency count

19

increased by11.76%

Number of package files

126

decreased by-25.88%

Lines of code

7287

decreased by-23.22%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Addedclsx@^2.1.1

• + Addedreact-transition-group@^4.4.5

• + [e-mail]/base64@1.1.2(transitive)

• + [e-mail]/json-pack@1.1.1(transitive)

• + [e-mail]/util@1.5.0(transitive)

• + Added@types/retry@0.12.2(transitive)

• + Addedbundle-name@4.1.0(transitive)

• + Addedclsx@2.1.1(transitive)

• + Addeddefault-browser@5.2.1(transitive)

• + Addeddefault-browser-id@5.0.0(transitive)

• + Addeddefine-lazy-prop@3.0.0(transitive)

• + Addeddom-helpers@5.2.1(transitive)

• + Addedhyperdyperid@1.2.0(transitive)

• + Addedis-docker@3.0.0(transitive)

• + Addedis-inside-container@1.0.0(transitive)

• + Addedis-network-error@1.1.0(transitive)

• + Addedis-wsl@3.1.0(transitive)

• + Addedmemfs@4.17.0(transitive)

• + Addedopen@10.1.0(transitive)

• + Addedp-retry@6.2.1(transitive)

• + Addedreact-transition-group@4.4.5(transitive)

• + Addedrun-applescript@7.0.0(transitive)

• + Addedthingies@1.21.0(transitive)

• + Addedtree-dump@1.0.2(transitive)

• + Addedwebpack-dev-middleware@7.4.2(transitive)

• + Addedwebpack-dev-server@5.2.0(transitive)

• - Removed@types/lz-string@^1.3.34

• - Removedcurrent-git-branch@^1.1.0

• - Removedquery-string@^7.1.3

• - Removed@types/lz-string@1.5.0(transitive)

• - Removed@types/retry@0.12.0(transitive)

• - Removedbabel-plugin-add-module-exports@0.2.1(transitive)

• - Removedbrace-expansion@1.1.11(transitive)

• - Removedconcat-map@0.0.1(transitive)

• - Removedcross-spawn@5.1.0(transitive)

• - Removedcurrent-git-branch@1.1.0(transitive)

• - Removeddecode-uri-component@0.2.2(transitive)

• - Removeddefault-gateway@6.0.3(transitive)

• - Removeddefine-lazy-prop@2.0.0(transitive)

• - Removedexeca@0.6.35.1.1(transitive)

• - Removedfilter-obj@1.1.0(transitive)

• - Removedfs-monkey@1.0.6(transitive)

• - Removedfs.realpath@1.0.0(transitive)

• - Removedget-stream@3.0.06.0.1(transitive)

• - Removedglob@7.2.3(transitive)

• - Removedhtml-entities@2.5.2(transitive)

• - Removedhuman-signals@2.1.0(transitive)

• - Removedinflight@1.0.6(transitive)

• - Removedis-docker@2.2.1(transitive)

• - Removedis-git-repository@1.1.1(transitive)

• - Removedis-stream@1.1.02.0.1(transitive)

• - Removedis-wsl@2.2.0(transitive)

• - Removedlru-cache@4.1.5(transitive)

• - Removedmemfs@3.6.0(transitive)

• - Removedmimic-fn@2.1.0(transitive)

• - Removedminimatch@3.1.2(transitive)

• - Removednpm-run-path@2.0.24.0.1(transitive)

• - Removedonce@1.4.0(transitive)

• - Removedonetime@5.1.2(transitive)

• - Removedopen@8.4.2(transitive)

• - Removedp-finally@1.0.0(transitive)

• - Removedp-retry@4.6.2(transitive)

• - Removedpath-is-absolute@1.0.1(transitive)

• - Removedpath-key@2.0.1(transitive)

• - Removedpseudomap@1.0.2(transitive)

• - Removedquery-string@7.1.3(transitive)

• - Removedrimraf@3.0.2(transitive)

• - Removedshebang-command@1.2.0(transitive)

• - Removedshebang-regex@1.0.0(transitive)

• - Removedsignal-exit@3.0.7(transitive)

• - Removedsplit-on-first@1.1.0(transitive)

• - Removedstrict-uri-encode@2.0.0(transitive)

• - Removedstrip-eof@1.0.0(transitive)

• - Removedstrip-final-newline@2.0.0(transitive)

• - Removedwebpack-dev-middleware@5.3.4(transitive)

• - Removedwebpack-dev-server@4.15.2(transitive)

• - Removedwhich@1.3.1(transitive)

• - Removedwrappy@1.0.2(transitive)

• - Removedyallist@2.1.2(transitive)

• Updatedlz-string@^1.5.0

• Updatedwebpack-dev-server@^5.0.2