@happyvertical/smrt-social 0.30.0

package/dist/svelte/components/SocialAccountSettings.svelte

@@ -0,0 +1,243 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { SocialPlatformType } from '../../social-account.js';
+import { M } from '../i18n.js';
+import type { SocialAccountSettingsItem } from '../types.js';
+
+const { t } = useI18n();
+
+let {
+  accounts = [],
+  loading = false,
+  readonly = false,
+  connectHrefs = {},
+  onRefresh,
+  onTest,
+  onDeactivate,
+}: {
+  accounts?: SocialAccountSettingsItem[];
+  loading?: boolean;
+  readonly?: boolean;
+  connectHrefs?: Partial<Record<SocialPlatformType, string>>;
+  onRefresh?: () => void | Promise<void>;
+  onTest?: (account: SocialAccountSettingsItem) => void | Promise<void>;
+  onDeactivate?: (account: SocialAccountSettingsItem) => void | Promise<void>;
+} = $props();
+
+const platforms: Array<{ platform: SocialPlatformType; label: string }> = [
+  { platform: 'youtube', label: 'YouTube' },
+  { platform: 'facebook', label: 'Facebook Page' },
+  { platform: 'threads', label: 'Threads' },
+  { platform: 'x', label: 'X' },
+  { platform: 'bluesky', label: 'Bluesky' },
+];
+
+function statusLabel(account: SocialAccountSettingsItem): string {
+  if (!account.isActive) return 'inactive';
+  if (account.needsAttention) return 'needs attention';
+  return account.status.replaceAll('_', ' ');
+}
+</script>
+
+<section class="social-settings">
+  <header class="toolbar">
+    <div>
+      <h2>{t(M['social.account_settings.heading'])}</h2>
+      <p>{accounts.length === 1 ? t(M['social.account_settings.configured_one'], { count: accounts.length }) : t(M['social.account_settings.configured_other'], { count: accounts.length })}</p>
+    </div>
+    {#if onRefresh}
+      <button type="button" class="secondary" onclick={() => onRefresh?.()} disabled={loading}>Refresh</button>
+    {/if}
+  </header>
+
+  {#if !readonly}
+    <div class="connect-row" aria-label={t(M['social.account_settings.connect_aria'])}>
+      {#each platforms as item}
+        {#if connectHrefs[item.platform]}
+          <a class="connect-button" href={connectHrefs[item.platform]}>{item.label}</a>
+        {:else}
+          <button type="button" class="connect-button" disabled>{item.label}</button>
+        {/if}
+      {/each}
+    </div>
+  {/if}
+
+  {#if loading}
+    <div class="empty">{t(M['social.account_settings.loading'])}</div>
+  {:else if accounts.length === 0}
+    <div class="empty">{t(M['social.account_settings.empty'])}</div>
+  {:else}
+    <div class="account-list">
+      {#each accounts as account (account.id)}
+        <article class="account-row" data-status={account.status}>
+          <div class="account-main">
+            <div class="account-title">
+              <h3>{account.name}</h3>
+              <span>{account.platform}</span>
+            </div>
+            {#if account.platformUsername}
+              <p>@{account.platformUsername}</p>
+            {/if}
+            {#if account.publishMode}
+              <p>
+                Mode: {account.publishMode.replaceAll('_', ' ')}
+                {account.publishMode === 'public' && !account.publicPublishingAllowed ? ' (blocked)' : ''}
+              </p>
+            {/if}
+            {#if account.missingPermissions?.length}
+              <p class="warning">Missing: {account.missingPermissions.join(', ')}</p>
+            {/if}
+          </div>
+
+          <div class="account-actions">
+            <span class:attention={account.needsAttention} class="status">{statusLabel(account)}</span>
+            {#if account.platformUrl}
+              <a class="secondary" href={account.platformUrl} target="_blank" rel="noreferrer">Open</a>
+            {/if}
+            {#if onTest}
+              <button type="button" class="secondary" onclick={() => onTest?.(account)}>Test</button>
+            {/if}
+            {#if !readonly && onDeactivate && account.isActive}
+              <button type="button" class="danger" onclick={() => onDeactivate?.(account)}>Deactivate</button>
+            {/if}
+          </div>
+        </article>
+      {/each}
+    </div>
+  {/if}
+</section>
+
+<style>
+  .social-settings {
+    display: grid;
+    gap: 1rem;
+  }
+
+  .toolbar,
+  .account-row {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  h2,
+  h3,
+  p {
+    margin: 0;
+  }
+
+  h2 {
+    font-size: var(--smrt-typography-title-medium-size, 1.1rem);
+    color: var(--smrt-color-on-surface, #111827);
+  }
+
+  h3 {
+    font-size: var(--smrt-typography-title-medium-size, 0.95rem);
+    color: var(--smrt-color-on-surface, #111827);
+  }
+
+  p {
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    font-size: var(--smrt-typography-body-medium-size, 0.85rem);
+  }
+
+  .connect-row {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  .account-list {
+    display: grid;
+    gap: 0.75rem;
+  }
+
+  .account-row {
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface, #fff);
+    padding: 1rem;
+  }
+
+  .account-title {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+  }
+
+  .account-title span,
+  .status {
+    border-radius: var(--smrt-radius-full, 9999px);
+    background: var(--smrt-color-surface-container, #f3f4f6);
+    color: var(--smrt-color-on-surface-variant, #4b5563);
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    padding: 0.15rem 0.5rem;
+    text-transform: capitalize;
+  }
+
+  .status.attention,
+  .warning {
+    color: var(--smrt-color-error, #b91c1c);
+  }
+
+  .account-actions {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  button,
+  a {
+    border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-md, 8px);
+    background: var(--smrt-color-surface, #fff);
+    color: var(--smrt-color-on-surface, #111827);
+    cursor: pointer;
+    font: inherit;
+    font-size: var(--smrt-typography-label-large-size, 0.82rem);
+    line-height: 1;
+    padding: 0.55rem 0.7rem;
+    text-decoration: none;
+  }
+
+  button:disabled {
+    cursor: not-allowed;
+    opacity: 0.55;
+  }
+
+  .connect-button {
+    background: var(--smrt-color-primary, #2563eb);
+    border-color: var(--smrt-color-primary, #2563eb);
+    color: var(--smrt-color-on-primary, #fff);
+  }
+
+  .secondary {
+    background: var(--smrt-color-surface-container, #f3f4f6);
+  }
+
+  .danger {
+    color: var(--smrt-color-error, #b91c1c);
+  }
+
+  .empty {
+    border: 1px dashed var(--smrt-color-outline-variant, #d1d5db);
+    border-radius: var(--smrt-radius-md, 8px);
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+    padding: 1.25rem;
+    text-align: center;
+  }
+
+  @media (max-width: 720px) {
+    .toolbar,
+    .account-row {
+      display: grid;
+    }
+
+    .account-actions {
+      justify-content: flex-start;
+    }
+  }
+</style>

package/dist/svelte/components/SocialAccountSettings.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { SocialPlatformType } from '../../social-account.js';
+import type { SocialAccountSettingsItem } from '../types.js';
+type $$ComponentProps = {
+    accounts?: SocialAccountSettingsItem[];
+    loading?: boolean;
+    readonly?: boolean;
+    connectHrefs?: Partial<Record<SocialPlatformType, string>>;
+    onRefresh?: () => void | Promise<void>;
+    onTest?: (account: SocialAccountSettingsItem) => void | Promise<void>;
+    onDeactivate?: (account: SocialAccountSettingsItem) => void | Promise<void>;
+};
+declare const SocialAccountSettings: import("svelte").Component<$$ComponentProps, {}, "">;
+type SocialAccountSettings = ReturnType<typeof SocialAccountSettings>;
+export default SocialAccountSettings;
+//# sourceMappingURL=SocialAccountSettings.svelte.d.ts.map

package/dist/svelte/components/SocialAccountSettings.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SocialAccountSettings.svelte.d.ts","sourceRoot":"","sources":["../../../src/svelte/components/SocialAccountSettings.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,yBAAyB,CAAC;AAElE,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,aAAa,CAAC;AAE5D,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,yBAAyB,EAAE,CAAC;IACvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,kBAAkB,EAAE,MAAM,CAAC,CAAC,CAAC;IAC3D,SAAS,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IACtE,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,yBAAyB,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7E,CAAC;AA0GF,QAAA,MAAM,qBAAqB,sDAAwC,CAAC;AACpE,KAAK,qBAAqB,GAAG,UAAU,CAAC,OAAO,qBAAqB,CAAC,CAAC;AACtE,eAAe,qBAAqB,CAAC"}

package/dist/svelte/i18n.d.ts

@@ -0,0 +1,9 @@
+export declare const M: {
+    readonly 'social.account_settings.heading': "social.account_settings.heading";
+    readonly 'social.account_settings.configured_one': "social.account_settings.configured_one";
+    readonly 'social.account_settings.configured_other': "social.account_settings.configured_other";
+    readonly 'social.account_settings.connect_aria': "social.account_settings.connect_aria";
+    readonly 'social.account_settings.loading': "social.account_settings.loading";
+    readonly 'social.account_settings.empty': "social.account_settings.empty";
+};
+//# sourceMappingURL=i18n.d.ts.map

package/dist/svelte/i18n.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"i18n.d.ts","sourceRoot":"","sources":["../../src/svelte/i18n.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,CAAC;;;;;;;CASZ,CAAC"}

package/dist/svelte/i18n.js

@@ -0,0 +1,15 @@
+/**
+ * smrt-social UI message catalog (S13 #1418).
+ * Keys: `social.<component>.<descriptor>`.
+ */
+import { defineMessages } from '@happyvertical/smrt-ui/i18n';
+export const M = defineMessages({
+    'social.account_settings.heading': 'Social Accounts',
+    // Separate singular/plural messages so each locale supplies its own forms
+    // (an English `{plural}` suffix does not translate). Selected by count below.
+    'social.account_settings.configured_one': '{count} account configured',
+    'social.account_settings.configured_other': '{count} accounts configured',
+    'social.account_settings.connect_aria': 'Connect social account',
+    'social.account_settings.loading': 'Loading accounts...',
+    'social.account_settings.empty': 'No social accounts are configured yet.',
+});

package/dist/svelte/index.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import SocialAccountSettings from './components/SocialAccountSettings.svelte';
+export { SocialAccountSettings };
+export type SocialAccountSettingsProps = ComponentProps<typeof SocialAccountSettings>;
+export type { SocialAccountSettingsItem } from './types.js';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/svelte/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAE7C,OAAO,qBAAqB,MAAM,2CAA2C,CAAC;AAE9E,OAAO,EAAE,qBAAqB,EAAE,CAAC;AACjC,MAAM,MAAM,0BAA0B,GAAG,cAAc,CACrD,OAAO,qBAAqB,CAC7B,CAAC;AACF,YAAY,EAAE,yBAAyB,EAAE,MAAM,YAAY,CAAC"}

package/dist/svelte/index.js

@@ -0,0 +1,2 @@
+import SocialAccountSettings from './components/SocialAccountSettings.svelte';
+export { SocialAccountSettings };

package/dist/svelte/types.d.ts

@@ -0,0 +1,16 @@
+import type { AccountStatus, PublishMode, SocialPlatformType } from '../social-account.js';
+export interface SocialAccountSettingsItem {
+    id: string;
+    name: string;
+    platform: SocialPlatformType;
+    platformUsername?: string | null;
+    platformUrl?: string | null;
+    isActive: boolean;
+    status: AccountStatus;
+    needsAttention?: boolean;
+    missingPermissions?: string[];
+    publishMode?: PublishMode;
+    publicPublishingAllowed?: boolean;
+    tokenExpiresAt?: Date | string | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/svelte/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/svelte/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,aAAa,EACb,WAAW,EACX,kBAAkB,EACnB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,yBAAyB;IACxC,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,EAAE,kBAAkB,CAAC;IAC7B,gBAAgB,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC5B,QAAQ,EAAE,OAAO,CAAC;IAClB,MAAM,EAAE,aAAa,CAAC;IACtB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,kBAAkB,CAAC,EAAE,MAAM,EAAE,CAAC;IAC9B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,CAAC;CACvC"}

package/dist/svelte/types.js

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

package/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "@happyvertical/smrt-social",
+  "version": "0.30.0",
+  "type": "module",
+  "description": "Social media account management for multi-platform publishing in the SMRT ecosystem",
+  "author": "HappyVertical",
+  "license": "MIT",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./server": {
+      "types": "./dist/server.d.ts",
+      "import": "./dist/server.js"
+    },
+    "./svelte": {
+      "types": "./dist/svelte/index.d.ts",
+      "svelte": "./dist/svelte/index.js",
+      "import": "./dist/svelte/index.js"
+    },
+    "./manifest": "./dist/manifest.json",
+    "./manifest.json": "./dist/manifest.json"
+  },
+  "peerDependencies": {
+    "svelte": "^5.0.0"
+  },
+  "peerDependenciesMeta": {
+    "svelte": {
+      "optional": true
+    }
+  },
+  "files": [
+    "dist",
+    "CLAUDE.md",
+    "AGENTS.md"
+  ],
+  "dependencies": {
+    "@happyvertical/utils": "^0.74.7",
+    "@happyvertical/smrt-config": "0.30.0",
+    "@happyvertical/smrt-content": "0.30.0",
+    "@happyvertical/smrt-core": "0.30.0",
+    "@happyvertical/smrt-secrets": "0.30.0",
+    "@happyvertical/smrt-tenancy": "0.30.0",
+    "@happyvertical/smrt-ui": "0.30.0",
+    "@happyvertical/smrt-video": "0.30.0"
+  },
+  "devDependencies": {
+    "@happyvertical/logger": "^0.74.7",
+    "@happyvertical/sql": "^0.74.7",
+    "@sveltejs/package": "^2.5.7",
+    "@types/node": "25.0.9",
+    "svelte": "^5.0.0",
+    "svelte-check": "^4.3.5",
+    "typescript": "^5.9.3",
+    "vite": "^7.3.1",
+    "vitest": "^4.0.17",
+    "@happyvertical/smrt-vitest": "0.30.0"
+  },
+  "keywords": [
+    "social",
+    "publishing",
+    "youtube",
+    "threads",
+    "bluesky",
+    "smrt",
+    "framework"
+  ],
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org",
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/happyvertical/smrt.git",
+    "directory": "packages/social"
+  },
+  "scripts": {
+    "build": "vite build --mode library && svelte-package -i src/svelte -o dist/svelte --tsconfig tsconfig.svelte.json",
+    "build:watch": "vite build --mode library --watch",
+    "check": "pnpm exec svelte-check --tsconfig ./tsconfig.svelte.json",
+    "typecheck": "tsc --noEmit && node ../../scripts/svelte-check-a11y.mjs --tsconfig ./tsconfig.svelte.json",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}