@dfosco/storyboard 0.5.0-alpha.0

package/src/internals/canvas/widgets/LinkPreview.module.css

@@ -0,0 +1,585 @@
+/* ── Plain link-preview card ──────────────────────────────────────── */
+
+.container {
+  position: relative;
+}
+
+.card {
+  display: flex;
+  flex-direction: column;
+  width: 320px;
+  border-radius: 6px;
+  border: 2px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+:global([data-sb-canvas-theme^='dark']) .card {
+  border-color: var(--borderColor-default, #3d444d);
+}
+
+/* Hide own border when parent widget slot is selected (avoid double focus ring) */
+:global([data-widget-selected]) .card {
+  border-color: transparent;
+}
+
+.ogImage {
+  width: 100%;
+  max-height: 200px;
+  object-fit: cover;
+  display: block;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 12px 14px;
+}
+
+.title {
+  margin: 0;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--fgColor-default, #1f2328);
+  cursor: text;
+  word-break: break-word;
+}
+
+.titleInput {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 1.35;
+  color: var(--fgColor-default, #1f2328);
+  width: 100%;
+}
+
+.description {
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--fgColor-muted, #656d76);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.url {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-decoration: none;
+  display: block;
+}
+
+.url:hover {
+  text-decoration: underline;
+  color: var(--fgColor-accent, #0969da);
+}
+
+/* ── GitHub issue / discussion card ──────────────────────────────── */
+
+.issueCard {
+  display: flex;
+  flex-direction: column;
+  width: 580px;
+  min-height: 300px;
+  border-radius: 10px;
+  border: 1px solid var(--borderColor-default, #d1d9e0);
+  background: var(--bgColor-default, #ffffff);
+  box-sizing: border-box;
+  overflow: hidden;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.issueCardCollapsed {
+  max-height: 800px;
+}
+
+.typeBar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 10px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--fgColor-muted, #656d76);
+  background: var(--bgColor-muted, #f6f8fa);
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.issueBodyScrollable {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  overflow-x: hidden;
+  pointer-events: auto;
+}
+
+.issueHeader {
+  padding: 24px 24px 0;
+}
+
+.issueTitle {
+  margin: 0 0 4px;
+  font-size: 32px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.issueTitleLink {
+  color: var(--fgColor-default, #1f2328) !important;
+  text-decoration: none !important;
+}
+
+.issueTitleLink:hover {
+  text-decoration: underline !important;
+  color: var(--fgColor-default, #1f2328) !important;
+}
+
+.issueNumber {
+  font-size: 32px;
+  font-weight: 400;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.issueContext {
+  margin: 0;
+  font-size: 12px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.issueByline {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 12px 24px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.issueBylineLeft {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.avatar {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  flex-shrink: 0;
+}
+
+.authorLink {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  text-decoration: none !important;
+  color: var(--fgColor-default, #1f2328) !important;
+  font-size: 13px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.authorLink:hover {
+  text-decoration: underline !important;
+  color: var(--fgColor-default, #1f2328) !important;
+}
+
+.bylineText {
+  font-size: 13px;
+  color: var(--fgColor-muted, #656d76);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bylineText strong {
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+}
+
+/* ── Issue body (rendered markdown) ──────────────────────────────── */
+
+.issueBody {
+  padding: 16px 24px 24px;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.issueBody :global(*) {
+  pointer-events: none;
+}
+
+.issueBody a {
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
+.issueBody a:hover {
+  text-decoration: underline;
+}
+
+/* @mention pills — blue background + text like GitHub */
+.issueBody a[data-mention] {
+  background: var(--bgColor-accent-muted, #ddf4ff);
+  color: var(--fgColor-accent, #0969da);
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-weight: 600;
+  text-decoration: none;
+}
+
+.issueBody a[data-mention]:hover {
+  background: var(--bgColor-accent-emphasis, #0969da);
+  color: var(--fgColor-onEmphasis, #ffffff);
+  text-decoration: none;
+}
+
+.issueBody img {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+}
+
+.issueBody video {
+  max-width: 100%;
+  height: auto;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  margin: 8px 0;
+  display: block;
+  pointer-events: auto;
+  background: var(--bgColor-muted, #f6f8fa);
+}
+.issueBody h1 {
+  font-size: 20px;
+  font-weight: 700;
+  margin: 16px 0 8px;
+  padding-bottom: 4px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  line-height: 1.3;
+}
+
+.issueBody h1:first-child {
+  margin-top: 0;
+}
+
+.issueBody h2 {
+  font-size: 17px;
+  font-weight: 600;
+  margin: 14px 0 6px;
+  padding-bottom: 3px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  line-height: 1.3;
+}
+
+.issueBody h3 {
+  font-size: 15px;
+  font-weight: 600;
+  margin: 12px 0 4px;
+  line-height: 1.3;
+}
+
+.issueBody p {
+  margin: 0 0 12px;
+}
+
+.issueBody code {
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  padding: 2px 5px;
+  border-radius: 4px;
+  font-size: 12px;
+  font-weight: 400;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
+}
+
+.issueBody ul {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style-type: disc;
+}
+
+.issueBody ol {
+  margin: 0 0 12px;
+  padding-left: 24px;
+  list-style-type: decimal;
+}
+
+.issueBody li {
+  margin: 0 0 4px;
+  display: list-item;
+}
+
+.issueBody li > ul,
+.issueBody li > ol {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+
+/* Accent-color checkboxes */
+.issueBody input[type="checkbox"] {
+  margin-right: 6px;
+  pointer-events: none;
+  accent-color: var(--fgColor-accent, #0969da);
+}
+
+.issueBody li:has(input[type="checkbox"]) {
+  list-style: none;
+  margin-left: -24px;
+}
+
+/* GFM: Strikethrough */
+.issueBody del {
+  text-decoration: line-through;
+  color: var(--fgColor-muted, #656d76);
+}
+
+/* GFM: Tables */
+.issueBody table {
+  border-collapse: collapse;
+  margin: 12px 0;
+  width: 100%;
+  font-size: 13px;
+}
+
+.issueBody th,
+.issueBody td {
+  border: 1px solid var(--borderColor-default, #d0d7de);
+  padding: 6px 12px;
+  text-align: left;
+}
+
+.issueBody th {
+  background: var(--bgColor-muted, #f6f8fa);
+  font-weight: 600;
+}
+
+/* Code blocks */
+.issueBody pre {
+  padding: 12px 16px;
+  border-radius: 6px;
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  overflow-x: auto;
+  margin: 12px 0;
+  background: var(--bgColor-neutral-muted, #afb8c133);
+  line-height: 1.4;
+}
+
+.issueBody pre code {
+  background: none;
+  padding: 0;
+  font-size: 12px;
+  white-space: pre;
+  word-break: normal;
+  overflow-wrap: normal;
+  display: block;
+}
+
+/* Blockquotes */
+.issueBody blockquote {
+  border-left: 4px solid var(--borderColor-default, #d0d7de);
+  margin: 12px 0;
+  padding: 4px 16px;
+  color: var(--fgColor-muted, #656d76);
+}
+
+/* Horizontal rules */
+.issueBody hr {
+  border: none;
+  border-top: 1px solid var(--borderColor-default, #d0d7de);
+  margin: 16px 0;
+}
+
+/* Details/summary — interactive collapsible sections */
+.issueBody details {
+  border: 1px solid var(--borderColor-muted, #d8dee4);
+  border-radius: 6px;
+  margin: 12px 0;
+  padding: 0;
+}
+
+.issueBody summary {
+  display: list-item;
+  cursor: pointer;
+  pointer-events: auto;
+  font-weight: 600;
+  padding: 8px 12px;
+  list-style: disclosure-closed inside;
+  user-select: none;
+}
+
+.issueBody details[open] > summary {
+  list-style-type: disclosure-open;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+  margin-bottom: 0;
+}
+
+.issueBody details > :not(summary) {
+  padding: 0 12px;
+}
+
+.error {
+  margin: 0;
+  padding: 0 24px 12px;
+  font-size: 12px;
+  color: var(--fgColor-danger, #cf222e);
+}
+
+/* ── Expanded issue view in modal ─────────────────────────────────── */
+
+.expandedIssue {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  background: var(--bgColor-default, #ffffff);
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.expandedIssueHeader {
+  padding: 24px 40px 16px;
+  border-bottom: 1px solid var(--borderColor-muted, #d8dee4);
+}
+
+.expandedIssueTitle {
+  margin: 0 0 8px;
+  font-size: 28px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.expandedIssueTitle a {
+  color: inherit;
+  text-decoration: none;
+}
+
+.expandedIssueTitle a:hover {
+  text-decoration: underline;
+}
+
+.expandedIssueNumber {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedByline {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+}
+
+.expandedAuthor {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  text-decoration: none;
+  color: var(--fgColor-default, #1f2328);
+  font-weight: 600;
+}
+
+.expandedAuthor:hover {
+  text-decoration: underline;
+}
+
+.expandedBylineText {
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedIssueBody {
+  flex: 1;
+  overflow: auto;
+  padding: 24px 40px;
+  font-size: 15px;
+  line-height: 1.7;
+  color: var(--fgColor-default, #1f2328);
+  max-width: 800px;
+}
+
+.expandedIssueBody * { pointer-events: auto; }
+.expandedIssueBody a { color: var(--fgColor-accent, #0969da); text-decoration: none; }
+.expandedIssueBody a:hover { text-decoration: underline; }
+.expandedIssueBody a[data-mention] { background: var(--bgColor-accent-muted, #ddf4ff); color: var(--fgColor-accent, #0969da); padding: 1px 6px; border-radius: 4px; font-weight: 600; text-decoration: none; }
+.expandedIssueBody a[data-mention]:hover { background: var(--bgColor-accent-emphasis, #0969da); color: var(--fgColor-onEmphasis, #ffffff); text-decoration: none; }
+.expandedIssueBody img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.expandedIssueBody video { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0; display: block; }
+.expandedIssueBody h1 { font-size: 20px; font-weight: 700; margin: 16px 0 8px; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); padding-bottom: 4px; }
+.expandedIssueBody h2 { font-size: 17px; font-weight: 600; margin: 14px 0 6px; }
+.expandedIssueBody h3 { font-size: 15px; font-weight: 600; margin: 12px 0 4px; }
+.expandedIssueBody p { margin: 0 0 12px; }
+.expandedIssueBody code { background: var(--bgColor-neutral-muted, #afb8c133); padding: 2px 5px; border-radius: 4px; font-size: 13px; font-family: ui-monospace, SFMono-Regular, monospace; }
+.expandedIssueBody pre { padding: 12px 16px; border-radius: 6px; border: 1px solid var(--borderColor-muted, #d8dee4); overflow-x: auto; margin: 12px 0; background: var(--bgColor-neutral-muted, #afb8c133); }
+.expandedIssueBody pre code { background: none; padding: 0; }
+.expandedIssueBody ul { margin: 0 0 12px; padding-left: 24px; list-style: disc; }
+.expandedIssueBody ol { margin: 0 0 12px; padding-left: 24px; list-style: decimal; }
+.expandedIssueBody li { margin: 0 0 4px; display: list-item; }
+.expandedIssueBody blockquote { border-left: 4px solid var(--borderColor-default, #d0d7de); margin: 12px 0; padding: 4px 16px; color: var(--fgColor-muted, #656d76); }
+.expandedIssueBody details { border: 1px solid var(--borderColor-muted, #d8dee4); border-radius: 6px; margin: 12px 0; padding: 0; }
+.expandedIssueBody summary { display: list-item; cursor: pointer; font-weight: 600; padding: 8px 12px; list-style: disclosure-closed inside; user-select: none; }
+.expandedIssueBody details[open] > summary { list-style-type: disclosure-open; border-bottom: 1px solid var(--borderColor-muted, #d8dee4); margin-bottom: 0; }
+.expandedIssueBody details > :not(summary) { padding: 0 12px; }
+
+/* ── Expanded plain link view ─────────────────────────────────────── */
+
+.expandedLink {
+  padding: 32px 40px;
+  font-family: var(--tc-font-stack, system-ui, -apple-system, sans-serif);
+}
+
+.expandedOgImage {
+  max-width: 100%;
+  max-height: 400px;
+  object-fit: cover;
+  border-radius: 8px;
+  margin-bottom: 16px;
+  display: block;
+}
+
+.expandedTitle {
+  margin: 0 0 8px;
+  font-size: 24px;
+  font-weight: 600;
+  color: var(--fgColor-default, #1f2328);
+}
+
+.expandedDescription {
+  margin: 0 0 12px;
+  font-size: 15px;
+  line-height: 1.5;
+  color: var(--fgColor-muted, #656d76);
+}
+
+.expandedUrl {
+  font-size: 14px;
+  color: var(--fgColor-accent, #0969da);
+  text-decoration: none;
+}
+
+.expandedUrl:hover {
+  text-decoration: underline;
+}