@streamplace/components 0.8.11 → 0.8.13

package/dist/time-sync/index.d.ts

@@ -0,0 +1,3 @@
+export { checkClockDrift, getSyncedDate, getSystemDate, getSystemTime, getTimeOffset, initializeTimeSync, setTimeOffset, syncTimeWithServer, } from "./time-sync";
+export { useTimeSync } from "./useTimeSync";
+//# sourceMappingURL=index.d.ts.map

package/dist/time-sync/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/time-sync/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,eAAe,EACf,aAAa,EACb,aAAa,EACb,aAAa,EACb,aAAa,EACb,kBAAkB,EAClB,aAAa,EACb,kBAAkB,GACnB,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}

package/dist/time-sync/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeSync = exports.syncTimeWithServer = exports.setTimeOffset = exports.initializeTimeSync = exports.getTimeOffset = exports.getSystemTime = exports.getSystemDate = exports.getSyncedDate = exports.checkClockDrift = void 0;
+var time_sync_1 = require("./time-sync");
+Object.defineProperty(exports, "checkClockDrift", { enumerable: true, get: function () { return time_sync_1.checkClockDrift; } });
+Object.defineProperty(exports, "getSyncedDate", { enumerable: true, get: function () { return time_sync_1.getSyncedDate; } });
+Object.defineProperty(exports, "getSystemDate", { enumerable: true, get: function () { return time_sync_1.getSystemDate; } });
+Object.defineProperty(exports, "getSystemTime", { enumerable: true, get: function () { return time_sync_1.getSystemTime; } });
+Object.defineProperty(exports, "getTimeOffset", { enumerable: true, get: function () { return time_sync_1.getTimeOffset; } });
+Object.defineProperty(exports, "initializeTimeSync", { enumerable: true, get: function () { return time_sync_1.initializeTimeSync; } });
+Object.defineProperty(exports, "setTimeOffset", { enumerable: true, get: function () { return time_sync_1.setTimeOffset; } });
+Object.defineProperty(exports, "syncTimeWithServer", { enumerable: true, get: function () { return time_sync_1.syncTimeWithServer; } });
+var useTimeSync_1 = require("./useTimeSync");
+Object.defineProperty(exports, "useTimeSync", { enumerable: true, get: function () { return useTimeSync_1.useTimeSync; } });
+//# sourceMappingURL=index.js.map

package/dist/time-sync/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/time-sync/index.ts"],"names":[],"mappings":";;;AAAA,yCASqB;AARnB,4GAAA,eAAe,OAAA;AACf,0GAAA,aAAa,OAAA;AACb,0GAAA,aAAa,OAAA;AACb,0GAAA,aAAa,OAAA;AACb,0GAAA,aAAa,OAAA;AACb,+GAAA,kBAAkB,OAAA;AAClB,0GAAA,aAAa,OAAA;AACb,+GAAA,kBAAkB,OAAA;AAGpB,6CAA4C;AAAnC,0GAAA,WAAW,OAAA"}

package/dist/time-sync/time-sync.d.ts

@@ -0,0 +1,13 @@
+export declare function getTimeOffset(): number;
+export declare function setTimeOffset(offset: number): void;
+export declare function checkClockDrift(serverTime: string): {
+    hasDrift: boolean;
+    driftMs: number;
+    driftSeconds: number;
+};
+export declare function syncTimeWithServer(serverTime: string, networkLatencyMs: number): void;
+export declare function getSyncedDate(): Date;
+export declare function getSystemDate(): Date;
+export declare function getSystemTime(): number;
+export declare function initializeTimeSync(): void;
+//# sourceMappingURL=time-sync.d.ts.map

package/dist/time-sync/time-sync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-sync.d.ts","sourceRoot":"","sources":["../../src/time-sync/time-sync.ts"],"names":[],"mappings":"AAQA,wBAAgB,aAAa,IAAI,MAAM,CAEtC;AAED,wBAAgB,aAAa,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,CAElD;AAED,wBAAgB,eAAe,CAAC,UAAU,EAAE,MAAM,GAAG;IACnD,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,MAAM,CAAC;IAChB,YAAY,EAAE,MAAM,CAAC;CACtB,CAuBA;AAED,wBAAgB,kBAAkB,CAChC,UAAU,EAAE,MAAM,EAClB,gBAAgB,EAAE,MAAM,GACvB,IAAI,CAMN;AAED,wBAAgB,aAAa,IAAI,IAAI,CAMpC;AAED,wBAAgB,aAAa,IAAI,IAAI,CAEpC;AAED,wBAAgB,aAAa,IAAI,MAAM,CAEtC;AAED,wBAAgB,kBAAkB,IAAI,IAAI,CAuCzC"}

