@jackuait/blok 0.8.2 → 0.8.3-beta.2

package/src/styles/main.css

@@ -476,6 +476,15 @@
 @custom-variant not-mobile (@media (min-width: 651px));
 @custom-variant can-hover (@media (hover: hover));
 
+/*
+  Theme-aware dark variant for components outside the scoped preflight
+  (e.g. emoji picker, which is appended to document.body).
+  The component sets data-theme="dark"|"light" on its root element after
+  resolving the Blok theme; this variant replaces Tailwind's built-in dark:
+  which incorrectly keys off prefers-color-scheme alone.
+*/
+@custom-variant theme-dark (&:where([data-theme="dark"], [data-theme="dark"] *));
+
 /* Non-overridable tokens — compiled statically */
 @theme {
   /* Z-index */
@@ -515,8 +524,6 @@
   --animate-bounce-in: bounceIn 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
   --animate-selection-bounce: selectionBounce 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
   --animate-button-clicked: buttonClicked 0.75s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
-  --animate-panel-showing: panelShowing 150ms cubic-bezier(0.16, 1, 0.3, 1);
-  --animate-panel-showing-mobile: panelShowingMobile 250ms ease;
   --animate-wobble: wobble 400ms;
   --animate-rotation: rotation 1.2s infinite linear;
   --animate-notify-bounce-in: notifyBounceIn 600ms 1;
@@ -548,18 +555,6 @@
     80%, 100% { transform: scale3d(1, 1, 1); }
   }
 
-  @keyframes panelShowing {
-    from { opacity: 0; transform: translateY(-6px) scale(0.96); }
-    60% { opacity: 1; transform: translateY(1px) scale(1.005); }
-    to { opacity: 1; transform: translateY(0) scale(1); }
-  }
-
-  @keyframes panelShowingMobile {
-    from { opacity: 0; transform: translateY(14px) scale(0.98); }
-    70% { opacity: 1; transform: translateY(-4px); }
-    to { transform: translateY(0); }
-  }
-
   @keyframes wobble {
     from { transform: translate3d(0, 0, 0); }
     15% { transform: translate3d(-9%, 0, 0); }
@@ -761,7 +756,7 @@
     --blok-selection: rgba(35, 131, 226, 0.2);
     --blok-selection-inline: rgba(35, 131, 226, 0.3);
     --blok-selection-highlight: rgba(35, 131, 226, 0.25);
-    --blok-bg-light: #191918;
+    --blok-bg-light: rgba(255, 255, 255, 0.08);
     --blok-gray-text: #a39e98;
     --blok-dark: #191918;
     --blok-active-icon: #529cca;
@@ -854,7 +849,7 @@
   --blok-selection: rgba(35, 131, 226, 0.2);
   --blok-selection-inline: rgba(35, 131, 226, 0.3);
   --blok-selection-highlight: rgba(35, 131, 226, 0.25);
-  --blok-bg-light: #191918;
+  --blok-bg-light: rgba(255, 255, 255, 0.08);
   --blok-gray-text: #a39e98;
   --blok-dark: #191918;
   --blok-active-icon: #529cca;
@@ -1156,6 +1151,31 @@
   @apply select-none;
 }
 
