@tastic/hud 0.14.2 → 0.16.0

package/dist/chrome/index.d.mts

@@ -0,0 +1,240 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AchievementCatalogRow } from '@tastic/achievements';
+import { ViewRotation } from '@tastic/core';
+import { StyleProp, ViewStyle, Insets, TextStyle, LayoutChangeEvent } from 'react-native';
+
+interface Props$7 {
+    rows: AchievementCatalogRow[];
+    label?: string;
+    fg?: string;
+    fgMuted?: string;
+}
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$7): react.JSX.Element;
+
+declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
+interface Props$6 {
+    icon: string;
+    title: string;
+    description: string;
+    badgeColor: string;
+    unlockedLabel?: string;
+    checkColor?: string;
+    progress?: number;
+    deviceMarker?: boolean;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
+}
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$6): react.JSX.Element;
+
+interface ActivityStats {
+    distinctDaysPlayed: number;
+    currentDayStreak: number;
+    bestDayStreak: number;
+}
+interface Props$5 {
+    stats: ActivityStats;
+}
+declare function ActivityStatSection({ stats }: Props$5): react.JSX.Element;
+
+interface BaseSettingsDialogProps {
+    visible: boolean;
+    onDismiss: () => void;
+    rotation?: ViewRotation;
+    version: string | number;
+    lockOrientation?: boolean;
+    onLockOrientationChange?: (value: boolean) => void;
+    deferBottomEdgeGestures?: boolean;
+    onDeferBottomEdgeGestures?: (value: boolean) => void;
+    hideSound?: boolean;
+    hideHaptics?: boolean;
+    hideAppearance?: boolean;
+    hideUpdateCheck?: boolean;
+    onUpdateError?: (message: string) => void;
+    onShowHowToPlay?: () => void;
+    children?: ReactNode;
+}
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
+
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
+interface Props$4 {
+    rotation?: ViewRotation;
+    title?: string;
+    titleVariant?: MD3TextVariant;
+    onBack: () => void;
+    insets: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
+    onReset?: () => void;
+    resetLabel?: string;
+    resetConfirmTitle?: string;
+    resetConfirmBody?: string;
+    fg?: string;
+    bg?: string;
+    children: ReactNode;
+}
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
+
+interface ConfirmDialogProps {
+    visible: boolean;
+    title: string;
+    message: ReactNode;
+    confirmLabel: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    rotation?: ViewRotation;
+    icon?: string;
+    destructive?: boolean;
+}
+declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
+
+interface Props$3 {
+    maxContentWidth?: number;
+    leftGutter?: ReactNode;
+    rightGutter?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    children: ReactNode;
+}
+declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$3): react.JSX.Element;
+
+interface Props$2 {
+    onBack: () => void;
+    onSettings: () => void;
+    fg: string;
+    insets: {
+        top: number;
+        left: number;
+        right: number;
+    };
+    backIcon?: string;
+    backLabel?: string;
+    hitSlop?: number | Insets;
+}
+declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
+
+declare const MONO_FONT: string;
+
+interface OverlayCardColors {
+    fg: string;
+    fgMuted: string;
+    cardBg: string;
+    cardBorder: string;
+}
+declare function getOverlayCardColors(dark: boolean): OverlayCardColors;
+declare const overlayStyles: {
+    card: {
+        alignItems: "center";
+        borderRadius: number;
+        borderWidth: number;
+        gap: number;
+        maxWidth: number;
+        padding: number;
+    };
+    overlay: {
+        alignItems: "center";
+        backgroundColor: string;
+        bottom: number;
+        justifyContent: "center";
+        left: number;
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+};
+declare const overlayActionStyles: {
+    actionButton: {
+        flexGrow: number;
+        minWidth: number;
+    };
+    actionButtonSingle: {
+        minWidth: number;
+    };
+    actions: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+        justifyContent: "center";
+        width: "100%";
+    };
+};
+
+interface RotatedFrameProps {
+    children: ReactNode;
+    /** The angle to turn the frame by. Defaults to the live physical hold (@tastic/core's useRotation); pass it
+     * when the caller already has the exact angle it wants, e.g. a dialog handed its caller's rotation, or 0 for
+     * one that already sits inside a turned frame. */
+    rotation?: ViewRotation;
+    /** Give everything inside the frame the safe-area insets already remapped onto the frame's own edges (see
+     * @tastic/core's rotateInsets), so a component that reads `useSafeAreaInsets()` itself (a library screen,
+     * Paper's Modal, a toaster) lands on the right edge when the frame is turned. Leave it off for content that
+     * rotates the insets itself, which would otherwise rotate them twice. */
+    rotatedSafeArea?: boolean;
+    /** Mount a Paper Portal.Host INSIDE the frame, so a dialog (Paper's Portal otherwise mounts at the app root,
+     * outside the frame) is laid out against the frame's footprint and turned with it. The dialog must then be
+     * told `rotation={0}`. */
+    portalHost?: boolean;
+    /** Let touches fall through the frame to whatever is beneath it, so only its children claim them. For a frame
+     * laid OVER other content (a dialog layer, a root-level overlay); a screen that owns the window leaves it off. */
+    passThrough?: boolean;
+    /** Cap on the content column's width in the WIDE layout only (the rotated footprint is landscape), centred: a
+     * stats list or a roster stretched across an 874pt-wide landscape screen reads badly. Portrait is never capped,
+     * so a portrait iPad or desktop window keeps its full width. Omit for no cap. */
+    maxContentWidth?: number;
+}
+/** A frame turned to follow the phone while the OS stays portrait-locked (see @tastic/core's FakeLandscapeView),
+ * sized to the turned footprint so its content lays out against the short edge at +/-90. The tree is IDENTICAL
+ * at every angle, so a rotation never remounts what is inside: `FakeLandscapeView > SafeArea provider >
+ * [Portal.Host] > column`. `rotation`, `rotatedSafeArea`, `passThrough` and `maxContentWidth` only change styles
+ * and values, but `portalHost` adds or removes the Portal.Host element, so it must be STATIC per call site
+ * (flipping it at runtime would remount everything inside).
+ *
+ * Safe for tap-driven content only: react-native-gesture-handler's translation deltas are untransformed, so
+ * never put a gesture-tracked game board inside it. */
+declare function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea, portalHost, passThrough, maxContentWidth }: RotatedFrameProps): react.JSX.Element;
+
+declare function getStaggeredWordDuration(letterCount: number): number;
+interface StaggeredWordProps {
+    word: string;
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    reducedMotion: boolean;
+    startIndex?: number;
+    fontWeight?: TextStyle['fontWeight'];
+    letterSpacing?: number;
+    style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
+}
+declare function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex, fontWeight, letterSpacing, style, onLayout }: StaggeredWordProps): react.JSX.Element;
+
+interface Props$1 {
+    label: string;
+    value: string;
+    fg?: string;
+    fgMuted?: string;
+}
+declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
+
+interface Props {
+    label: string;
+    fg?: string;
+    sectionBg?: string;
+    children: ReactNode;
+}
+declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
+
+interface UpdateDialogProps {
+    rotation?: ViewRotation;
+    autoCheck?: boolean;
+    autoPrompt?: boolean;
+    onError?: (message: string) => void;
+}
+declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, type OverlayCardColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles };

