@open-slide/core 1.0.6 → 1.1.0

package/src/app/components/inspector/inspector-provider.tsx

@@ -15,6 +15,7 @@ import { Button } from '@/components/ui/button';
 import { type SlideComment, useComments } from '@/lib/inspector/use-comments';
 import { type Edit, type EditOp, type EditResult, useEditor } from '@/lib/inspector/use-editor';
 import { useLocale } from '@/lib/use-locale';
+import { ImageCropDialog } from './image-crop-dialog';
 
 export type SelectedTarget = {
   line: number;
@@ -69,6 +70,7 @@ type InspectorCtx = {
   commitEdits: () => Promise<void>;
   cancelEdits: () => void;
   committing: boolean;
+  openCrop: (anchor: HTMLImageElement) => void;
 };
 
 const Ctx = createContext<InspectorCtx | null>(null);
@@ -90,6 +92,16 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
   const instanceCounterRef = useRef(0);
   const [pendingCount, setPendingCount] = useState(0);
   const [committing, setCommitting] = useState(false);
+  const [cropTarget, setCropTarget] = useState<{
+    line: number;
+    column: number;
+    anchor: HTMLImageElement;
+    src: string;
+    targetWidth: number;
+    targetHeight: number;
+    initialFit: 'cover' | 'contain';
+    initialPosition: { x: number; y: number };
+  } | null>(null);
   const t = useLocale();
 
   const ensureInstanceId = useCallback((el: HTMLElement): string => {
@@ -529,6 +541,26 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
     setSelected(null);
   }, []);
 
+  const openCrop = useCallback((anchor: HTMLImageElement) => {
+    const loc = anchor.dataset.slideLoc;
+    if (!loc) return;
+    const [lineStr, columnStr] = loc.split(':');
+    const line = Number(lineStr);
+    const column = Number(columnStr);
+    if (!Number.isFinite(line) || !Number.isFinite(column)) return;
+    const cs = window.getComputedStyle(anchor);
+    setCropTarget({
+      line,
+      column,
+      anchor,
+      src: anchor.currentSrc || anchor.src,
+      targetWidth: anchor.offsetWidth || anchor.getBoundingClientRect().width,
+      targetHeight: anchor.offsetHeight || anchor.getBoundingClientRect().height,
+      initialFit: cs.objectFit === 'contain' ? 'contain' : 'cover',
+      initialPosition: parseObjectPosition(cs.objectPosition),
+    });
+  }, []);
+
   const value = useMemo<InspectorCtx>(
     () => ({
       slideId,
@@ -549,6 +581,7 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       commitEdits,
       cancelEdits,
       committing,
+      openCrop,
     }),
     [
       slideId,
@@ -568,10 +601,59 @@ export function InspectorProvider({ slideId, children }: { slideId: string; chil
       commitEdits,
       cancelEdits,
       committing,
+      openCrop,
     ],
   );
 
-  return <Ctx.Provider value={value}>{children}</Ctx.Provider>;
+  return (
+    <Ctx.Provider value={value}>
+      {children}
+      {cropTarget && (
+        <ImageCropDialog
+          src={cropTarget.src}
+          targetWidth={cropTarget.targetWidth}
+          targetHeight={cropTarget.targetHeight}
+          initialFit={cropTarget.initialFit}
+          initialPosition={cropTarget.initialPosition}
+          onClose={() => setCropTarget(null)}
+          onApply={(result) => {
+            const { line, column, anchor } = cropTarget;
+            if (anchor.isConnected) {
+              bufferOps(line, column, anchor, [
+                { kind: 'set-style', key: 'objectFit', value: result.fit },
+                {
+                  kind: 'set-style',
+                  key: 'objectPosition',
+                  value: `${round2(result.x)}% ${round2(result.y)}%`,
+                },
+              ]);
+            }
+            setCropTarget(null);
+          }}
+        />
+      )}
+    </Ctx.Provider>
+  );
+}
+
+function round2(n: number): number {
+  return Math.round(n * 100) / 100;
+}
+
+function parseObjectPosition(value: string): { x: number; y: number } {
+  const parts = value.trim().split(/\s+/);
+  const xRaw = parts[0] ?? '50%';
+  const yRaw = parts[1] ?? xRaw;
+  return { x: parsePercent(xRaw, 50), y: parsePercent(yRaw, 50) };
+}
+
+function parsePercent(s: string, fallback: number): number {
+  if (s === 'center') return 50;
+  if (s === 'left' || s === 'top') return 0;
+  if (s === 'right' || s === 'bottom') return 100;
+  const m = s.match(/(-?\d+(?:\.\d+)?)%/);
+  if (m?.[1]) return Number(m[1]);
+  return fallback;
 }
 
 export function InspectToggleButton() {

package/src/app/components/player.tsx

@@ -58,6 +58,7 @@ export function Player({
   const [helpOpen, setHelpOpen] = useState(false);
   const [blackout, setBlackout] = useState<'black' | 'white' | null>(null);
   const [laser, setLaser] = useState(false);
+  const [keyboardDriven, setKeyboardDriven] = useState(false);
   const [startedAt] = useState(() => Date.now());
 
   const goPrev = useCallback(() => {
@@ -181,19 +182,23 @@ export function Player({
 
       if (isNext) {
         e.preventDefault();
+        setKeyboardDriven(true);
         goNext();
         return;
       }
       if (isPrev) {
         e.preventDefault();
+        setKeyboardDriven(true);
         goPrev();
         return;
       }
       if (e.key === 'Home') {
+        setKeyboardDriven(true);
         onIndexChange(0);
         return;
       }
       if (e.key === 'End') {
+        setKeyboardDriven(true);
         onIndexChange(pages.length - 1);
         return;
       }
@@ -246,7 +251,16 @@ export function Player({
   const pointerNearBottom = usePointerNearBottom(BAR_HOTZONE_PX, controls && !overlayActive);
   const chromeVisible = pointerNearBottom || overlayActive;
   const idle = useIdle(IDLE_HIDE_MS, controls && !overlayActive);
-  const hideCursor = controls && (laser || (idle && !overlayActive && !pointerNearBottom));
+
+  useEffect(() => {
+    if (!keyboardDriven) return;
+    const clear = () => setKeyboardDriven(false);
+    window.addEventListener('mousemove', clear, { passive: true });
+    return () => window.removeEventListener('mousemove', clear);
+  }, [keyboardDriven]);
+
+  const hideCursor =
+    controls && (laser || keyboardDriven || (idle && !overlayActive && !pointerNearBottom));
 
   const PageComp = pages[index];
 

package/src/app/components/present/use-idle.ts

@@ -1,11 +1,15 @@
 import { useEffect, useState } from 'react';
 
 /**
- * Reports whether the user has been idle (no pointer / key / touch input)
- * for at least `delayMs`. Resets on any input event. The hook starts in
+ * Reports whether the user has been idle (no pointer / touch input) for at
+ * least `delayMs`. Resets on any pointer-related event. The hook starts in
  * the non-idle state so freshly-mounted UI is visible while the user
  * orients themselves.
  *
+ * Keyboard input is intentionally excluded — during a talk the presenter
+ * drives slides with arrow keys, and we want the cursor to stay hidden
+ * while they do.
+ *
  * Pass `enabled = false` to short-circuit (useful when the player is
  * paused on an overlay and we don't want to hide chrome behind it).
  */
@@ -27,14 +31,12 @@ export function useIdle(delayMs: number, enabled = true) {
     const opts = { passive: true } as const;
     window.addEventListener('mousemove', reset, opts);
     window.addEventListener('mousedown', reset, opts);
-    window.addEventListener('keydown', reset);
     window.addEventListener('touchstart', reset, opts);
     window.addEventListener('wheel', reset, opts);
     return () => {
       if (timer) clearTimeout(timer);
       window.removeEventListener('mousemove', reset);
       window.removeEventListener('mousedown', reset);
-      window.removeEventListener('keydown', reset);
       window.removeEventListener('touchstart', reset);
       window.removeEventListener('wheel', reset);
     };

package/src/app/components/style-panel/design-provider.tsx

@@ -11,6 +11,7 @@ import {
 import { toast } from 'sonner';
 import { useHistory } from '@/components/history-provider';
 import { type DesignSystem, defaultDesign, designToCssVars } from '../../lib/design';
+import { shuffleDesign } from '../../lib/design-presets';
 import { useDesign as useDesignFetch } from './use-design';
 
 type DesignCtx = {
@@ -26,6 +27,7 @@ type DesignCtx = {
   commit: () => Promise<void>;
   discard: () => void;
   resetToDefaults: () => void;
+  shuffle: () => void;
 };
 
 const Ctx = createContext<DesignCtx | null>(null);
@@ -98,6 +100,16 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     });
   }, [history]);
 
+  const shuffle = useCallback(() => {
+    const prev = draftRef.current;
+    const next = clone(shuffleDesign(prev));
+    setDraft(next);
+    history.record({
+      undo: () => setDraft(prev),
+      redo: () => setDraft(next),
+    });
+  }, [history]);
+
   // SlideCanvas emits its design vars inline on the canvas root, so a draft
   // overlay must use `!important` to outrank those inline styles.
   const previewCss = useMemo(() => {
@@ -121,6 +133,7 @@ export function DesignProvider({ slideId, children }: { slideId: string; childre
     commit,
     discard,
     resetToDefaults,
+    shuffle,
   };
 
   return (

package/src/app/components/style-panel/style-panel.tsx

@@ -1,4 +1,4 @@
-import { Palette, X } from 'lucide-react';
+import { Palette, Shuffle, X } from 'lucide-react';
 import { useEffect, useState } from 'react';
 import { Field, NumberField, Section } from '@/components/panel/panel-fields';
 import { PanelShell, usePanelMount } from '@/components/panel/panel-shell';
@@ -28,7 +28,7 @@ type DesignPanelProps = {
 };
 
 export function DesignPanel({ open, onClose }: DesignPanelProps) {
-  const { draft, exists, warning, loaded, dirty, update } = useDesignPanelState();
+  const { draft, exists, warning, loaded, dirty, update, shuffle } = useDesignPanelState();
   const { mounted, animVisible } = usePanelMount(open);
   const t = useLocale();
 
@@ -60,15 +60,27 @@ export function DesignPanel({ open, onClose }: DesignPanelProps) {
               />
             )}
           </div>
-          <Button
-            variant="ghost"
-            size="icon-sm"
-            className="text-muted-foreground hover:text-foreground"
-            onClick={onClose}
-            aria-label={t.stylePanel.closePanelAria}
-          >
-            <X className="size-3.5" />
-          </Button>
+          <div className="flex items-center gap-0.5">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={shuffle}
+              aria-label={t.stylePanel.shuffleAria}
+              title={t.stylePanel.shuffleTitle}
+            >
+              <Shuffle className="size-3.5" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              className="text-muted-foreground hover:text-foreground"
+              onClick={onClose}
+              aria-label={t.stylePanel.closePanelAria}
+            >
+              <X className="size-3.5" />
+            </Button>
+          </div>
         </>
       }
       banner={

package/src/app/components/thumbnail-rail.tsx

@@ -1,3 +1,19 @@
+import {
+  closestCenter,
+  DndContext,
+  type DragEndEvent,
+  KeyboardSensor,
+  PointerSensor,
+  useSensor,
+  useSensors,
+} from '@dnd-kit/core';
+import {
+  SortableContext,
+  sortableKeyboardCoordinates,
+  useSortable,
+  verticalListSortingStrategy,
+} from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import { useEffect, useRef } from 'react';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { format, useLocale } from '@/lib/use-locale';
@@ -14,6 +30,7 @@ type Props = {
   design?: DesignSystem;
   current: number;
   onSelect: (index: number) => void;
+  onReorder?: (from: number, to: number) => void;
   orientation?: Orientation;
 };
 
@@ -25,6 +42,7 @@ export function ThumbnailRail({
   design,
   current,
   onSelect,
+  onReorder,
   orientation = 'vertical',
 }: Props) {
   const activeRef = useRef<HTMLButtonElement | null>(null);
@@ -93,61 +111,210 @@ export function ThumbnailRail({
 
   const scale = VERTICAL_THUMB_WIDTH / CANVAS_WIDTH;
   const height = CANVAS_HEIGHT * scale;
+
+  const renderThumb = (PageComp: Page, i: number) => {
+    const active = i === current;
+    const inner = (
+      <ThumbContents
+        index={i}
+        active={active}
+        page={PageComp}
+        design={design}
+        scale={scale}
+        height={height}
+      />
+    );
+
+    if (onReorder) {
+      return (
+        <SortableThumb
+          key={i}
+          index={i}
+          active={active}
+          activeRef={active ? activeRef : undefined}
+          onSelect={() => onSelect(i)}
+          ariaLabel={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
+        >
+          {inner}
+        </SortableThumb>
+      );
+    }
+
+    return (
+      <button
+        key={i}
+        type="button"
+        ref={active ? activeRef : undefined}
+        onClick={() => onSelect(i)}
+        aria-label={format(t.thumbnailRail.goToPageAria, { n: i + 1 })}
+        aria-current={active ? 'true' : undefined}
+        className={thumbButtonClass(active)}
+      >
+        {inner}
+      </button>
+    );
+  };
+
+  const list = (
+    <aside className="flex flex-col gap-2 px-3 py-3">
+      <div className="flex items-baseline justify-between px-1 pb-1">
+        <span className="eyebrow">{t.thumbnailRail.pages}</span>
+        <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
+      </div>
+      {pages.map(renderThumb)}
+    </aside>
+  );
+
+  if (!onReorder) {
+    return <ScrollArea className="h-full border-r border-hairline bg-sidebar">{list}</ScrollArea>;
+  }
+
   return (
     <ScrollArea className="h-full border-r border-hairline bg-sidebar">
-      <aside className="flex flex-col gap-2 px-3 py-3">
-        <div className="flex items-baseline justify-between px-1 pb-1">
-          <span className="eyebrow">{t.thumbnailRail.pages}</span>
-          <span className="folio">{pages.length.toString().padStart(2, '0')}</span>
-        </div>
-        {pages.map((PageComp, i) => {
-          const active = i === current;
-          return (
-            <button
-              // biome-ignore lint/suspicious/noArrayIndexKey: pages list is render-stable
-              key={i}
-              type="button"
-              ref={active ? activeRef : undefined}
-              onClick={() => onSelect(i)}
-              aria-label={`Go to page ${i + 1}`}
-              aria-current={active ? 'true' : undefined}
-              className={cn(
-                'group/thumb flex items-start gap-2.5 rounded-[6px] p-1.5 text-left motion-safe:transition-colors',
-                'hover:bg-muted/60',
-                active && 'bg-muted',
-              )}
-            >
-              <span
-                className={cn(
-                  'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
-                  active ? 'text-brand' : 'text-muted-foreground/70',
-                )}
-              >
-                {(i + 1).toString().padStart(2, '0')}
-              </span>
-              <div
-                className={cn(
-                  'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
-                  active
-                    ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
-                    : 'border-hairline group-hover/thumb:border-foreground/25',
-                )}
-                style={{ width: VERTICAL_THUMB_WIDTH, height }}
-              >
-                <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
-                  <PageComp />
-                </SlideCanvas>
-                {active && (
-                  <span
-                    aria-hidden
-                    className="pointer-events-none absolute inset-y-0 left-0 w-[2px] bg-brand"
-                  />
-                )}
-              </div>
-            </button>
-          );
-        })}
-      </aside>
+      <SortableRail pages={pages} onReorder={onReorder}>
+        {list}
+      </SortableRail>
     </ScrollArea>
   );
 }
+
+function thumbButtonClass(active: boolean): string {
+  return cn(
+    'group/thumb flex w-full items-start gap-2.5 rounded-[6px] p-1.5 text-left motion-safe:transition-colors',
+    'hover:bg-muted/60',
+    active && 'bg-muted',
+  );
+}
+
+function ThumbContents({
+  index,
+  active,
+  page: PageComp,
+  design,
+  scale,
+  height,
+}: {
+  index: number;
+  active: boolean;
+  page: Page;
+  design?: DesignSystem;
+  scale: number;
+  height: number;
+}) {
+  return (
+    <>
+      <span
+        className={cn(
+          'mt-1.5 w-7 shrink-0 text-right font-mono text-[10px] font-medium tracking-[0.06em] tabular-nums uppercase',
+          active ? 'text-brand' : 'text-muted-foreground/70',
+        )}
+      >
+        {(index + 1).toString().padStart(2, '0')}
+      </span>
+      <div
+        className={cn(
+          'relative shrink-0 overflow-hidden rounded-[4px] border bg-card motion-safe:transition-all',
+          active
+            ? 'border-brand shadow-[0_0_0_1px_var(--brand)]'
+            : 'border-hairline group-hover/thumb:border-foreground/25',
+        )}
+        style={{ width: VERTICAL_THUMB_WIDTH, height }}
+      >
+        <SlideCanvas scale={scale} center={false} flat freezeMotion design={design}>
+          <PageComp />
+        </SlideCanvas>
+        {active && (
+          <span
+            aria-hidden
+            className="pointer-events-none absolute inset-y-0 left-0 w-[2px] bg-brand"
+          />
+        )}
+      </div>
+    </>
+  );
+}
+
+function SortableRail({
+  pages,
+  onReorder,
+  children,
+}: {
+  pages: Page[];
+  onReorder: (from: number, to: number) => void;
+  children: React.ReactNode;
+}) {
+  const sensors = useSensors(
+    useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
+    useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
+  );
+
+  const items = pages.map((_, i) => i + 1);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id) return;
+    const from = (active.id as number) - 1;
+    const to = (over.id as number) - 1;
+    if (from < 0 || to < 0 || from === to) return;
+    onReorder(from, to);
+  };
+
+  return (
+    <DndContext sensors={sensors} collisionDetection={closestCenter} onDragEnd={handleDragEnd}>
+      <SortableContext items={items} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </DndContext>
+  );
+}
+
+function SortableThumb({
+  index,
+  active,
+  activeRef,
+  onSelect,
+  ariaLabel,
+  children,
+}: {
+  index: number;
+  active: boolean;
+  activeRef: React.MutableRefObject<HTMLButtonElement | null> | undefined;
+  onSelect: () => void;
+  ariaLabel: string;
+  children: React.ReactNode;
+}) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id: index + 1,
+  });
+
+  const setRef = (node: HTMLButtonElement | null) => {
+    setNodeRef(node);
+    if (activeRef) activeRef.current = node;
+  };
+
+  const yOnlyTransform = transform ? { ...transform, x: 0 } : transform;
+
+  return (
+    <button
+      ref={setRef}
+      type="button"
+      onClick={onSelect}
+      aria-label={ariaLabel}
+      aria-current={active ? 'true' : undefined}
+      style={{
+        transform: CSS.Transform.toString(yOnlyTransform),
+        transition,
+        touchAction: 'none',
+      }}
+      className={cn(
+        thumbButtonClass(active),
+        'cursor-grab active:cursor-grabbing',
+        isDragging && 'z-10 opacity-60 shadow-edge ring-1 ring-brand',
+      )}
+      {...attributes}
+      {...listeners}
+    >
+      {children}
+    </button>
+  );
+}

package/src/app/lib/design-presets.ts

@@ -0,0 +1,94 @@
+import { type DesignSystem, defaultDesign } from './design';
+
+const SANS_SYSTEM = '-apple-system, BlinkMacSystemFont, "Inter", system-ui, sans-serif';
+const SANS_INTER = '"Inter", system-ui, sans-serif';
+const SANS_HELV = '"Helvetica Neue", Helvetica, Arial, sans-serif';
+const SERIF_GEORGIA = 'Georgia, "Times New Roman", serif';
+const SERIF_TIMES = '"Times New Roman", Times, serif';
+const MONO_SF = '"SF Mono", "JetBrains Mono", Menlo, monospace';
+
+export const designPresets: DesignSystem[] = [
+  defaultDesign,
+  {
+    palette: { bg: '#0f1115', text: '#f5f3ee', accent: '#7cc4ff' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_SYSTEM },
+    typeScale: { hero: 192, body: 32 },
+    radius: 6,
+  },
+  {
+    palette: { bg: '#eef1f4', text: '#1c2733', accent: '#ff6a5b' },
+    fonts: { display: SANS_HELV, body: SANS_SYSTEM },
+    typeScale: { hero: 156, body: 30 },
+    radius: 8,
+  },
+  {
+    palette: { bg: '#fdf6e3', text: '#073642', accent: '#b58900' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_INTER },
+    typeScale: { hero: 144, body: 28 },
+    radius: 14,
+  },
+  {
+    palette: { bg: '#ede2cc', text: '#3a2a1a', accent: '#2f6e3a' },
+    fonts: { display: SERIF_TIMES, body: SERIF_GEORGIA },
+    typeScale: { hero: 168, body: 32 },
+    radius: 4,
+  },
+  {
+    palette: { bg: '#ffffff', text: '#0a0a0a', accent: '#e11d48' },
+    fonts: { display: SANS_HELV, body: SANS_HELV },
+    typeScale: { hero: 200, body: 28 },
+    radius: 0,
+  },
+  {
+    palette: { bg: '#fde9d9', text: '#3a1f3d', accent: '#f97316' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_SYSTEM },
+    typeScale: { hero: 184, body: 36 },
+    radius: 24,
+  },
+  {
+    palette: { bg: '#e9f5ee', text: '#0f3324', accent: '#ec4899' },
+    fonts: { display: SANS_INTER, body: SANS_INTER },
+    typeScale: { hero: 160, body: 32 },
+    radius: 16,
+  },
+  {
+    palette: { bg: '#0a0a0a', text: '#f3edd9', accent: '#eab308' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_HELV },
+    typeScale: { hero: 200, body: 32 },
+    radius: 2,
+  },
+  {
+    palette: { bg: '#ece2f5', text: '#2a1c4a', accent: '#facc15' },
+    fonts: { display: SERIF_GEORGIA, body: SANS_SYSTEM },
+    typeScale: { hero: 168, body: 34 },
+    radius: 20,
+  },
+  {
+    palette: { bg: '#101418', text: '#a7f3d0', accent: '#fbbf24' },
+    fonts: { display: MONO_SF, body: MONO_SF },
+    typeScale: { hero: 144, body: 24 },
+    radius: 4,
+  },
+  {
+    palette: { bg: '#fafafa', text: '#0a0a0a', accent: '#facc15' },
+    fonts: { display: SANS_HELV, body: SANS_HELV },
+    typeScale: { hero: 220, body: 32 },
+    radius: 0,
+  },
+];
+
+function pickRandom(): DesignSystem {
+  const idx = Math.floor(Math.random() * designPresets.length);
+  return designPresets[idx] ?? defaultDesign;
+}
+
+export function shuffleDesign(current?: DesignSystem | null): DesignSystem {
+  if (designPresets.length === 0) return defaultDesign;
+  if (designPresets.length === 1) return designPresets[0] ?? defaultDesign;
+  const currentJson = current ? JSON.stringify(current) : null;
+  for (let i = 0; i < 8; i++) {
+    const pick = pickRandom();
+    if (JSON.stringify(pick) !== currentJson) return pick;
+  }
+  return pickRandom();
+}