@mudlet/mudlet-web 0.4.2 → 0.4.3

package/dist-lib/hooks/useOutput.d.ts

@@ -2,7 +2,6 @@ import { type OutputRendererControls, type MessageSource } from '../ui/output/Ou
 export declare const DEFAULT_STICKY_LINES = 50;
 export interface UseStickyOutputOptions {
     stickyLines?: number;
-    maxElements?: number;
     splitViewThreshold?: number;
     showTimestamps?: boolean;
     /** See OutputHandlerOptions.followTail. Omit for a normal scrollback. */
@@ -16,4 +15,4 @@ export interface UseStickyOutputResult {
     scrollToBottom: () => void;
     controls: OutputRendererControls | null;
 }
-export declare function useStickyOutput(source: MessageSource | null, { stickyLines, maxElements, splitViewThreshold, showTimestamps, followTail, }?: UseStickyOutputOptions): UseStickyOutputResult;
+export declare function useStickyOutput(source: MessageSource | null, { stickyLines, splitViewThreshold, showTimestamps, followTail, }?: UseStickyOutputOptions): UseStickyOutputResult;

package/dist-lib/hooks/useViewportMode.d.ts

@@ -1,3 +1,4 @@
+import type { ReactNode } from 'react';
 /**
  * Responsive breakpoints (px). Kept in sync with the `--bp-*` tokens and the
  * `@media` blocks in App.css — change them in both places.
@@ -8,7 +9,31 @@
 export declare const MOBILE_MAX_WIDTH = 600;
 export declare const TABLET_MAX_WIDTH = 900;
 export type ViewportMode = 'mobile' | 'tablet' | 'desktop';
-/** Current responsive mode, re-rendering the caller when it changes. */
+/** Current responsive mode, re-rendering the caller when it changes. Reads the
+ *  nearest measured container, and the window when there is not one. */
 export declare function useViewportMode(): ViewportMode;
 /** Convenience: true on phone-sized viewports (the single-column layout branch). */
 export declare function useIsMobile(): boolean;
+/**
+ * The same breakpoints, measured against an element instead of the window.
+ *
+ * The window is the wrong ruler when the client is not the whole page. Mudlet
+ * Web is embedded in a ~560px frame on mudlet.org, and `window.innerWidth`
+ * inside that frame is 560 — so the client concluded it was on a phone and
+ * switched to the single-column layout, putting its panels behind a tab strip
+ * on a 2560px screen. What decides the layout is how much room the client has,
+ * which is what its own root element knows.
+ *
+ * Thresholds are unchanged: a full-window client on a real phone still measures
+ * a phone-sized root and still gets the phone layout.
+ */
+export declare function useElementViewportMode(element: HTMLElement | null): ViewportMode;
+/**
+ * Publishes the mode measured from `element` to everything below it. Consumers
+ * that are not under a provider — the connection screen, tests — keep reading
+ * the window, so this is additive.
+ */
+export declare function ViewportModeProvider({ element, children }: {
+    element: HTMLElement | null;
+    children: ReactNode;
+}): import("react").FunctionComponentElement<import("react").ProviderProps<ViewportMode | null>>;