package/dist/time-sync/time-sync.js

@@ -0,0 +1,95 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimeOffset = getTimeOffset;
+exports.setTimeOffset = setTimeOffset;
+exports.checkClockDrift = checkClockDrift;
+exports.syncTimeWithServer = syncTimeWithServer;
+exports.getSyncedDate = getSyncedDate;
+exports.getSystemDate = getSystemDate;
+exports.getSystemTime = getSystemTime;
+exports.initializeTimeSync = initializeTimeSync;
+const react_native_1 = require("react-native");
+let timeOffset = 0;
+let hasWarned = false;
+let OriginalDate = Date;
+const CLOCK_DRIFT_THRESHOLD_MS = 5000; // 5 seconds
+function getTimeOffset() {
+    return timeOffset;
+}
+function setTimeOffset(offset) {
+    timeOffset = offset;
+}
+function checkClockDrift(serverTime) {
+    const serverDate = new Date(serverTime);
+    const clientDate = new Date();
+    const drift = Math.abs(serverDate.getTime() - clientDate.getTime());
+    if (drift > CLOCK_DRIFT_THRESHOLD_MS) {
+        const driftSeconds = Math.round(drift / 1000);
+        if (!hasWarned) {
+            hasWarned = true;
+            console.warn(`clock drift detected: ${driftSeconds}s difference from server time. ` +
+                `this may cause issues with time-sensitive operations. ` +
+                `please sync your system clock.`);
+        }
+        return { hasDrift: true, driftMs: drift, driftSeconds };
+    }
+    else {
+        return {
+            hasDrift: false,
+            driftMs: drift,
+            driftSeconds: Math.round(drift / 1000),
+        };
+    }
+}
+function syncTimeWithServer(serverTime, networkLatencyMs) {
+    const serverDate = new OriginalDate(serverTime);
+    const clientDate = new OriginalDate();
+    const offset = serverDate.getTime() - clientDate.getTime() - networkLatencyMs;
+    setTimeOffset(offset);
+}
+function getSyncedDate() {
+    const now = new Date();
+    if (timeOffset !== 0) {
+        return new Date(now.getTime() + timeOffset);
+    }
+    return now;
+}
+function getSystemDate() {
+    return new OriginalDate();
+}
+function getSystemTime() {
+    return OriginalDate.now();
+}
+function initializeTimeSync() {
+    if (react_native_1.Platform.OS !== "web") {
+        return;
+    }
+    // store original Date
+    OriginalDate = Date;
+    const OriginalDatePrototype = OriginalDate.prototype;
+    // create patched Date constructor
+    function PatchedDate(...args) {
+        // If called as a function (no `new`), forward to original Date to get the string form
+        if (!(this instanceof PatchedDate)) {
+            return OriginalDate.apply(undefined, args);
+        }
+        // If called as a constructor, construct a Date with synced time when no args provided
+        if (args.length === 0) {
+            const syncedTime = OriginalDate.now() + timeOffset;
+            return Reflect.construct(OriginalDate, [syncedTime], PatchedDate);
+        }
+        // Otherwise construct with the provided arguments
+        return Reflect.construct(OriginalDate, args, PatchedDate);
+    }
+    // copy static methods
+    PatchedDate.now = function () {
+        return OriginalDate.now() + timeOffset;
+    };
+    PatchedDate.parse = OriginalDate.parse;
+    PatchedDate.UTC = OriginalDate.UTC;
+    // copy prototype
+    PatchedDate.prototype = OriginalDatePrototype;
+    // replace global Date
+    globalThis.Date = PatchedDate;
+}
+//# sourceMappingURL=time-sync.js.map

package/dist/time-sync/time-sync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-sync.js","sourceRoot":"","sources":["../../src/time-sync/time-sync.ts"],"names":[],"mappings":"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"}

package/dist/time-sync/useTimeSync.d.ts

