@terrafirmagreg-team/ui 0.0.0-stage → 1.2.0

package/src/components/blocks/readability/menu.tsx

@@ -0,0 +1,247 @@
+'use client';
+import { usePathname } from 'next/navigation';
+import type { ComponentProps, ReactNode } from 'react';
+import {
+  AlignStartVertical,
+  Columns2,
+  Flashlight,
+  FoldHorizontal,
+  Layers,
+  Maximize2,
+  Minimize2,
+  Palette,
+  PanelLeft,
+  Proportions,
+  Settings,
+  UnfoldHorizontal,
+} from 'lucide-react';
+import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
+import { useReadability } from '@terrafirmagreg-team/ui/hooks/readability/use-readability';
+import { readabilityConfig } from '@terrafirmagreg-team/ui/lib/readability/config';
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@terrafirmagreg-team/ui/components/ui/popover';
+import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
+import {
+  readabilityLayouts,
+  spotlightStyles,
+  type ReadabilityLayout,
+  type SpotlightStyle,
+} from '@terrafirmagreg-team/ui/types/readability';
+import {
+  ReadabilityField,
+  ReadabilityHelp,
+  Segment,
+  WidthField,
+} from './fields';
+
+const layoutIcons: Record<ReadabilityLayout, ReactNode> = {
+  full: <Maximize2 />,
+  sidebar: <PanelLeft />,
+  both: <Columns2 />,
+  original: <Minimize2 />,
+};
+
+const styleIcons: Record<SpotlightStyle, ReactNode> = {
+  under: <Layers />,
+  aside: <AlignStartVertical />,
+};
+
+const switches = ['on', 'off'] as const;
+
+export function ReadabilityMenu({
+  anchor,
+}: {
+  anchor?: ComponentProps<typeof PopoverContent>['anchor'];
+}) {
+  const t = useTranslations();
+  const {
+    layout,
+    setLayout,
+    pageWidth,
+    setPageWidth,
+    contentWidth,
+    setContentWidth,
+    spotlight,
+    setSpotlight,
+    spotlightStyle,
+    setSpotlightStyle,
+    coarsePointer,
+    smallScreen,
+  } = useReadability();
+
+  const layoutT: Record<ReadabilityLayout, { label: string; help: string }> = {
+    full: {
+      label: t('Expand all', { note: 'ui.readability.layout.full' }),
+      help: t('The article takes the full panel width; the sidebar stays at the screen edge', { note: 'ui.readability.layout.full.help' }),
+    },
+    sidebar: {
+      label: t('Adjustable page width', { note: 'ui.readability.layout.sidebar' }),
+      help: t('The slider narrows the whole page block: the sidebar moves with it', { note: 'ui.readability.layout.sidebar.help' }),
+    },
+    both: {
+      label: t('Adjustable page and content', { note: 'ui.readability.layout.both' }),
+      help: t('Both sliders apply: page block width and the text column inside', { note: 'ui.readability.layout.both.help' }),
+    },
+    original: {
+      label: t('Original width', { note: 'ui.readability.layout.original' }),
+      help: t('Default centered page width', { note: 'ui.readability.layout.original.help' }),
+    },
+  };
+  const spotlightT: Record<
+    SpotlightStyle | 'on' | 'off',
+    { label: string; help: string }
+  > = {
+    on: {
+      label: t('On', { note: 'ui.readability.spotlight.on' }),
+      help: t('Turn on Spotlight', { note: 'ui.readability.spotlight.on.help' }),
+    },
+    off: {
+      label: t('Off', { note: 'ui.readability.spotlight.off' }),
+      help: t('Turn off Spotlight', { note: 'ui.readability.spotlight.off.help' }),
+    },
+    under: {
+      label: t('Under', { note: 'ui.readability.spotlight.under' }),
+      help: t('A solid background under the hovered block shows where the cursor is', { note: 'ui.readability.spotlight.under.help' }),
+    },
+    aside: {
+      label: t('Aside', { note: 'ui.readability.spotlight.aside' }),
+      help: t('A solid line beside the hovered element shows where the cursor is', { note: 'ui.readability.spotlight.aside.help' }),
+    },
+  };
+
+  const layoutDisabled = smallScreen;
+  const pathname = usePathname();
+  const spotlightDisabled =
+    coarsePointer || (readabilityConfig().isSpotlightDisabled?.(pathname) ?? false);
+
+  return (
+    <Popover>
+      <PopoverTrigger
+        render={
+          <IconButton
+            variant="ghost"
+            size="icon-sm"
+            tooltip={false}
+            label={t('Readability', { note: 'ui.readability.menu' })}
+            className="text-muted-foreground! data-[popup-open]:bg-accent! data-[popup-open]:text-accent-foreground!"
+          >
+            <Settings />
+          </IconButton>
+        }
+      />
+      <PopoverContent
+        anchor={anchor}
+        side="top"
+        align="center"
+        sideOffset={8}
+        className="w-64 space-y-3 p-3"
+      >
+        <ReadabilityField
+          label={t('Layout', { note: 'ui.readability.layout' })}
+          icon={<Proportions />}
+          help={
+            <ReadabilityHelp
+              title={t('Layout', { note: 'ui.readability.layout' })}
+              description={
+                layoutDisabled
+                  ? t('Layout switch is not available on small screens', { note: 'ui.readability.layout.unavailable' })
+                  : t('Adjust the site layout to fit different reading needs and screens', { note: 'ui.readability.layout.help' })
+              }
+              items={readabilityLayouts.map((id) => ({
+                icon: layoutIcons[id],
+                label: layoutT[id].label,
+                help: layoutT[id].help,
+              }))}
+            />
+          }
+        >
+          <Segment
+            options={readabilityLayouts}
+            value={layout}
+            onChange={setLayout}
+            disabled={layoutDisabled}
+            itemContent={(id) => layoutIcons[id]}
+            itemLabel={(id) => layoutT[id].label}
+            itemHelp={(id) => layoutT[id].help}
+          />
+        </ReadabilityField>
+        {(layout === 'sidebar' || layout === 'both') && !smallScreen && (
+          <WidthField
+            field="page_width"
+            icon={<UnfoldHorizontal />}
+            value={pageWidth}
+            onChange={setPageWidth}
+          />
+        )}
+        {layout === 'both' && !smallScreen && (
+          <WidthField
+            field="content_width"
+            icon={<FoldHorizontal />}
+            value={contentWidth}
+            onChange={setContentWidth}
+          />
+        )}
+        <ReadabilityField
+          label={t('Spotlight', { note: 'ui.readability.spotlight' })}
+          icon={<Flashlight />}
+          help={
+            <ReadabilityHelp
+              title={t('Spotlight', { note: 'ui.readability.spotlight' })}
+              description={
+                spotlightDisabled
+                  ? t('Spotlight is not available on touch screens', { note: 'ui.readability.spotlight.unavailable' })
+                  : t('Highlight the line or block under the cursor to help readers stay focused', { note: 'ui.readability.spotlight.help' })
+              }
+              items={switches.map((id) => ({
+                label: spotlightT[id].label,
+                help: spotlightT[id].help,
+              }))}
+            />
+          }
+        >
+          <Segment
+            options={switches}
+            value={spotlight ? 'on' : 'off'}
+            onChange={(id) => setSpotlight(id === 'on')}
+            disabled={spotlightDisabled}
+            itemContent={(id) => spotlightT[id].label}
+            itemLabel={(id) => spotlightT[id].label}
+            itemHelp={(id) => spotlightT[id].help}
+            itemClassName="text-xs"
+          />
+        </ReadabilityField>
+        {spotlight && !spotlightDisabled && (
+          <ReadabilityField
+            label={t('Style', { note: 'ui.readability.spotlight.styles' })}
+            icon={<Palette />}
+            help={
+              <ReadabilityHelp
+                title={t('Style', { note: 'ui.readability.spotlight.styles' })}
+                description={t('Adjust how the spotlight highlight is drawn', { note: 'ui.readability.spotlight.styles.help' })}
+                items={spotlightStyles.map((id) => ({
+                  icon: styleIcons[id],
+                  label: spotlightT[id].label,
+                  help: spotlightT[id].help,
+                }))}
+              />
+            }
+          >
+            <Segment
+              options={spotlightStyles}
+              value={spotlightStyle}
+              onChange={setSpotlightStyle}
+              disabled={spotlightDisabled || !spotlight}
+              itemContent={(id) => styleIcons[id]}
+              itemLabel={(id) => spotlightT[id].label}
+              itemHelp={(id) => spotlightT[id].help}
+            />
+          </ReadabilityField>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+

package/src/components/blocks/readability/track.tsx

@@ -0,0 +1,165 @@
+'use client';
+import { useEffect, useRef } from 'react';
+import { usePathname } from 'next/navigation';
+import { useReadability } from '@terrafirmagreg-team/ui/hooks/readability/use-readability';
+import { readabilityConfig } from '@terrafirmagreg-team/ui/lib/readability/config';
+import {
+  contentRoot,
+  resolveSpotlight,
+  rowBand,
+} from '@terrafirmagreg-team/ui/lib/readability/spotlight';
+import type { SpotlightStyle } from '@terrafirmagreg-team/ui/types/readability';
+
+function SpotlightBox({
+  enabled,
+  style,
+}: {
+  enabled: boolean;
+  style: SpotlightStyle;
+}) {
+  const boxRef = useRef<HTMLDivElement>(null);
+  const pathname = usePathname();
+  const mouse = useRef({ x: 0, y: 0 });
+  const highlighted = useRef<HTMLElement | undefined>(undefined);
+  const observer = useRef<IntersectionObserver | null>(null);
+
+  useEffect(() => {
+    const box = boxRef.current;
+    if (!box || !enabled) {
+      if (box) box.style.display = 'none';
+      return;
+    }
+    const root = contentRoot();
+    if (!root) return;
+
+    box.style.display = 'none';
+    highlighted.current = undefined;
+
+    const hide = () => {
+      box.style.display = 'none';
+    };
+
+    const place = (
+      top: number,
+      left: number,
+      width: number,
+      height: number,
+    ) => {
+      box.style.display = 'block';
+      box.style.top = `${top - 4}px`;
+      box.style.left = `${left - 4}px`;
+      box.style.width = `${width + 8}px`;
+      box.style.height = `${height + 8}px`;
+    };
+
+    const watchVisibility = (el: HTMLElement | undefined) => {
+      observer.current?.disconnect();
+      observer.current = null;
+      if (!el) return;
+      observer.current = new IntersectionObserver(([entry]) => {
+        if (!entry.isIntersecting) hide();
+      });
+      observer.current.observe(el);
+    };
+
+    const placeForElement = (el: HTMLElement) => {
+      const { y } = mouse.current;
+      if (el.tagName === 'P') {
+        const lineHeight = Number.parseFloat(
+          window.getComputedStyle(el).lineHeight,
+        );
+        const lines = Math.floor(el.offsetHeight / lineHeight);
+        if (Number.isFinite(lineHeight) && lineHeight > 0 && lines > 0) {
+          const rect = el.getBoundingClientRect();
+          const relativeY = y - rect.top;
+          for (let i = 0; i < lines; i++) {
+            const top = i * lineHeight;
+            if (relativeY >= top && relativeY < top + lineHeight) {
+              place(rect.top + top, rect.left, el.offsetWidth, lineHeight);
+              return;
+            }
+          }
+          return;
+        }
+      }
+
+      const rect = rowBand(el, root, style) ?? el.getBoundingClientRect();
+      if (rect.width === 0 && rect.height === 0) {
+        hide();
+        return;
+      }
+      place(rect.top, rect.left, rect.width, rect.height);
+    };
+
+    const page = document.getElementById('page') ?? root;
+    const update = () => {
+      const { x, y } = mouse.current;
+      const bounds = page.getBoundingClientRect();
+      if (
+        x < bounds.left ||
+        x > bounds.right ||
+        y < bounds.top ||
+        y > bounds.bottom
+      ) {
+        hide();
+        return;
+      }
+      const point = document.elementFromPoint(x, y);
+      const target =
+        point instanceof HTMLElement ? point : point?.parentElement;
+      const el =
+        target &&
+        target !== root &&
+        root.contains(target) &&
+        !target.closest('nav') &&
+        !target.closest('#toc')
+          ? resolveSpotlight(target, root, style)
+          : null;
+      if (el !== highlighted.current) {
+        highlighted.current = el ?? undefined;
+        watchVisibility(el ?? undefined);
+      }
+      if (el) placeForElement(el);
+      else hide();
+    };
+
+    const onMove = (event: MouseEvent) => {
+      mouse.current = { x: event.clientX, y: event.clientY };
+      update();
+    };
+    window.addEventListener('mousemove', onMove, { passive: true });
+    window.addEventListener('scroll', update, true);
+    window.addEventListener('resize', update);
+    return () => {
+      window.removeEventListener('mousemove', onMove);
+      window.removeEventListener('scroll', update, true);
+      window.removeEventListener('resize', update);
+      observer.current?.disconnect();
+    };
+  }, [enabled, pathname, style]);
+
+  if (!enabled) return null;
+
+  return (
+    <div
+      ref={boxRef}
+      aria-hidden
+      data-spotlight-style={style}
+      className="pointer-events-none fixed z-20 rounded-lg transition-all duration-200 data-[spotlight-style=under]:bg-(--spotlight-under-bg-color) before:absolute before:inset-y-0 before:-start-4 before:w-1 before:rounded-full before:bg-primary before:content-[''] data-[spotlight-style=under]:before:hidden"
+      style={{ display: 'none' }}
+    />
+  );
+}
+
+export function SpotlightTrack() {
+  const { spotlight, spotlightStyle, coarsePointer } = useReadability();
+  const pathname = usePathname();
+  const disabled = readabilityConfig().isSpotlightDisabled?.(pathname) ?? false;
+  return (
+    <SpotlightBox
+      enabled={spotlight && !coarsePointer && !disabled}
+      style={spotlightStyle}
+    />
+  );
+}
+

package/src/components/blocks/search/command.tsx

@@ -0,0 +1,80 @@
+'use client';
+import type { ReactNode } from 'react';
+import {
+  CommandDialog,
+  CommandEmpty,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '@terrafirmagreg-team/ui/components/ui/command';
+import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
+
+export type CommandSearchItem<T = unknown> = {
+  id: string;
+  label: ReactNode;
+  icon?: ReactNode;
+  meta?: ReactNode;
+  data?: T;
+};
+
+export function CommandSearch<T = unknown>({
+  open,
+  onClose,
+  query,
+  onQuery,
+  title,
+  placeholder,
+  emptyLabel,
+  items,
+  onPick,
+  className,
+}: {
+  open: boolean;
+  onClose: () => void;
+  query: string;
+  onQuery: (value: string) => void;
+  title: string;
+  placeholder?: string;
+  emptyLabel: ReactNode;
+  items: CommandSearchItem<T>[];
+  onPick: (item: CommandSearchItem<T>) => void;
+  className?: string;
+}) {
+  return (
+    <CommandDialog
+      open={open}
+      onOpenChange={(next) => {
+        if (!next) onClose();
+      }}
+      title={title}
+      description={placeholder ?? title}
+      className={cn('max-w-lg', className)}
+      commandProps={{ shouldFilter: false }}
+    >
+      <CommandInput value={query} onValueChange={onQuery} placeholder={placeholder} />
+      {query.trim() ? (
+        <CommandList className="max-h-80">
+          {items.length === 0 ? (
+            <CommandEmpty>{emptyLabel}</CommandEmpty>
+          ) : (
+            items.map((item) => (
+              <CommandItem
+                key={item.id}
+                value={item.id}
+                onSelect={() => {
+                  onPick(item);
+                  onClose();
+                }}
+              >
+                {item.icon}
+                <span className="min-w-0 truncate">{item.label}</span>
+                {item.meta && <span className="ml-auto text-xs text-muted-foreground">{item.meta}</span>}
+              </CommandItem>
+            ))
+          )}
+        </CommandList>
+      ) : null}
+    </CommandDialog>
+  );
+}
+