@tamer4lynx/tamer-app-shell 0.0.1

package/README.md

@@ -0,0 +1,67 @@
+# tamer-app-shell
+
+App chrome: AppBar, TabBar, and Content layout for Lynx.
+
+## Installation
+
+```bash
+npm install @tamer4lynx/tamer-app-shell
+```
+
+Add to your app's dependencies and run `t4l link`. Depends on **tamer-icons**, **tamer-insets**, **tamer-router**, **tamer-screen**.
+
+## Usage
+
+```tsx
+import {
+  AppShellProvider,
+  AppBar,
+  TabBar,
+  Content,
+  Screen,
+  SafeArea,
+  useAppShellContext,
+  useAppShellRouter,
+} from '@tamer4lynx/tamer-app-shell'
+
+// Wrap app with provider
+<AppShellProvider showAppBar showTabBar barHeight={56}>
+  <Screen>
+    <SafeArea edges={['top', 'bottom']}>
+      <AppBar
+        title="My App"
+        leftAction={{ icon: 'arrow_back', onTap: () => router.back() }}
+        rightActions={[{ icon: 'settings', onTap: openSettings }]}
+      />
+      <Content>
+        {children}
+      </Content>
+      <TabBar tabs={[{ path: '/', icon: 'home', label: 'Home' }, { path: '/about', icon: 'info', label: 'About' }]} />
+    </SafeArea>
+  </Screen>
+</AppShellProvider>
+```
+
+Typically used via **tamer-router** `Stack` and `Tabs` layouts, which compose AppShellProvider, AppBar, TabBar, and Content internally.
+
+## API
+
+| Component | Props | Description |
+|-----------|-------|-------------|
+| `AppShellProvider` | `showAppBar?`, `showTabBar?`, `barHeight?` | Context for app chrome visibility |
+| `AppBar` | `title?`, `barHeight?`, `leftAction?`, `rightActions?`, `foregroundColor?`, `actionColor?` | Top app bar |
+| `TabBar` | `tabs`, `style?`, `iconColor?` | Bottom tab bar |
+| `Content` | ViewProps | Main content area |
+| `Screen` | ViewProps | Full-screen container (re-export from tamer-screen) |
+| `SafeArea` | ViewProps, `edges?` | Safe area wrapper (re-export from tamer-screen) |
+
+| Hook | Returns | Description |
+|------|---------|-------------|
+| `useAppShellContext()` | `{ showAppBar, showTabBar, barHeight } \| null` | App shell visibility |
+| `useAppShellRouter()` | `{ back, canGoBack, replace } \| null` | Router integration for back/replace |
+
+**AppBarAction:** `{ icon, set?, onTap }`
+
+## Platform
+
+Uses **lynx.ext.json**. Run `t4l link` after adding to your app.

package/dist/src/app-shell.css