@@ -0,0 +1,2 @@
+export declare function useTimeSync(): void;
+//# sourceMappingURL=useTimeSync.d.ts.map

package/dist/time-sync/useTimeSync.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeSync.d.ts","sourceRoot":"","sources":["../../src/time-sync/useTimeSync.tsx"],"names":[],"mappings":"AAQA,wBAAgB,WAAW,SAiD1B"}

package/dist/time-sync/useTimeSync.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTimeSync = useTimeSync;
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const streamplace_1 = require("streamplace");
+const toast_1 = require("../components/ui/toast");
+const streamplace_store_1 = require("../streamplace-store/streamplace-store");
+const time_sync_1 = require("./time-sync");
+function useTimeSync() {
+    const url = (0, streamplace_store_1.useUrl)();
+    const t = (0, toast_1.useToast)();
+    const hasShownWarning = (0, react_1.useRef)(false);
+    (0, react_1.useEffect)(() => {
+        const checkTime = async () => {
+            if (react_native_1.Platform.OS !== "web") {
+                return;
+            }
+            try {
+                const agent = new streamplace_1.StreamplaceAgent(url);
+                const start = new Date().getTime();
+                const response = await agent.place.stream.server.getServerTime();
+                const roundTripLatency = new Date().getTime() - start;
+                const serverTime = response.data.serverTime;
+                // always sync with server time
+                (0, time_sync_1.syncTimeWithServer)(serverTime, roundTripLatency / 2);
+                const driftInfo = (0, time_sync_1.checkClockDrift)(serverTime);
+                // only show warning if drift is significant
+                if (driftInfo.hasDrift && !hasShownWarning.current) {
+                    hasShownWarning.current = true;
+                    t.show("Clock drift detected!", `Your device clock is ${driftInfo.driftSeconds}s off from server time. Please sync your system clock to avoid issues.`, {
+                        variant: "info",
+                        iconLeft: lucide_react_native_1.TriangleAlert,
+                        duration: 25,
+                    });
+                    console.log(`time sync applied: offset ${driftInfo.driftMs}ms. Date() calls will now use server time.`);
+                }
+            }
+            catch (error) {
+                console.error("failed to sync time with server:", error);
+            }
+        };
+        checkTime();
+        const interval = setInterval(checkTime, 1800000); // every 30m
+        return () => clearInterval(interval);
+    }, [url, t]);
+}
+//# sourceMappingURL=useTimeSync.js.map

package/dist/time-sync/useTimeSync.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTimeSync.js","sourceRoot":"","sources":["../../src/time-sync/useTimeSync.tsx"],"names":[],"mappings":";;AAQA,kCAiDC;AAzDD,6DAAoD;AACpD,iCAA0C;AAC1C,+CAAwC;AACxC,6CAA+C;AAC/C,kDAAkD;AAClD,8EAAgE;AAChE,2CAAkE;AAElE,SAAgB,WAAW;IACzB,MAAM,GAAG,GAAG,IAAA,0BAAM,GAAE,CAAC;IACrB,MAAM,CAAC,GAAG,IAAA,gBAAQ,GAAE,CAAC;IACrB,MAAM,eAAe,GAAG,IAAA,cAAM,EAAC,KAAK,CAAC,CAAC;IAEtC,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,KAAK,IAAI,EAAE;YAC3B,IAAI,uBAAQ,CAAC,EAAE,KAAK,KAAK,EAAE,CAAC;gBAC1B,OAAO;YACT,CAAC;YACD,IAAI,CAAC;gBACH,MAAM,KAAK,GAAG,IAAI,8BAAgB,CAAC,GAAG,CAAC,CAAC;gBACxC,MAAM,KAAK,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,CAAC;gBACnC,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC;gBACjE,MAAM,gBAAgB,GAAG,IAAI,IAAI,EAAE,CAAC,OAAO,EAAE,GAAG,KAAK,CAAC;gBACtD,MAAM,UAAU,GAAG,QAAQ,CAAC,IAAI,CAAC,UAAU,CAAC;gBAE5C,+BAA+B;gBAC/B,IAAA,8BAAkB,EAAC,UAAU,EAAE,gBAAgB,GAAG,CAAC,CAAC,CAAC;gBAErD,MAAM,SAAS,GAAG,IAAA,2BAAe,EAAC,UAAU,CAAC,CAAC;gBAE9C,4CAA4C;gBAC5C,IAAI,SAAS,CAAC,QAAQ,IAAI,CAAC,eAAe,CAAC,OAAO,EAAE,CAAC;oBACnD,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;oBAC/B,CAAC,CAAC,IAAI,CACJ,uBAAuB,EACvB,wBAAwB,SAAS,CAAC,YAAY,wEAAwE,EACtH;wBACE,OAAO,EAAE,MAAM;wBACf,QAAQ,EAAE,mCAAa;wBACvB,QAAQ,EAAE,EAAE;qBACb,CACF,CAAC;oBACF,OAAO,CAAC,GAAG,CACT,6BAA6B,SAAS,CAAC,OAAO,4CAA4C,CAC3F,CAAC;gBACJ,CAAC;YACH,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,kCAAkC,EAAE,KAAK,CAAC,CAAC;YAC3D,CAAC;QACH,CAAC,CAAC;QAEF,SAAS,EAAE,CAAC;QAEZ,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC,CAAC,YAAY;QAE9D,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;IACvC,CAAC,EAAE,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC;AACf,CAAC"}

