misraj-mushaf-renderer 1.3.40 → 2.0.0

package/README.md

@@ -28,198 +28,157 @@ A significant portion of this codebase is derived from the [quran.com-frontend-n
 - **Easy Integration**: Simple to integrate into any React project with a straightforward provider-consumer pattern.
 - **Customizable Styling**: Uses a flexible SCSS structure for easy theming and customization.
 
-## How to Use
-
-Make sure to import package styles file which includes css styles and fonts assets
-
-```tsx
-// main.tsx;
-
-import 'misraj-mushaf-renderer/dist/styles';
-```
-
-The core of the library is the `MushafReaderProvider` and the `Mushaf` component.
-
-### 1. `MushafReaderProvider`
-
-The `MushafReaderProvider` is a React context provider that fetches and manages the state for a specific Mushaf page. You need to wrap any component that will render Mushaf text with it.
-
-**Props:**
-
-- `dataId` (string): A unique identifier for the Mushaf narration you want to render (e.g., `quran-hafs`, `quran-qaloon`).
-- `pageNumber` (number): The page number of the Mushaf you wish to display.
-- `children`: The child components that will consume the provider's context.
-- `initialFontScale` (number, optional): The initial font scale. Defaults to `3`.
-- `hasBorder` (boolean, optional): Whether to display the page border. Defaults to `true`.
-- `initialIsTwoPagesView` (boolean, optional): The initial state for two-page view. Defaults to `false`.
-- `themeProps` (object, optional): An object to override default theme styles. See the "Styling and Customization" section.
-- `styleOverride` (object, optional): An object to provide custom CSS classes to components. See the "Styling and Customization" section.
-
-### 2. `useMushafContext` Hook
-
-This hook provides access to the state and actions of the `MushafReaderProvider`. It should be used by components that are children of `MushafReaderProvider`.
-
-**State:**
-
-- `fontScale` (number): The current font scale.
-- `selectedVerse` (Ayah | null): The currently selected verse.
-- `ayat` (MushafPageDataType | null): The raw data for the current page.
-- `nextPageAyat` (MushafPageDataType | null): The data for the next page, used in two-page view.
-- `error` (Error | null): Any error that occurred while fetching data.
-- `pageNumber` (number): The current page number.
-- `dataId` (DataId): The current narration identifier.
-- `isTwoPagesView` (boolean): Whether the two-page view is currently active.
-
-**Actions:**
-
-- `increaseFontScale()`: Increases the font scale.
-- `decreaseFontScale()`: Decreases the font scale.
-- `setSelectedVerse(verse: Ayah | null)`: Sets the selected verse.
-
-**Example:**
-
-```tsx
-import { MushafReaderProvider, useMushafContext, Mushaf } from 'misraj-mushaf-renderer';
-
-function App() {
-  return (
-    <MushafReaderProvider dataId="quran-hafs" pageNumber={1} initialIsTwoPagesView={true}>
-      <MushafReader />
-    </MushafReaderProvider>
-  );
-}
-
-function MushafReader() {
-  const { pageNumber, fontScale, increaseFontScale, decreaseFontScale, setSelectedVerse } =
-    useMushafContext();
-
-  const handleWordClick = (word) => {
-    // select the verse the word belongs to
-    setSelectedVerse(word.verse);
-  };
-
-  const handleWordHover = (word) => {
-    console.log('Word hovered:', word);
-  };
-
-  return (
-    <div>
-      <header>
-        <h1>Page {pageNumber}</h1>
-        <div>
-          <button onClick={decreaseFontScale}>A-</button>
-          <span>Font size: {fontScale}</span>
-          <button onClick={increaseFontScale}>A+</button>
-        </div>
-      </header>
-      <Mushaf onWordClick={handleWordClick} onWordHover={handleWordHover} />
-    </div>
-  );
-}
-```
-
-### 3. `Mushaf` Component
-
-This component consumes the data fetched by `MushafReaderProvider` and renders the actual Mushaf page(s).
-
-It accepts several optional props to handle user interactions.
-
-**Props:**
-
-- `onWordClick(word: Word)`: A callback function that triggers when a user clicks on a specific word. The `word` object contains detailed information about the word, including its location, text, and verse key.
-- `onWordHover(word: Word)`: A callback function that triggers when a user hovers over a word.
-
-## How It Works: The Rendering Process
-
-Rendering a Mushaf page is a complex process that this library simplifies into a hierarchy of components.
-
-1.  **`Line.tsx`** (`@src/components/MushafReader/ReadingView/Line.tsx`): The Mushaf page is broken down into lines. This component is responsible for rendering a single line of text, including chapter headers where necessary.
-
-2.  **`VerseText.tsx`** (`@src/components/Verse/VerseText.tsx`): Each line contains words from one or more verses. `VerseText` takes an array of word objects and maps over them to render the verse. It handles text alignment and applies the correct font class based on the selected narration and font scale.
-
-3.  **`MushafWord.tsx`** (`@src/components/dls/MushafWord/MushafWord.tsx`): This is the most granular component, responsible for rendering a single Mushaf word. It attaches the `onClick` and `onMouseEnter` event listeners and applies the specific font-family for the current narration via CSS classes defined in `MushafWord.module.scss`.
-
-## Styling and Customization
-
-The library's styling is managed through SCSS, offering a high degree of customization.
-
-- **Component Styles**: Each component has its own scoped styles using SCSS modules (e.g., `MushafWord.module.scss`).
-- **Global Styles** (`@src/styles/`): This directory contains the global styling configuration.
-  - **Fonts**: The `@font-face` declarations for all supported narrations are located in `@src/styles/fonts.scss`.
-  - **Responsiveness**: Breakpoints for various screen sizes are defined in `@src/styles/_breakpoints.scss` to ensure the layout is responsive.
-
-The library offers two primary ways to customize the appearance of the Mushaf renderer: `themeProps` for global theme adjustments and `styleOverride` for fine-grained component-level style changes. Both are passed as props to the `MushafReaderProvider`.
-
-### 1. Theming with `themeProps`
-
-The `themeProps` object allows you to easily change the overall theme by setting global CSS variables at runtime.
-
-**Available Options:**
-
-- `borderColor` ('blue' | 'green' | 'sepia'): Sets the color for the page borders and the default word highlight color.
-- `wordHighlightColor` (string): Overrides the default highlight color for words when they are hovered or selected. Accepts any valid CSS color value.
-- `chapterHeaderFontSize` (string): The font size for the chapter headers (surah names). Accepts any valid CSS font-size value.
-- `primaryFontColor` (string): The primary color of the Quranic text.
-
-**Example:**
-
-```tsx
-const themeProps = {
-  borderColor: 'sepia',
-  wordHighlightColor: '#D4AF37', // Gold highlight
-  chapterHeaderFontSize: '2.5rem',
-  primaryFontColor: '#333333', // Dark gray text
-};
-
-<MushafReaderProvider dataId="quran-hafs" pageNumber={1} themeProps={themeProps}>
-  <Mushaf />
-</MushafReaderProvider>;
-```
-
-### 2. Component-level styling with `styleOverride`
-
-For more specific, dynamic, or one-off styling changes, the `styleOverride` prop allows you to apply a `React.CSSProperties` object directly to the library's internal components.
-
-The `styleOverride` object follows this structure:
-
-```ts
-{
-  [ComponentName]?: {
-    [StyleKey]?: React.CSSProperties; // A CSS style object
-  }
-}
-```
-
--   `ComponentName` corresponds to the components you want to style (e.g., `Page`, `MushafWord`, `MushafReader`).
--   `StyleKey` corresponds to a stylable element within that component (e.g., `container`, `highlighted`, `twoPagesRow`).
-
-You can find all available `ComponentName` and `StyleKey` values in the exported `classnames` object.
-
-**Example:**
-
-Let's say you want to remove the gap between the two pages in the two-page view. You can do this by passing a style object to the `twoPagesRow` style key of the `MushafReader` component.
-
-```tsx
-import { Mushaf, MushafReaderProvider } from 'misraj-mushaf-renderer';
-
-const styleOverride = {
-  MushafReader: {
-    twoPagesRow: {
-      gap: 0,
-    },
-  },
-};
-
-function App() {
-  return (
-    <MushafReaderProvider
-      dataId="quran-hafs"
-      pageNumber={1}
-      styleOverride={styleOverride}
-      initialIsTwoPagesView={true}
-    >
-      <Mushaf />
-    </MushafReaderProvider>
-  );
-}
-```
+## Package Structure
+
+- `misraj-mushaf-renderer`: full package, including the default React UI, core helpers, and the Quranhub adapter
+- `misraj-mushaf-renderer/core`: headless controller hook, public types, and shaping utilities
+- `misraj-mushaf-renderer/react-ui`: the default React reader, provider, and context hook
+- `misraj-mushaf-renderer/adapters/quranhub`: optional data-source adapter for Quranhub
+
+## How to Use
+
+Import the packaged styles once:
+
+```tsx
+import 'misraj-mushaf-renderer/dist/styles';
+```
+
+### 1. Drop-in Reader
+
+Use `MushafReader` when you want a single self-contained component:
+
+```tsx
+import { MushafReader } from 'misraj-mushaf-renderer';
+
+function App() {
+  return (
+    <MushafReader
+      dataId="quran-hafs"
+      pageNumber={1}
+      defaultTwoPageView
+      theme={{
+        borderColor: 'sepia',
+        wordHighlightColor: '#D4AF37',
+      }}
+    />
+  );
+}
+```
+
+### 2. Host-Controlled Data and State
+
+Use the new core/controller API when the host app should own fetching, page state, or selected verse state:
+
+```tsx
+import { MushafReader, useMushafController } from 'misraj-mushaf-renderer';
+
+function ControlledReader({ pageData }) {
+  const controller = useMushafController({
+    dataId: 'quran-hafs',
+    pageNumber: 1,
+    pageData,
+    defaultTwoPageView: false,
+  });
+
+  return (
+    <MushafReader
+      dataId="quran-hafs"
+      pageNumber={controller.pageNumber}
+      pageData={pageData}
+      selectedVerse={controller.selectedVerse}
+      onSelectedVerseChange={controller.setSelectedVerse}
+      fontScale={controller.fontScale}
+      onFontScaleChange={controller.setFontScale}
+    />
+  );
+}
+```
+
+### 3. Custom Data Source
+
+Use `dataSource` for adapter mode without hardcoding Quranhub into your app shell:
+
+```tsx
+import { MushafReader } from 'misraj-mushaf-renderer';
+import { createQuranhubDataSource } from 'misraj-mushaf-renderer/adapters/quranhub';
+
+const dataSource = createQuranhubDataSource({ environment: 'production' });
+
+function App() {
+  return (
+    <MushafReader
+      dataId="quran-hafs"
+      pageNumber={1}
+      dataSource={dataSource}
+      narrationDifferencesRequest={{
+        sourceEditionIdentifier: 'quran-warsh',
+        targetEditionIdentifier: 'quran-hafs',
+      }}
+    />
+  );
+}
+```
+
+## Styling and Customization
+
+Theme variables are now scoped to each reader root instead of mutating `document.documentElement`, so multiple differently themed readers can coexist on the same page.
+
+### `theme`
+
+Use semantic theme tokens:
+
+- `borderColor`
+- `wordHighlightColor`
+- `chapterHeaderFontSize`
+- `primaryFontColor`
+- `fontSize`
+- `spacingMega`
+
+### `classNames`, `styles`, and `slotProps`
+
+Use stable slot names instead of internal SCSS module keys:
+
+- `root`
+- `twoPageLayout`
+- `page`
+- `pageBorder`
+- `pageMeta`
+- `pageNumber`
+- `line`
+- `verseText`
+- `word`
+- `wordHighlighted`
+- `chapterHeader`
+- `chapterIcon`
+
+### Render Overrides
+
+The default UI can be customized without forking internal components:
+
+- `renderWord`
+- `renderLine`
+- `renderPageMeta`
+- `renderChapterHeader`
+
+Each renderer receives typed context plus `defaultNode`, so hosts can wrap or replace the default output.
+
+## Compatibility
+
+- `MushafReaderProvider` and `Mushaf` still exist for compatibility with the older provider-consumer pattern.
+- The provider now uses the same explicit props as `MushafReader`, including `dataSource`, `defaultFontScale`, `defaultTwoPageView`, and `narrationDifferencesRequest`.
+
+## Notes
+
+- The default package still exports `useMushafContext` for apps that want access to the reader controller from inside the provider tree.
+- The core layer is intentionally independent from any specific backend. Quranhub support now lives behind the shipped adapter.
+```tsx
+import { Mushaf, MushafReaderProvider } from 'misraj-mushaf-renderer';
+
+function LegacyApp() {
+  return (
+    <MushafReaderProvider dataId="quran-hafs" pageNumber={1} defaultTwoPageView>
+      <Mushaf />
+    </MushafReaderProvider>
+  );
+}
+```

package/dist/adapters/quranhub-entry.d.ts

@@ -0,0 +1 @@
+export { createQuranhubDataSource, type QuranhubDataSourceOptions } from './quranhub';

package/dist/adapters/quranhub.d.ts

@@ -0,0 +1,9 @@
+import { MushafDataSource } from '../core/types';
+export type QuranhubEnvironment = 'production' | 'staging';
+export type QuranhubDataSourceOptions = {
+    baseUrl?: string;
+    environment?: QuranhubEnvironment;
+    fetchImplementation?: typeof fetch;
+};
+export declare const createQuranhubDataSource: (options?: QuranhubDataSourceOptions) => MushafDataSource;
+export default createQuranhubDataSource;

package/dist/adapters/quranhub.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/classnames.d.ts

@@ -1,3 +1,4 @@
+export declare const mushafSlots: readonly ["root", "twoPageLayout", "page", "pageBorder", "pageMeta", "pageNumber", "line", "verseText", "word", "wordHighlighted", "chapterHeader", "chapterIcon"];
 declare const classnames: {
     ChapterIconContainer: readonly ["iconContainer"];
     MushafWord: readonly ["colored", "filled", "highlightOnHover", "highlighted", "differenceHighlight"];

package/dist/components/MushafReader/Provider.d.ts

@@ -1,8 +1,11 @@
+import { MushafClassNames, MushafRenderers, MushafSlotProps, MushafStyles, MushafTheme } from '../../core';
 import { MushafPageProviderProps } from './contexts/MushafPage/MushafPageProvider';
-import { ThemeProviderProps } from './contexts/Theme/type';
-type MushafReaderProviderProps = MushafPageProviderProps & {
-    themeProps?: ThemeProviderProps['themeProps'];
-    styleOverride?: ThemeProviderProps['styleOverride'];
+export type MushafReaderProviderProps = MushafPageProviderProps & {
+    theme?: MushafTheme;
+    classNames?: MushafClassNames;
+    styles?: MushafStyles;
+    slotProps?: MushafSlotProps;
+    renderers?: MushafRenderers;
 };
-declare const MushafReaderProvider: ({ children, themeProps, styleOverride, ...props }: MushafReaderProviderProps) => import("react/jsx-runtime").JSX.Element;
+declare const MushafReaderProvider: ({ children, theme, classNames, styles, slotProps, renderers, ...props }: MushafReaderProviderProps) => import("react/jsx-runtime").JSX.Element;
 export default MushafReaderProvider;

package/dist/components/MushafReader/ReadingView/Line.d.ts

@@ -1,5 +1,4 @@
 import { default as Word } from '../../../types/Word';
-import { BorderColor } from '../../../types/border-color';
 type LineProps = {
     words: Word[];
     lineKey: string;
@@ -8,7 +7,6 @@ type LineProps = {
     lineIndex: number;
     onWordClick?: (word: Word, event: React.MouseEvent<HTMLElement>) => void;
     onWordHover?: (word: Word, event: React.MouseEvent<HTMLElement>) => void;
-    borderColor?: BorderColor;
 };
-declare const _default: import('react').MemoExoticComponent<({ lineKey, words, isBigTextLayout, pageIndex, lineIndex, onWordClick, onWordHover, }: LineProps) => import("react/jsx-runtime").JSX.Element>;
+declare const _default: import('react').MemoExoticComponent<({ lineKey, words, isBigTextLayout, pageIndex, lineIndex, onWordClick, onWordHover, }: LineProps) => string | number | bigint | boolean | Iterable<import('react').ReactNode> | Promise<string | number | bigint | boolean | import('react').ReactPortal | import('react').ReactElement<unknown, string | import('react').JSXElementConstructor<any>> | Iterable<import('react').ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined>;
 export default _default;

package/dist/components/MushafReader/ReadingView/Page.d.ts

@@ -1,14 +1,12 @@
 import { default as React } from 'react';
 import { default as Word } from '../../../types/Word';
 import { Ayah } from '../../../types/verses';
-import { StyleOverride } from '../contexts/Theme/type';
 type PageProps = {
     verses: Ayah[];
     pageNumber: number;
     pageIndex: number;
     onWordClick?: (word: Word, event: React.MouseEvent<HTMLElement>) => void;
     onWordHover?: (word: Word, event: React.MouseEvent<HTMLElement>) => void;
-    pageStyleOverride?: StyleOverride['Page'];
 };
-declare const Page: ({ verses, pageNumber, pageIndex, onWordClick, onWordHover, pageStyleOverride, }: PageProps) => import("react/jsx-runtime").JSX.Element;
+declare const Page: ({ verses, pageNumber, pageIndex, onWordClick, onWordHover, }: PageProps) => import("react/jsx-runtime").JSX.Element;
 export default Page;

package/dist/components/MushafReader/contexts/MushafPage/MushafPage.types.d.ts

@@ -1,10 +1,7 @@
-import { default as Word } from '../../../../types/Word';
 import { default as React } from 'react';
-type NarrationId = 'quran-hafs' | 'quran-shoba' | 'quran-warsh' | 'quran-qunbul' | 'quran-qaloon' | 'quran-alsoosi' | 'quran-aldouri' | 'quran-albazzi';
-type ReciterId = 'ar.muhammadabdulhakim.albazzi' | 'ar.sufi.aldouri' | 'ar.husary.aldouri' | 'ar.belalya.warsh' | 'ar.abdurrahmaansudais.hafs' | 'ar.hanirifai.hafs' | 'ar.minshawimujawwad.hafs' | 'ar.abdulbasitmurattal.hafs' | 'ar.husarymujawwad.hafs' | 'ar.sufi.alsoosi' | 'ar.aljazairi.warsh' | 'ar.parhizgar.hafs' | 'ar.abdulsamad.warsh' | 'ar.muhammadabdulkareem.warsh' | 'ar.husary.qaloon' | 'ar.sufi.shoba' | 'ar.alkouchi.warsh' | 'ar.alnaehy.qaloon' | 'ar.abdulhakimabdullatif.shoba' | 'ar.aldaghoush.warsh' | 'ar.qanyouh.qaloon' | 'ar.abusneineh.qaloon' | 'ar.husary.warsh' | 'ar.muhammadabdulhakim.qunbul' | 'ar.ibrahimakhdar.hafs' | 'ar.abdullahbasfar.hafs' | 'ar.shaatree.hafs' | 'ar.ahmedajamy.hafs' | 'ar.alafasy.hafs' | 'ar.husary.hafs' | 'ar.hudhaify.hafs' | 'ar.mahermuaiqly.hafs' | 'ar.minshawi.hafs' | 'ar.muhammadayyoub.hafs' | 'ar.muhammadjibreel.hafs' | 'ar.saoodshuraym.hafs' | 'ar.aymanswoaid.hafs' | 'ar.abdulsamad.hafs';
-export type DataId = NarrationId | ReciterId;
+import { default as Word } from '../../../../types/Word';
+export type { DataId } from '../../../../core/types';
 export interface MushafPageProps {
     onWordClick?: (word: Word, event: React.MouseEvent<HTMLElement>) => void;
     onWordHover?: (word: Word, event: React.MouseEvent<HTMLElement>) => void;
 }
-export {};

package/dist/components/MushafReader/contexts/MushafPage/MushafPageProvider.d.ts

@@ -1,46 +1,8 @@
 import { default as React } from 'react';
-import { NarrationDifference } from '../../../../types/differences';
-import { Ayah, IVersesListDto } from '../../../../types/verses';
-import { ThemeProviderProps } from '../Theme/type';
-import { DataId } from './MushafPage.types';
-type NarrationDifferences = NarrationDifference[];
-/** ---------- Types ---------- */
-type MushafPageState = {
-    fontScale: number;
-    selectedVerse: Ayah | null;
-    ayat: IVersesListDto | null;
-    nextPageAyat: IVersesListDto | null;
-    narrationDifferences: NarrationDifferences | null;
-    error: Error | null;
-    pageNumber: number;
-    dataId: DataId;
-    hasBorder: boolean;
-    initialIsTwoPagesView: boolean;
-};
-type MushafPageActions = {
-    increaseFontScale: () => void;
-    decreaseFontScale: () => void;
-    setSelectedVerse: React.Dispatch<React.SetStateAction<Ayah | null>>;
-    refresh: () => void;
-};
-export type HostApiEnvironment = 'production' | 'staging';
-export type MushafPageProviderProps = {
-    children: React.ReactNode;
-    dataId: DataId;
-    hostApiEnvironment?: HostApiEnvironment;
-    pageNumber: number;
-    initialFontScale?: number;
-    hasBorder?: boolean;
-    initialIsTwoPagesView?: boolean;
-    themeProps?: ThemeProviderProps['themeProps'];
-    styleOverride?: ThemeProviderProps['styleOverride'];
-    showNarrationDifferences?: {
-        sourceEditionIdentifier: string;
-        targetEditionIdentifier: string;
-    } | null;
-};
-export declare const MushafPageProvider: ({ children, dataId, pageNumber, initialFontScale, hasBorder, initialIsTwoPagesView, showNarrationDifferences, hostApiEnvironment, }: MushafPageProviderProps) => import("react/jsx-runtime").JSX.Element;
-export type MushafContextStateTypes = MushafPageState & MushafPageActions;
-/** Convenience: keep a compat hook name if you prefer */
-export declare const useMushafContext: () => MushafContextStateTypes;
-export {};
+import { MushafReaderValue, useMushafController } from '../../../../core';
+export type MushafPageProviderProps = React.PropsWithChildren<Parameters<typeof useMushafController>[0] & {
+    value?: MushafReaderValue;
+}>;
+export declare const MushafPageProvider: ({ children, value, dataSource, ...controllerOptions }: MushafPageProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const useMushafContext: () => MushafReaderValue;
+export type MushafContextStateTypes = MushafReaderValue;

package/dist/components/MushafReader/contexts/Theme/ThemeProvider.d.ts

@@ -1,3 +1,3 @@
 import { ThemeProviderProps, ThemeState } from './type';
 export declare const useThemeContext: () => ThemeState;
-export declare const ThemeProvider: ({ children, themeProps, styleOverride, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ThemeProvider: ({ children, theme, classNames, styles, slotProps, renderers, }: ThemeProviderProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/MushafReader/contexts/Theme/type.d.ts

@@ -1,26 +1,18 @@
 import { default as React } from 'react';
-import { default as classnames } from '../../../../classnames';
-import { BorderColor } from '../../../../types/border-color';
-type ThemeProps = {
-    borderColor?: BorderColor;
-    wordHighlightColor?: string;
-    chapterHeaderFontSize?: string;
-    primaryFontColor?: string;
-    fontSize?: string;
-};
-type ClassnameGroups = typeof classnames;
-type GroupName = keyof ClassnameGroups;
-type GroupKey<K extends GroupName> = ClassnameGroups[K][number];
-export type StyleOverride = {
-    [K in GroupName]?: Partial<Record<GroupKey<K>, React.CSSProperties>>;
-};
+import { MushafClassNames, MushafRenderers, MushafSlotProps, MushafStyles, MushafTheme } from '../../../../core/types';
 export type ThemeState = {
-    themeProps: ThemeProps;
-    styleOverride: StyleOverride;
+    theme: MushafTheme;
+    classNames: MushafClassNames;
+    styles: MushafStyles;
+    slotProps: MushafSlotProps;
+    renderers: MushafRenderers;
+    rootStyle: React.CSSProperties;
 };
 export type ThemeProviderProps = {
     children: React.ReactNode;
-    themeProps?: ThemeProps;
-    styleOverride?: StyleOverride;
+    theme?: MushafTheme;
+    classNames?: MushafClassNames;
+    styles?: MushafStyles;
+    slotProps?: MushafSlotProps;
+    renderers?: MushafRenderers;
 };
-export {};

package/dist/components/MushafReader/slots.d.ts

@@ -0,0 +1,5 @@
+import { CSSProperties } from 'react';
+import { MushafSlot } from '../../core/types';
+export declare const useSlotClassName: (slot: MushafSlot, defaultClassName?: string) => string;
+export declare const useSlotStyle: (slot: MushafSlot, fallbackStyle?: CSSProperties) => CSSProperties;
+export declare const mergeSlotStyles: (...styles: Array<CSSProperties | undefined>) => CSSProperties;

package/dist/core/shaping.d.ts

@@ -0,0 +1,9 @@
+import { default as Word } from '../types/Word';
+import { NarrationDifference } from '../types/differences';
+import { Ayah } from '../types/verses';
+export declare const groupVersesByLines: (verses: Ayah[]) => Record<string, Word[]>;
+export type NarrationDifferenceInfo = {
+    differenceText: string;
+    differenceContent: string;
+};
+export declare const buildNarrationDifferencesMap: (narrationDifferences: NarrationDifference[] | null | undefined) => Map<string, NarrationDifferenceInfo> | null;

package/dist/core/shaping.test.d.ts

@@ -0,0 +1 @@
+export {};