@redvars/peacock 3.8.1 → 3.8.3

package/src/code-highlighter/code-highlighter.ts

@@ -2,22 +2,46 @@ import { html, LitElement } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { classMap } from 'lit/directives/class-map.js';
-import pierreDark from '@pierre/theme/pierre-dark';
-import pierreLight from '@pierre/theme/pierre-light';
-
-import prettier from 'prettier/standalone';
-
-import prettierPluginBabel from 'prettier/plugins/babel';
-import prettierPluginHtml from 'prettier/plugins/html';
-import prettierPluginPostcss from 'prettier/plugins/postcss';
-import * as prettierPluginEstree from 'prettier/plugins/estree';
-
-import { BundledLanguage, codeToHtml, ShikiTransformer } from 'shiki';
-
+import type { BundledLanguage, ShikiTransformer } from 'shiki';
 import IndividualComponent from '@/IndividualComponent.js';
-import { copyToClipboard } from '@/__utils/copy-to-clipboard.js';
+import { copyToClipboard } from '@/__internal/utils/copy-to-clipboard.js';
 import styles from './code-highlighter.scss';
 
+// Module-level promises – Rollup splits each import() specifier into a separate chunk.
+// Caching here prevents parallel loads when multiple instances initialise at the same time.
+let _shiki: Promise<typeof import('shiki')> | null = null;
+let _themes: Promise<
+  [
+    typeof import('@pierre/theme/pierre-dark'),
+    typeof import('@pierre/theme/pierre-light'),
+  ]
+> | null = null;
+let _prettier: Promise<typeof import('prettier/standalone')> | null = null;
+let _pluginBabel: Promise<typeof import('prettier/plugins/babel')> | null =
+  null;
+let _pluginHtml: Promise<typeof import('prettier/plugins/html')> | null = null;
+let _pluginPostcss: Promise<typeof import('prettier/plugins/postcss')> | null =
+  null;
+let _pluginEstree: Promise<typeof import('prettier/plugins/estree')> | null =
+  null;
+
+const loadShiki = () => (_shiki ??= import('shiki'));
+
+const loadThemes = () =>
+  (_themes ??= Promise.all([
+    import('@pierre/theme/pierre-dark'),
+    import('@pierre/theme/pierre-light'),
+  ]));
+
+const loadPrettier = () => (_prettier ??= import('prettier/standalone'));
+const loadPluginBabel = () =>
+  (_pluginBabel ??= import('prettier/plugins/babel'));
+const loadPluginHtml = () => (_pluginHtml ??= import('prettier/plugins/html'));
+const loadPluginPostcss = () =>
+  (_pluginPostcss ??= import('prettier/plugins/postcss'));
+const loadPluginEstree = () =>
+  (_pluginEstree ??= import('prettier/plugins/estree'));
+
 const locale = {
   loading: 'Loading code...',
   copyToClipboard: 'Copy to clipboard',
@@ -109,31 +133,48 @@ export class CodeHighlighter extends LitElement {
 
     codeString = this.decode(codeString);
 
-    // eslint-disable-next-line default-case
-    switch (this.language) {
-      case 'javascript':
-        codeString = await prettier.format(codeString, {
-          parser: 'babel',
-          plugins: [prettierPluginBabel, prettierPluginEstree],
-          bracketSameLine: true,
-          // Helps if you are writing HTML inside template literals
-          htmlWhitespaceSensitivity: 'ignore',
-        });
-        break;
-      case 'html':
-        codeString = await prettier.format(codeString, {
-          parser: 'html',
-          plugins: [prettierPluginHtml],
-          bracketSameLine: true,
-          htmlWhitespaceSensitivity: 'ignore',
-        });
-        break;
-      case 'css':
-        codeString = await prettier.format(codeString, {
-          parser: 'css',
-          plugins: [prettierPluginPostcss],
-        });
-        break;
+    if (this.format !== false) {
+      // eslint-disable-next-line default-case
+      switch (this.language) {
+        case 'javascript': {
+          const [prettier, pluginBabel, pluginEstree] = await Promise.all([
+            loadPrettier(),
+            loadPluginBabel(),
+            loadPluginEstree(),
+          ]);
+          codeString = await prettier.format(codeString, {
+            parser: 'babel',
+            plugins: [pluginBabel, pluginEstree],
+            bracketSameLine: true,
+            htmlWhitespaceSensitivity: 'ignore',
+          });
+          break;
+        }
+        case 'html': {
+          const [prettier, pluginHtml] = await Promise.all([
+            loadPrettier(),
+            loadPluginHtml(),
+          ]);
+          codeString = await prettier.format(codeString, {
+            parser: 'html',
+            plugins: [pluginHtml],
+            bracketSameLine: true,
+            htmlWhitespaceSensitivity: 'ignore',
+          });
+          break;
+        }
+        case 'css': {
+          const [prettier, pluginPostcss] = await Promise.all([
+            loadPrettier(),
+            loadPluginPostcss(),
+          ]);
+          codeString = await prettier.format(codeString, {
+            parser: 'css',
+            plugins: [pluginPostcss],
+          });
+          break;
+        }
+      }
     }
 
     this.parsedCode = codeString;
@@ -152,6 +193,11 @@ export class CodeHighlighter extends LitElement {
       });
     }
 
+    const [
+      { codeToHtml },
+      [{ default: pierreDark }, { default: pierreLight }],
+    ] = await Promise.all([loadShiki(), loadThemes()]);
+
     this.compiledCode = await codeToHtml(codeString, {
       lang: this.language,
       themes: {
@@ -164,8 +210,17 @@ export class CodeHighlighter extends LitElement {
     });
   }
 
-  protected updated() {
-    this.__highlightCode();
+  protected updated(changed: Map<PropertyKey, unknown>) {
+    // Only re-highlight when the source content or rendering options change,
+    // not on unrelated state updates like the copy-button feedback toggle.
+    if (
+      changed.has('value') ||
+      changed.has('language') ||
+      changed.has('lineNumbers') ||
+      changed.has('format')
+    ) {
+      this.__highlightCode();
+    }
   }
 
   private async __handleCopyClick() {

package/src/code-highlighter/demo/index.html

@@ -1,28 +1,31 @@
 <!doctype html>
-<html lang='en-GB'>
-<head>
-  <meta charset='utf-8'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0, viewport-fit=cover' />
-  <link rel='stylesheet' href='/dist/assets/styles/tokens.css' />
-  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
+<html lang="en-GB">
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
+    <link rel="stylesheet" href="/dist/assets/styles/tokens.css" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
 
-  <style>
-    body {
-      background: #fafafa;
-    }
-  </style>
-</head>
-<body>
-
-
-<p-code-highlighter language="javascript">
-    <pre><code>
+    <style>
+      body {
+        background: #fafafa;
+      }
+    </style>
+  </head>
+  <body>
+    <p-code-highlighter language="javascript">
+      <pre><code>
       const helloWorld = () => alert ('Hello World!');
       export { helloWorld };
 </code></pre>
-</p-code-highlighter>
-
+    </p-code-highlighter>
 
-<script type='module' src='/dist/peacock-loader.js'></script>
-</body>
+    <script type="module" src="/dist/loader.js"></script>
+  </body>
 </html>

package/src/color-picker/color-picker.scss

@@ -0,0 +1,217 @@
+:host {
+  --_sv-height: var(--color-picker-sv-height, 160px);
+  --_thumb-size: 16px;
+  --_track-height: 12px;
+  --_preview-size: 40px;
+  --_radius: 6px;
+
+  display: inline-block;
+  width: var(--color-picker-width, 240px);
+  touch-action: none;
+}
+
+.color-picker {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 0.5rem);
+
+  &.disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+}
+
+// ── SV panel ──────────────────────────────────────────────────────────────────
+
+.sv-panel {
+  position: relative;
+  width: 100%;
+  height: var(--_sv-height);
+  border-radius: var(--_radius);
+  // White-to-hue horizontal gradient, black overlay going downward
+  background:
+    linear-gradient(to bottom, transparent 0%, #000 100%),
+    linear-gradient(to right, #fff 0%, var(--hue-color) 100%);
+  cursor: crosshair;
+  user-select: none;
+  overflow: hidden;
+}
+
+.sv-cursor {
+  position: absolute;
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  border-radius: 50%;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  outline: none;
+  cursor: crosshair;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
+  }
+}
+
+// ── Controls row (preview + sliders) ─────────────────────────────────────────
+
+.controls-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-200, 1rem);
+}
+
+.color-preview {
+  width: var(--_preview-size);
+  height: var(--_preview-size);
+  border-radius: 50%;
+  flex-shrink: 0;
+  overflow: hidden;
+  // Checkerboard backdrop (visible through transparent colors)
+  background: repeating-conic-gradient(#bbb 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
+}
+
+.preview-inner {
+  width: 100%;
+  height: 100%;
+}
+
+.sliders {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-100, 0.5rem);
+}
+
+// ── Slider tracks ─────────────────────────────────────────────────────────────
+
+.slider-track {
+  position: relative;
+  width: 100%;
+  height: var(--_track-height);
+  border-radius: calc(var(--_track-height) / 2);
+  cursor: pointer;
+  user-select: none;
+}
+
+.hue-track {
+  background: linear-gradient(
+    to right,
+    hsl(0, 100%, 50%),
+    hsl(60, 100%, 50%),
+    hsl(120, 100%, 50%),
+    hsl(180, 100%, 50%),
+    hsl(240, 100%, 50%),
+    hsl(300, 100%, 50%),
+    hsl(360, 100%, 50%)
+  );
+}
+
+.alpha-track {
+  // Color gradient over checkerboard
+  background:
+    linear-gradient(to right, transparent, var(--current-color, currentColor)),
+    repeating-conic-gradient(#bbb 0% 25%, #fff 0% 50%) 0 0 / 8px 8px;
+}
+
+// ── Slider thumb ──────────────────────────────────────────────────────────────
+
+.slider-thumb {
+  position: absolute;
+  top: 50%;
+  width: var(--_thumb-size);
+  height: var(--_thumb-size);
+  border-radius: 50%;
+  background: #fff;
+  border: 2px solid rgba(0, 0, 0, 0.15);
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+  transform: translate(-50%, -50%);
+  cursor: grab;
+  outline: none;
+  transition: box-shadow 0.15s ease;
+
+  &:focus-visible {
+    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary);
+  }
+
+  &:active {
+    cursor: grabbing;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
+  }
+}
+
+// ── Inputs row ────────────────────────────────────────────────────────────────
+
+.inputs-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-100, 0.5rem);
+}
+
+.hex-input-wrapper {
+  display: flex;
+  align-items: center;
+  flex: 1;
+  gap: var(--spacing-050, 0.25rem);
+  height: 32px;
+  padding: 0 8px;
+  border: 1px solid var(--color-outline-variant, #ccc);
+  border-radius: var(--_radius);
+  background: var(--color-surface-container-high, #ece6f0);
+}
+
+.hex-prefix {
+  color: var(--color-on-surface-variant, #666);
+  font-size: 13px;
+  flex-shrink: 0;
+}
+
+.input-label {
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--color-on-surface-variant, #666);
+  flex-shrink: 0;
+}
+
+.hex-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  font-family: var(--typography-mono-font-family, monospace);
+  color: var(--color-on-surface, #333);
+}
+
+.alpha-input-wrapper {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-050, 0.25rem);
+  height: 32px;
+  padding: 0 8px;
+  width: 64px;
+  flex-shrink: 0;
+  border: 1px solid var(--color-outline-variant, #ccc);
+  border-radius: var(--_radius);
+  background: var(--color-surface-container-high, #ece6f0);
+}
+
+.alpha-input {
+  flex: 1;
+  min-width: 0;
+  border: none;
+  background: transparent;
+  outline: none;
+  font-size: 13px;
+  color: var(--color-on-surface, #333);
+
+  // Hide browser spin buttons
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    appearance: none;
+  }
+
+  appearance: textfield;
+}