package/dist/utils/format-handle.d.ts

@@ -0,0 +1,11 @@
+import { AppBskyActorDefs } from "@atproto/api";
+/**
+ * formats a user's handle for display, falling back to DID if handle is invalid
+ */
+export declare function formatHandle(profile: Pick<AppBskyActorDefs.ProfileViewBasic, "handle" | "did">, prefix?: string): string;
+/**
+ * convenience function for formatting a user's handle with @ prefix for display,
+ * falling back to DID if handle is invalid
+ */
+export declare function formatHandleWithAt(profile: Pick<AppBskyActorDefs.ProfileViewBasic, "handle" | "did">): string;
+//# sourceMappingURL=format-handle.d.ts.map

package/dist/utils/format-handle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-handle.d.ts","sourceRoot":"","sources":["../../src/utils/format-handle.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,cAAc,CAAC;AAEhD;;GAEG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,QAAQ,GAAG,KAAK,CAAC,EAClE,MAAM,GAAE,MAAW,GAClB,MAAM,CAKR;AAED;;;GAGG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,QAAQ,GAAG,KAAK,CAAC,GACjE,MAAM,CAER"}

package/dist/utils/format-handle.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.formatHandle = formatHandle;
+exports.formatHandleWithAt = formatHandleWithAt;
+/**
+ * formats a user's handle for display, falling back to DID if handle is invalid
+ */
+function formatHandle(profile, prefix = "") {
+    if (profile.handle === "handle.invalid") {
+        return profile.did;
+    }
+    return prefix + profile.handle;
+}
+/**
+ * convenience function for formatting a user's handle with @ prefix for display,
+ * falling back to DID if handle is invalid
+ */
+function formatHandleWithAt(profile) {
+    return formatHandle(profile, "@");
+}
+//# sourceMappingURL=format-handle.js.map

package/dist/utils/format-handle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"format-handle.js","sourceRoot":"","sources":["../../src/utils/format-handle.ts"],"names":[],"mappings":";;AAKA,oCAQC;AAMD,gDAIC;AArBD;;GAEG;AACH,SAAgB,YAAY,CAC1B,OAAkE,EAClE,SAAiB,EAAE;IAEnB,IAAI,OAAO,CAAC,MAAM,KAAK,gBAAgB,EAAE,CAAC;QACxC,OAAO,OAAO,CAAC,GAAG,CAAC;IACrB,CAAC;IACD,OAAO,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;AACjC,CAAC;AAED;;;GAGG;AACH,SAAgB,kBAAkB,CAChC,OAAkE;IAElE,OAAO,YAAY,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;AACpC,CAAC"}

package/locales/en-US/common.ftl

@@ -32,6 +32,11 @@ info = Information
 search-placeholder = Search...
 message-input = Enter your message...
 
