@frockbot/plugin-flock 0.0.0 → 0.1.1

package/src/client/styles.css

@@ -0,0 +1,611 @@
+.flock-avatar {
+  position: relative;
+  display: inline-block;
+  flex: 0 0 auto;
+  width: var(--frock-avatar-md);
+  height: var(--frock-avatar-md);
+  overflow: hidden;
+  border-radius: 12px;
+  background: var(--frock-surface-accent);
+}
+
+/* The message-thread size: one avatar token, matching a small control. */
+.flock-avatar--mini {
+  width: var(--frock-avatar-sm);
+  height: var(--frock-avatar-sm);
+  border-radius: 9px;
+}
+
+.flock-avatar--large {
+  width: 188px;
+  height: 188px;
+  border-radius: 42px;
+  box-shadow: var(--frock-shadow-avatar);
+}
+
+/* Sidebar */
+
+/* Bots their own settings keep out of the list, reachable behind one click. */
+.flock-hidden-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+}
+
+.flock-hidden-toggle {
+  align-self: flex-start;
+}
+
+.flock-list-actions {
+  display: flex;
+  min-height: 28px;
+  align-items: center;
+  justify-content: flex-end;
+  padding: 0 4px;
+}
+
+.flock-manage,
+.flock-lifecycle {
+  border: 0;
+  border-radius: var(--frock-radius-control);
+  background: transparent;
+  color: var(--frock-text-muted);
+  padding: 2px 6px;
+  font: inherit;
+  font-size: var(--frock-text-xs);
+  cursor: pointer;
+}
+
+.flock-manage:hover,
+.flock-lifecycle:hover {
+  background: var(--frock-fill-hover);
+  color: var(--frock-text);
+}
+
+.flock-groups,
+.flock-group,
+.flock-rows {
+  display: grid;
+}
+
+.flock-groups {
+  gap: 8px;
+}
+
+.flock-group {
+  gap: 2px;
+}
+
+.flock-group-heading {
+  margin: 0;
+  padding: 7px 10px 3px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+  font-weight: 600;
+  line-height: var(--frock-leading-tight);
+}
+
+.flock-rows {
+  gap: 2px;
+}
+
+.flock-bot-row {
+  position: relative;
+  display: grid;
+  width: 100%;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background-color var(--frock-motion-fast),
+    box-shadow var(--frock-motion-fast),
+    transform var(--frock-motion-fast);
+}
+
+.flock-bot-select {
+  display: grid;
+  grid-template-columns: var(--frock-avatar-md) minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+
+.flock-bot-row.archived {
+  opacity: 0.72;
+}
+
+.flock-bot-row:hover {
+  background: var(--frock-fill-hover);
+}
+
+.flock-bot-row:active {
+  transform: scale(0.99);
+}
+
+.flock-bot-row.active,
+.flock-bot-row.active:hover {
+  background: var(--frock-surface);
+  box-shadow: var(--frock-shadow-card);
+}
+
+.flock-bot-copy {
+  display: grid;
+  min-width: 0;
+  gap: 2px;
+  line-height: var(--frock-leading-tight);
+}
+
+.flock-bot-primary {
+  display: flex;
+  min-width: 0;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.flock-bot-primary strong {
+  min-width: 0;
+  flex: 1 1 auto;
+}
+
+.flock-bot-primary time {
+  flex: 0 0 auto;
+  color: var(--frock-text-subtle);
+  font-size: var(--frock-text-xs);
+  font-weight: 400;
+  white-space: nowrap;
+}
+
+.flock-bot-copy strong,
+.flock-bot-copy small {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.flock-bot-row.unread .flock-bot-copy strong,
+.flock-bot-row.unread .flock-bot-copy small,
+.flock-bot-row.unread .flock-bot-primary time {
+  font-weight: 700;
+}
+
+.flock-create-button {
+  flex: 0 0 auto;
+}
+
+.flock-bot-copy strong {
+  color: var(--frock-text);
+  font-size: var(--frock-text-lg);
+  font-weight: 600;
+}
+
+.flock-bot-copy small {
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.flock-bot-indicators {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.flock-bot-dot {
+  width: 8px;
+  height: 8px;
+  margin-right: 2px;
+  border-radius: 999px;
+  background: var(--frock-success-bright);
+  box-shadow: 0 0 0 3px var(--frock-success-surface);
+}
+
+.flock-row-enter-active,
+.flock-row-leave-active {
+  transition:
+    opacity var(--frock-motion-fast),
+    transform var(--frock-motion-fast);
+}
+
+.flock-row-enter-from,
+.flock-row-leave-to {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+
+.flock-skeleton {
+  display: grid;
+  gap: 2px;
+  padding-top: 4px;
+}
+
+.flock-skeleton-label {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+}
+
+.flock-skeleton-row {
+  display: grid;
+  grid-template-columns: var(--frock-avatar-md) minmax(0, 1fr);
+  align-items: center;
+  gap: 10px;
+  padding: 8px 10px;
+}
+
+.flock-skeleton-copy {
+  display: grid;
+  gap: 8px;
+}
+
+.flock-empty,
+.flock-error {
+  margin: 0;
+  padding: 10px;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-base);
+  line-height: var(--frock-leading-normal);
+}
+
+.flock-error {
+  color: var(--frock-danger-text);
+}
+
+/* Header identity */
+
+.flock-identity-button {
+  display: grid;
+  width: var(--frock-control-md);
+  height: var(--frock-control-md);
+  padding: 0;
+  border: 0;
+  border-radius: 10px;
+  background: transparent;
+  cursor: pointer;
+  transition: transform var(--frock-motion-fast);
+}
+
+.flock-identity-button:hover {
+  transform: scale(1.06);
+}
+
+.flock-identity-button .flock-avatar {
+  width: var(--frock-control-md);
+  height: var(--frock-control-md);
+  border-radius: 10px;
+}
+
+/* Dialog */
+
+.flock-backdrop {
+  position: fixed;
+  z-index: 1000;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  padding: 24px;
+  background: var(--frock-overlay-tint);
+  backdrop-filter: blur(2px);
+  animation: frock-fade-in var(--frock-motion-fast) both;
+}
+
+.flock-dialog {
+  width: min(660px, 100%);
+  height: min(520px, calc(100vh - 48px));
+  display: grid;
+  grid-template-columns: 250px 1fr;
+  overflow: hidden;
+  border: 1px solid var(--frock-overlay-border);
+  border-radius: 24px;
+  background: var(--frock-surface);
+  color: var(--frock-text);
+  box-shadow: var(--frock-shadow-dialog);
+  animation: frock-scale-in var(--frock-motion-enter) both;
+}
+
+.flock-preview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 28px;
+  background: var(--frock-flock-preview);
+}
+
+.flock-preview h2 {
+  margin: 18px 0 0;
+  font-size: var(--frock-text-2xl);
+  letter-spacing: var(--frock-tracking-display);
+}
+
+.flock-preview p {
+  margin: 4px 0 0;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-sm);
+}
+
+.flock-reroll {
+  margin-top: 14px;
+  padding: 8px 14px;
+  border: 1px solid var(--frock-accent-border);
+  border-radius: 999px;
+  background: var(--frock-surface);
+  color: var(--frock-action-primary-hover);
+  font-size: var(--frock-text-sm);
+  font-weight: 700;
+  cursor: pointer;
+  transition: background-color var(--frock-motion-fast);
+}
+
+.flock-reroll:hover {
+  background: var(--frock-surface-accent-soft);
+}
+
+.flock-form {
+  position: relative;
+  padding: 26px 30px;
+}
+
+.flock-eyebrow {
+  color: var(--frock-action-primary-hover);
+  font-size: var(--frock-text-xs);
+  font-weight: 800;
+  letter-spacing: var(--frock-tracking-eyebrow);
+  text-transform: uppercase;
+}
+
+.flock-form h1 {
+  margin: 6px 0 0;
+  font-family: var(--frock-font-display);
+  font-size: var(--frock-text-display);
+  font-weight: 400;
+  letter-spacing: var(--frock-tracking-display);
+}
+
+.flock-form > p {
+  margin: 6px 0 0;
+  color: var(--frock-text-muted);
+  font-size: var(--frock-text-base);
+  line-height: var(--frock-leading-normal);
+}
+
+.flock-name {
+  display: block;
+  margin-top: 18px;
+  font-size: var(--frock-text-sm);
+  font-weight: 700;
+}
+
+.flock-name input {
+  width: 100%;
+  height: 38px;
+  margin-top: 6px;
+  padding: 0 12px;
+  border: 1px solid var(--frock-border-strong);
+  border-radius: var(--frock-radius-control);
+  color: var(--frock-text);
+  background: var(--frock-surface-raised);
+  font: inherit;
+  font-size: var(--frock-text-md);
+  transition: border-color var(--frock-motion-fast);
+}
+
+.flock-name input:focus {
+  border-color: var(--frock-border-focus);
+}
+
+.flock-form fieldset {
+  margin: 16px 0 0;
+  padding: 0;
+  border: 0;
+}
+
+.flock-form legend {
+  margin-bottom: 8px;
+  padding: 0;
+  font-size: var(--frock-text-sm);
+  font-weight: 700;
+}
+
+.flock-select-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
+}
+
+.flock-select-grid label {
+  display: block;
+  padding: 8px 10px;
+  border: 1px solid var(--frock-border-strong);
+  border-radius: 12px;
+  color: var(--frock-text-muted);
+  background: var(--frock-surface-raised);
+  font-size: var(--frock-text-xs);
+  font-weight: 700;
+  letter-spacing: var(--frock-tracking-eyebrow);
+  text-transform: uppercase;
+  transition: border-color var(--frock-motion-fast);
+}
+
+.flock-select-grid label:focus-within {
+  border-color: var(--frock-border-focus);
+}
+
+.flock-select-grid select {
+  display: block;
+  width: 100%;
+  margin-top: 4px;
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: var(--frock-text);
+  font: inherit;
+  font-size: var(--frock-text-base);
+  font-weight: 600;
+  letter-spacing: normal;
+  text-transform: none;
+}
+
+.flock-note {
+  margin-top: 12px;
+  padding: 8px 10px;
+  border-radius: 9px;
+  background: var(--frock-accent-surface);
+  color: var(--frock-accent-text);
+  font-size: var(--frock-text-sm);
+  line-height: var(--frock-leading-normal);
+}
+
+.flock-actions {
+  position: absolute;
+  right: 30px;
+  bottom: 24px;
+  display: flex;
+  gap: 8px;
+}
+
+.flock-actions button {
+  height: var(--frock-control-lg);
+  padding: 0 16px;
+  border: 1px solid var(--frock-border);
+  border-radius: 999px;
+  background: var(--frock-surface);
+  font-size: var(--frock-text-base);
+  font-weight: 700;
+  cursor: pointer;
+  transition:
+    background-color var(--frock-motion-fast),
+    transform var(--frock-motion-fast);
+}
+
+.flock-actions button:hover {
+  background: var(--frock-surface-subtle);
+}
+
+.flock-actions button:active {
+  transform: scale(0.97);
+}
+
+.flock-actions .primary {
+  border-color: var(--frock-action-primary);
+  background: var(--frock-action-primary);
+  color: var(--frock-on-accent);
+}
+
+.flock-actions .primary:hover {
+  background: var(--frock-action-primary-hover);
+}
+
+.flock-actions .primary:active {
+  background: var(--frock-action-primary-pressed);
+}
+
+@media (max-width: 600px) {
+  .flock-backdrop {
+    padding: 10px;
+  }
+
+  .flock-dialog {
+    height: calc(100dvh - 20px);
+    grid-template-columns: 1fr;
+    grid-template-rows: 220px 1fr;
+    border-radius: 20px;
+    overflow: auto;
+  }
+
+  .flock-preview {
+    padding: 14px;
+  }
+
+  .flock-avatar--large {
+    width: 130px;
+    height: 130px;
+    border-radius: 30px;
+  }
+
+  .flock-preview h2 {
+    margin-top: 7px;
+    font-size: var(--frock-text-xl);
+  }
+
+  .flock-preview p {
+    display: none;
+  }
+
+  .flock-reroll {
+    margin-top: 7px;
+  }
+
+  .flock-form {
+    min-height: 470px;
+    padding: 20px;
+  }
+
+  .flock-form h1 {
+    font-size: var(--frock-text-2xl);
+  }
+
+  .flock-select-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .flock-actions {
+    position: sticky;
+    right: auto;
+    bottom: 0;
+    justify-content: flex-end;
+    margin-top: 18px;
+    padding: 10px 0;
+    background: var(--frock-surface);
+  }
+}
+
+/*
+ * Unread. A row goes bold and carries a count; the Hidden group carries one
+ * aggregate badge, because a hidden Bot has no row to put one on.
+ */
+.flock-bot-row.unread .flock-bot-copy strong {
+  color: var(--frock-text);
+  font-weight: 700;
+}
+
+.flock-bot-row.unread .flock-bot-copy small {
+  color: var(--frock-text);
+}
+
+.flock-unread-badge {
+  display: inline-flex;
+  min-width: 18px;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--frock-radius-control);
+  background: var(--frock-action-primary);
+  padding: 0 5px;
+  color: var(--frock-on-accent);
+  font-size: var(--frock-text-xs);
+  font-weight: 600;
+  line-height: 18px;
+}
+
+.flock-hidden-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}

package/src/env.d.ts

@@ -0,0 +1,9 @@
+declare module "*.vue" {
+  import type { DefineComponent } from "vue";
+  const component: DefineComponent<
+    Record<string, never>,
+    Record<string, never>,
+    unknown
+  >;
+  export default component;
+}

package/src/index.ts

@@ -0,0 +1,4 @@
+export * from "./shared.js";
+export * from "./user.js";
+export * from "./bot.js";
+export * from "./backend.js";

package/src/manifest.ts

@@ -0,0 +1,3 @@
+import manifest from "../frockbot.json" with { type: "json" };
+
+export default manifest;

package/src/package.test.ts

@@ -0,0 +1,12 @@
+import { expect, test } from "bun:test";
+// Package conventions are verified through the production manifest surface.
+import { verifyPluginPackage } from "@frockbot/plugin-testkit";
+import manifest from "../frockbot.json" with { type: "json" };
+import packageJson from "../package.json" with { type: "json" };
+
+test("Flock satisfies built-in Package conventions", () => {
+  expect(verifyPluginPackage({ packageJson, manifest })).toMatchObject({
+    name: "@frockbot/plugin-flock",
+    contributionKinds: ["backend", "runtime", "client"],
+  });
+});