package/dist/chrome/index.d.ts

@@ -0,0 +1,240 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { AchievementCatalogRow } from '@tastic/achievements';
+import { ViewRotation } from '@tastic/core';
+import { StyleProp, ViewStyle, Insets, TextStyle, LayoutChangeEvent } from 'react-native';
+
+interface Props$7 {
+    rows: AchievementCatalogRow[];
+    label?: string;
+    fg?: string;
+    fgMuted?: string;
+}
+declare function AchievementCatalogSection({ rows, label, fg, fgMuted: fgMutedOverride }: Props$7): react.JSX.Element;
+
+declare const LOCKED_BADGE_COLOR = "rgba(128,128,128,0.3)";
+interface Props$6 {
+    icon: string;
+    title: string;
+    description: string;
+    badgeColor: string;
+    unlockedLabel?: string;
+    checkColor?: string;
+    progress?: number;
+    deviceMarker?: boolean;
+    fg?: string;
+    fgMuted?: string;
+    sectionBg?: string;
+}
+declare function AchievementRow({ icon, title, description, badgeColor, unlockedLabel, checkColor, progress, deviceMarker, fg: fgOverride, fgMuted: fgMutedOverride, sectionBg: sectionBgOverride }: Props$6): react.JSX.Element;
+
+interface ActivityStats {
+    distinctDaysPlayed: number;
+    currentDayStreak: number;
+    bestDayStreak: number;
+}
+interface Props$5 {
+    stats: ActivityStats;
+}
+declare function ActivityStatSection({ stats }: Props$5): react.JSX.Element;
+
+interface BaseSettingsDialogProps {
+    visible: boolean;
+    onDismiss: () => void;
+    rotation?: ViewRotation;
+    version: string | number;
+    lockOrientation?: boolean;
+    onLockOrientationChange?: (value: boolean) => void;
+    deferBottomEdgeGestures?: boolean;
+    onDeferBottomEdgeGestures?: (value: boolean) => void;
+    hideSound?: boolean;
+    hideHaptics?: boolean;
+    hideAppearance?: boolean;
+    hideUpdateCheck?: boolean;
+    onUpdateError?: (message: string) => void;
+    onShowHowToPlay?: () => void;
+    children?: ReactNode;
+}
+declare function BaseSettingsDialog({ visible, onDismiss, rotation: rotationOverride, version, lockOrientation, onLockOrientationChange, deferBottomEdgeGestures, onDeferBottomEdgeGestures, hideSound, hideHaptics, hideAppearance, hideUpdateCheck, onUpdateError, onShowHowToPlay, children }: BaseSettingsDialogProps): react.JSX.Element | null;
+
+type MD3TextVariant = 'displayLarge' | 'displayMedium' | 'displaySmall' | 'headlineLarge' | 'headlineMedium' | 'headlineSmall' | 'titleLarge' | 'titleMedium' | 'titleSmall' | 'labelLarge' | 'labelMedium' | 'labelSmall' | 'bodyLarge' | 'bodyMedium' | 'bodySmall';
+interface Props$4 {
+    rotation?: ViewRotation;
+    title?: string;
+    titleVariant?: MD3TextVariant;
+    onBack: () => void;
+    insets: {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    };
+    onReset?: () => void;
+    resetLabel?: string;
+    resetConfirmTitle?: string;
+    resetConfirmBody?: string;
+    fg?: string;
+    bg?: string;
+    children: ReactNode;
+}
+declare function BaseStatsScreen({ rotation: rotationOverride, title, titleVariant, onBack, insets, onReset, resetLabel, resetConfirmTitle, resetConfirmBody, fg: fgOverride, bg: bgOverride, children }: Props$4): react.JSX.Element;
+
+interface ConfirmDialogProps {
+    visible: boolean;
+    title: string;
+    message: ReactNode;
+    confirmLabel: string;
+    cancelLabel?: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    rotation?: ViewRotation;
+    icon?: string;
+    destructive?: boolean;
+}
+declare function ConfirmDialog({ visible, title, message, confirmLabel, cancelLabel, onConfirm, onCancel, rotation, icon, destructive }: ConfirmDialogProps): react.JSX.Element | null;
+
+interface Props$3 {
+    maxContentWidth?: number;
+    leftGutter?: ReactNode;
+    rightGutter?: ReactNode;
+    style?: StyleProp<ViewStyle>;
+    children: ReactNode;
+}
+declare function ContentGutter({ maxContentWidth, leftGutter, rightGutter, style, children }: Props$3): react.JSX.Element;
+
+interface Props$2 {
+    onBack: () => void;
+    onSettings: () => void;
+    fg: string;
+    insets: {
+        top: number;
+        left: number;
+        right: number;
+    };
+    backIcon?: string;
+    backLabel?: string;
+    hitSlop?: number | Insets;
+}
+declare function CornerActionButtons({ onBack, onSettings, fg, insets, backIcon, backLabel, hitSlop }: Props$2): react.JSX.Element;
+
+declare const MONO_FONT: string;
+
+interface OverlayCardColors {
+    fg: string;
+    fgMuted: string;
+    cardBg: string;
+    cardBorder: string;
+}
+declare function getOverlayCardColors(dark: boolean): OverlayCardColors;
+declare const overlayStyles: {
+    card: {
+        alignItems: "center";
+        borderRadius: number;
+        borderWidth: number;
+        gap: number;
+        maxWidth: number;
+        padding: number;
+    };
+    overlay: {
+        alignItems: "center";
+        backgroundColor: string;
+        bottom: number;
+        justifyContent: "center";
+        left: number;
+        position: "absolute";
+        right: number;
+        top: number;
+    };
+};
+declare const overlayActionStyles: {
+    actionButton: {
+        flexGrow: number;
+        minWidth: number;
+    };
+    actionButtonSingle: {
+        minWidth: number;
+    };
+    actions: {
+        flexDirection: "row";
+        flexWrap: "wrap";
+        gap: number;
+        justifyContent: "center";
+        width: "100%";
+    };
+};
+
+interface RotatedFrameProps {
+    children: ReactNode;
+    /** The angle to turn the frame by. Defaults to the live physical hold (@tastic/core's useRotation); pass it
+     * when the caller already has the exact angle it wants, e.g. a dialog handed its caller's rotation, or 0 for
+     * one that already sits inside a turned frame. */
+    rotation?: ViewRotation;
+    /** Give everything inside the frame the safe-area insets already remapped onto the frame's own edges (see
+     * @tastic/core's rotateInsets), so a component that reads `useSafeAreaInsets()` itself (a library screen,
+     * Paper's Modal, a toaster) lands on the right edge when the frame is turned. Leave it off for content that
+     * rotates the insets itself, which would otherwise rotate them twice. */
+    rotatedSafeArea?: boolean;
+    /** Mount a Paper Portal.Host INSIDE the frame, so a dialog (Paper's Portal otherwise mounts at the app root,
+     * outside the frame) is laid out against the frame's footprint and turned with it. The dialog must then be
+     * told `rotation={0}`. */
+    portalHost?: boolean;
+    /** Let touches fall through the frame to whatever is beneath it, so only its children claim them. For a frame
+     * laid OVER other content (a dialog layer, a root-level overlay); a screen that owns the window leaves it off. */
+    passThrough?: boolean;
+    /** Cap on the content column's width in the WIDE layout only (the rotated footprint is landscape), centred: a
+     * stats list or a roster stretched across an 874pt-wide landscape screen reads badly. Portrait is never capped,
+     * so a portrait iPad or desktop window keeps its full width. Omit for no cap. */
+    maxContentWidth?: number;
+}
+/** A frame turned to follow the phone while the OS stays portrait-locked (see @tastic/core's FakeLandscapeView),
+ * sized to the turned footprint so its content lays out against the short edge at +/-90. The tree is IDENTICAL
+ * at every angle, so a rotation never remounts what is inside: `FakeLandscapeView > SafeArea provider >
+ * [Portal.Host] > column`. `rotation`, `rotatedSafeArea`, `passThrough` and `maxContentWidth` only change styles
+ * and values, but `portalHost` adds or removes the Portal.Host element, so it must be STATIC per call site
+ * (flipping it at runtime would remount everything inside).
+ *
+ * Safe for tap-driven content only: react-native-gesture-handler's translation deltas are untransformed, so
+ * never put a gesture-tracked game board inside it. */
+declare function RotatedFrame({ children, rotation: rotationOverride, rotatedSafeArea, portalHost, passThrough, maxContentWidth }: RotatedFrameProps): react.JSX.Element;
+
+declare function getStaggeredWordDuration(letterCount: number): number;
+interface StaggeredWordProps {
+    word: string;
+    color: string;
+    fontFamily: string;
+    fontSize: number;
+    lineHeight: number;
+    reducedMotion: boolean;
+    startIndex?: number;
+    fontWeight?: TextStyle['fontWeight'];
+    letterSpacing?: number;
+    style?: StyleProp<ViewStyle>;
+    onLayout?: (e: LayoutChangeEvent) => void;
+}
+declare function StaggeredWord({ word, color, fontFamily, fontSize, lineHeight, reducedMotion, startIndex, fontWeight, letterSpacing, style, onLayout }: StaggeredWordProps): react.JSX.Element;
+
+interface Props$1 {
+    label: string;
+    value: string;
+    fg?: string;
+    fgMuted?: string;
+}
+declare function StatRow({ label, value, fg: fgOverride, fgMuted: fgMutedOverride }: Props$1): react.JSX.Element;
+
+interface Props {
+    label: string;
+    fg?: string;
+    sectionBg?: string;
+    children: ReactNode;
+}
+declare function StatSection({ label, fg: fgOverride, sectionBg: sectionBgOverride, children }: Props): react.JSX.Element;
+
+interface UpdateDialogProps {
+    rotation?: ViewRotation;
+    autoCheck?: boolean;
+    autoPrompt?: boolean;
+    onError?: (message: string) => void;
+}
+declare function UpdateDialog({ rotation, autoCheck, autoPrompt, onError }: UpdateDialogProps): react.JSX.Element;
+
+export { AchievementCatalogSection, AchievementRow, ActivityStatSection, BaseSettingsDialog, type BaseSettingsDialogProps, BaseStatsScreen, ConfirmDialog, type ConfirmDialogProps, ContentGutter, CornerActionButtons, LOCKED_BADGE_COLOR, MONO_FONT, type OverlayCardColors, RotatedFrame, type RotatedFrameProps, StaggeredWord, type StaggeredWordProps, StatRow, StatSection, UpdateDialog, type UpdateDialogProps, getOverlayCardColors, getStaggeredWordDuration, overlayActionStyles, overlayStyles };