+## Authentication & Access
+please-log-in-to-access-this-page = Please log in to access this page
+go-to-settings = Go to Settings
+go-back = Go Back
+
 ## Demo and Testing
 welcome-user = Welcome, { $username }!
 notification-count = { $count ->

package/locales/en-US/settings.ftl

@@ -45,6 +45,7 @@ settings-title = Settings
 
 ## Navigation Categories
 about = About
+account = Account
 advanced = Advanced
 danmu = Danmu
 developer = Developer
@@ -60,6 +61,12 @@ refresh = Refresh
 save-button = Save
 sign-in = Sign In
 update = Update
+log-out = Log out
+
+## Account Settings
+account-greeting = Hey, @{ $handle }.
+edit-profile-bluesky = Edit profile (on Bluesky)
+change-name-color = Change name color
 
 ## Key Management
 key-management = Key Management

package/locales/es-ES/common.ftl

@@ -32,6 +32,11 @@ info = Información
 search-placeholder = Buscar...
 message-input = Escribe tu mensaje...
 
+## Authentication & Access
+please-log-in-to-access-this-page = Por favor, inicia sesión para acceder a esta página
+go-to-settings = Ir a Configuración
+go-back = Volver
+
 ## Demo and Testing
 welcome-user = ¡Bienvenido, { $username }!
 notification-count = { $count ->

package/locales/es-ES/settings.ftl

@@ -84,6 +84,7 @@ finish = Finalizar
 
 ## Categorías de Navegación
 about = Acerca de
+account = Cuenta
 advanced = Avanzado
 danmu = Danmu
 developer = Desarrollador
@@ -99,6 +100,12 @@ refresh = Actualizar
 save-button = Guardar
 sign-in = Iniciar Sesión
 update = Actualizar
+log-out = Cerrar sesión
+
+## Configuración de Cuenta
+account-greeting = Hola, @{ $handle }.
+edit-profile-bluesky = Editar perfil (en Bluesky)
+change-name-color = Cambiar color de nombre
 
 ## Gestión de Claves
 key-management = Gestión de Claves

package/locales/fr-FR/common.ftl

@@ -32,6 +32,11 @@ info = Information
 search-placeholder = Rechercher...
 message-input = Entrez votre message...
 
+## Authentication & Access
+please-log-in-to-access-this-page = Veuillez vous connecter pour accéder à cette page
+go-to-settings = Aller aux Paramètres
+go-back = Retour
+
 ## Demo and Testing
 welcome-user = Bienvenue, { $username } !
 notification-count = { $count ->

package/locales/fr-FR/settings.ftl

@@ -82,6 +82,7 @@ finish = Terminer
 
 ## Catégories de Navigation
 about = À propos
+account = Compte
 advanced = Avancé
 danmu = Danmu
 developer = Développeur
@@ -97,6 +98,12 @@ refresh = Actualiser
 save-button = Enregistrer
 sign-in = Se connecter
 update = Mettre à jour
+log-out = Se déconnecter
+
+## Paramètres du Compte
+account-greeting = Salut, @{ $handle }.
+edit-profile-bluesky = Modifier le profil (sur Bluesky)
+change-name-color = Changer la couleur du nom
 
 ## Gestion des Clés
 key-management = Gestion des Clés

package/locales/pt-BR/common.ftl

@@ -32,6 +32,11 @@ info = Informação
 search-placeholder = Pesquisar...
 message-input = Digite sua mensagem...
 
+## Authentication & Access
+please-log-in-to-access-this-page = Por favor, faça login para acessar esta página
+go-to-settings = Ir para Configurações
+go-back = Voltar
+
 ## Demo and Testing
 welcome-user = Bem-vindo, { $username }!
 notification-count = { $count ->

package/locales/pt-BR/settings.ftl

@@ -82,6 +82,7 @@ finish = Finalizar
 
 ## Categorias de Navegação
 about = Sobre
+account = Conta
 advanced = Avançado
 danmu = Danmu
 developer = Desenvolvedor
@@ -97,6 +98,12 @@ refresh = Atualizar
 save-button = Salvar
 sign-in = Entrar
 update = Atualizar
+log-out = Sair
+
+## Configurações da Conta
+account-greeting = Olá, @{ $handle }.
+edit-profile-bluesky = Editar perfil (no Bluesky)
+change-name-color = Mudar cor do nome
 
 ## Gerenciamento de Chaves
 key-management = Gerenciamento de Chaves

package/locales/zh-Hant/common.ftl

@@ -32,6 +32,11 @@ info = 資訊
 search-placeholder = 搜尋...
 message-input = 輸入您的訊息...
 
+## Authentication & Access
+please-log-in-to-access-this-page = 請登入以存取此頁面
+go-to-settings = 前往設定
+go-back = 返回
+
 ## Demo and Testing
 welcome-user = 歡迎，{ $username }！
 notification-count = { $count ->

package/locales/zh-Hant/settings.ftl

@@ -83,6 +83,7 @@ finish = 完成
 
 ## 導航類別
 about = 關於
+account = 帳戶
 advanced = 進階
 danmu = 彈幕
 developer = 開發者
@@ -98,6 +99,12 @@ refresh = 重新整理
 save-button = 儲存
 sign-in = 登入
 update = 更新
+log-out = 登出
+
+## 帳戶設定
+account-greeting = 嗨，@{ $handle }。
+edit-profile-bluesky = 編輯個人資料（在 Bluesky）
+change-name-color = 變更名稱顏色
 
 ## 金鑰管理
 key-management = 金鑰管理

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.11",
+  "version": "0.8.13",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -72,10 +72,10 @@
   "scripts": {
     "build": "tsc",
     "start": "tsc --watch --preserveWatchOutput",
-    "prepare": "tsc && node scripts/compile-translations.js",
+    "prepare": "node scripts/compile-translations.js && tsc",
     "i18n:compile": "node scripts/compile-translations.js",
     "i18n:watch": "nodemon scripts/compile-translations.js --watch locales/**/*.ftl",
     "i18n:extract": "node scripts/extract-i18n.js"
   },
-  "gitHead": "deec4cd1bea51452762e5463462550336057e156"
+  "gitHead": "abc60b0b81cfa69ae99e78781976199f0762f941"
 }

package/src/components/chat/chat-message.tsx

@@ -8,6 +8,7 @@ import { Linking, View } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { RichtextSegment, segmentize } from "../../lib/facet";
 import { borders, flex, gap, ml, mr, opacity, pl } from "../../lib/theme/atoms";
+import { formatHandleWithAt } from "../../utils/format-handle";
 import { atoms, colors, layout } from "../ui";
 
 interface Facet {
@@ -138,7 +139,7 @@ export const RenderChatMessage = memo(
                   fontWeight: "thin",
                 }}
               >
-                @{(replyTo.author as any).handle}
+                {formatHandleWithAt(replyTo.author)}
               </Text>{" "}
               <Text
                 style={{
@@ -181,7 +182,7 @@ export const RenderChatMessage = memo(
                 },
               ]}
             >
-              @{item.author.handle}
+              {formatHandleWithAt(item.author)}
             </Text>
             :{" "}
             <RichTextMessage

package/src/components/chat/mod-view.tsx

@@ -12,6 +12,7 @@ import { Linking } from "react-native";
 import { ChatMessageViewHydrated } from "streamplace";
 import { useDeleteChatMessage } from "../../livestream-store";
 import { useStreamplaceStore } from "../../streamplace-store";
+import { formatHandle, formatHandleWithAt } from "../../utils/format-handle";
 import {
   atoms,
   DropdownMenu,
@@ -113,7 +114,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
                       minute: "2-digit",
                       hour12: false,
                     })}{" "}
-                    @{message.author.handle}: {message.record.text}
+                    {formatHandleWithAt(message.author)}: {message.record.text}
                   </Text>
                 </View>
               </DropdownMenuItem>
@@ -159,7 +160,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
                     <Text color="destructive">
                       {isBlockLoading
                         ? "Blocking..."
-                        : `Block user @${message.author.handle} from this channel`}
+                        : `Block user ${formatHandleWithAt(message.author)} from this channel`}
                     </Text>
                   )}
                 </DropdownMenuItem>
