@terrafirmagreg-team/ui 0.1.0 → 1.2.0

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

@@ -1,9 +1,8 @@
 'use client';
 import { usePathname } from 'next/navigation';
-import { useState, type ComponentProps, type ReactNode } from 'react';
+import type { ComponentProps, ReactNode } from 'react';
 import {
   AlignStartVertical,
-  CircleHelp,
   Columns2,
   Flashlight,
   FoldHorizontal,
@@ -16,9 +15,8 @@ import {
   Settings,
   UnfoldHorizontal,
 } from 'lucide-react';
-import { cn } from '@terrafirmagreg-team/ui/lib/utils/cn';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
-import { useReadability } from '@terrafirmagreg-team/ui/hooks/readability/provider';
+import { useReadability } from '@terrafirmagreg-team/ui/hooks/readability/use-readability';
 import { readabilityConfig } from '@terrafirmagreg-team/ui/lib/readability/config';
 import {
   Popover,
@@ -26,24 +24,18 @@ import {
   PopoverTrigger,
 } from '@terrafirmagreg-team/ui/components/ui/popover';
 import { IconButton } from '@terrafirmagreg-team/ui/components/blocks/button/icon-button';
-import { Hint } from '@terrafirmagreg-team/ui/components/blocks/tooltip/hint';
-import {
-  Field,
-  FieldContent,
-  FieldDescription,
-  FieldLabel,
-} from '@terrafirmagreg-team/ui/components/ui/field';
-import { Slider } from '@terrafirmagreg-team/ui/components/ui/slider';
-import {
-  ToggleGroup,
-  ToggleGroupItem,
-} from '@terrafirmagreg-team/ui/components/ui/toggle-group';
 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 />,
@@ -59,223 +51,6 @@ const styleIcons: Record<SpotlightStyle, ReactNode> = {
 
 const switches = ['on', 'off'] as const;
 
-function ReadabilityHelp({
-  title,
-  description,
-  items,
-}: {
-  title: string;
-  description?: string;
-  items?: { icon?: ReactNode; label: string; help: string }[];
-}) {
-  return (
-    <div className="space-y-2">
-      <div className="space-y-1">
-        <p className="font-medium">{title}</p>
-        {description && <FieldDescription className="text-xs">{description}</FieldDescription>}
-      </div>
-      {items?.map((item) => (
-        <div key={item.label} className="space-y-1 rounded-lg bg-muted/60 p-2.5">
-          <p className="flex items-center gap-1.5 text-xs font-medium [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0">
-            {item.icon}
-            {item.label}
-          </p>
-          <FieldDescription className="text-xs">{item.help}</FieldDescription>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-function ReadabilityField({
-  label,
-  icon,
-  help,
-  children,
-}: {
-  label: ReactNode;
-  icon?: ReactNode;
-  help?: ReactNode;
-  children: ReactNode;
-}) {
-  const [helpOpen, setHelpOpen] = useState(false);
-  return (
-    <Field className="gap-1.5">
-      <div className="flex items-center gap-1 [&_svg:not([class*='size-'])]:size-3.5 [&_svg]:shrink-0">
-        {icon}
-        <FieldLabel className="flex-1 text-xs text-muted-foreground">{label}</FieldLabel>
-        {help && (
-          <Popover onOpenChange={setHelpOpen}>
-            <PopoverTrigger
-              render={
-                <IconButton
-                  variant="ghost"
-                  size="icon-xs"
-                  tooltip={false}
-                  label={typeof label === 'string' ? label : 'Help'}
-                >
-                  <CircleHelp />
-                </IconButton>
-              }
-            />
-            <PopoverContent className="w-56">{help}</PopoverContent>
-          </Popover>
-        )}
-      </div>
-      <FieldContent
-        className={cn(
-          'rounded-lg outline-2 outline-offset-4 outline-dashed outline-transparent transition-[outline-color] duration-200',
-          helpOpen && 'outline-primary',
-        )}
-      >
-        {children}
-      </FieldContent>
-    </Field>
-  );
-}
-
-function ReadabilitySlider({
-  label,
-  icon,
-  help,
-  value,
-  onChange,
-  min = 0,
-  max = 100,
-  step = 1,
-  format = String,
-  disabled,
-  live,
-}: {
-  label: ReactNode;
-  icon?: ReactNode;
-  help?: ReactNode;
-  value: number;
-  onChange: (value: number) => void;
-  min?: number;
-  max?: number;
-  step?: number;
-  format?: (value: number) => string;
-  disabled?: boolean;
-  live?: boolean;
-}) {
-  const [draft, setDraft] = useState<{ key: number; value: number }>({ key: value, value });
-  const shown = draft.key === value ? draft.value : value;
-  return (
-    <ReadabilityField label={label} icon={icon} help={help}>
-      <div className="flex items-center gap-3 rounded-lg bg-muted/70 px-3 py-2.5">
-        <Slider
-          min={min}
-          max={max}
-          step={step}
-          value={shown}
-          disabled={disabled}
-          className="flex-1 [&_[data-slot=slider-track]]:bg-muted-foreground/25"
-          onValueChange={(next) => {
-            if (live) onChange(next as number);
-            else setDraft({ key: value, value: next as number });
-          }}
-          onValueCommitted={() => {
-            if (!live && shown !== value) onChange(shown);
-          }}
-        />
-        <span className="w-9 shrink-0 text-end text-xs tabular-nums text-muted-foreground">
-          {format(shown)}
-        </span>
-      </div>
-    </ReadabilityField>
-  );
-}
-
-function Segment<T extends string>({
-  options,
-  value,
-  onChange,
-  disabled,
-  itemContent,
-  itemLabel,
-  itemHelp,
-  itemClassName,
-}: {
-  options: readonly T[];
-  value: T;
-  onChange: (value: T) => void;
-  disabled?: boolean;
-  itemContent: (id: T) => ReactNode;
-  itemLabel: (id: T) => string;
-  itemHelp: (id: T) => string;
-  itemClassName?: string;
-}) {
-  return (
-    <ToggleGroup
-      value={[value]}
-      onValueChange={(values) => {
-        const next = values.at(-1) as T | undefined;
-        if (next && next !== value) onChange(next);
-      }}
-      disabled={disabled}
-      size="sm"
-      spacing={1}
-      className="w-full rounded-lg bg-muted/70 p-1"
-    >
-      {options.map((id) => (
-        <Hint key={id} label={itemHelp(id)}>
-          <ToggleGroupItem
-            value={id}
-            aria-label={itemLabel(id)}
-            className={cn(
-              'flex-1 rounded-md text-muted-foreground hover:text-foreground aria-pressed:bg-background aria-pressed:text-foreground aria-pressed:shadow-sm',
-              itemClassName,
-            )}
-          >
-            {itemContent(id)}
-          </ToggleGroupItem>
-        </Hint>
-      ))}
-    </ToggleGroup>
-  );
-}
-
-function WidthField({
-  field,
-  icon,
-  value,
-  onChange,
-}: {
-  field: 'page_width' | 'content_width';
-  icon: ReactNode;
-  value: number;
-  onChange: (value: number) => void;
-}) {
-  const t = useTranslations();
-  return (
-    <ReadabilitySlider
-      live
-      label={t(`ui.readability.${field}`)}
-      icon={icon}
-      help={
-        <ReadabilityHelp
-          title={t(`ui.readability.${field}`)}
-          description={t(`ui.readability.${field}.help`)}
-          items={[
-            {
-              icon,
-              label: t(`ui.readability.${field}.slider`),
-              help: t(`ui.readability.${field}.slider.help`),
-            },
-          ]}
-        />
-      }
-      value={value}
-      onChange={onChange}
-      min={60}
-      max={100}
-      step={1}
-      format={(v) => `${v}%`}
-    />
-  );
-}
-
 export function ReadabilityMenu({
   anchor,
 }: {
@@ -297,6 +72,46 @@ export function ReadabilityMenu({
     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 =
@@ -310,7 +125,7 @@ export function ReadabilityMenu({
             variant="ghost"
             size="icon-sm"
             tooltip={false}
-            label={t('ui.readability.menu')}
+            label={t('Readability', { note: 'ui.readability.menu' })}
             className="text-muted-foreground! data-[popup-open]:bg-accent! data-[popup-open]:text-accent-foreground!"
           >
             <Settings />
@@ -325,20 +140,20 @@ export function ReadabilityMenu({
         className="w-64 space-y-3 p-3"
       >
         <ReadabilityField
-          label={t('ui.readability.layout')}
+          label={t('Layout', { note: 'ui.readability.layout' })}
           icon={<Proportions />}
           help={
             <ReadabilityHelp
-              title={t('ui.readability.layout')}
+              title={t('Layout', { note: 'ui.readability.layout' })}
               description={
                 layoutDisabled
-                  ? t('ui.readability.layout.unavailable')
-                  : t('ui.readability.layout.help')
+                  ? 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: t(`ui.readability.layout.${id}`),
-                help: t(`ui.readability.layout.${id}.help`),
+                label: layoutT[id].label,
+                help: layoutT[id].help,
               }))}
             />
           }
@@ -349,8 +164,8 @@ export function ReadabilityMenu({
             onChange={setLayout}
             disabled={layoutDisabled}
             itemContent={(id) => layoutIcons[id]}
-            itemLabel={(id) => t(`ui.readability.layout.${id}`)}
-            itemHelp={(id) => t(`ui.readability.layout.${id}.help`)}
+            itemLabel={(id) => layoutT[id].label}
+            itemHelp={(id) => layoutT[id].help}
           />
         </ReadabilityField>
         {(layout === 'sidebar' || layout === 'both') && !smallScreen && (
@@ -370,19 +185,19 @@ export function ReadabilityMenu({
           />
         )}
         <ReadabilityField
-          label={t('ui.readability.spotlight')}
+          label={t('Spotlight', { note: 'ui.readability.spotlight' })}
           icon={<Flashlight />}
           help={
             <ReadabilityHelp
-              title={t('ui.readability.spotlight')}
+              title={t('Spotlight', { note: 'ui.readability.spotlight' })}
               description={
                 spotlightDisabled
-                  ? t('ui.readability.spotlight.unavailable')
-                  : t('ui.readability.spotlight.help')
+                  ? 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: t(`ui.readability.spotlight.${id}`),
-                help: t(`ui.readability.spotlight.${id}.help`),
+                label: spotlightT[id].label,
+                help: spotlightT[id].help,
               }))}
             />
           }
@@ -392,24 +207,24 @@ export function ReadabilityMenu({
             value={spotlight ? 'on' : 'off'}
             onChange={(id) => setSpotlight(id === 'on')}
             disabled={spotlightDisabled}
-            itemContent={(id) => t(`ui.readability.spotlight.${id}`)}
-            itemLabel={(id) => t(`ui.readability.spotlight.${id}`)}
-            itemHelp={(id) => t(`ui.readability.spotlight.${id}.help`)}
+            itemContent={(id) => spotlightT[id].label}
+            itemLabel={(id) => spotlightT[id].label}
+            itemHelp={(id) => spotlightT[id].help}
             itemClassName="text-xs"
           />
         </ReadabilityField>
         {spotlight && !spotlightDisabled && (
           <ReadabilityField
-            label={t('ui.readability.spotlight.styles')}
+            label={t('Style', { note: 'ui.readability.spotlight.styles' })}
             icon={<Palette />}
             help={
               <ReadabilityHelp
-                title={t('ui.readability.spotlight.styles')}
-                description={t('ui.readability.spotlight.styles.help')}
+                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: t(`ui.readability.spotlight.${id}`),
-                  help: t(`ui.readability.spotlight.${id}.help`),
+                  label: spotlightT[id].label,
+                  help: spotlightT[id].help,
                 }))}
               />
             }
@@ -420,8 +235,8 @@ export function ReadabilityMenu({
               onChange={setSpotlightStyle}
               disabled={spotlightDisabled || !spotlight}
               itemContent={(id) => styleIcons[id]}
-              itemLabel={(id) => t(`ui.readability.spotlight.${id}`)}
-              itemHelp={(id) => t(`ui.readability.spotlight.${id}.help`)}
+              itemLabel={(id) => spotlightT[id].label}
+              itemHelp={(id) => spotlightT[id].help}
             />
           </ReadabilityField>
         )}
@@ -429,3 +244,4 @@ export function ReadabilityMenu({
     </Popover>
   );
 }
+

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

@@ -1,7 +1,7 @@
 'use client';
 import { useEffect, useRef } from 'react';
 import { usePathname } from 'next/navigation';
-import { useReadability } from '@terrafirmagreg-team/ui/hooks/readability/provider';
+import { useReadability } from '@terrafirmagreg-team/ui/hooks/readability/use-readability';
 import { readabilityConfig } from '@terrafirmagreg-team/ui/lib/readability/config';
 import {
   contentRoot,
@@ -162,3 +162,4 @@ export function SpotlightTrack() {
     />
   );
 }
+

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

@@ -77,3 +77,4 @@ export function CommandSearch<T = unknown>({
     </CommandDialog>
   );
 }
+

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

@@ -24,7 +24,7 @@ import {
   SearchTagsListContext,
   useSearch,
   useSearchTagsList,
-} from '@terrafirmagreg-team/ui/hooks/search/dialog';
+} from '@terrafirmagreg-team/ui/hooks/search/use-dialog';
 import type {
   ReactSortedResult,
   SearchItemType,
@@ -239,12 +239,12 @@ export function SearchDialogInput(props: ComponentProps<'input'>) {
       role="combobox"
       aria-expanded={active !== null}
       aria-activedescendant={active !== null ? `search-option-${active}` : undefined}
-      aria-label={t('ui.search_dialog')}
+      aria-label={t('Search', { note: 'ui.search_dialog' })}
       aria-autocomplete="list"
       aria-controls="search-list"
       value={search}
       onChange={(e) => onSearchChange(e.target.value)}
-      placeholder={t('ui.search_dialog')}
+      placeholder={t('Search', { note: 'ui.search_dialog' })}
       {...props}
       className={cn(
         'w-0 flex-1 bg-transparent text-lg placeholder:text-muted-foreground focus-visible:outline-none',
@@ -265,7 +265,7 @@ export function SearchDialogClose({
   return (
     <button
       type="button"
-      aria-label={t('ui.search_close')}
+      aria-label={t('Close Search', { note: 'ui.search_close' })}
       onClick={() => onOpenChange(false)}
       className={cn(
         buttonVariants({
@@ -337,7 +337,7 @@ export function SearchDialogContent({
         }
         {...props}
       >
-        <Dialog.Title className="hidden">{t('ui.search_dialog')}</Dialog.Title>
+        <Dialog.Title className="hidden">{t('Search', { note: 'ui.search_dialog' })}</Dialog.Title>
         {children}
       </Dialog.Popup>
     </Dialog.Portal>
@@ -427,7 +427,7 @@ export function SearchDialogList({
       ref={ref}
       data-empty={items === null && !error}
       className={cn(
-        'overflow-hidden h-(--animated-height) transition-[height] [&_::highlight(search-hit)]:text-primary [&_::highlight(search-hit)]:underline',
+        'overflow-hidden h-(--animated-height) transition-[height]',
         props.className,
       )}
     >
@@ -455,8 +455,8 @@ export function SearchDialogList({
         id="search-list"
 
         role={items?.length ? 'listbox' : undefined}
-        aria-label={items?.length ? t('ui.search_dialog') : undefined}
-        className={cn('w-full flex flex-col overflow-y-auto max-h-[460px] p-1', !items && 'hidden')}
+        aria-label={items?.length ? t('Search', { note: 'ui.search_dialog' }) : undefined}
+        className={cn('w-full flex flex-col overflow-y-auto max-h-[460px] p-1 scrollbar-thin', !items && 'hidden')}
       >
         {items?.length === 0 && Empty()}
 
@@ -530,12 +530,14 @@ export function SearchDialogListItem({
   className,
   children,
   renderMarkdown,
+  badge,
   ...props
 }: ComponentProps<'div'> & {
 
   table?: SearchResultTable;
 
   renderMarkdown?: (v: string) => ReactNode;
+  badge?: ReactNode;
   item: SearchItemType;
 }) {
   const { query, getActive, setActive, subscribeActive } = useSearch();
@@ -569,7 +571,17 @@ export function SearchDialogListItem({
   } else {
     children ??= (
       <>
-        <div className="inline-flex items-center text-muted-foreground text-xs empty:hidden">
+        {badge != null && (
+          <span className="absolute end-2 top-1.5 rounded-md border border-border bg-background px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-foreground/80">
+            {badge}
+          </span>
+        )}
+        <div
+          className={cn(
+            'inline-flex items-center text-muted-foreground text-xs empty:hidden',
+            badge != null && 'pe-14',
+          )}
+        >
           {item.breadcrumbs?.map((item, i) => (
             <Fragment key={i}>
               {i > 0 && <ChevronRight className="size-4 rtl:rotate-180" />}

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

@@ -12,7 +12,7 @@ import {
   dialogHandle,
   SearchContext,
   useSearchContext,
-} from '@terrafirmagreg-team/ui/hooks/search/provider';
+} from '@terrafirmagreg-team/ui/hooks/search/use-provider';
 import type { SharedProps } from '@terrafirmagreg-team/ui/types/search';
 export type { SharedProps } from '@terrafirmagreg-team/ui/types/search';
 
@@ -115,3 +115,4 @@ export function SearchOnly({ children }: { children: ReactNode }) {
 
   if (search.enabled) return children;
 }
+

package/src/components/blocks/sidebar.tsx

@@ -22,7 +22,7 @@ import {
   useAutoScroll,
   useFolderDepth,
   useSidebar,
-} from '@terrafirmagreg-team/ui/hooks/sidebar';
+} from '@terrafirmagreg-team/ui/hooks/use-sidebar';
 import { Link } from '@terrafirmagreg-team/ui/components/blocks/nav/link';
 import {
   Collapsible,
@@ -31,7 +31,7 @@ import {
 } from '@terrafirmagreg-team/ui/components/ui/collapsible';
 import { useTranslations } from '@terrafirmagreg-team/translate/hooks/use-translations';
 
-export type { SidebarContextValue } from '@terrafirmagreg-team/ui/hooks/sidebar';
+export type { SidebarContextValue } from '@terrafirmagreg-team/ui/hooks/use-sidebar';
 
 export function SidebarProvider({
   defaultOpenLevel = 0,
@@ -363,8 +363,8 @@ export function SidebarTrigger({
       type="button"
       aria-label={
         open
-          ? t('ui.sidebar_close', )
-          : t('ui.sidebar_open', )
+          ? t('Close Sidebar', { note: 'ui.sidebar_close' })
+          : t('Open Sidebar', { note: 'ui.sidebar_open' })
       }
       aria-expanded={open}
       aria-controls="sidebar-mobile"
@@ -383,7 +383,7 @@ export function SidebarCollapseTrigger(props: ComponentProps<'button'>) {
   return (
     <button
       type="button"
-      aria-label={t('ui.sidebar_collapse', )}
+      aria-label={t('Collapse Sidebar', { note: 'ui.sidebar_collapse' })}
       aria-controls="sidebar"
       aria-expanded={!collapsed}
       data-collapsed={collapsed}