@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/ui/components/controls/font-picker/font-picker-footer.tsx

@@ -0,0 +1,116 @@
+"use client";
+
+import * as React from "react";
+
+import { Slider } from "../../primitives";
+
+export function LetterSpacingIcon(): React.JSX.Element {
+  return (
+    <svg
+      aria-hidden
+      className="size-4 shrink-0"
+      data-slot="font-picker-footer-icon"
+      fill="none"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect fill="#D9D9D9" height="16" width="1" />
+      <rect fill="#D9D9D9" height="16" width="1" x="15" />
+      <path
+        d="M5.18182 13H4L7.41818 3H8.58182L12 13H10.8182L8.03636 4.58203H7.96364L5.18182 13ZM5.61818 9.09375H10.3818V10.168H5.61818V9.09375Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function LineHeightIcon(): React.JSX.Element {
+  return (
+    <svg
+      aria-hidden
+      className="size-4 shrink-0"
+      data-slot="font-picker-footer-icon"
+      fill="none"
+      height="16"
+      viewBox="0 0 16 16"
+      width="16"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <rect
+        fill="#D9D9D9"
+        height="16"
+        transform="rotate(90 16 0)"
+        width="1"
+        x="16"
+      />
+      <rect
+        fill="#D9D9D9"
+        height="16"
+        transform="rotate(90 16 15)"
+        width="1"
+        x="16"
+        y="15"
+      />
+      <path
+        d="M5.18182 13H4L7.41818 3H8.58182L12 13H10.8182L8.03636 4.58203H7.96364L5.18182 13ZM5.61818 9.09375H10.3818V10.168H5.61818V9.09375Z"
+        fill="white"
+      />
+    </svg>
+  );
+}
+
+export function FontPickerFooterControl({
+  disabled,
+  icon,
+  onValueChange,
+  steps,
+  title,
+  valueIndex,
+}: {
+  disabled: boolean;
+  icon: React.ReactNode;
+  onValueChange: (nextValue: number) => void;
+  steps: readonly unknown[];
+  title: string;
+  valueIndex: number;
+}): React.JSX.Element {
+  const markerValues = steps.map((_, index) => index);
+  const min = 0;
+  const max = Math.max(0, markerValues.length - 1);
+  const currentValue = Math.min(max, Math.max(min, Math.round(valueIndex)));
+
+  return (
+    <div
+      className="flex min-w-0 flex-1 items-center gap-2"
+      data-slot="font-picker-footer-control"
+    >
+      {icon}
+      <div className="min-w-0 flex-1" data-slot="font-picker-footer-slider">
+        <Slider
+          className="[&_[data-slot=slider-range]]:transition-none [&_[data-slot=slider-thumb]]:transition-none"
+          disabled={disabled}
+          getAriaLabel={() => title}
+          markerValues={markerValues}
+          max={max}
+          min={min}
+          onValueChange={(nextValue) => {
+            const resolvedValue = Array.isArray(nextValue)
+              ? nextValue[0]
+              : nextValue;
+
+            if (typeof resolvedValue === "number") {
+              onValueChange(Math.min(max, Math.max(min, Math.round(resolvedValue))));
+            }
+          }}
+          showFill
+          snapValues={markerValues}
+          step={1}
+          value={[currentValue]}
+          variant="discrete"
+        />
+      </div>
+    </div>
+  );
+}

package/templates/ui/components/controls/font-picker/font-picker-list.tsx

@@ -0,0 +1,194 @@
+import * as React from "react";
+import { CheckIcon } from "@phosphor-icons/react";
+
+import { ScrollFade } from "../../primitives";
+import { cn } from "../../../lib/utils";
+import type {
+  FontPickerFontCatalogEntry,
+  FontPickerFontFilterValue,
+} from "./font-catalog";
+import { getFontFamilyStyle } from "./font-picker-value";
+
+export const fontItemHeightPx = 36;
+export const fontItemGapPx = 1;
+export const fontVirtualItemStepPx = fontItemHeightPx + fontItemGapPx;
+export const fontListOverscanItems = 6;
+export const fontListHeightWithFooterPx = 240;
+export const fontPreloadBufferAheadItems = 60;
+export const fontPreloadBufferBehindItems = 30;
+
+export type FontPickerPinnedSelectedRowSide = "bottom" | "top" | null;
+
+type FontPickerListProps = {
+  attachScrollViewport: (node: HTMLDivElement | null) => void;
+  bottomSpacerHeight: number;
+  category: FontPickerFontFilterValue;
+  clearHoverPreview: () => void;
+  filteredFontCount: number;
+  onFontBlur: () => void;
+  onFontFocus: (font: FontPickerFontCatalogEntry) => void;
+  onFontMouseEnter: (font: FontPickerFontCatalogEntry) => void;
+  onFontSelect: (font: FontPickerFontCatalogEntry) => void;
+  pinnedSelectedRowSide: FontPickerPinnedSelectedRowSide;
+  query: string;
+  scrollToFontIndex: (index: number) => void;
+  selectedFont: FontPickerFontCatalogEntry | null | undefined;
+  selectedFontId: string;
+  selectedFontIndex: number;
+  selectedFontPreviewStyle?: React.CSSProperties;
+  topSpacerHeight: number;
+  virtualEndIndex: number;
+  virtualStartIndex: number;
+  visibleFonts: readonly FontPickerFontCatalogEntry[];
+};
+
+const menuItemInteractionClassName =
+  "hover:bg-[color:color-mix(in_oklab,var(--muted-foreground)_10%,transparent)] hover:text-[color:var(--foreground)] focus:bg-[color:color-mix(in_oklab,var(--muted-foreground)_10%,transparent)] focus:text-[color:var(--foreground)]";
+
+export function FontPickerList({
+  attachScrollViewport,
+  bottomSpacerHeight,
+  category,
+  clearHoverPreview,
+  filteredFontCount,
+  onFontBlur,
+  onFontFocus,
+  onFontMouseEnter,
+  onFontSelect,
+  pinnedSelectedRowSide,
+  query,
+  scrollToFontIndex,
+  selectedFont,
+  selectedFontId,
+  selectedFontIndex,
+  selectedFontPreviewStyle,
+  topSpacerHeight,
+  virtualEndIndex,
+  virtualStartIndex,
+  visibleFonts,
+}: FontPickerListProps): React.JSX.Element {
+  return (
+    <div
+      className="relative isolate pb-1"
+      onMouseLeave={clearHoverPreview}
+    >
+      <div className="px-1 pt-1">
+        <div className="relative h-60">
+          <ScrollFade
+            className="toolcraft-scrollbar h-full"
+            containerClassName="h-full"
+            data-slot="font-picker-list-viewport"
+            height={24}
+            preset="default"
+            showOppositeSide
+            side="bottom"
+            viewportRef={attachScrollViewport}
+            watch={[
+              filteredFontCount,
+              query,
+              category,
+              virtualStartIndex,
+              virtualEndIndex,
+            ]}
+          >
+            {visibleFonts.length ? (
+              <div
+                className="flex flex-col gap-px"
+                data-slot="font-picker-list"
+              >
+                {topSpacerHeight > 0 ? (
+                  <div
+                    aria-hidden
+                    style={{ height: `${topSpacerHeight}px` }}
+                  />
+                ) : null}
+                {visibleFonts.map((font) => {
+                  const selected = font.id === selectedFontId;
+
+                  return (
+                    <button
+                      className={cn(
+                        "flex min-h-9 w-full items-center justify-between gap-3 rounded-sm px-2.5 text-left text-sm font-normal text-[color:color-mix(in_oklab,var(--foreground)_85%,transparent)] outline-none",
+                        menuItemInteractionClassName,
+                        selected &&
+                          "bg-[color:color-mix(in_oklab,var(--muted-foreground)_5%,transparent)] font-medium text-[color:var(--foreground)] hover:bg-[color:color-mix(in_oklab,var(--muted-foreground)_5%,transparent)] focus:bg-[color:color-mix(in_oklab,var(--muted-foreground)_5%,transparent)]",
+                      )}
+                      key={font.id}
+                      onBlur={onFontBlur}
+                      onClick={() => onFontSelect(font)}
+                      onFocus={() => onFontFocus(font)}
+                      onMouseEnter={() => onFontMouseEnter(font)}
+                      type="button"
+                    >
+                      <span
+                        className="min-w-0 truncate text-sm"
+                        style={getFontFamilyStyle(font)}
+                      >
+                        {font.family}
+                      </span>
+                      {selected ? (
+                        <CheckIcon
+                          aria-hidden
+                          className="size-3.5 shrink-0 text-[color:var(--foreground)]"
+                          weight="bold"
+                        />
+                      ) : null}
+                    </button>
+                  );
+                })}
+                {bottomSpacerHeight > 0 ? (
+                  <div
+                    aria-hidden
+                    style={{ height: `${bottomSpacerHeight}px` }}
+                  />
+                ) : null}
+              </div>
+            ) : null}
+          </ScrollFade>
+          {!visibleFonts.length ? (
+            <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
+              <div className="rounded-sm px-2 text-center text-xs text-[color:var(--muted-foreground)]">
+                No fonts match your search.
+              </div>
+            </div>
+          ) : null}
+        </div>
+      </div>
+      {pinnedSelectedRowSide ? (
+        <div
+          className={cn(
+            "absolute inset-x-0 z-20 overflow-hidden bg-[color:color-mix(in_oklab,var(--popover)_90%,transparent)]",
+            pinnedSelectedRowSide === "top"
+              ? "top-0 border-b border-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)]"
+              : "bottom-0 border-t border-[color:color-mix(in_oklab,var(--foreground)_10%,transparent)]",
+          )}
+        >
+          <button
+            aria-label={`Jump to selected font ${selectedFont?.family ?? ""}`}
+            className={cn(
+              "flex min-h-9 w-full items-center justify-between px-[14px] text-left text-sm font-medium text-[color:var(--foreground)] outline-none",
+              menuItemInteractionClassName,
+            )}
+            data-side={pinnedSelectedRowSide}
+            data-slot="selected-font-jump-row"
+            onClick={() => scrollToFontIndex(selectedFontIndex)}
+            onMouseDown={(event) => event.preventDefault()}
+            type="button"
+          >
+            <span
+              className="min-w-0 flex-1 truncate text-sm"
+              style={selectedFontPreviewStyle}
+            >
+              {selectedFont?.family ?? ""}
+            </span>
+            <CheckIcon
+              aria-hidden
+              className="size-3.5 shrink-0"
+              weight="bold"
+            />
+          </button>
+        </div>
+      ) : null}
+    </div>
+  );
+}

package/templates/ui/components/controls/font-picker/font-picker-popover-content.tsx

@@ -0,0 +1,191 @@
+import * as React from "react";
+import { MagnifyingGlassIcon } from "@phosphor-icons/react";
+
+import {
+  Input,
+  PopoverContent,
+} from "../../primitives";
+import { cn } from "../../../lib/utils";
+import {
+  FONT_PICKER_FILTER_OPTIONS,
+  type FontPickerFontCatalogEntry,
+  type FontPickerFontFilterValue,
+} from "./font-catalog";
+import {
+  FontPickerList,
+  type FontPickerPinnedSelectedRowSide,
+} from "./font-picker-list";
+import {
+  FontPickerFooterControl,
+  LetterSpacingIcon,
+  LineHeightIcon,
+} from "./font-picker-footer";
+
+type FontPickerStep = {
+  label: string;
+  numericValue: number;
+  value: string;
+};
+
+type FontPickerPopoverContentProps = {
+  attachScrollViewport: (node: HTMLDivElement | null) => void;
+  bottomSpacerHeight: number;
+  category: FontPickerFontFilterValue;
+  clearHoverPreview: () => void;
+  disabled: boolean;
+  filteredFontCount: number;
+  lineHeightSteps: readonly FontPickerStep[];
+  lineHeightValueIndex: number;
+  letterSpacingSteps: readonly FontPickerStep[];
+  letterSpacingValueIndex: number;
+  onCategoryChange: (nextCategory: FontPickerFontFilterValue) => void;
+  onFontBlur: () => void;
+  onFontFocus: (font: FontPickerFontCatalogEntry) => void;
+  onFontMouseEnter: (font: FontPickerFontCatalogEntry) => void;
+  onFontSelect: (font: FontPickerFontCatalogEntry) => void;
+  onLetterSpacingValueChange: (nextIndex: number) => void;
+  onLineHeightValueChange: (nextIndex: number) => void;
+  onQueryChange: (nextQuery: string) => void;
+  pinnedSelectedRowSide: FontPickerPinnedSelectedRowSide;
+  popoverWidth?: number;
+  query: string;
+  scrollToFontIndex: (index: number) => void;
+  searchInputRef: React.Ref<HTMLInputElement>;
+  searchPlaceholder: string;
+  selectedFont: FontPickerFontCatalogEntry | null | undefined;
+  selectedFontId: string;
+  selectedFontIndex: number;
+  selectedFontPreviewStyle?: React.CSSProperties;
+  topSpacerHeight: number;
+  virtualEndIndex: number;
+  virtualStartIndex: number;
+  visibleFonts: readonly FontPickerFontCatalogEntry[];
+};
+
+export function FontPickerPopoverContent({
+  attachScrollViewport,
+  bottomSpacerHeight,
+  category,
+  clearHoverPreview,
+  disabled,
+  filteredFontCount,
+  lineHeightSteps,
+  lineHeightValueIndex,
+  letterSpacingSteps,
+  letterSpacingValueIndex,
+  onCategoryChange,
+  onFontBlur,
+  onFontFocus,
+  onFontMouseEnter,
+  onFontSelect,
+  onLetterSpacingValueChange,
+  onLineHeightValueChange,
+  onQueryChange,
+  pinnedSelectedRowSide,
+  popoverWidth,
+  query,
+  scrollToFontIndex,
+  searchInputRef,
+  searchPlaceholder,
+  selectedFont,
+  selectedFontId,
+  selectedFontIndex,
+  selectedFontPreviewStyle,
+  topSpacerHeight,
+  virtualEndIndex,
+  virtualStartIndex,
+  visibleFonts,
+}: FontPickerPopoverContentProps): React.JSX.Element {
+  return (
+    <PopoverContent
+      align="start"
+      className="w-(--anchor-width) gap-0 overflow-hidden rounded-lg border border-[color:color-mix(in_oklab,var(--border)_20%,transparent)] bg-[color:color-mix(in_oklab,var(--popover)_88%,transparent)] p-0 text-[color:var(--popover-foreground)] shadow-sm backdrop-blur-[12.5px]"
+      finalFocus={false}
+      sideOffset={6}
+      style={popoverWidth ? { width: popoverWidth } : undefined}
+    >
+      <div>
+        <div className="border-b border-[color:color-mix(in_oklab,var(--muted-foreground)_20%,transparent)]">
+          <div className="relative h-10">
+            <MagnifyingGlassIcon
+              aria-hidden
+              className="pointer-events-none absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-[color:var(--muted-foreground)]"
+            />
+            <Input
+              ref={searchInputRef}
+              className="h-10 border-none bg-transparent pl-[34px] text-[13px] font-normal focus-visible:bg-transparent focus-visible:ring-0"
+              name="font-search"
+              onChange={(event) => onQueryChange(event.target.value)}
+              placeholder={searchPlaceholder}
+              type="text"
+              value={query}
+            />
+          </div>
+        </div>
+        <div className="relative before:absolute before:inset-x-0 before:bottom-0 before:h-px before:bg-[color:color-mix(in_oklab,var(--muted-foreground)_20%,transparent)]">
+          <div className="flex h-10 w-full items-center justify-between overflow-x-hidden px-3">
+            {FONT_PICKER_FILTER_OPTIONS.map((option) => {
+              const active = category === option.value;
+
+              return (
+                <button
+                  className={cn(
+                    "relative z-10 h-10 shrink-0 px-0 text-xs font-normal leading-none tracking-normal text-[color:var(--muted-foreground)] transition-colors after:absolute after:inset-x-0 after:bottom-0 after:h-0.5 after:bg-[color:var(--foreground)] after:opacity-0 after:transition-opacity after:duration-200 after:ease-in-out after:content-[''] hover:text-[color:color-mix(in_oklab,var(--foreground)_80%,transparent)]",
+                    active &&
+                      "text-[color:var(--foreground)] after:opacity-100",
+                  )}
+                  data-state={active ? "active" : "inactive"}
+                  key={option.value}
+                  onClick={() => onCategoryChange(option.value)}
+                  type="button"
+                >
+                  {option.label}
+                </button>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+      <FontPickerList
+        attachScrollViewport={attachScrollViewport}
+        bottomSpacerHeight={bottomSpacerHeight}
+        category={category}
+        clearHoverPreview={clearHoverPreview}
+        filteredFontCount={filteredFontCount}
+        onFontBlur={onFontBlur}
+        onFontFocus={onFontFocus}
+        onFontMouseEnter={onFontMouseEnter}
+        onFontSelect={onFontSelect}
+        pinnedSelectedRowSide={pinnedSelectedRowSide}
+        query={query}
+        scrollToFontIndex={scrollToFontIndex}
+        selectedFont={selectedFont}
+        selectedFontId={selectedFontId}
+        selectedFontIndex={selectedFontIndex}
+        selectedFontPreviewStyle={selectedFontPreviewStyle}
+        topSpacerHeight={topSpacerHeight}
+        virtualEndIndex={virtualEndIndex}
+        virtualStartIndex={virtualStartIndex}
+        visibleFonts={visibleFonts}
+      />
+      <div className="flex h-11 shrink-0 items-center gap-5 border-t border-[color:color-mix(in_oklab,var(--muted-foreground)_20%,transparent)] px-3.5">
+        <FontPickerFooterControl
+          disabled={disabled}
+          icon={<LetterSpacingIcon />}
+          onValueChange={onLetterSpacingValueChange}
+          steps={letterSpacingSteps}
+          title="Letter spacing"
+          valueIndex={letterSpacingValueIndex}
+        />
+        <FontPickerFooterControl
+          disabled={disabled}
+          icon={<LineHeightIcon />}
+          onValueChange={onLineHeightValueChange}
+          steps={lineHeightSteps}
+          title="Line height"
+          valueIndex={lineHeightValueIndex}
+        />
+      </div>
+    </PopoverContent>
+  );
+}