+/**
+ * Child-container heading overrides (callout, toggle heading)
+ * Inside [data-blok-toggle-children], headings should match paragraph spacing
+ * rather than using their large root-level top margins (mt-8, mt-[26px], etc.).
+ */
+[data-blok-toggle-children] :is(h1, h2, h3, h4, h5, h6) {
+  @apply mt-px;
+}
+
+/**
+ * Callout emoji vertical centering for heading first children.
+ * Headings have taller line boxes than the emoji button, so the emoji
+ * needs a top margin to shift its center down to match the heading's
+ * first line center.  Values: (heading-line-height − emoji-content) / 2 + 1px mt-px.
+ */
+[data-blok-component="callout"] button:has(+ [data-blok-toggle-children] > :first-child h1) {
+  margin-top: 7.5px;
+}
+[data-blok-component="callout"] button:has(+ [data-blok-toggle-children] > :first-child h2) {
+  margin-top: 3.6px;
+}
+[data-blok-component="callout"] button:has(+ [data-blok-toggle-children] > :first-child h3) {
+  margin-top: 1px;
+}
+
 /**
  * Table cell block wrapper overrides
  * Strip all nested spacing so only the cell's own padding (py-1 px-2) provides spacing.
@@ -1275,7 +1295,7 @@
  */
 [data-blok-slash-search],
 [data-blok-slash-search]:focus-visible {
-  @apply bg-search-input-bg rounded-md transition-colors duration-150 w-fit max-w-[240px] px-2 py-1;
+  @apply bg-search-input-bg rounded-[10px] transition-colors duration-150 w-fit max-w-[240px] px-2;
 }
 
 [data-blok-slash-search]::after {
@@ -1307,3 +1327,87 @@
 [data-blok-popover-items]::-webkit-scrollbar-thumb:hover {
   background: var(--blok-gray-text);
 }
+
+/**
+ * Emoji picker — element resets.
+ * The picker lives outside [data-blok-popover] scope so it does not
+ * inherit the scoped preflight.  :where() keeps specificity at zero
+ * so Tailwind utility classes override freely.
+ */
+:where([data-blok-emoji-picker]) :where(button, input) {
+  appearance: none;
+  background: transparent;
+  border: none;
+  color: inherit;
+  font: inherit;
+  padding: 0;
+  margin: 0;
+}
+
+/* The picker sits outside [data-blok-popover] so the scoped preflight's
+   [hidden] { display: none !important } rule does not apply. Without this,
+   Tailwind's `flex` class overrides the UA `display: none` for [hidden]. */
+:where([data-blok-emoji-picker][hidden]),
+:where([data-blok-emoji-picker]) :where([hidden]) {
+  display: none !important;
+}
+
+/**
+ * Emoji picker — opening animation
+ */
+[data-blok-emoji-picker] {
+  animation: blok-emoji-picker-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
+  transform-origin: top left;
+}
+
+@keyframes blok-emoji-picker-in {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+/**
+ * Emoji picker — empty-state fade
+ */
+@keyframes blok-emoji-empty-in {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+/**
+ * Emoji picker — thin scrollbar (only visible on hover)
+ */
+[data-emoji-picker-body] {
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+}
+[data-emoji-picker-body]:hover {
+  scrollbar-color: color-mix(in srgb, currentColor 12%, transparent) transparent;
+}
+[data-emoji-picker-body]::-webkit-scrollbar {
+  width: 6px;
+}
+[data-emoji-picker-body]::-webkit-scrollbar-track {
+  background: transparent;
+}
+[data-emoji-picker-body]::-webkit-scrollbar-thumb {
+  background: transparent;
+  border-radius: 3px;
+}
+[data-emoji-picker-body]:hover::-webkit-scrollbar-thumb {
+  background: color-mix(in srgb, currentColor 12%, transparent);
+}
+[data-emoji-picker-body]::-webkit-scrollbar-thumb:hover {
+  background: color-mix(in srgb, currentColor 22%, transparent);
+}

package/src/tools/callout/block-operations.ts

@@ -0,0 +1,17 @@
+// src/tools/callout/block-operations.ts
+
+import type { CalloutData } from './types';
+
+interface SaveCalloutOptions {
+  emoji: string;
+  textColor: string | null;
+  backgroundColor: string | null;
+}
+
+export function saveCallout(options: SaveCalloutOptions): CalloutData {
+  return {
+    emoji: options.emoji,
+    textColor: options.textColor,
+    backgroundColor: options.backgroundColor,
+  };
+}

package/src/tools/callout/callout-keyboard.ts

@@ -0,0 +1,45 @@
+// src/tools/callout/callout-keyboard.ts
+
+import type { API } from '../../../types';
+
+interface FirstChildBackspaceContext {
+  api: API;
+  calloutBlockId: string | undefined;
+  firstChildBlockId: string;
+  event: KeyboardEvent;
+}
+
+/**
+ * Handle Backspace on an empty first child block inside a callout.
+ *
+ * - If the callout has only this one child: convert the callout to a paragraph (removes callout).
+ * - If the callout has other children: delete the empty first child and move caret before the callout.
+ */
+export async function handleCalloutFirstChildBackspace(ctx: FirstChildBackspaceContext): Promise<void> {
+  if (ctx.calloutBlockId === undefined) {
+    return;
+  }
+
+  const children = ctx.api.blocks.getChildren(ctx.calloutBlockId);
+
+  ctx.event.preventDefault();
+
+  if (children.length <= 1) {
+    // Only child — remove the entire callout by converting to paragraph
+    await ctx.api.blocks.convert(ctx.calloutBlockId, 'paragraph');
+    return;
+  }
+
+  // Multiple children — delete the empty first child and move caret before callout
+  const firstChildIndex = ctx.api.blocks.getBlockIndex(ctx.firstChildBlockId);
+
+  if (firstChildIndex !== undefined) {
+    await ctx.api.blocks.delete(firstChildIndex);
+  }
+
+  const calloutIndex = ctx.api.blocks.getBlockIndex(ctx.calloutBlockId);
+
+  if (calloutIndex !== undefined && calloutIndex > 0) {
+    ctx.api.caret.setToBlock(calloutIndex - 1, 'end');
+  }
+}

package/src/tools/callout/constants.ts

@@ -0,0 +1,30 @@
+// src/tools/callout/constants.ts
+
+export const TOOL_NAME = 'callout';
+
+// i18n keys
+export const COLOR_KEY = 'tools.callout.color';
+export const EDIT_ICON_KEY = 'tools.callout.editIcon';
+export const ADD_EMOJI_KEY = 'tools.callout.addEmoji';
+export const REMOVE_EMOJI_KEY = 'tools.callout.removeEmoji';
+export const FILTER_EMOJIS_KEY = 'tools.callout.filterEmojis';
+export const CALLOUT_EMOJI_CATEGORY_KEY = 'tools.callout.calloutEmojiCategory';
+export const NO_EMOJIS_FOUND_KEY = 'tools.callout.noEmojisFound';
+export const PICK_RANDOM_KEY = 'tools.callout.pickRandom';
+export const SKIN_TONE_KEY = 'tools.callout.skinTone';
+export const EMOJI_CATEGORY_PEOPLE_KEY = 'tools.callout.emojiCategoryPeople';
+export const EMOJI_CATEGORY_NATURE_KEY = 'tools.callout.emojiCategoryNature';
+export const EMOJI_CATEGORY_FOOD_KEY = 'tools.callout.emojiCategoryFood';
+export const EMOJI_CATEGORY_ACTIVITY_KEY = 'tools.callout.emojiCategoryActivity';
+export const EMOJI_CATEGORY_TRAVEL_KEY = 'tools.callout.emojiCategoryTravel';
+export const EMOJI_CATEGORY_OBJECTS_KEY = 'tools.callout.emojiCategoryObjects';
+export const EMOJI_CATEGORY_SYMBOLS_KEY = 'tools.callout.emojiCategorySymbols';
+export const EMOJI_CATEGORY_FLAGS_KEY = 'tools.callout.emojiCategoryFlags';
+
+// Defaults
+export const DEFAULT_EMOJI = '💡';
+
+// CSS — Tailwind classes
+export const WRAPPER_STYLES = 'rounded-xl px-4 py-[5px] my-1 flex items-start gap-2';
+export const EMOJI_BUTTON_STYLES = 'text-[1.25rem] cursor-pointer bg-transparent border-0 px-0 py-[7px] flex-shrink-0 select-none';
+export const CHILDREN_STYLES = 'flex-1 min-w-0';

package/src/tools/callout/dom-builder.ts

@@ -0,0 +1,53 @@
+// src/tools/callout/dom-builder.ts
+
+import { TOGGLE_ATTR } from '../toggle/constants';
+import {
+  WRAPPER_STYLES,
+  EMOJI_BUTTON_STYLES,
+  CHILDREN_STYLES,
+} from './constants';
+
+export interface CalloutDOMRefs {
+  wrapper: HTMLElement;
+  emojiButton: HTMLButtonElement;
+  childContainer: HTMLElement;
+}
+
+export interface BuildCalloutDOMOptions {
+  emoji: string;
+  readOnly: boolean;
+  addEmojiLabel: string;
+}
+
+export function buildCalloutDOM(options: BuildCalloutDOMOptions): CalloutDOMRefs {
+  const { emoji, readOnly, addEmojiLabel } = options;
+
+  // Wrapper — flex row: emoji | children
+  const wrapper = document.createElement('div');
+  wrapper.className = WRAPPER_STYLES;
+
+  // Emoji button
+  const emojiButton = document.createElement('button');
+  emojiButton.type = 'button';
+  emojiButton.className = EMOJI_BUTTON_STYLES;
+  emojiButton.textContent = emoji || '';
+  emojiButton.setAttribute('aria-label', emoji !== '' ? emoji : addEmojiLabel);
+  emojiButton.setAttribute('tabindex', '0');
+  emojiButton.setAttribute('data-blok-testid', 'callout-emoji-btn');
+
+  if (readOnly) {
+    emojiButton.disabled = true;
+  }
+
+  // Children container — holds all block children
+  const childContainer = document.createElement('div');
+  childContainer.className = CHILDREN_STYLES;
+  childContainer.setAttribute(TOGGLE_ATTR.toggleChildren, '');
+  childContainer.setAttribute('data-blok-child-toolbar', '');
+  childContainer.setAttribute('data-blok-mutation-free', 'true');
+
+  wrapper.appendChild(emojiButton);
+  wrapper.appendChild(childContainer);
+
+  return { wrapper, emojiButton, childContainer };
+}

package/src/tools/callout/emoji-picker/emoji-data.ts

@@ -0,0 +1,105 @@
+// src/tools/callout/emoji-picker/emoji-data.ts
+
+import type { EmojiLocaleData } from './emoji-locale';
+
+interface EmojiMartData {
+  categories: Array<{ id: string; emojis: string[] }>;
+  emojis: Record<string, {
+    id: string;
+    name: string;
+    keywords: string[];
+    skins: Array<{ native: string; unified: string }>;
+    version: number;
+  }>;
+}
+
+export interface ProcessedEmoji {
+  native: string;
+  skins: string[];
+  id: string;
+  name: string;
+  keywords: string[];
+  category: string;
+}
+
+export const CURATED_CALLOUT_EMOJIS: string[] = [
+  '💡', '👉', '☝️', '✅', '⚠️', '🔑', '🔥', '📌', '✂️', '❓',
+  '🚫', '⏰', '♻️', '🔒', '📖', '👣', '➡️', '📢', '🛠️', '⚙️',
+];
+
+const cache: { data: ProcessedEmoji[] | null } = { data: null };
+
+function processCategory(category: { id: string; emojis: string[] }, emojis: EmojiMartData['emojis']): ProcessedEmoji[] {
+  const result: ProcessedEmoji[] = [];
+
+  for (const emojiId of category.emojis) {
+    const emoji = emojis[emojiId];
+
+    if (emoji === undefined) {
+      continue;
+    }
+
+    const firstSkin = emoji.skins[0];
+
+    if (firstSkin === undefined) {
+      continue;
+    }
+
+    result.push({
+      native: firstSkin.native,
+      skins: emoji.skins.map(s => s.native),
+      id: emoji.id,
+      name: emoji.name,
+      keywords: emoji.keywords,
+      category: category.id,
+    });
+  }
+
+  return result;
+}
+
+export async function loadEmojiData(): Promise<ProcessedEmoji[]> {
+  if (cache.data !== null) {
+    return cache.data;
+  }
+
+  const raw = await import('@emoji-mart/data') as unknown as { default: EmojiMartData } | EmojiMartData;
+  const data: EmojiMartData = 'default' in raw && raw.default !== undefined
+    ? raw.default
+    : (raw as unknown as EmojiMartData);
+
+  const processed = data.categories.flatMap(category => processCategory(category, data.emojis));
+
+  cache.data = processed;
+  return processed;
+}
+
+export function searchEmojis(emojis: ProcessedEmoji[], query: string, localeData?: EmojiLocaleData | null): ProcessedEmoji[] {
+  const lower = query.toLowerCase();
+  return emojis.filter(emoji => {
+    // English match (always available from emoji-mart)
+    if (emoji.name.toLowerCase().includes(lower) || emoji.keywords.some(k => k.includes(lower))) {
+      return true;
+    }
+
+    // Translated match (when locale data is loaded)
+    const entry = localeData?.[emoji.native];
+
+    if (entry !== undefined) {
+      return entry.n.toLowerCase().includes(lower) ||
+        (entry.k !== undefined && entry.k.some(k => k.toLowerCase().includes(lower)));
+    }
+
+    return false;
+  });
+}
+
+export function groupEmojisByCategory(emojis: ProcessedEmoji[]): Map<string, ProcessedEmoji[]> {
+  const groups = new Map<string, ProcessedEmoji[]>();
+  for (const emoji of emojis) {
+    const group = groups.get(emoji.category) ?? [];
+    group.push(emoji);
+    groups.set(emoji.category, group);
+  }
+  return groups;
+}

package/src/tools/callout/emoji-picker/emoji-locale.ts

@@ -0,0 +1,165 @@
+// src/tools/callout/emoji-picker/emoji-locale.ts
+
+/**
+ * Entry shape for a single emoji in a locale file.
+ * `n` = translated name, `k` = translated keywords (optional).
+ */
+export interface EmojiLocaleEntry {
+  n: string;
+  k?: string[];
+}
+
+/**
+ * Map from native emoji character to its locale entry.
+ */
+export type EmojiLocaleData = Record<string, EmojiLocaleEntry>;
+
+/**
+ * Module-level cache: locale code -> loaded data.
+ */
+const cache = new Map<string, EmojiLocaleData>();
+
+/**
+ * Dynamic importers for each locale JSON file.
+ * Only includes locales that have generated files (65 locales — all Blok locales except dv and yi).
+ */
+const importers: Record<string, () => Promise<{ default: EmojiLocaleData }>> = {
+  am: () => import('./locales/am.json'),
+  ar: () => import('./locales/ar.json'),
+  az: () => import('./locales/az.json'),
+  bg: () => import('./locales/bg.json'),
+  bn: () => import('./locales/bn.json'),
+  bs: () => import('./locales/bs.json'),
+  cs: () => import('./locales/cs.json'),
+  da: () => import('./locales/da.json'),
+  de: () => import('./locales/de.json'),
+  el: () => import('./locales/el.json'),
+  es: () => import('./locales/es.json'),
+  et: () => import('./locales/et.json'),
+  fa: () => import('./locales/fa.json'),
+  fi: () => import('./locales/fi.json'),
+  fil: () => import('./locales/fil.json'),
+  fr: () => import('./locales/fr.json'),
+  gu: () => import('./locales/gu.json'),
+  he: () => import('./locales/he.json'),
+  hi: () => import('./locales/hi.json'),
+  hr: () => import('./locales/hr.json'),
+  hu: () => import('./locales/hu.json'),
+  hy: () => import('./locales/hy.json'),
+  id: () => import('./locales/id.json'),
+  it: () => import('./locales/it.json'),
+  ja: () => import('./locales/ja.json'),
+  ka: () => import('./locales/ka.json'),
+  km: () => import('./locales/km.json'),
+  kn: () => import('./locales/kn.json'),
+  ko: () => import('./locales/ko.json'),
+  ku: () => import('./locales/ku.json'),
+  lo: () => import('./locales/lo.json'),
+  lt: () => import('./locales/lt.json'),
+  lv: () => import('./locales/lv.json'),
+  mk: () => import('./locales/mk.json'),
+  ml: () => import('./locales/ml.json'),
+  mn: () => import('./locales/mn.json'),
+  mr: () => import('./locales/mr.json'),
+  ms: () => import('./locales/ms.json'),
+  my: () => import('./locales/my.json'),
+  ne: () => import('./locales/ne.json'),
+  nl: () => import('./locales/nl.json'),
+  no: () => import('./locales/no.json'),
+  pa: () => import('./locales/pa.json'),
+  pl: () => import('./locales/pl.json'),
+  ps: () => import('./locales/ps.json'),
+  pt: () => import('./locales/pt.json'),
+  ro: () => import('./locales/ro.json'),
+  ru: () => import('./locales/ru.json'),
+  sd: () => import('./locales/sd.json'),
+  si: () => import('./locales/si.json'),
+  sk: () => import('./locales/sk.json'),
+  sl: () => import('./locales/sl.json'),
+  sq: () => import('./locales/sq.json'),
+  sr: () => import('./locales/sr.json'),
+  sv: () => import('./locales/sv.json'),
+  sw: () => import('./locales/sw.json'),
+  ta: () => import('./locales/ta.json'),
+  te: () => import('./locales/te.json'),
+  th: () => import('./locales/th.json'),
+  tr: () => import('./locales/tr.json'),
+  ug: () => import('./locales/ug.json'),
+  uk: () => import('./locales/uk.json'),
+  ur: () => import('./locales/ur.json'),
+  vi: () => import('./locales/vi.json'),
+  zh: () => import('./locales/zh.json'),
+};
+
+/**
+ * Lazy-load and cache locale data.
+ * Returns null for 'en' (no translation needed) or unsupported locales.
+ */
+export async function loadEmojiLocale(locale: string): Promise<EmojiLocaleData | null> {
+  if (locale === 'en') {
+    return null;
+  }
+
+  const cached = cache.get(locale);
+
+  if (cached !== undefined) {
+    return cached;
+  }
+
+  const importer = importers[locale];
+
+  if (importer === undefined) {
+    return null;
+  }
+
+  try {
+    const module = await importer();
+    const data = module.default;
+
+    cache.set(locale, data);
+
+    return data;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Look up a translated name from the cache.
+ * Returns null if the locale isn't loaded or the emoji isn't in the data.
+ */
+export function getTranslatedName(native: string, locale: string): string | null {
+  const data = cache.get(locale);
+
+  if (data === undefined) {
+    return null;
+  }
+
+  const entry = data[native];
+
+  if (entry === undefined) {
+    return null;
+  }
+
+  return entry.n;
+}
+
+/**
+ * Look up translated keywords from the cache.
+ * Returns null if the locale isn't loaded, the emoji isn't in the data, or no keywords exist.
+ */
+export function getTranslatedKeywords(native: string, locale: string): string[] | null {
+  const data = cache.get(locale);
+
+  if (data === undefined) {
+    return null;
+  }
+
+  const entry = data[native];
+
+  if (entry === undefined) {
+    return null;
+  }
+
+  return entry.k ?? null;
+}