@@ -170,7 +171,7 @@ export const ModView = forwardRef<ModViewRef, ModViewProps>(() => {
               <DropdownMenuItem
                 onPress={() => {
                   Linking.openURL(
-                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`,
+                    `https://${BSKY_FRONTEND_DOMAIN}/profile/${formatHandle(message.author)}`,
                   );
                 }}
               >

package/src/components/mobile-player/ui/viewer-context-menu.tsx

@@ -4,6 +4,8 @@ import { Image, Linking, Platform, Pressable, View } from "react-native";
 import {
   ContentRights,
   ContentWarnings,
+  formatHandle,
+  formatHandleWithAt,
   useAvatars,
   useLivestreamInfo,
   zero,
@@ -113,12 +115,12 @@ export function ContextMenu({
                     <Pressable
                       onPress={() => {
                         if (profile?.handle) {
-                          const url = `https://bsky.app/profile/${profile.handle}`;
+                          const url = `https://bsky.app/profile/${formatHandle(profile)}`;
                           Linking.openURL(url);
                         }
                       }}
                     >
-                      <Text>@{profile?.handle || "user"}</Text>
+                      <Text>{profile && formatHandleWithAt(profile)}</Text>
                     </Pressable>
                     {/*{did && profile && (
                     <FollowButton streamerDID={profile?.did} currentUserDID={did} />
@@ -163,7 +165,7 @@ export function ContextMenu({
               <DropdownMenuItem
                 onPress={() => {
                   if (profile?.handle) {
-                    const url = `https://bsky.app/profile/${profile.handle}`;
+                    const url = `https://bsky.app/profile/${formatHandle(profile)}`;
                     Linking.openURL(url);
                   }
                 }}

package/src/components/share/sharesheet.tsx

@@ -4,6 +4,7 @@ import { Clipboard, Linking, Platform, View } from "react-native";
 import { colors } from "../../lib/theme";
 import { useLivestreamStore } from "../../livestream-store";
 import { useUrl } from "../../streamplace-store";
+import { formatHandle } from "../../utils/format-handle";
 import { BlueskyIcon } from "../icons/bluesky-icon";
 import {
   DropdownMenu,
@@ -26,12 +27,12 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
 
   // Get the current stream URL
   const getStreamUrl = useCallback(() => {
-    return url + (profile ? `/@${profile.handle}` : "");
+    return url + (profile ? `/${formatHandle(profile)}` : "");
   }, [profile]);
 
   // Get the embed URL
   const getEmbedUrl = useCallback(() => {
-    return url + (profile ? `/embed/${profile.handle}` : "");
+    return url + (profile ? `/embed/${formatHandle(profile)}` : "");
   }, [profile]);
 
   // Get embed code
@@ -63,31 +64,22 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
   // Share to Bluesky
   const shareToBluesky = useCallback(() => {
     const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
-      : `Check out this stream on Streamplace! ${streamUrl}`;
+    const text =
+      profile && profile.handle
+        ? `Check out @${profile.handle} live on Streamplace! ${streamUrl}`
+        : `Check out this stream on Streamplace! ${streamUrl}`;
     const blueskyUrl = `https://bsky.app/intent/compose?text=${encodeURIComponent(text)}`;
     Linking.openURL(blueskyUrl);
     onShare?.("share_bluesky", true);
   }, [profile, getStreamUrl, onShare]);
 
-  // Share to Twitter/X
-  const shareToTwitter = useCallback(() => {
-    const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace!`
-      : `Check out this stream on Streamplace!`;
-    const twitterUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(text)}&url=${encodeURIComponent(streamUrl)}`;
-    Linking.openURL(twitterUrl);
-    onShare?.("share_twitter", true);
-  }, [profile, getStreamUrl, onShare]);
-
   // Native share (mobile)
   const nativeShare = useCallback(async () => {
     const streamUrl = getStreamUrl();
-    const text = profile
-      ? `Check out @${profile.handle} live on Streamplace!`
-      : `Check out this stream on Streamplace!`;
+    const text =
+      profile && profile.handle
+        ? `Check out @${profile.handle} live on Streamplace!`
+        : `Check out this stream on Streamplace!`;
 
     if (Platform.OS === "web" && navigator.share) {
       try {
@@ -119,14 +111,6 @@ export function ShareSheet({ onShare }: ShareSheetProps = {}) {
               <Text>Share to Bluesky</Text>
             </View>
           </DropdownMenuItem>
-          {/* <DropdownMenuItem onPress={shareToTwitter}>
-            <View
-              style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
-            >
-              <MessageCircle size={20} color={colors.gray[400]} />
-              <Text>Share to X</Text>
-            </View>
-          </DropdownMenuItem> */}
           {/* navigator isn't on non-web */}
           {Platform.OS !== "web" || (navigator && (navigator as any).share) ? (
             <DropdownMenuItem onPress={nativeShare}>