@@ -0,0 +1,55 @@
+.AppShellActionButton {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  overflow: hidden;
+  border-radius: 50%;
+  transition: transform 0.12s ease-out, opacity 0.12s ease-out;
+}
+
+.AppShellActionButton--pressed {
+  transform: scale(0.92);
+  opacity: 0.85;
+}
+
+.AppShellActionButton-ripple {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.6);
+  transform: scale(0);
+  opacity: 0;
+  transform-origin: center;
+  overflow: hidden;
+}
+
+.AppShellActionButton--pressed .AppShellActionButton-ripple {
+  animation: AppShellRipple 0.3s ease-out forwards;
+}
+
+@keyframes AppShellRipple {
+  0% {
+    transform: scale(0);
+    opacity: 0.8;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+
+.AppShellTabItem {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: transform 0.1s ease-out, opacity 0.1s ease-out;
+}
+
+.AppShellTabItem--pressed {
+  transform: scale(0.94);
+  opacity: 0.9;
+}

package/dist/src/index.d.ts

@@ -0,0 +1,65 @@
+import './app-shell.css';
+import { type IconSet } from '@tamer4lynx/tamer-icons';
+import type { ReactNode } from '@lynx-js/react';
+import type { ViewProps } from '@lynx-js/types';
+export { Screen, SafeArea, useSafeAreaContext } from '@tamer4lynx/tamer-screen';
+export interface AppShellRouterContextValue {
+    back: () => void;
+    canGoBack: () => boolean;
+    replace: (route: string, options?: {
+        mode?: string;
+        direction?: string;
+        tab?: boolean;
+    }) => void;
+}
+export declare const AppShellRouterContext: import("react").Context<AppShellRouterContextValue | null>;
+export declare function useAppShellRouter(): AppShellRouterContextValue | null;
+export declare const px: (value: number) => string;
+export interface AppShellContextValue {
+    showAppBar: boolean;
+    showTabBar: boolean;
+    barHeight: number;
+}
+export declare const AppShellContext: import("react").Context<AppShellContextValue | null>;
+export declare function useAppShellContext(): AppShellContextValue | null;
+export interface AppBarAction {
+    icon: string;
+    set?: IconSet;
+    onTap: () => void;
+}
+export interface AppBarProps extends ViewProps {
+    title?: string;
+    barHeight?: number;
+    leftAction?: AppBarAction | false;
+    rightActions?: AppBarAction[];
+    foregroundColor?: string;
+    actionColor?: string;
+}
+export declare function AppBar({ title, barHeight, leftAction, rightActions, foregroundColor, actionColor, style, children, ...rest }: AppBarProps): import("@lynx-js/react").JSX.Element;
+export interface TabItem {
+    icon: string;
+    set?: IconSet;
+    label?: string;
+    path?: string;
+    onTap?: () => void;
+}
+export interface TabBarIconColor {
+    active?: string;
+    inactive?: string;
+}
+export interface TabBarProps extends ViewProps {
+    tabs: TabItem[];
+    iconColor?: TabBarIconColor;
+}
+export declare function TabBar({ tabs, iconColor, style, ...rest }: TabBarProps): import("@lynx-js/react").JSX.Element;
+export interface ContentProps extends ViewProps {
+}
+export declare function Content({ children, style, ...rest }: ContentProps): import("@lynx-js/react").JSX.Element;
+export interface AppShellProviderProps {
+    children: ReactNode;
+    showAppBar?: boolean;
+    showTabBar?: boolean;
+    barHeight?: number;
+}
+export declare function AppShellProvider({ children, showAppBar, showTabBar, barHeight, }: AppShellProviderProps): import("@lynx-js/react").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.tsx"],"names":[],"mappings":"AACA,OAAO,iBAAiB,CAAA;AAKxB,OAAO,EAAQ,KAAK,OAAO,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAC/C,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAG/C,OAAO,EAAE,MAAM,EAAE,QAAQ,EAAE,kBAAkB,EAAE,MAAM,0BAA0B,CAAA;AAE/E,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,IAAI,CAAA;IAChB,SAAS,EAAE,MAAM,OAAO,CAAA;IACxB,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,OAAO,CAAA;KAAE,KAAK,IAAI,CAAA;CACjG;AAED,eAAO,MAAM,qBAAqB,4DAAyD,CAAA;AAE3F,wBAAgB,iBAAiB,IAAI,0BAA0B,GAAG,IAAI,CAErE;AAGD,eAAO,MAAM,EAAE,GAAI,OAAO,MAAM,WAA6B,CAAA;AAE7D,MAAM,WAAW,oBAAoB;IACnC,UAAU,EAAE,OAAO,CAAA;IACnB,UAAU,EAAE,OAAO,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;CAClB;AAED,eAAO,MAAM,eAAe,sDAAmD,CAAA;AAE/E,wBAAgB,kBAAkB,gCAEjC;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,EAAE,MAAM,IAAI,CAAA;CAClB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,UAAU,CAAC,EAAE,YAAY,GAAG,KAAK,CAAA;IACjC,YAAY,CAAC,EAAE,YAAY,EAAE,CAAA;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,WAAW,CAAC,EAAE,MAAM,CAAA;CACrB;AA2BD,wBAAgB,MAAM,CAAC,EACrB,KAAK,EACL,SAA8B,EAC9B,UAAU,EACV,YAAiB,EACjB,eAAwB,EACxB,WAAW,EACX,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,WAAW,wCAsDb;AAED,MAAM,WAAW,OAAO;IACtB,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,OAAO,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CACnB;AAED,MAAM,WAAW,eAAe;IAC9B,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS;IAC5C,IAAI,EAAE,OAAO,EAAE,CAAA;IACf,SAAS,CAAC,EAAE,eAAe,CAAA;CAC5B;AAkCD,wBAAgB,MAAM,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,WAAW,wCA8DtE;AAED,MAAM,WAAW,YAAa,SAAQ,SAAS;CAAG;AAElD,wBAAgB,OAAO,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,YAAY,wCAkBjE;AAED,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,UAAiB,EACjB,UAAkB,EAClB,SAA8B,GAC/B,EAAE,qBAAqB,wCAGvB"}

package/dist/src/index.js

@@ -0,0 +1,126 @@
+import { jsx as _jsx, jsxs as _jsxs } from "@lynx-js/react/jsx-runtime";
+/// <reference types="@lynx-js/react" />
+import './app-shell.css';
+import { createContext, useCallback, useContext, useState } from '@lynx-js/react';
+import { useLocation } from 'react-router';
+import { useInsets, useKeyboard } from '@tamer4lynx/tamer-insets';
+import { useSafeAreaContext } from '@tamer4lynx/tamer-screen';
+import { Icon } from '@tamer4lynx/tamer-icons';
+export { Screen, SafeArea, useSafeAreaContext } from '@tamer4lynx/tamer-screen';
+export const AppShellRouterContext = createContext(null);
+export function useAppShellRouter() {
+    return useContext(AppShellRouterContext);
+}
+const DEFAULT_BAR_HEIGHT = 56;
+export const px = (value) => `${Math.round(value)}px`;
+export const AppShellContext = createContext(null);
+export function useAppShellContext() {
+    return useContext(AppShellContext);
+}
+const ACTION_SIZE = 48;
+const ACTION_ICON_SIZE = 32;
+function ActionButton({ action, color = '#fff' }) {
+    const [pressed, setPressed] = useState(false);
+    return (_jsxs("view", { className: `AppShellActionButton${pressed ? ' AppShellActionButton--pressed' : ''}`, style: {
+            width: px(ACTION_SIZE),
+            height: px(ACTION_SIZE),
+            borderRadius: px(ACTION_SIZE / 2),
+            overflow: 'hidden',
+        }, bindtap: action.onTap, bindtouchstart: () => setPressed(true), bindtouchend: () => setPressed(false), bindtouchcancel: () => setPressed(false), children: [_jsx(Icon, { name: action.icon, set: action.set ?? 'material', size: ACTION_ICON_SIZE, color: color }), _jsx("view", { className: "AppShellActionButton-ripple" })] }));
+}
+export function AppBar({ title, barHeight = DEFAULT_BAR_HEIGHT, leftAction, rightActions = [], foregroundColor = '#fff', actionColor, style, children, ...rest }) {
+    const insets = useInsets();
+    const safeArea = useSafeAreaContext();
+    const isSafeAreaChild = safeArea?.hasTop ?? false;
+    const router = useAppShellRouter();
+    const back = router?.back ?? (() => { });
+    const canGoBack = router?.canGoBack ?? (() => false);
+    const resolvedTitleColor = foregroundColor;
+    const resolvedActionColor = actionColor ?? foregroundColor;
+    const showDefaultBack = leftAction === undefined && canGoBack();
+    const left = leftAction === false ? null : leftAction ? (_jsx(ActionButton, { action: leftAction, color: resolvedActionColor })) : showDefaultBack ? (_jsx(ActionButton, { action: { icon: 'arrow_back', onTap: back }, color: resolvedActionColor })) : null;
+    const right = rightActions.length > 0 ? (_jsx("view", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center' }, children: rightActions.map((action, i) => (_jsx(ActionButton, { action: action, color: resolvedActionColor }, i))) })) : null;
+    const effectiveBarHeight = isSafeAreaChild ? DEFAULT_BAR_HEIGHT + insets.top : barHeight;
+    return (_jsxs("view", { style: {
+            height: px(effectiveBarHeight),
+            ...(isSafeAreaChild ? { marginTop: `-${Math.round(insets.top)}px`, paddingTop: px(insets.top) } : {}),
+            paddingLeft: '16px',
+            paddingRight: '16px',
+            display: 'flex',
+            flexDirection: 'row',
+            justifyContent: 'space-between',
+            alignItems: 'center',
+            flexShrink: 0,
+            borderBottomWidth: '1px',
+            borderBottomColor: '#e0e0e0',
+            ...(style ?? {}),
+        }, ...rest, children: [_jsx("view", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', minWidth: px(ACTION_SIZE) }, children: left }), children ?? (title ? _jsx("text", { style: { display: 'block', width: '100%', fontWeight: 'bold', fontSize: px(18), textAlign: 'center', color: resolvedTitleColor }, children: title }) : _jsx("view", { style: { flex: 1 } })), _jsx("view", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', minWidth: px(ACTION_SIZE), justifyContent: 'flex-end' }, children: right })] }));
+}
+const DEFAULT_ICON_COLOR = { active: '#FFF', inactive: '#000' };
+function TabBarItem({ item, isActive, onTap, iconColor = DEFAULT_ICON_COLOR, }) {
+    const [pressed, setPressed] = useState(false);
+    const iconC = isActive ? (iconColor.active ?? DEFAULT_ICON_COLOR.active) : (iconColor.inactive ?? DEFAULT_ICON_COLOR.inactive);
+    return (_jsxs("view", { className: `AppShellTabItem${pressed ? ' AppShellTabItem--pressed' : ''}`, style: { opacity: isActive ? 1 : 0.6 }, bindtap: onTap, bindtouchstart: () => setPressed(true), bindtouchend: () => setPressed(false), bindtouchcancel: () => setPressed(false), children: [_jsx(Icon, { name: item.icon, set: item.set ?? 'material', size: 24, color: iconC }), item.label ? (_jsx("text", { style: { marginTop: px(4), color: iconC }, children: item.label })) : null] }));
+}
+export function TabBar({ tabs, iconColor, style, ...rest }) {
+    const insets = useInsets();
+    const keyboard = useKeyboard();
+    const safeArea = useSafeAreaContext();
+    const isSafeAreaChild = safeArea?.hasBottom ?? false;
+    const router = useAppShellRouter();
+    const replace = router?.replace ?? (() => { });
+    const location = useLocation();
+    const handleTap = useCallback((item) => {
+        'background only';
+        if (!item.path) {
+            item.onTap?.();
+            return;
+        }
+        const pathname = location.pathname || '/';
+        const isCurrent = (t) => {
+            const p = t.path || '/';
+            if (p === '/')
+                return pathname === '/' || pathname === '';
+            return pathname === p || pathname.startsWith(p + '/');
+        };
+        if (isCurrent(item))
+            return;
+        replace(item.path, { tab: true });
+    }, [replace, tabs, location.pathname]);
+    return (_jsx("view", { style: {
+            ...(isSafeAreaChild ? { marginBottom: `-${Math.round(insets.bottom)}px` } : {}),
+            flexDirection: 'row',
+            paddingLeft: px(8),
+            paddingRight: px(8),
+            alignItems: 'center',
+            justifyContent: 'space-around',
+            borderTopWidth: '1px',
+            borderTopColor: '#e0e0e0',
+            ...keyboard.visible ? { position: 'absolute', display: 'block', overflow: 'hidden', maxHeight: '0px', height: '0px', paddingBottom: '0px', paddingTop: '0px', bottom: '-50px' } : { display: 'flex', paddingBottom: px(insets.bottom), paddingTop: px(12) },
+            ...(style ?? {}),
+        }, ...rest, children: tabs.map((item, i) => {
+            const pathname = location.pathname || '/';
+            const p = item.path || '/';
+            const isActive = item.path
+                ? p === '/' ? pathname === '/' || pathname === '' : pathname === p || pathname.startsWith(p + '/')
+                : false;
+            return (_jsx(TabBarItem, { item: item, isActive: isActive, onTap: () => handleTap(item), iconColor: iconColor }, i));
+        }) }));
+}
+export function Content({ children, style, ...rest }) {
+    const scrollStyle = {
+        display: 'flex',
+        flex: '1 1 100%',
+        flexGrow: 1,
+        flexShrink: 1,
+        flexDirection: 'column',
+        justifyContent: 'flex-start',
+        height: '100%',
+        ...(style ?? {}),
+    };
+    return (_jsx("view", { style: { flex: 1, minHeight: 0, display: 'flex', flexDirection: 'column' }, children: _jsx("scroll-view", { "scroll-y": true, style: scrollStyle, ...rest, children: children }) }));
+}
+export function AppShellProvider({ children, showAppBar = true, showTabBar = false, barHeight = DEFAULT_BAR_HEIGHT, }) {
+    const value = { showAppBar, showTabBar, barHeight };
+    return _jsx(AppShellContext.Provider, { value: value, children: children });
+}

package/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@tamer4lynx/tamer-app-shell",
+  "publishConfig": { "access": "public", "tag": "prerelease" },
+  "version": "0.0.1",
+  "type": "module",
+  "description": "App chrome: AppBar, TabBar, and Content layout for Lynx.",
+  "main": "dist/src/index.js",
+  "types": "dist/src/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/src/index.d.ts",
+      "import": "./dist/src/index.js",
+      "default": "./dist/src/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "@lynx-js/react": ">=0.100.0",
+    "react": "^17.0.0",
+    "react-router": "^6.0.0"
+  },
+  "scripts": {
+    "build": "tsc && cp src/app-shell.css dist/src/app-shell.css"
+  },
+  "dependencies": {
+    "@tamer4lynx/tamer-icons": "^0.0.1",
+    "@tamer4lynx/tamer-insets": "^0.0.1",
+    "@tamer4lynx/tamer-screen": "^0.0.1"
+  },
+  "devDependencies": {
+    "@lynx-js/react": "^0.112.1",
+    "@lynx-js/types": "3.3.0",
+    "@types/react": "^17.0.0",
+    "react": "^17.0.2",
+    "react-router": "^6.28.0",
+    "typescript": "~5.8.0"
+  },
+  "engines": {
+    "node": ">=18"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/tamer4lynx/tamer-app-shell.git"
+  },
+  "homepage": "https://github.com/tamer4lynx/tamer-app-shell#readme",
+  "bugs": {
+    "url": "https://github.com/tamer4lynx/tamer-app-shell/issues"
+  },
+  "author": "Nanofuxion",
+  "license": "MIT"
+}